@php
    $headerOption = \App\Http\Controllers\Controller::getHeaderOptions(
        $title ?? '',
        $subTitle ?? '',
        isset($filters) ? $filters : [],
        isset($advancedFilters) ? $advancedFilters : []
    );
@endphp
@extends('admin.layouts.layout', $headerOption)
@section('content')
<div class="container-fluid">
    <div class="main_title d-flex justify-content-between align-items-center mb-3">
        <h2>Appointment Board</h2>
    </div>

    {{-- Week navigation + filters --}}
    <div class="project-box mb-3">
        <div class="row g-2 align-items-center px-2 py-2">
            <div class="col-auto">
                <div class="d-flex align-items-center gap-2">
                    <button type="button" class="black-btn-inner waves-effect btn-sm" id="btnPrevWeek">&larr; Prev Week</button>
                    <span class="fw-bold text-center" id="weekLabel" style="min-width:210px;">Week of {{ $weekDates[0]->format('D M j, Y') }}</span>
                    <button type="button" class="black-btn-inner waves-effect btn-sm" id="btnNextWeek">Next Week &rarr;</button>
                </div>
            </div>
            <div class="col-md-3 project-form mb-0">
                <label class="form-label small">User</label>
                <select class="form-select form-select-sm select2 no-search" id="userFilter">
                    <option value="">All Users</option>
                    @foreach($users as $u)
                        <option value="{{ $u->id }}" {{ (string)$userId === (string)$u->id ? 'selected' : '' }}>
                            {{ trim($u->first_name.' '.$u->last_name) }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="col-auto">
                <button type="button" class="green-btn-inner waves-effect btn-sm" id="btnApplyFilter">Apply</button>
            </div>
        </div>
    </div>

    {{-- Weekly appointments grid --}}
    <div class="project-box mb-4">
        <div class="heading-btn-sec brd-bottom mb-3">
            <h3>Appointments for Current Week</h3>
        </div>
        <div class="table-responsive">
            <table class="table custom-table mb-0" id="weeklyGridTable">
                <thead>
                    <tr style="background-color:#16C4C0; color:#fff;" class="text-center">
                        <th rowspan="2" class="align-middle" style="min-width:140px;">Users</th>
                        @foreach($weekDates as $d)
                            <th colspan="4" class="text-center">{{ $d->format('D M j') }}</th>
                        @endforeach
                        <th colspan="4" class="text-center" style="background-color:#13a8a4;">Totals</th>
                    </tr>
                    <tr style="background-color:#f8f9fa;" class="text-center">
                        @foreach($weekDates as $d)
                            <th class="small">Conf.</th>
                            <th class="small">Res.</th>
                            <th class="small">Seen</th>
                            <th class="small">Set</th>
                        @endforeach
                        <th class="small" style="background-color:#e0f7f6;">Conf.</th>
                        <th class="small" style="background-color:#e0f7f6;">Res.</th>
                        <th class="small" style="background-color:#e0f7f6;">Seen</th>
                        <th class="small" style="background-color:#e0f7f6;">Set</th>
                    </tr>
                </thead>
                <tbody id="weeklyGridBody">
                    @forelse($gridData as $uid => $userData)
                        @php
                            $rowTotals = ['conf'=>0,'res'=>0,'seen'=>0,'set'=>0];
                        @endphp
                        <tr>
                            <td class="fw-semibold">{{ $userData['name'] }}</td>
                            @foreach($weekDates as $d)
                                @php
                                    $dayData = $userData['days'][$d->format('Y-m-d')] ?? ['conf'=>0,'res'=>0,'seen'=>0,'set'=>0];
                                    $rowTotals['conf'] += $dayData['conf'];
                                    $rowTotals['res']  += $dayData['res'];
                                    $rowTotals['seen'] += $dayData['seen'];
                                    $rowTotals['set']  += $dayData['set'];
                                @endphp
                                <td class="text-center">{{ $dayData['conf'] ?: '–' }}</td>
                                <td class="text-center">{{ $dayData['res'] ?: '–' }}</td>
                                <td class="text-center">{{ $dayData['seen'] ?: '–' }}</td>
                                <td class="text-center">{{ $dayData['set'] ?: '–' }}</td>
                            @endforeach
                            <td class="text-center fw-bold" style="background-color:#f0fafa;">{{ $rowTotals['conf'] ?: '–' }}</td>
                            <td class="text-center fw-bold" style="background-color:#f0fafa;">{{ $rowTotals['res'] ?: '–' }}</td>
                            <td class="text-center fw-bold" style="background-color:#f0fafa;">{{ $rowTotals['seen'] ?: '–' }}</td>
                            <td class="text-center fw-bold" style="background-color:#f0fafa;">{{ $rowTotals['set'] ?: '–' }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="{{ 1 + (count($weekDates) + 1) * 4 }}" class="text-center text-muted py-4">No appointments found for this week.</td></tr>
                    @endforelse
                </tbody>
                <tfoot>
                    <tr style="background-color:#313131; color:#fff;" class="fw-bold text-center">
                        <td>Totals</td>
                        @php $grandTotals = ['conf'=>0,'res'=>0,'seen'=>0,'set'=>0]; @endphp
                        @foreach($weekDates as $d)
                            @php
                                $t = $totals[$d->format('Y-m-d')] ?? ['conf'=>0,'res'=>0,'seen'=>0,'set'=>0];
                                $grandTotals['conf'] += $t['conf'];
                                $grandTotals['res']  += $t['res'];
                                $grandTotals['seen'] += $t['seen'];
                                $grandTotals['set']  += $t['set'];
                            @endphp
                            <td>{{ $t['conf'] ?: '–' }}</td>
                            <td>{{ $t['res'] ?: '–' }}</td>
                            <td>{{ $t['seen'] ?: '–' }}</td>
                            <td>{{ $t['set'] ?: '–' }}</td>
                        @endforeach
                        <td style="background-color:#16C4C0;">{{ $grandTotals['conf'] ?: '–' }}</td>
                        <td style="background-color:#16C4C0;">{{ $grandTotals['res'] ?: '–' }}</td>
                        <td style="background-color:#16C4C0;">{{ $grandTotals['seen'] ?: '–' }}</td>
                        <td style="background-color:#16C4C0;">{{ $grandTotals['set'] ?: '–' }}</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

    {{-- Merchants Approved chart --}}
    <div class="project-box">
        <h5 class="mb-3" id="merchantsApprovedTitle">Merchants Approved in {{ now()->format('F Y') }}</h5>
        <div style="max-height:350px; position:relative;">
            <canvas id="merchantsApprovedChart"></canvas>
        </div>
        <p id="merchantsApprovedEmpty" class="text-center text-muted py-3 d-none">No approved merchants this month.</p>
    </div>
</div>
@endsection

@push('page_script')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
<script>
(function(){
    'use strict';
    const csrf = document.querySelector('meta[name="csrf-token"]')?.content || '';

    let currentWeekStart = '{{ $weekDates[0]->format("Y-m-d") }}';

    const urls = {
        weekly: '{{ route("leads.appointment-board.weekly-data") }}',
        approved: '{{ route("leads.appointment-board.merchants-approved") }}',
    };

    // --- Week navigation ---
    document.getElementById('btnPrevWeek')?.addEventListener('click', () => shiftWeek(-7));
    document.getElementById('btnNextWeek')?.addEventListener('click', () => shiftWeek(7));
    document.getElementById('btnApplyFilter')?.addEventListener('click', reloadGrid);

    function shiftWeek(days) {
        const d = new Date(currentWeekStart);
        d.setDate(d.getDate() + days);
        currentWeekStart = d.toISOString().slice(0,10);
        reloadGrid();
    }

    function reloadGrid() {
        const userId = document.getElementById('userFilter')?.value || '';
        fetch(urls.weekly + '?week_start=' + currentWeekStart + (userId ? '&user_id=' + userId : ''), {
            headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf }
        })
        .then(r => r.json())
        .then(resp => {
            if (resp.status !== 200) return;
            const { grid, totals, week_dates } = resp.data;

            // Update week label
            const weekLabel = document.getElementById('weekLabel');
            if (weekLabel && week_dates.length) {
                weekLabel.textContent = 'Week of ' + week_dates[0].label;
            }

            // Rebuild header
            const thead = document.querySelector('#weeklyGridTable thead');
            if (thead) {
                thead.innerHTML = `<tr style="background-color:#16C4C0; color:#fff;" class="text-center">
                    <th rowspan="2" class="align-middle" style="min-width:140px;">Users</th>
                    ${week_dates.map(d => `<th colspan="4" class="text-center">${d.label}</th>`).join('')}
                    <th colspan="4" class="text-center" style="background-color:#13a8a4;">Totals</th>
                </tr>
                <tr style="background-color:#f8f9fa;" class="text-center">
                    ${week_dates.map(() => '<th class="small">Conf.</th><th class="small">Res.</th><th class="small">Seen</th><th class="small">Set</th>').join('')}
                    <th class="small" style="background-color:#e0f7f6;">Conf.</th><th class="small" style="background-color:#e0f7f6;">Res.</th><th class="small" style="background-color:#e0f7f6;">Seen</th><th class="small" style="background-color:#e0f7f6;">Set</th>
                </tr>`;
            }

            // Rebuild body
            const tbody = document.getElementById('weeklyGridBody');
            if (!tbody) return;
            if (!Object.keys(grid).length) {
                tbody.innerHTML = `<tr><td colspan="${1 + (week_dates.length + 1) * 4}" class="text-center text-muted py-4">No appointments found for this week.</td></tr>`;
            } else {
                tbody.innerHTML = Object.entries(grid).map(([uid, userData]) => {
                    let rt = {conf:0,res:0,seen:0,set:0};
                    const cells = week_dates.map(d => {
                        const day = userData.days[d.date] || {conf:0,res:0,seen:0,set:0};
                        rt.conf += day.conf||0; rt.res += day.res||0; rt.seen += day.seen||0; rt.set += day.set||0;
                        return `<td class="text-center">${day.conf||'–'}</td><td class="text-center">${day.res||'–'}</td><td class="text-center">${day.seen||'–'}</td><td class="text-center">${day.set||'–'}</td>`;
                    }).join('');
                    const rowTotals = `<td class="text-center fw-bold" style="background-color:#f0fafa;">${rt.conf||'–'}</td><td class="text-center fw-bold" style="background-color:#f0fafa;">${rt.res||'–'}</td><td class="text-center fw-bold" style="background-color:#f0fafa;">${rt.seen||'–'}</td><td class="text-center fw-bold" style="background-color:#f0fafa;">${rt.set||'–'}</td>`;
                    return `<tr><td class="fw-semibold">${userData.name}</td>${cells}${rowTotals}</tr>`;
                }).join('');
            }

            // Rebuild footer totals
            const tfoot = document.querySelector('#weeklyGridTable tfoot tr');
            if (tfoot) {
                let gt = {conf:0,res:0,seen:0,set:0};
                const totalCells = week_dates.map(d => {
                    const t = totals[d.date] || {conf:0,res:0,seen:0,set:0};
                    gt.conf += t.conf||0; gt.res += t.res||0; gt.seen += t.seen||0; gt.set += t.set||0;
                    return `<td>${t.conf||'–'}</td><td>${t.res||'–'}</td><td>${t.seen||'–'}</td><td>${t.set||'–'}</td>`;
                }).join('');
                tfoot.innerHTML = `<td>Totals</td>${totalCells}<td style="background-color:#16C4C0;">${gt.conf||'–'}</td><td style="background-color:#16C4C0;">${gt.res||'–'}</td><td style="background-color:#16C4C0;">${gt.seen||'–'}</td><td style="background-color:#16C4C0;">${gt.set||'–'}</td>`;
            }
        });
    }

    // --- Merchants Approved Chart ---
    let approvedChart = null;

    function loadMerchantsApproved() {
        const month = new Date().toISOString().slice(0,7);
        fetch(urls.approved + '?month=' + month, {
            headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf }
        })
        .then(r => r.json())
        .then(resp => {
            if (resp.status !== 200) return;
            const { users, counts, month_label } = resp.data;

            const titleEl = document.getElementById('merchantsApprovedTitle');
            if (titleEl) titleEl.textContent = 'Merchants Approved in ' + (month_label || '');

            const emptyEl = document.getElementById('merchantsApprovedEmpty');
            const canvas = document.getElementById('merchantsApprovedChart');

            if (!users.length) {
                if (emptyEl) emptyEl.style.display = 'block';
                if (canvas) canvas.style.display = 'none';
                return;
            }

            if (emptyEl) emptyEl.style.display = 'none';
            if (canvas) canvas.style.display = 'block';

            if (approvedChart) approvedChart.destroy();
            approvedChart = new Chart(canvas, {
                type: 'bar',
                data: {
                    labels: users,
                    datasets: [{
                        label: 'Merchants Approved',
                        data: counts,
                        backgroundColor: '#4BC0C0',
                        borderRadius: 4,
                    }]
                },
                options: {
                    indexAxis: 'y',
                    responsive: true,
                    plugins: {
                        legend: { display: false },
                        tooltip: { mode: 'index' },
                    },
                    scales: {
                        x: { beginAtZero: true, ticks: { stepSize: 1 } }
                    }
                }
            });
        });
    }

    loadMerchantsApproved();
})();
</script>
@endpush