@extends('layouts.app')

@section('content')
<div class="container-fluid px-4 py-4" style="background-color: #f8fafc; min-height: 100vh;">

    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
        <div>
            <div class="d-flex align-items-center gap-2 mb-1">
                <i class="bi bi-speedometer2 text-indigo-600 fs-4" style="color: #4f46e5;"></i>
                <h4 class="fw-bold text-dark mb-0">Admin Business Intelligence Dashboard</h4>
            </div>
            <p class="text-muted small mb-0">Real-time analytical logs across central warehouse inventories and
                exhibition terminals.</p>
        </div>
        <a href="{{ route('admin.customers.create') }}" class="btn btn-primary px-4 shadow-sm"
            style="background-color: #4f46e5; border: none; border-radius: 10px;">
            <i class="bi bi-plus-lg me-1"></i> New Entry
        </a>
    </div>

    <div class="card mb-4 border-0 shadow-sm no-print"
        style="background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%); border-radius: 12px;">
        <div class="card-body p-3">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
                <div class="d-flex align-items-center gap-2">
                    <div class="bg-primary bg-opacity-10 p-2 rounded-3 text-primary"
                        style="color: #4f46e5 !important; background-color: rgba(79, 70, 229, 0.1) !important;">
                        <i class="bi bi-lightning-charge-fill fs-5"></i>
                    </div>
                    <div>
                        <h6 class="mb-0 fw-bold text-dark">Quick Actions Desk</h6>
                        <small class="text-muted">Single-click operational shortcuts</small>
                    </div>
                </div>

                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <a href="{{ url('/admin/calendar') }}"
                        class="btn btn-white btn-sm border shadow-sm px-3 py-1.5 fw-semibold text-secondary"
                        style="border-radius: 8px; font-size: 12px; background: #fff; text-decoration: none;">
                        <i class="bi bi-calendar3 text-primary me-1.5" style="color: #4f46e5 !important;"></i> View
                        Operational Calendar
                    </a>

                    <a href="{{ url('/admin/report-tracker?filter=escalated') }}"
                        class="btn btn-white btn-sm border shadow-sm px-3 py-1.5 fw-semibold text-secondary"
                        style="border-radius: 8px; font-size: 12px; background: #fff; text-decoration: none;">
                        <i class="bi bi-exclamation-octagon-fill text-danger me-1.5"></i> Show Escalated Flags
                    </a>

                    <button type="button"
                        onclick="alert('System Notice: Broadcast reminders pushed to all delayed field operational staff members successfully.')"
                        class="btn btn-primary btn-sm px-3 py-1.5 fw-bold shadow-sm"
                        style="background-color: #4f46e5; border: none; border-radius: 8px; font-size: 12px;">
                        <i class="bi bi-bell-fill me-1.5"></i> Broadcast Delay Warning
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-sm-6 col-xl-4">
            <div class="card p-3 border-0 shadow-sm bg-white h-100">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <span class="text-muted small text-uppercase fw-bold font-monospace">Gross Counter
                            Revenue</span>
                        <h3 class="fw-bold text-dark mt-1 mb-0">₹{{ number_format($totalRevenue, 2) }}</h3>
                    </div>
                    <div class="rounded-3 p-3 bg-success-subtle text-success fs-3"
                        style="background-color: #d1fae5; color: #065f46 !important;">
                        <i class="bi bi-currency-rupee"></i>
                    </div>
                </div>
                <div class="text-success small mt-2 fw-semibold" style="color: #059669 !important;">
                    <i class="bi bi-arrow-up-right me-1"></i> Live POS Cashflow Sync
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-xl-4">
            <div class="card p-3 border-0 shadow-sm bg-white h-100">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <span class="text-muted small text-uppercase fw-bold font-monospace">Inventory Asset
                            Value</span>
                        <h3 class="fw-bold text-dark mt-1 mb-0">₹{{ number_format($warehouseStockValuation, 2) }}</h3>
                    </div>
                    <div class="rounded-3 p-3 bg-warning-subtle text-warning fs-3"
                        style="background-color: #fef3c7; color: #92400e !important;">
                        <i class="bi bi-box-seam"></i>
                    </div>
                </div>
                <div class="text-warning small mt-2 fw-semibold" style="color: #d97706 !important;">
                    <i class="bi bi-calculator me-1"></i> Central Asset Valuation
                </div>
            </div>
        </div>

        <div class="col-sm-6 col-xl-4">
            <div class="card p-3 border-0 shadow-sm bg-white h-100">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <span class="text-muted small text-uppercase fw-bold font-monospace">Vendor Payable</span>
                        <h3 class="fw-bold text-danger mt-1 mb-0">₹{{ number_format($outstandingLiabilities, 2) }}</h3>
                    </div>
                    <div class="rounded-3 p-3 bg-danger-subtle text-danger fs-3"
                        style="background-color: #fee2e2; color: #991b1b !important;">
                        <i class="bi bi-truck"></i>
                    </div>
                </div>
                <div class="text-danger small mt-2 fw-semibold" style="color: #dc2626 !important;">
                    <i class="bi bi-exclamation-circle me-1"></i> Outstanding Hub Dues
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-4">
        @php
        $stats = [
        ['label' => 'Total Exhibitions', 'value' => $total_exhibitions, 'icon' => 'bi-grid-1x2', 'bg' => 'bg-primary'],
        ['label' => "Today's Exhibitions", 'value' => $todays_exhibitions, 'icon' => 'bi-calendar-check', 'bg' =>
        'bg-success'],
        ['label' => 'Pending Reports', 'value' => $pending_reports, 'icon' => 'bi-file-earmark-text', 'bg' =>
        'bg-warning'],
        ['label' => 'Active Employees', 'value' => $active_employees, 'icon' => 'bi-people', 'bg' => 'bg-info']
        ];
        @endphp

        @foreach($stats as $stat)
        <div class="col-sm-6 col-md-3">
            <div class="card border-0 shadow-sm rounded-3">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center">
                        <div
                            class="col-auto flex-shrink-0 {{ $stat['bg'] }} bg-opacity-10 rounded-3 p-3 text-{{ $stat['bg'] == 'bg-primary' ? 'primary' : str_replace('bg-', '', $stat['bg']) }}">
                            <i class="bi {{ $stat['icon'] }} fs-4"></i>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <p class="text-muted small mb-0 fw-bold">{{ $stat['label'] }}</p>
                            <h4 class="mb-0 fw-bold text-dark">{{ $stat['value'] }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <div class="card border-0 shadow-sm rounded-4 mb-4 bg-white">
        <div class="card-body p-4">
            <h6 class="fw-bold text-dark mb-3"><i class="bi bi-graph-up-arrow me-2 text-indigo-600"></i>Annual Sales
                Revenue Curve Curve</h6>
            <div style="position: relative; height: 320px; width: 100%;">
                <canvas id="revenueAnalyticsChart"></canvas>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm rounded-4">
        <div class="card-header bg-white border-bottom py-3 px-4">
            <h5 class="mb-0 fw-bold text-dark">Recent Customer Activity Matrix</h5>
        </div>
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0 bg-white border"
                style="border-radius: 8px; overflow: hidden;">
                <thead class="table-light text-uppercase small fw-bold">
                    <tr>
                        <th class="py-3 ps-3">SR. NO.</th>
                        <th class="py-3">CUSTOMER NAME</th>
                        <th class="py-3">CONTACT</th>
                        <th class="py-3">CITY</th>
                        <th class="py-3">BILL AMOUNT</th>
                        <th class="py-3">DATE</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($recent_customer_bills as $index => $bill)
                    <tr>
                        <td class="ps-3 fw-bold text-muted">{{ $index + 1 }}</td>
                        <td class="fw-bold text-dark">{{ $bill->customer->name ?? 'Walk-in Buyer' }}</td>
                        <td class="text-secondary small">{{ $bill->customer->contact ?? 'N/A' }}</td>
                        <td><span class="badge bg-light text-dark border">{{ $bill->customer->city ?? 'Field Counter'
                                }}</span></td>
                        <td class="fw-bold text-primary">₹{{ number_format($bill->bill_amount, 2) }}</td>
                        <td class="small text-muted">{{ \Carbon\Carbon::parse($bill->purchase_date)->format('d M, Y') }}
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center py-4 text-muted">
                            <i class="bi bi-people fs-3 d-block mb-1"></i> No customer bills logged yet.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="card-footer bg-white border-0 py-3 text-center">
            <a href="{{ route('admin.customers.index') }}" class="btn btn-link btn-sm text-decoration-none fw-bold"
                style="color: #4f46e5;">View All Customers <i class="bi bi-arrow-right ms-1"></i></a>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const ctx = document.getElementById('revenueAnalyticsChart').getContext('2d');

        // Pull chartMonthlyRevenue array mapping safely from Laravel backend controller array keys
        const monthlyRevenueDataset = @json($chartMonthlyRevenue);

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                datasets: [{
                    label: 'Gross Billing Revenue (₹)',
                    data: monthlyRevenueDataset,
                    borderColor: '#4f46e5',
                    backgroundColor: 'rgba(79, 70, 229, 0.05)',
                    borderWidth: 3,
                    fill: true,
                    tension: 0.35,
                    pointBackgroundColor: '#4f46e5',
                    pointHoverRadius: 7
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: { color: 'rgba(0, 0, 0, 0.04)' },
                        ticks: {
                            font: { family: 'Figtree' },
                            callback: function(value) { return '₹' + value.toLocaleString('en-IN'); }
                        }
                    },
                    x: {
                        grid: { display: false },
                        ticks: { font: { family: 'Figtree' } }
                    }
                }
            }
        });
    });
</script>
@endsection