@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>
                    <p class="text-muted mb-0" style="font-size:13px">
                        Booking analytics and trends
                        @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/dashboard" class="bc-home"><i class="fas fa-home"></i></a></li>
                        <li class="bc-sep">›</li>
                        <li><a href="{{ route('admin.reports.overview', ['tenant' => $tenantSlug ?? request()->route('tenant')]) }}" 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="{{ route('admin.reports.bookings', ['tenant' => $tenantSlug ?? request()->route('tenant')]) }}" 
                           class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-times mr-1"></i>All Time
                        </a>
                        <a href="{{ route('admin.reports.bookings.export', ['tenant' => $tenantSlug ?? request()->route('tenant'), '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="{{ route('admin.reports.bookings', ['tenant' => $tenantSlug ?? request()->route('tenant')]) }}" 
                                          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.number_format($totals['value'], 2),    '#c9a96e','fa-rupee-sign'],
                ['Collected',   $currency.number_format($totals['collected'], 2), '#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 }}{{ number_format($t->value, 2) }}</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>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';
                                        $paidAmt = $b->transactions->where('status', 'success')->sum('amount');
                                        $balanceAmt = max(0, (float)$b->total_amount - $paidAmt);
                                    @endphp
                                    <tr>
                                        <td style="color:#94a3b8;font-size:12px">{{ $loop->iteration }}</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>
                                            <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 }}{{ number_format($b->total_amount, 2) }}
                                        </td>
                                        <td>
                                            @if($paidAmt > 0)
                                                <span style="font-weight:700;color:#22c55e">
                                                    {{ $currency }}{{ number_format($paidAmt, 2) }}
                                                </span>
                                            @else
                                                <span style="color:#94a3b8;font-size:12px">—</span>
                                            @endif
                                        </td>
                                        <td>
                                            @if($b->booking_status === 'confirmed' && $balanceAmt > 0)
                                                <span style="font-weight:700;color:#f59e0b">
                                                    {{ $currency }}{{ number_format($balanceAmt, 2) }}
                                                </span>
                                            @elseif($b->booking_status === 'confirmed' && $balanceAmt <= 0)
                                                <span style="color:#22c55e;font-size:11px">✓ Clear</span>
                                            @else
                                                <span style="color:#94a3b8;font-size:12px">—</span>
                                            @endif
                                        </td>
                                        <td>
                                            <a href="{{ url('/'.$tenantSlug.'/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="10" 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="{{ route('admin.reports.bookings', ['tenant' => $tenantSlug ?? request()->route('tenant')]) }}">
                                                    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>
// By type chart
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 } } } }
    });
}

// Status chart
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' } } }
});

// Daily trend
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.map(d => new Date(d).toLocaleDateString('en', { month: 'short', day: 'numeric' })),
            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 } } } }
    });
}
</script>

@include('Partials.footer')