@extends('backend.manager.layouts.manager-app')

@section('title', $store->name . ' Dashboard')

@push('style')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,700&display=swap" rel="stylesheet">
    <style>
        :root {
            --dash-ink: #0b1220;
            --dash-muted: #5b6b83;
            --dash-ice: #eef3ff;
            --dash-sky: #d3e6ff;
            --dash-lime: #d7f2d3;
            --dash-rose: #ffd8d8;
            --dash-gold: #ffe8b5;
        }

        .dash-font-title {
            font-family: 'Newsreader', serif;
            letter-spacing: -0.02em;
            color: var(--dash-ink);
        }
        .stat-value {
            color: var(--dash-ink);
        }
        .dash-font-body {
            font-family: 'Space Grotesk', sans-serif;
        }

        .dashboard-hero {
            background: radial-gradient(circle at top left, #f4f7ff, #ffffff 55%, #f7fbff 100%);
            border: 1px solid #e6edf7;
            box-shadow: 0 22px 50px rgba(12, 26, 54, 0.08);
        }

        .dash-kicker {
            text-transform: uppercase;
            letter-spacing: 0.18em;
            font-size: 0.65rem;
            color: var(--dash-muted);
            margin-bottom: 0.4rem;
        }

        .qr-thumb-wrap {
            display: inline-block;
            position: relative;
            cursor: pointer;
            border-radius: 10px;
            overflow: hidden;
            border: 2px solid #e2e8f4;
            transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
            width: 72px;
            height: 72px;
        }

        .qr-thumb-wrap:hover {
            border-color: #335bff;
            box-shadow: 0 6px 18px rgba(51, 91, 255, 0.18);
            transform: translateY(-2px);
        }

        .qr-thumb-wrap img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }

        .qr-thumb-overlay {
            position: absolute;
            inset: 0;
            background: rgba(51, 91, 255, 0.75);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .qr-thumb-wrap:hover .qr-thumb-overlay {
            opacity: 1;
        }

        .qr-thumb-overlay svg {
            color: #fff;
            width: 22px;
            height: 22px;
        }

        .qr-no-code {
            width: 72px;
            height: 72px;
            border-radius: 10px;
            border: 2px dashed #d0d8e8;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.6rem;
            color: var(--dash-muted);
            text-align: center;
            line-height: 1.3;
            padding: 4px;
        }

        .dash-chip {
            background: linear-gradient(135deg, #0c1f3f, #304b92);
            color: #fff;
            padding: 1rem 1.2rem;
            border-radius: 1rem;
            min-width: 170px;
            text-align: center;
            box-shadow: 0 16px 30px rgba(16, 32, 72, 0.22);
        }

        .dash-chip-label {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            opacity: 0.8;
        }

        .dash-chip-value {
            font-size: 1.8rem;
            font-weight: 700;
            margin-top: 0.2rem;
        }

        .dash-stat {
            border: 1px solid #ecf0f6;
            border-radius: 1rem;
            padding: 1.1rem 1.2rem;
            background: #fff;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .dash-stat:hover {
            transform: translateY(-4px);
            box-shadow: 0 14px 30px rgba(20, 28, 55, 0.08);
        }

        .dash-stat .stat-label {
            color: var(--dash-muted);
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.16em;
        }

        .dash-stat .stat-value {
            font-size: 1.6rem;
            font-weight: 700;
            margin-top: 0.4rem;
        }

        .stat-tone-primary {
            background: linear-gradient(135deg, #eef4ff 0%, #ffffff 60%);
        }

        .stat-tone-rose {
            background: linear-gradient(135deg, var(--dash-rose), #fff6f6 60%);
        }

        .stat-tone-lime {
            background: linear-gradient(135deg, var(--dash-lime), #f5fff4 60%);
        }

        .stat-tone-gold {
            background: linear-gradient(135deg, var(--dash-gold), #fffdf6 60%);
        }

        .stat-tone-sky {
            background: linear-gradient(135deg, var(--dash-sky), #f7fbff 60%);
        }

        .dash-table thead th {
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: var(--dash-muted);
            border-bottom: 1px solid #e9eef6;
        }

        .dash-table tbody tr:hover {
            background-color: #f7faff;
        }

        .dash-chart {
            min-height: 320px;
        }

        .dash-legend {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.75rem;
            color: var(--dash-muted);
        }

        .legend-dot {
            width: 9px;
            height: 9px;
            border-radius: 999px;
            background: #335bff;
        }

        .card-quiet {
            border: 1px solid #e8edf6;
            box-shadow: 0 12px 22px rgba(20, 28, 55, 0.05);
        }
    </style>
@endpush

@section('content')
    {{-- PAGE-HEADER --}}
    <div class="page-header">
        <div>
            <h1 class="page-title dash-font-title">{{ $store->name }}</h1>
        </div>
        <div class="ms-auto pageheader-btn">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
            </ol>
        </div>
    </div>
    {{-- PAGE-HEADER --}}

    @if(!$store->stripe_account_id || $store->stripe_account_status !== 'active')
        <div class="d-flex align-items-center gap-3 rounded-3 shadow-sm mb-3 px-4 py-3"
             style="background: #f97316; color: #fff;" role="alert">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" class="flex-shrink-0" viewBox="0 0 16 16">
                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
            </svg>
            <div class="flex-grow-1">
                <strong class="fw-semibold">Stripe Connect not set up.</strong>
                Your store needs a connected Stripe account to receive payouts.
                <a href="{{ route('store-manager.stripe-connect.index') }}" class="text-white fw-bold ms-1" style="text-decoration: underline;">Set up now</a>
            </div>
        </div>
    @endif

    <div class="row">
        <div class="col-12">
            <div class="card dashboard-hero dash-font-body">
                <div class="card-body">
                    <div class="flex-wrap gap-3 d-flex align-items-center justify-content-between">
                        <div class="gap-3 d-flex align-items-center">
                            {{-- QR Code thumbnail --}}
                            @if($qr)
                                <a href="{{ route('store-manager.download.qr') }}"
                                   title="Download store QR PDF"
                                   class="flex-shrink-0 qr-thumb-wrap">
                                    <img src="data:image/png;base64,{{ $qr->base64 }}"
                                         alt="Store QR Code">
                                    <span class="qr-thumb-overlay">
                                        {{-- Download icon --}}
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v12m0 0l-4-4m4 4l4-4M4 17h16v2H4v-2z"/>
                                        </svg>
                                    </span>
                                </a>
                            @else
                                <div class="flex-shrink-0 qr-no-code">No QR yet</div>
                            @endif

                            <div>
                                {{-- <div class="dash-kicker">{{ $store->store_code }}</div> --}}
                                <h2 class="mb-2 dash-font-title">{{ $store->name }}</h2>
                                <p class="mb-0 text-muted">
                                    {{ $store->full_address ?: ($store->city ? $store->city . ', ' . $store->state : '') }}
                                </p>
                            </div>
                        </div>
                        <div class="dash-chip">
                            <div class="dash-chip-label">{{ ucfirst($store->status) }}</div>
                            <div class="dash-chip-value">{{ '$'.number_format($total_commissions, 0) }}</div>
                            <div class="opacity-75 small">total commission earned</div>
                        </div>
                    </div>

                    <div class="mt-3 row g-3">
                        <div class="col-sm-6 col-lg-4">
                            <div class="dash-stat stat-tone-primary">
                                <div class="stat-label">Completed Commissions</div>
                                <div class="stat-value">{{ '$'.number_format($completed_commissions, 0) }}</div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-4">
                            <div class="dash-stat stat-tone-gold">
                                <div class="stat-label">Pending Commissions</div>
                                <div class="stat-value">{{ '$'.number_format($pending_commissions, 0) }}</div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-4">
                            <div class="dash-stat stat-tone-lime">
                                <div class="stat-label">Total Transactions</div>
                                <div class="stat-value">{{ $total_transactions }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="mb-4 col-12">
            <div class="card card-quiet dash-font-body h-100">
                <div class="bg-transparent border-0 card-header">
                    <div class="gap-2 d-flex w-100 flex-column flex-md-row align-items-start justify-content-between">
                        <div class="w-100">
                            <h4 class="mb-1 dash-font-title">Recent Commissions</h4>
                            <p class="mb-0 text-muted">Latest ledger entries for {{ $store->name }}.</p>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table mb-0 align-middle table-hover dash-table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Property</th>
                                <th>Total</th>
                                <th>Store Fee</th>
                                <th>Platform Fee</th>
                                <th>Status</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($recent_ledgers as $ledger)
                                <tr>
                                    <td>{{ $ledger->id }}</td>
                                    <td>
                                        <div class="fw-semibold">{{ \Illuminate\Support\Str::limit($ledger->transaction?->raffle?->property?->title ?? 'N/A', 28) }}</div>
                                    </td>
                                    <td>{{ number_format($ledger->total_amount, 0) }}</td>
                                    <td class="text-success fw-semibold">{{ number_format($ledger->store_fee, 0) }}</td>
                                    <td>{{ number_format($ledger->platform_fee, 0) }}</td>
                                    <td>
                                        @php
                                            $statusClass = match($ledger->status) {
                                                'completed' => 'success',
                                                'pending' => 'warning',
                                                default => 'secondary',
                                            };
                                        @endphp
                                        <span class="badge bg-{{ $statusClass }}">{{ ucfirst($ledger->status) }}</span>
                                    </td>
                                    <td>{{ $ledger->created_at->format('M d, Y') }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="py-4 text-center text-muted">No commission entries yet.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="mb-4 col-12">
            <div class="card card-quiet dash-font-body h-100">
                <div class="bg-transparent border-0 card-header">
                    <div class="gap-2 d-flex w-100 flex-column flex-md-row align-items-start justify-content-between">
                        <div>
                            <h4 class="mb-1 dash-font-title">Monthly Commission Trend</h4>
                            <p class="mb-0 text-muted">Completed commissions in {{ $current_year }}.</p>
                        </div>
                        <span class="dash-legend"><span class="legend-dot"></span> Store Fee</span>
                    </div>
                </div>
                <div class="card-body">
                    <div id="commission-chart" class="dash-chart"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        (function() {
            function initCharts() {
                if (typeof ApexCharts === 'undefined') {
                    console.warn('ApexCharts not found, retrying...');
                    setTimeout(initCharts, 100);
                    return;
                }

                const chartEl = document.querySelector('#commission-chart');
                if (chartEl) {
                    const options = {
                        chart: {
                            type: 'bar',
                            height: 320,
                            toolbar: { show: false },
                            fontFamily: 'Space Grotesk, sans-serif'
                        },
                        dataLabels: { enabled: false },
                        series: [{
                            name: 'Commission',
                            data: @json($commissions_by_month ?? [])
                        }],
                        colors: ['#1f8a70'],
                        plotOptions: {
                            bar: {
                                borderRadius: 6,
                                columnWidth: '48%'
                            }
                        },
                        grid: {
                            strokeDashArray: 4,
                            borderColor: '#e6edf7'
                        },
                        xaxis: {
                            categories: @json($month_labels ?? []),
                            axisBorder: { show: false },
                            axisTicks: { show: false }
                        },
                        yaxis: {
                            labels: {
                                formatter: function(value) {
                                    return Math.round(value).toLocaleString();
                                }
                            }
                        },
                        tooltip: {
                            y: {
                                formatter: function(value) {
                                    return value.toLocaleString() + ' commission';
                                }
                            }
                        }
                    };
                    new ApexCharts(chartEl, options).render();
                }
            }

            if (document.readyState === 'complete') {
                initCharts();
            } else {
                window.addEventListener('load', initCharts);
            }
        })();
    </script>
@endpush