@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">

    <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-chart-bar mr-2" style="color:#c9a96e"></i>Booking Report</h3>
                </div>
                <div class="col-sm-6 pe-0">
                    <ol class="bc">
                        <li><a href="/admin/dashboard" class="bc-home"><i class="fas fa-home"></i></a></li>
                        <li class="bc-sep">›</li>
                        <li><a href="/admin/reports/overview" class="bc-link">Reports</a></li>
                        <li class="bc-sep">›</li>
                        <li class="bc-active">Bookings</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    {{-- Filter bar --}}
    <div class="container-fluid mb-3">
        <div class="card shadow-sm">
            <div class="card-body py-2">
                <form method="GET" class="d-flex flex-wrap align-items-end" style="gap:10px">
                    <div>
                        <label style="font-size:11px;color:#94a3b8;display:block;margin-bottom:2px">From</label>
                        <input type="date" name="from" class="form-control form-control-sm" value="{{ $from }}">
                    </div>
                    <div>
                        <label style="font-size:11px;color:#94a3b8;display:block;margin-bottom:2px">To</label>
                        <input type="date" name="to" class="form-control form-control-sm" value="{{ $to }}">
                    </div>
                    <div style="display:flex;gap:6px;align-items:flex-end">
                        <button class="btn btn-primary btn-sm"><i class="fas fa-filter mr-1"></i>Apply</button>
                        <a href="/admin/reports/bookings" class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-times mr-1"></i>All Time
                        </a>
                        <a href="/admin/reports/bookings/export{{ ($from||$to) ? '?from='.$from.'&to='.$to : '' }}"
                           class="btn btn-sm btn-outline-success">
                            <i class="fas fa-download mr-1"></i>CSV
                        </a>
                    </div>
                    <div style="padding:5px 12px;border-radius:6px;font-size:12px;
                                background:{{ ($totals['total'] < $allTimeCount && ($from||$to)) ? '#fef9c3' : '#f0fdf4' }};
                                color:{{ ($totals['total'] < $allTimeCount && ($from||$to)) ? '#854d0e' : '#166534' }}">
                        @if($from || $to)
                            <i class="fas fa-filter mr-1"></i>
                            Showing <strong>{{ $totals['total'] }}</strong> of
                            <strong>{{ $allTimeCount }}</strong> total bookings
                            @if($totals['total'] < $allTimeCount)
                                &nbsp;— <a href="/admin/reports/bookings" style="color:inherit;font-weight:700">clear filter to see all</a>
                            @endif
                        @else
                            <i class="fas fa-check-circle mr-1"></i>
                            Showing all <strong>{{ $allTimeCount }}</strong> bookings (no date filter)
                        @endif
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- KPI Cards --}}
    <div class="container-fluid mb-3">
        <div class="row">
            @foreach([
                ['Total',       $totals['total'],                                '#64748b','fa-list'],
                ['Confirmed',   $totals['confirmed'],                            '#22c55e','fa-check-circle'],
                ['Pending',     $totals['pending'],                              '#f59e0b','fa-clock'],
                ['Cancelled',   $totals['cancelled'],                            '#ef4444','fa-times-circle'],
                ['Total Value', $currency.$totals['value'],     '#c9a96e','fa-rupee-sign'],
                ['Collected',   $currency.$totals['collected'], '#3b82f6','fa-wallet'],
            ] as [$label,$val,$color,$icon])
            <div class="col-xl-2 col-md-4 col-sm-6 mb-3">
                <div class="card shadow-sm h-100" style="border-left:4px solid {{ $color }}">
                    <div class="card-body py-2 px-3">
                        <div style="font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px">
                            <i class="fas {{ $icon }} mr-1"></i>{{ $label }}
                        </div>
                        <div style="font-size:20px;font-weight:800;color:{{ $color }};margin-top:2px">{{ $val }}</div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

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

            {{-- By plot type --}}
            <div class="col-lg-4 mb-3">
                <div class="card shadow-sm h-100" style="border-top:3px solid #c9a96e">
                    <div class="card-header"><h6 class="mb-0">🏠 Confirmed by Plot Type</h6></div>
                    <div class="card-body">
                        @if($byType->isNotEmpty())
                            <canvas id="typeChart" height="200"></canvas>
                            <div class="mt-3">
                                @foreach($byType as $t)
                                <div class="d-flex justify-content-between mb-1" style="font-size:12px">
                                    <span>{{ $t->plot_type ?: 'Unknown' }}</span>
                                    <span><strong>{{ $t->count }}</strong> &bull; {{ $currency }}{{ $t->value }}</span>
                                </div>
                                @endforeach
                            </div>
                        @else
                            <div class="text-center text-muted py-4">No confirmed bookings in this range.</div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Status donut --}}
            <div class="col-lg-3 mb-3">
                <div class="card shadow-sm h-100" style="border-top:3px solid #3b82f6">
                    <div class="card-header"><h6 class="mb-0">📊 Status Breakdown</h6></div>
                    <div class="card-body"><canvas id="statusChart" height="220"></canvas></div>
                </div>
            </div>

            {{-- Daily trend --}}
            <div class="col-lg-5 mb-3">
                <div class="card shadow-sm h-100" style="border-top:3px solid #22c55e">
                    <div class="card-header"><h6 class="mb-0">📅 Daily Trend</h6></div>
                    <div class="card-body">
                        @if(count($dailyTrend) > 0)
                            <canvas id="dailyChart" height="180"></canvas>
                        @else
                            <div class="text-center text-muted py-4">No data for selected range.</div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Bookings list --}}
            <div class="col-12">
                <div class="card shadow-sm">
                    <div class="card-header">
                        <h6 class="mb-0">All Bookings ({{ $bookingsList->total() }})</h6>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0" style="font-size:13px">
                                <thead style="background:#f8f9fa">
                                    <tr>
                                        <th>#</th>
                                        <th>Date</th>
                                        <th>Client</th>
                                        <th>Unit</th>
                                        <th>Type</th>
                                        <th>Source / Payment</th>
                                        <th>Payment Plan</th>
                                        <th>Booking Status</th>
                                        <th>Total Amount</th>
                                        <th>Paid</th>
                                        <th>Balance</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($bookingsList as $b)
                                    @php
                                        $statusColors = [
                                            'confirmed' => 'success',
                                            'pending'   => 'warning',
                                            'cancelled' => 'danger',
                                        ];
                                        $sc  = $statusColors[$b->booking_status] ?? 'secondary';
                                        $txn = $b->transactions->first();

                                        $isInstant = $txn && in_array($txn->mode, ['cash', 'manual']);
                                        $isOnline  = $txn && $txn->mode === 'online';

                                        // ── FIX: Calculate paid/balance from booking_milestones ──
                                        $hasMilestones  = $b->milestones->isNotEmpty();
                                        $paidMilestones = $b->milestones->where('status', 'paid');
                                        $paidAmt        = $paidMilestones->sum('total_with_tax');
                                        $totalAmt       = (float) $b->total_amount;                                        

                                        // If no milestone data, fall back to transaction amount or down_payment_amount
                                        if (!$hasMilestones || $paidAmt == 0) {
                                            $paidAmt = $txn?->total_with_tax ?? (float) $b->down_payment_amount;
                                        }

                                        $balanceAmt  = max(0, $totalAmt - $paidAmt);
                                        $isFullyPaid = $hasMilestones && $b->milestones->where('status', '!=', 'paid')->where('status', '!=', 'waived')->isEmpty();
                                    @endphp
                                    <tr>
                                        <td style="color:#94a3b8;font-size:12px">#{{ $b->id }}</td>
                                        <td style="font-size:12px;color:#64748b;white-space:nowrap">
                                            {{ $b->created_at->format('d M Y') }}<br>
                                            <span style="font-size:10px;color:#94a3b8">{{ $b->created_at->format('H:i') }}</span>
                                        </td>
                                        <td>
                                            <div style="font-weight:600">{{ $b->client_name ?: $b->user?->name ?: '—' }}</div>
                                            <div style="font-size:11px;color:#94a3b8">{{ $b->client_phone ?: $b->user?->phone }}</div>
                                        </td>
                                        <td style="font-weight:700">Unit {{ $b->plot_number }}</td>
                                        <td style="font-size:12px;color:#64748b">{{ $b->plot_type }}</td>
                                        <td>
                                            @if($isInstant)
                                                <span class="badge" style="background:#f59e0b;color:#fff">
                                                    <i class="fas fa-walking mr-1"></i>Walk-in
                                                </span>
                                                <div style="font-size:10px;color:#94a3b8;margin-top:3px">
                                                    {{ ucfirst($txn->mode) }}
                                                    @if($txn->gateway && !in_array($txn->gateway,['cash','manual']))
                                                        &bull; {{ ucfirst($txn->gateway) }}
                                                    @endif
                                                </div>
                                            @elseif($isOnline)
                                                <span class="badge badge-primary">
                                                    <i class="fas fa-credit-card mr-1"></i>{{ ucfirst($txn->gateway) }}
                                                </span>
                                                <div style="font-size:10px;color:#94a3b8;margin-top:3px">Online</div>
                                            @elseif($b->gateway_order_id)
                                                <span class="badge badge-info">Gateway ref</span>
                                                <div style="font-size:10px;color:#94a3b8;margin-top:3px;word-break:break-all">
                                                    {{ Str::limit($b->gateway_order_id, 20) }}
                                                </div>
                                            @else
                                                <span style="color:#cbd5e1;font-size:11px">— No payment yet</span>
                                            @endif
                                        </td>

                                        {{-- Payment Plan + Milestone Progress --}}
                                        <td class="payment-plan-column"> 
                                            @if($b->paymentPlan)
                                                <span style="background:#fff8ee;color:#c9a96e;padding:2px 8px;border-radius:8px;font-size:11px;font-weight:600;white-space:nowrap">
                                                    <i class="fas fa-file-invoice-dollar mr-1"></i>{{ $b->paymentPlan->name }}
                                                </span>
                                                @if($hasMilestones)
                                                    <div style="margin-top:6px">
                                                        @php
                                                            $total_ms    = $b->milestones->count();
                                                            $paid_ms     = $paidMilestones->count();
                                                            $pct         = $total_ms > 0 ? ($paid_ms / $total_ms) * 100 : 0;
                                                            $overdue_ms  = $b->milestones->where('status','overdue')->count();
                                                        @endphp
                                                        {{-- Progress bar --}}
                                                        <div style="background:#e9ecef;border-radius:10px;height:6px;width:120px;overflow:hidden">
                                                            <div style="background:{{ $overdue_ms > 0 ? '#ef4444' : '#22c55e' }};height:100%;width:{{ $pct }}%;transition:width 0.3s"></div>
                                                        </div>
                                                        <div style="font-size:10px;color:#94a3b8;margin-top:2px">
                                                            {{ $paid_ms }}/{{ $total_ms }} paid
                                                            @if($overdue_ms > 0)
                                                                &bull; <span style="color:#ef4444;font-weight:700">{{ $overdue_ms }} overdue</span>
                                                            @endif
                                                        </div>
                                                        {{-- Milestone rows (collapsible via toggle) --}}
                                                        <div id="ms-{{ $b->id }}" style="display:none;margin-top:8px">
                                                            @foreach($b->milestones as $ms)
                                                            @php
                                                                $msColors = [
                                                                    'paid'    => ['#22c55e', 'fa-check-circle'],
                                                                    'pending' => ['#f59e0b', 'fa-clock'],
                                                                    'overdue' => ['#ef4444', 'fa-exclamation-circle'],
                                                                    'waived'  => ['#94a3b8', 'fa-minus-circle'],
                                                                ];
                                                                [$msColor, $msIcon] = $msColors[$ms->status] ?? ['#94a3b8', 'fa-circle'];
                                                            @endphp
                                                            <div style="display:flex;align-items:center;justify-content:space-between;padding:4px 0;border-bottom:1px solid #f1f5f9;font-size:11px">
                                                                <div>
                                                                    <i class="fas {{ $msIcon }} mr-1" style="color:{{ $msColor }}"></i>
                                                                    <span style="color:{{ $ms->status === 'paid' ? '#1e293b' : '#64748b' }};font-weight:{{ $ms->status === 'paid' ? '600' : '400' }}">
                                                                        {{ $ms->label }}
                                                                    </span>
                                                                    @if($ms->percentage)
                                                                        <span style="color:#94a3b8"> ({{ $ms->percentage }}%)</span>
                                                                    @endif
                                                                    @if($ms->status === 'paid' && $ms->paid_at)
                                                                        <div style="font-size:10px;color:#22c55e;margin-left:16px">
                                                                            ✓ {{ \Carbon\Carbon::parse($ms->paid_at)->format('d M Y') }}
                                                                        </div>
                                                                    @endif
                                                                    @if($ms->status === 'overdue' && $ms->due_date)
                                                                        <div style="font-size:10px;color:#ef4444;margin-left:16px">
                                                                            Due: {{ \Carbon\Carbon::parse($ms->due_date)->format('d M Y') }}
                                                                        </div>
                                                                    @endif
                                                                </div>
                                                                <span style="font-weight:700;color:{{ $msColor }}">
                                                                    {{ $currency }}{{ $ms->total_with_tax }}
                                                                </span>
                                                            </div>
                                                            @endforeach
                                                        </div>
                                                        <button onclick="toggleMs({{ $b->id }})" id="ms-btn-{{ $b->id }}"
                                                            style="background:none;border:none;color:#3b82f6;font-size:10px;cursor:pointer;padding:2px 0;margin-top:3px">
                                                            ▼ Show milestones
                                                        </button>
                                                    </div>
                                                @endif
                                            @else
                                                <span style="color:#94a3b8;font-size:11px">Full payment</span>
                                            @endif
                                        </td>

                                        <td>
                                            <span class="badge badge-{{ $sc }}" style="font-size:12px;padding:5px 10px">
                                                {{ ucfirst($b->booking_status) }}
                                            </span>
                                        </td>
                                        <td style="font-weight:700;color:#c9a96e">
                                            {{ $currency }}{{ $b->total_amount }}
                                        </td>

                                        {{-- FIX: Paid column now uses milestone paid sum --}}
                                        <td>
                                            @if($paidAmt > 0)
                                                <span style="font-weight:700;color:#22c55e">
                                                    {{ $currency }}{{ $paidAmt }}
                                                </span>
                                                @if($isFullyPaid)
                                                    <div style="font-size:10px;color:#22c55e">✓ Fully paid</div>
                                                @elseif($hasMilestones && $paidMilestones->count() > 0)
                                                    <div style="font-size:10px;color:#94a3b8">
                                                        {{ $paidMilestones->count() }} milestone{{ $paidMilestones->count() > 1 ? 's' : '' }}
                                                    </div>
                                                @endif
                                                @if($txn?->paid_at)
                                                    <div style="font-size:10px;color:#94a3b8">
                                                        {{ $txn->paid_at->format('d M Y') }}
                                                    </div>
                                                @endif
                                            @else
                                                <span style="color:#94a3b8;font-size:12px">—</span>
                                            @endif
                                        </td>

                                        {{-- Balance due --}}
                                        <td>
                                            @if($b->booking_status === 'confirmed' && $balanceAmt > 0)
                                                <span style="font-weight:700;color:#f59e0b">
                                                    {{ $currency }}{{ $balanceAmt }}
                                                </span>
                                                @php
                                                    $nextDue = $b->milestones->whereIn('status', ['pending','overdue'])->first();
                                                @endphp
                                                @if($nextDue?->due_date)
                                                    <div style="font-size:10px;color:{{ $nextDue->status === 'overdue' ? '#ef4444' : '#94a3b8' }}">
                                                        {{ $nextDue->status === 'overdue' ? '⚠ ' : '' }}Due {{ \Carbon\Carbon::parse($nextDue->due_date)->format('d M') }}
                                                    </div>
                                                @endif
                                            @elseif($b->booking_status === 'confirmed' && $balanceAmt <= 0 && $paidAmt > 0)
                                                <span style="color:#22c55e;font-size:11px">✓ Clear</span>
                                            @else
                                                <span style="color:#94a3b8;font-size:12px">—</span>
                                            @endif
                                        </td>

                                        <td>
                                            <a href="/admin/bookings/{{ $b->id }}" class="btn btn-sm btn-outline-primary" title="View">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="12" class="text-center py-5">
                                            <i class="fas fa-inbox fa-2x text-muted mb-2 d-block"></i>
                                            No bookings found.
                                            @if($from || $to)
                                                <br><a href="/admin/reports/bookings">Clear date filter to see all bookings</a>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                    @if($bookingsList->hasPages())
                    <div class="card-footer">{{ $bookingsList->appends(request()->query())->links() }}</div>
                    @endif
                </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>
// ── Charts ────────────────────────────────────────────────────────────────────
const byType = @json($byType);
if (byType.length && document.getElementById('typeChart')) {
    new Chart(document.getElementById('typeChart'), {
        type: 'bar',
        data: {
            labels: byType.map(t => t.plot_type || 'Unknown'),
            datasets: [{ label: 'Confirmed', data: byType.map(t => t.count),
                backgroundColor: '#c9a96e88', borderColor: '#c9a96e', borderWidth: 2, borderRadius: 4 }]
        },
        options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { ticks: { stepSize: 1 } } } }
    });
}

new Chart(document.getElementById('statusChart'), {
    type: 'doughnut',
    data: {
        labels: ['Confirmed', 'Pending', 'Cancelled'],
        datasets: [{ data: [{{ $totals['confirmed'] }}, {{ $totals['pending'] }}, {{ $totals['cancelled'] }}],
            backgroundColor: ['#22c55e', '#f59e0b', '#ef4444'] }]
    },
    options: { responsive: true, plugins: { legend: { position: 'bottom' } } }
});

const daily = @json($dailyTrend);
const days  = Object.keys(daily);
if (days.length && document.getElementById('dailyChart')) {
    const confirmed = days.map(d => daily[d].find(r => r.booking_status === 'confirmed')?.count || 0);
    const pending   = days.map(d => daily[d].find(r => r.booking_status === 'pending')?.count   || 0);
    new Chart(document.getElementById('dailyChart'), {
        type: 'line',
        data: {
            labels: days,
            datasets: [
                { label: 'Confirmed', data: confirmed, borderColor: '#22c55e', backgroundColor: '#22c55e22', tension: 0.4, fill: true },
                { label: 'Pending',   data: pending,   borderColor: '#f59e0b', backgroundColor: '#f59e0b22', tension: 0.4, fill: true },
            ]
        },
        options: { responsive: true, plugins: { legend: { position: 'bottom' } }, scales: { y: { ticks: { stepSize: 1 } } } }
    });
}

// ── Milestone toggle ──────────────────────────────────────────────────────────
function toggleMs(id) {
    var el  = document.getElementById('ms-' + id);
    var btn = document.getElementById('ms-btn-' + id);
    var open = el.style.display === 'block';
    el.style.display = open ? 'none' : 'block';
    btn.textContent  = open ? '▼ Show milestones' : '▲ Hide milestones';
}
</script>

@include('Partials.footer')