@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 }}</p>
                </div>
                <div class="col-sm-6 pe-0">
                    <ol class="bc">
                        <li><a href="/project/dashboard" class="bc-home"><i class="fas fa-home"></i></a></li>
                        <li class="bc-sep">›</li>
                        <li><a href="/admin/reports" class="bc-link">Reports</a></li>
                        <li class="bc-sep">›</li>
                        <li class="bc-active">My Performance</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    {{-- ── No linked user warning ── --}}
    @if(!$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;">
            @foreach([
                'today'        => 'Today',
                'this_week'    => 'This Week',
                'this_month'   => 'This Month',
                'last_month'   => 'Last Month',
                'this_quarter' => 'This Quarter',
                'this_year'    => 'This Year',
            ] 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,                              '#3b82f6', 'fa-handshake'     ],
                ['Confirmed',           $confirmedBookings,                          '#22c55e', 'fa-check-circle'  ],
                ['Pending',             $pendingBookings,                            '#f59e0b', 'fa-clock'         ],
                ['Cancelled',           $cancelledBookings,                          '#ef4444', 'fa-times-circle'  ],
                ['Total Revenue',       $currency.$totalRevenue,  '#22c55e', 'fa-coins'         ],
                ['Period Revenue',      $currency.$periodRevenue, '#10b981', 'fa-chart-line'    ],
                ['Commission Earned',   $currency.$paidComm, 0,      '#22c55e', 'fa-check-circle'  ],
                ['Commission Pending',  $currency.$pendingComm, 0,   '#f59e0b', 'fa-clock'         ],
                ['Comm. Approved',      $currency.$approvedComm, 0,  '#3b82f6', 'fa-thumbs-up'     ],
                ['Comm. Rejected',      $currency.$rejectedComm, 0,  '#ef4444', 'fa-ban'           ],
                ['Comm. (Cancelled)',   $currency.$cancelledComm, 0, '#94a3b8', 'fa-times'         ],
                ['Avg Deal Size',       $currency.$avgDealSize, 0,   '#8b5cf6', 'fa-chart-bar'     ],
            ] 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:20px;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-4 mb-4">
                <div class="card shadow-sm h-100" style="border-top:3px solid #f59e0b;">
                    <div class="card-header">
                        <h6 class="mb-0"><i class="fas fa-wallet mr-2" style="color:#f59e0b;"></i>Commission Breakdown</h6>
                    </div>
                    <div class="card-body">
                        <div class="text-center mb-4">
                            <canvas id="commChart" height="180"></canvas>
                        </div>
                        @foreach([
                            ['Paid',               $paidComm,                        '#22c55e'],
                            ['Approved',           $approvedComm,                    '#3b82f6'],
                            ['Pending Approval',   $pendingComm,                     '#f59e0b'],
                            ['Rejected',           $rejectedComm,                    '#ef4444'],
                            ['Lost (Cancelled)',   $cancelledComm,                   '#94a3b8'],
                        ] as [$label, $amt, $color])
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <div class="d-flex align-items-center gap-2">
                                <div style="width:10px;height:10px;border-radius:50%;background:{{ $color }};flex-shrink:0;"></div>
                                <span style="font-size:13px;">{{ $label }}</span>
                            </div>
                            <span style="font-weight:700;color:{{ $color }};">
                                {{ $currency }}{{ $amt }}
                            </span>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>

            {{-- ── Monthly Trend ── --}}
            <div class="col-lg-8 mb-4">
                <div class="card shadow-sm h-100" 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>
    </div>

    {{-- ── Recent Bookings ── --}}
    <div class="container-fluid 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-list mr-2" style="color:#22c55e;"></i>Recent Bookings</h6>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0" style="font-size:13px;">
                        <thead class="thead-light">
                            <tr>
                                <th>Client</th>
                                <th>Unit</th>
                                <th>Booking Status</th>
                                <th>Total Amount</th>
                                <th>Commission</th>
                                <th>Comm. Status</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentBookings as $b)
                            @php
                                // Booking status styling
                                $bsColors = [
                                    'confirmed' => ['#22c55e', 'fa-check-circle'],
                                    'pending'   => ['#f59e0b', 'fa-clock'],
                                    'cancelled' => ['#ef4444', 'fa-times-circle'],
                                ];
                                [$bsColor, $bsIcon] = $bsColors[$b->booking_status] ?? ['#94a3b8', 'fa-circle'];

                                // Commission status styling — 4 states
                                $cs = $b->commission_status ?? 'pending';
                                $csColors = [
                                    'paid'     => '#22c55e',
                                    'approved' => '#3b82f6',
                                    'pending'  => '#f59e0b',
                                    'rejected' => '#ef4444',
                                ];
                                $csColor = $csColors[$cs] ?? '#94a3b8';

                                $isCancelled = $b->booking_status === 'cancelled';
                                $isRejected  = $cs === 'rejected';
                            @endphp
                            <tr style="{{ $isCancelled ? 'opacity:0.65;background:#fff5f5;' : '' }}">
                                <td>
                                    <div style="font-weight:700;">{{ $b->client_name ?? $b->name ?? '—' }}</div>
                                    <div style="font-size:11px;color:#94a3b8;">{{ $b->client_phone ?? $b->phone ?? '' }}</div>
                                </td>
                                <td><strong>Unit {{ $b->plot_number ?? '—' }}</strong></td>
                                <td>
                                    <span style="background:{{ $bsColor }}22;color:{{ $bsColor }};
                                                 padding:3px 10px;border-radius:10px;font-size:11px;font-weight:600;white-space:nowrap">
                                        <i class="fas {{ $bsIcon }} mr-1"></i>{{ ucfirst($b->booking_status) }}
                                    </span>
                                </td>
                                <td style="font-weight:700;color:{{ $isCancelled ? '#94a3b8' : '#22c55e' }};
                                           {{ $isCancelled ? 'text-decoration:line-through;' : '' }}">
                                    {{ $currency }}{{ $b->total_amount ?? 0 }}
                                    @if($isCancelled)
                                        <div style="font-size:10px;color:#ef4444;text-decoration:none;">Cancelled</div>
                                    @endif
                                </td>
                                <td style="font-weight:700;color:{{ $isCancelled || $isRejected ? '#94a3b8' : '#f59e0b' }};
                                           {{ $isCancelled || $isRejected ? 'text-decoration:line-through;' : '' }}">
                                    @if($b->commission_amount)
                                        {{ $currency }}{{ $b->commission_amount }}
                                        @if($b->commission_rate)
                                            <small style="color:#94a3b8;text-decoration:none;">({{ $b->commission_rate }}%)</small>
                                        @endif
                                        @if($isCancelled)
                                            <div style="font-size:10px;color:#ef4444;font-weight:600;text-decoration:none;">Lost</div>
                                        @elseif($isRejected)
                                            <div style="font-size:10px;color:#ef4444;font-weight:600;text-decoration:none;">Rejected</div>
                                        @endif
                                    @else
                                        <span style="color:#94a3b8;">—</span>
                                    @endif
                                </td>
                                <td>
                                    <span style="background:{{ $csColor }}22;color:{{ $csColor }};
                                                 padding:2px 10px;border-radius:10px;font-size:11px;font-weight:600;">
                                        {{ ucfirst($cs) }}
                                    </span>
                                    @if($isCancelled)
                                        <div style="font-size:10px;color:#ef4444;margin-top:2px;">Booking cancelled</div>
                                    @endif
                                </td>
                                <td style="font-size:12px;color:#94a3b8;">
                                    {{ \Carbon\Carbon::parse($b->created_at)->format('d M Y') }}
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="7" class="text-center py-4 text-muted">No bookings yet.</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </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() {
    // Commission donut
    var commCtx = document.getElementById('commChart').getContext('2d');
    new Chart(commCtx, {
        type: 'doughnut',
        data: {
            labels: ['Paid', 'Approved', 'Pending', 'Rejected', 'Lost (Cancelled)'],
            datasets: [{
                data: [{{ $paidComm }}, {{ $approvedComm }}, {{ $pendingComm }}, {{ $rejectedComm }}, {{ $cancelledComm }}],
                backgroundColor: ['#22c55e', '#3b82f6', '#f59e0b', '#ef4444', '#94a3b8'],
                borderWidth: 0,
            }]
        },
        options: {
            cutout: '70%',
            plugins: { legend: { display: false } }
        }
    });

    // Monthly trend
    var trend   = @json($monthlyTrend);
    var tCtx    = document.getElementById('trendChart').getContext('2d');
    new Chart(tCtx, {
        type: 'bar',
        data: {
            labels: trend.map(function(t){ return t.label; }),
            datasets: [
                {
                    label: 'Bookings',
                    data: trend.map(function(t){ return t.bookings; }),
                    backgroundColor: 'rgba(139,92,246,0.7)',
                    borderRadius: 6,
                    yAxisID: 'y',
                },
                {
                    label: 'Commission ({{ $currency }})',
                    data: trend.map(function(t){ return t.commission; }),
                    type: 'line',
                    borderColor: '#f59e0b',
                    backgroundColor: 'rgba(245,158,11,0.1)',
                    tension: 0.4,
                    fill: true,
                    yAxisID: 'y1',
                }
            ]
        },
        options: {
            responsive: true,
            plugins: { legend: { position: 'top' } },
            scales: {
                y:  { beginAtZero: true, position: 'left',  ticks: { stepSize: 1 } },
                y1: { beginAtZero: true, position: 'right', grid: { drawOnChartArea: false } }
            }
        }
    });
})();
</script>

@include('Partials.footer')