@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-home mr-2" style="color:#c9a96e"></i>My Dashboard</h3>
                            <p class="text-muted mb-0" style="font-size:13px">Welcome back, <strong>{{ $broker->name }}</strong></p>
                        </div>
                        <div class="col-sm-6 pe-0">
                            <ol class="bc">
                                <li><a href="{{ route('broker.dashboard') }}" class="bc-home"><i class="fas fa-home"></i></a></li>
                                <li class="bc-sep">›</li>
                                <li class="bc-active">Dashboard</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ── No linked account notice ── --}}
            @if(!empty($no_frontend_account))
            <div class="container-fluid mb-3">
                <div class="alert alert-warning d-flex align-items-center" style="gap:12px;">
                    <i class="fas fa-exclamation-triangle fa-2x" style="color:#c9a96e;flex-shrink:0;"></i>
                    <div>
                        <strong>No bookings linked yet.</strong><br>
                        <span style="font-size:13px;">
                            Register on the frontend using the same email
                            (<strong>{{ $broker->email }}</strong>) and select the <strong>Broker</strong> role.
                            Bookings you make will then appear here automatically.
                        </span>
                    </div>
                </div>
            </div>
            @endif

            {{-- ── Broker Info Bar ── --}}
            <div class="container-fluid mb-4">
                <div class="card shadow-sm" style="background:linear-gradient(135deg,#1a2535,#2a3a50);border:none;">
                    <div class="card-body py-3 d-flex align-items-center flex-wrap" style="gap:28px;">
                        {{-- Avatar --}}
                        <div style="width:52px;height:52px;border-radius:50%;background:rgba(201,169,110,0.2);
                                    border:2px solid #c9a96e;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                            <span style="font-size:20px;font-weight:800;color:#c9a96e;">
                                {{ strtoupper(substr($broker->name,0,1)) }}
                            </span>
                        </div>
                        <div>
                            <div style="font-size:11px;opacity:0.5;text-transform:uppercase;color:white;">Name</div>
                            <div style="font-weight:700;color:white;">{{ $broker->name }}</div>
                        </div>
                        @if($broker->broker_company ?? null)
                        <div>
                            <div style="font-size:11px;opacity:0.5;text-transform:uppercase;color:white;">Company</div>
                            <div style="font-weight:700;color:white;">{{ $broker->broker_company }}</div>
                        </div>
                        @endif
                        <div>
                            <div style="font-size:11px;opacity:0.5;text-transform:uppercase;color:white;">Commission Rate</div>
                            <div style="font-weight:800;color:#c9a96e;font-size:20px;">{{ $broker->commission_rate ?? '2.00' }}%</div>
                        </div>
                        <div>
                            <div style="font-size:11px;opacity:0.5;text-transform:uppercase;color:white;">Phone</div>
                            <div style="color:white;">{{ $broker->phone ?? '—' }}</div>
                        </div>
                        <div>
                            <div style="font-size:11px;opacity:0.5;text-transform:uppercase;color:white;">Email</div>
                            <div style="color:white;">{{ $broker->email }}</div>
                        </div>
                        <div class="ml-auto">
                            <a href="{{ route('broker.bookings') }}" class="btn btn-sm" style="background:#c9a96e;color:white;font-weight:600;">
                                <i class="fas fa-list mr-1"></i>View All Bookings
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ── KPI Cards ── --}}
            <div class="container-fluid mb-4">
                <div class="row">
                    @foreach([
                        ['Total Bookings',     $stats['total_bookings'],                                      '#6c757d', 'fa-bookmark',          $stats['confirmed'].' confirmed · '.$stats['pending'].' pending'],
                        ['Commission Pending',  $currency.$stats['commission_pending'],             '#f59e0b', 'fa-clock',             'Awaiting admin approval'],
                        ['Commission Approved', $currency.$stats['commission_approved'],            '#3b82f6', 'fa-check-circle',      'Approved, awaiting payment'],
                        ['Commission Paid',    $currency.$stats['commission_paid'],                '#22c55e', 'fa-coins',             'Total received to date'],
                    ] as [$label, $val, $color, $icon, $sub])
                    <div class="col-xl-3 col-md-6 mb-3">
                        <div class="card shadow-sm h-100" style="border-top:3px solid {{ $color }};border-radius:10px;">
                            <div class="card-body">
                                <div class="d-flex align-items-center justify-content-between mb-2">
                                    <div style="font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;">
                                        <i class="fas {{ $icon }} mr-1"></i>{{ $label }}
                                    </div>
                                    <div style="width:36px;height:36px;border-radius:50%;background:{{ $color }}18;
                                                display:flex;align-items:center;justify-content:center;">
                                        <i class="fas {{ $icon }}" style="color:{{ $color }};font-size:14px;"></i>
                                    </div>
                                </div>
                                <div style="font-size:26px;font-weight:800;color:{{ $color }};">{{ $val }}</div>
                                <div style="font-size:11px;color:#94a3b8;margin-top:4px;">{{ $sub }}</div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- ── Charts Row ── --}}
            <div class="container-fluid mb-4">
                <div class="row">

                    {{-- Monthly Bookings Chart ── --}}
                    <div class="col-lg-8 mb-3">
                        <div class="card shadow-sm h-100" style="border-top:3px solid #c9a96e;">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h6 class="mb-0"><i class="fas fa-chart-bar mr-2" style="color:#c9a96e;"></i>Monthly Bookings & Commission</h6>
                                <span style="font-size:11px;color:#94a3b8;">Last 6 months</span>
                            </div>
                            <div class="card-body">
                                <canvas id="brokerTrendChart" height="120"></canvas>
                            </div>
                        </div>
                    </div>

                    {{-- Commission Donut ── --}}
                    <div class="col-lg-4 mb-3">
                        <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 Status</h6>
                            </div>
                            <div class="card-body d-flex flex-column align-items-center justify-content-center">
                                <canvas id="commDonut" height="180" style="max-width:180px;"></canvas>
                                <div class="mt-3 w-100">
                                    @php
                                        $total = $stats['commission_pending'] + $stats['commission_approved'] + $stats['commission_paid'];
                                    @endphp
                                    @foreach([
                                        ['Paid',     $stats['commission_paid'],     '#22c55e'],
                                        ['Approved', $stats['commission_approved'], '#3b82f6'],
                                        ['Pending',  $stats['commission_pending'],  '#f59e0b'],
                                    ] as [$lbl, $amt, $clr])
                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                        <div class="d-flex align-items-center" style="gap:6px;">
                                            <div style="width:8px;height:8px;border-radius:50%;background:{{ $clr }};"></div>
                                            <span style="font-size:12px;">{{ $lbl }}</span>
                                        </div>
                                        <span style="font-weight:700;font-size:12px;color:{{ $clr }};">
                                            {{  $currency }}{{ $amt }}
                                        </span>
                                    </div>
                                    @endforeach
                                    @if($total > 0)
                                    <div class="text-center mt-2" style="font-size:11px;color:#94a3b8;">
                                        Total: {{ $currency }}{{ $total }}
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            {{-- ── Recent Bookings (last 5) ── --}}
            <div class="container-fluid">
                <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="{{ route('broker.bookings') }}" class="btn btn-sm btn-outline-success" style="font-size:11px;">
                            View All <i class="fas fa-arrow-right ml-1"></i>
                        </a>
                    </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>#</th>
                                        <th>Unit</th>
                                        <th>Client</th>
                                        <th>Deal Value</th>
                                        <th>Commission</th>
                                        <th>Comm. Status</th>
                                        <th>Booking Status</th>
                                        <th>Date</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($bookings->take(5) as $b)
                                    @php
                                        $csColors = ['pending'=>'#f59e0b','approved'=>'#3b82f6','paid'=>'#22c55e','rejected'=>'#ef4444'];
                                        $bsColors = ['confirmed'=>'#22c55e','pending'=>'#f59e0b','cancelled'=>'#ef4444'];
                                        $cc = $csColors[$b->commission_status ?? ''] ?? '#94a3b8';
                                        $bc = $bsColors[$b->booking_status ?? ''] ?? '#94a3b8';
                                        $blockLabel = is_object($b->block) ? ($b->block->block_name ?? '') : ($b->block ?? '');
                                    @endphp
                                    <tr>
                                        <td class="text-muted align-middle">{{ $b->id }}</td>
                                        <td class="align-middle">
                                            <div style="font-weight:700;">Unit {{ $b->plot_number ?? '—' }}</div>
                                            <div style="font-size:11px;color:#94a3b8;">
                                                {{ $b->plot_type ?? '' }}{{ $blockLabel ? ' · '.$blockLabel : '' }}
                                            </div>
                                        </td>
                                        <td class="align-middle">
                                            <div style="font-weight:600;">{{ $b->client_name ?: ($b->name ?? '—') }}</div>
                                            <div style="font-size:11px;color:#94a3b8;">{{ $b->client_phone ?: ($b->phone ?? '') }}</div>
                                        </td>
                                        <td class="align-middle" style="font-weight:700;color:#22c55e;">
                                            {{ $currency }} {{ $b->total_amount ?? $b->price ?? 0 }}
                                        </td>
                                        <td class="align-middle">
                                            @if($b->commission_amount)
                                                <div style="font-weight:700;color:#c9a96e;">
                                                   {{ $currency }} {{ $b->commission_amount }}
                                                </div>
                                                @if($b->commission_rate)
                                                <div style="font-size:11px;color:#94a3b8;">{{ $b->commission_rate }}%</div>
                                                @endif
                                            @else
                                                <span style="color:#94a3b8;">—</span>
                                            @endif
                                        </td>
                                        <td class="align-middle">
                                            <span style="background:{{ $cc }}22;color:{{ $cc }};
                                                         padding:3px 10px;border-radius:10px;font-size:11px;font-weight:600;">
                                                {{ ucfirst($b->commission_status ?? 'N/A') }}
                                            </span>
                                        </td>
                                        <td class="align-middle">
                                            <span style="background:{{ $bc }}22;color:{{ $bc }};
                                                         padding:3px 10px;border-radius:10px;font-size:11px;font-weight:600;">
                                                {{ ucfirst($b->booking_status ?? '—') }}
                                            </span>
                                        </td>
                                        <td class="align-middle" style="font-size:12px;color:#94a3b8;white-space:nowrap;">
                                            {{ \Carbon\Carbon::parse($b->created_at)->format('d M Y') }}
                                        </td>
                                        <td class="align-middle text-center">
                                            <a href="{{ route('broker.bookings.show', $b->id) }}"
                                               class="btn btn-sm btn-outline-primary" title="View">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="9" class="text-center py-5 text-muted">
                                            <i class="fas fa-bookmark fa-3x d-block mb-3 text-light"></i>
                                            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 () {
    var trend = @json($monthlyTrend ?? []);

    // Monthly trend chart
    if (trend.length && document.getElementById('brokerTrendChart')) {
        var ctx = document.getElementById('brokerTrendChart').getContext('2d');
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: trend.map(function (t) { return t.label; }),
                datasets: [
                    {
                        label: 'Bookings',
                        data: trend.map(function (t) { return t.bookings; }),
                        backgroundColor: 'rgba(201,169,110,0.7)',
                        borderRadius: 6,
                        yAxisID: 'y',
                    },
                    {
                        label: 'Commission ({{  $currency }})',
                        data: trend.map(function (t) { return t.commission; }),
                        type: 'line',
                        borderColor: '#22c55e',
                        backgroundColor: 'rgba(34,197,94,0.08)',
                        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 } }
                }
            }
        });
    }

    // Commission donut
    var pending  = {{ $stats['commission_pending']  ?? 0 }};
    var approved = {{ $stats['commission_approved'] ?? 0 }};
    var paid     = {{ $stats['commission_paid']     ?? 0 }};

    if (document.getElementById('commDonut')) {
        new Chart(document.getElementById('commDonut').getContext('2d'), {
            type: 'doughnut',
            data: {
                labels: ['Paid', 'Approved', 'Pending'],
                datasets: [{
                    data: [paid, approved, pending],
                    backgroundColor: ['#22c55e', '#3b82f6', '#f59e0b'],
                    borderWidth: 0,
                }]
            },
            options: {
                cutout: '72%',
                plugins: { legend: { display: false } }
            }
        });
    }
})();
</script>

@include('Partials.footer')