@include('Partials.sidebar')
<section class="main_content dashboard_part large_header_bg">
@include('Partials.header')
<div class="main_content_iner default_main_contaner_iner">
<div class="page-body">

    {{-- ── Page Title ── --}}
    <div class="container-fluid">
        <div class="page-title">
            <div class="row align-items-center">
                <div class="col-sm-6 ps-0">
                    <h3><i class="fas fa-handshake mr-2" style="color:#c9a96e"></i>My Performance</h3>
                    <p class="text-muted mb-0" style="font-size:13px">
                        Broker dashboard — {{ $admin->name ?? 'User' }}
                        @if(isset($currentTenant))
                            <span class="ml-2">• {{ $currentTenant->name ?? 'Tenant' }}</span>
                        @endif
                    </p>
                </div>
                <div class="col-sm-6 pe-0">
                    <ol class="bc">
                        <li><a href="/{{ $tenantSlug }}/admin/broker/dashboard" class="bc-home"><i class="fas fa-home"></i></a></li>
                        <li class="bc-sep">›</li>
                        <li class="bc-active">My Performance</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    {{-- ── No linked user warning (broker-only) ── --}}
    @if(!isset($frontendUserId) || !$frontendUserId)
    <div class="container-fluid mb-3">
        <div class="alert alert-warning d-flex align-items-center gap-2">
            <i class="fas fa-exclamation-triangle"></i>
            <span>Your broker account is not linked to a frontend user account. Bookings you close on the frontend will not appear here until your admin email matches a registered user email.</span>
        </div>
    </div>
    @endif

    {{-- ── Period Filter ── --}}
    <div class="container-fluid mb-3">
        <form method="GET" class="d-flex align-items-center flex-wrap" style="gap:8px;">
            @php
                $periods = [
                    'today' => 'Today',
                    'this_week' => 'This Week',
                    'this_month' => 'This Month',
                    'last_month' => 'Last Month',
                    'this_quarter' => 'This Quarter',
                    'this_year' => 'This Year',
                ];
            @endphp
            @foreach($periods as $val => $label)
            <a href="?period={{ $val }}"
               class="btn btn-sm {{ $period === $val ? 'btn-warning' : 'btn-outline-secondary' }}"
               style="{{ $period === $val ? 'color:#fff;font-weight:700;' : '' }}">
                {{ $label }}
            </a>
            @endforeach
            <span class="text-muted ml-2" style="font-size:12px;">
                {{ \Carbon\Carbon::parse($dateFrom)->format('d M') }} – {{ \Carbon\Carbon::parse($dateTo)->format('d M Y') }}
            </span>
        </form>
    </div>

    {{-- ── KPI Cards ── --}}
    <div class="container-fluid mb-4">
        <div class="row">
            @foreach([
                ['Total Bookings',      $totalBookings ?? 0,      '#3b82f6', 'fa-bookmark'],
                ['Confirmed',           $confirmedBookings ?? 0,  '#22c55e', 'fa-check-circle'],
                ['Pending',             $pendingBookings ?? 0,    '#f59e0b', 'fa-hourglass-half'],
                ['Cancelled',           $cancelledBookings ?? 0,  '#ef4444', 'fa-times-circle'],
                ['Conversion Rate',     ($conversionRate ?? 0).'%', '#8b5cf6', 'fa-percentage'],
                ['Revenue Generated',   $currency.number_format($totalRevenue, 2 ?? 0), '#10b981', 'fa-coins'],
                ['Avg Deal Size',       $currency.number_format($avgDealSize, 2 ?? 0), '#6366f1', 'fa-chart-bar'],
                ['Total Commission',    $currency.number_format($totalCommission, 2 ?? 0), '#c9a96e', 'fa-hand-holding-usd'],
            ] as [$label, $val, $color, $icon])
            <div class="col-xl-3 col-md-4 col-sm-6 mb-3">
                <div class="card shadow-sm h-100" style="border-top:3px solid {{ $color }};border-radius:10px;">
                    <div class="card-body py-3 px-3">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <div style="font-size:22px;font-weight:800;color:{{ $color }}">{{ $val }}</div>
                                <div style="font-size:11px;color:#94a3b8;margin-top:2px;">
                                    <i class="fas {{ $icon }} mr-1"></i>{{ $label }}
                                </div>
                            </div>
                            <div style="width:44px;height:44px;border-radius:50%;
                                        background:{{ $color }}18;
                                        display:flex;align-items:center;justify-content:center;">
                                <i class="fas {{ $icon }}" style="color:{{ $color }};font-size:18px;"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">

            {{-- ── Commission Breakdown ── --}}
            <div class="col-lg-5 mb-4">
                <div class="card shadow-sm h-100" style="border-top:3px solid #c9a96e;">
                    <div class="card-header">
                        <h6 class="mb-0"><i class="fas fa-coins mr-2" style="color:#c9a96e;"></i>Commission Breakdown</h6>
                    </div>
                    <div class="card-body">
                        @php
                            $commStages = [
                                'pending'   => ['Pending', '#f59e0b'],
                                'approved'  => ['Approved', '#3b82f6'],
                                'paid'      => ['Paid', '#22c55e'],
                                'rejected'  => ['Rejected', '#ef4444'],
                                'cancelled' => ['Cancelled', '#94a3b8'],
                            ];
                            $commMax = max(array_values($commissionBreakdown ?? []) ?: [1]);
                        @endphp
                        @foreach($commStages as $key => [$label, $color])
                        @php
                            $amt = $commissionBreakdown[$key] ?? 0;
                            $pct = $commMax > 0 ? round(($amt / $commMax) * 100) : 0;
                        @endphp
                        <div class="mb-3">
                            <div class="d-flex justify-content-between mb-1">
                                <span style="font-size:12px;font-weight:600;">{{ $label }}</span>
                                <span style="font-size:12px;color:#94a3b8;">{{ $currency }}{{ number_format($amt, 2) }}</span>
                            </div>
                            <div style="background:#f1f5f9;border-radius:20px;height:8px;overflow:hidden;">
                                <div style="height:100%;width:{{ $pct }}%;background:{{ $color }};border-radius:20px;transition:width 0.6s;"></div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>

            {{-- ── Period Summary ── --}}
            <div class="col-lg-7 mb-4">
                <div class="card shadow-sm h-100" style="border-top:3px solid #3b82f6;">
                    <div class="card-header">
                        <h6 class="mb-0"><i class="fas fa-calendar-check mr-2" style="color:#3b82f6;"></i>This Period</h6>
                    </div>
                    <div class="card-body">
                        <div class="row text-center">
                            <div class="col-4">
                                <div style="font-size:28px;font-weight:800;color:#3b82f6;">{{ $periodBookingCnt ?? 0 }}</div>
                                <div style="font-size:12px;color:#94a3b8;">Bookings</div>
                            </div>
                            <div class="col-4">
                                <div style="font-size:28px;font-weight:800;color:#22c55e;">{{ $currency }}{{ number_format($periodRevenue, 2 ?? 0) }}</div>
                                <div style="font-size:12px;color:#94a3b8;">Revenue</div>
                            </div>
                            <div class="col-4">
                                <div style="font-size:28px;font-weight:800;color:#c9a96e;">{{ $currency }}{{ number_format($periodCommission, 2 ?? 0) }}</div>
                                <div style="font-size:12px;color:#94a3b8;">Commission</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    {{-- ── Monthly Trend + Recent Bookings ── --}}
    <div class="container-fluid">
        <div class="row">

            <div class="col-lg-7 mb-4">
                <div class="card shadow-sm" style="border-top:3px solid #8b5cf6;">
                    <div class="card-header">
                        <h6 class="mb-0"><i class="fas fa-chart-area mr-2" style="color:#8b5cf6;"></i>6-Month Trend</h6>
                    </div>
                    <div class="card-body">
                        <canvas id="trendChart" height="120"></canvas>
                    </div>
                </div>
            </div>

            <div class="col-lg-5 mb-4">
                <div class="card shadow-sm" style="border-top:3px solid #22c55e;">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h6 class="mb-0"><i class="fas fa-bookmark mr-2" style="color:#22c55e;"></i>Recent Bookings</h6>
                        <a href="{{ url('/'.$tenantSlug.'/admin/broker/bookings') }}"
                           class="btn btn-sm btn-outline-success" style="font-size:11px;">All Bookings</a>
                    </div>
                    <div class="card-body p-0">
                        @forelse($recentBookings ?? [] as $booking)
                        @php
                            $bsColors = ['confirmed'=>'#22c55e','pending'=>'#f59e0b','cancelled'=>'#ef4444'];
                            $bsColor = $bsColors[$booking->booking_status] ?? '#94a3b8';
                        @endphp
                        <div class="d-flex align-items-center gap-2 px-3 py-2" style="border-bottom:1px solid #f8fafc;">
                            <div style="width:32px;height:32px;border-radius:50%;background:{{ $bsColor }}22;
                                        display:flex;align-items:center;justify-content:center;flex-shrink:0;font-weight:700;font-size:12px;color:{{ $bsColor }};">
                                {{ strtoupper(substr($booking->client_name ?? 'U', 0, 1)) }}
                            </div>
                            <div style="flex:1;min-width:0;">
                                <div style="font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                                    Unit {{ $booking->plot_number }}
                                </div>
                                <div style="font-size:11px;color:#94a3b8;">{{ $booking->client_name ?? '—' }}</div>
                            </div>
                            <span style="background:{{ $bsColor }}22;color:{{ $bsColor }};padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;flex-shrink:0;">
                                {{ ucfirst($booking->booking_status) }}
                            </span>
                        </div>
                        @empty
                        <div class="text-center py-4 text-muted" style="font-size:13px;">No bookings yet.</div>
                        @endforelse
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
</div>
</section>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
(function() {
    var trend = @json($monthlyTrend ?? []);
    var ctx   = document.getElementById('trendChart');
    if (ctx && trend.length) {
        new Chart(ctx.getContext('2d'), {
            type: 'bar',
            data: {
                labels: trend.map(function(t){ return t.label; }),
                datasets: [
                    {
                        label: 'Bookings',
                        data: trend.map(function(t){ return t.bookings ?? 0; }),
                        backgroundColor: 'rgba(59,130,246,0.7)',
                        borderRadius: 6,
                    },
                    {
                        label: 'Confirmed',
                        data: trend.map(function(t){ return t.confirmed ?? 0; }),
                        backgroundColor: 'rgba(34,197,94,0.7)',
                        borderRadius: 6,
                    }
                ]
            },
            options: {
                responsive: true,
                plugins: { legend: { position: 'top' } },
                scales: {
                    y: { beginAtZero: true, ticks: { stepSize: 1 } }
                }
            }
        });
    }
})();
</script>

@include('Partials.footer')