@extends('backEnd.layouts.master')
@section('title', 'Dashboard')

@section('css')
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

    <style>
        :root {
            --glass-bg: rgba(255, 255, 255, 0.7);
            --glass-border: rgba(255, 255, 255, 0.4);
            --primary-glow: #6366f1;
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: #f0f2f5;
        }

        /* Dashboard Header - Floating Glass */
        .glass-header {
            background: var(--glass-bg);
            backdrop-filter: blur(15px);
            border: 1px solid var(--glass-border);
            border-radius: 24px;
            padding: 25px;
            box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05);
            margin-bottom: 12px;
        }

        /* Floating Metric Cards */
        .metric-card {
            background: white;
            border: 1px solid #edf2f7;
            border-radius: 24px;
            padding: 24px;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }

        .metric-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
        }

        .metric-card::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, var(--glow-color) 0%, transparent 70%);
            opacity: 0.1;
        }

        /* Dynamic Icons */
        .icon-shape {
            width: 56px;
            height: 56px;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            margin-bottom: 15px;
            color: white;
            box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.2);
        }

        /* Custom Tables */
        .premium-table {
            background: white;
            border-radius: 24px;
            overflow: hidden;
            border: 1px solid #edf2f7;
        }

        .premium-table thead th {
            background: #f8fafc;
            padding: 18px;
            font-weight: 700;
            text-transform: uppercase;
            font-size: 11px;
            letter-spacing: 1px;
            color: #64748b;
        }

        .premium-table tbody td {
            padding: 18px;
            border-bottom: 1px solid #f1f5f9;
            font-size: 14px;
        }

        .badge-soft {
            padding: 6px 14px;
            border-radius: 10px;
            font-weight: 600;
            font-size: 12px;
        }

        .bg-soft-success {
            background: #dcfce7;
            color: #15803d;
        }

        .bg-soft-warning {
            background: #fef3c7;
            color: #b45309;
        }

        /* Custom Scrollbar */
        ::-webkit-scrollbar {
            width: 6px;
        }

        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 10px;
        }
    </style>
@endsection

@section('content')
    <div class="container-fluid py-4">

        <div class="glass-header d-flex align-items-center justify-content-between">
            <div>
                <h3 class="fw-bold text-dark mb-1">Dashboard </h3>
                {{-- <span class="text-muted"><i class="fa-solid fa-bolt text-warning"></i> Real-time store performance</span> --}}
            </div>
            <div class="d-flex align-items-center gap-3">
                <div class="position-relative">
                    <i
                        class="fa-solid fa-calendar-days position-absolute top-50 start-0 translate-middle-y ms-3 text-muted"></i>
                    <input type="text" id="dash-range"
                        class="form-control rounded-pill ps-5 border-0 bg-light shadow-none date"
                        style="width: 280px; height: 45px;">
                </div>
                <button class="btn btn-dark rounded-pill px-4 dashboard-report" style="height: 45px;">Generate
                    Report</button>
            </div>
        </div>

        <div class="dashboardMain">
            @include('backEnd.admin.dashboard-body')
        </div>

        {{-- <div class="row mt-4">
        <div class="col-12">
            <div class="premium-table">
                <div class="p-4 d-flex justify-content-between align-items-center">
                    <h5 class="fw-bold mb-0">Recent Order Stream</h5>
                    <button class="btn btn-light rounded-pill border shadow-none btn-sm px-3">Filter Table</button>
                </div>
                <div class="table-responsive">
                    <table class="table table-borderless align-middle mb-0">
                        <thead>
                            <tr>
                                <th>Order ID</th>
                                <th>Customer Entity</th>
                                <th>Total Bill</th>
                                <th>Payment Status</th>
                                <th>Timestamp</th>
                                <th class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($latest_order as $order)
                            <tr>
                                <td class="fw-bold text-primary">#{{$order->invoice_id}}</td>
                                <td>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="avatar-sm bg-light rounded-circle text-center" style="width:32px; height:32px; line-height:32px;">
                                            {{ substr($order->customer ? $order->customer->name : 'G', 0, 1) }}
                                        </div>
                                        <span>{{$order->customer ? $order->customer->name : 'Guest User'}}</span>
                                    </div>
                                </td>
                                <td class="fw-bold text-dark">৳{{number_format($order->amount)}}</td>
                                <td>
                                    <span class="badge-soft {{ $order->order_status == 'Pending' ? 'bg-soft-warning' : 'bg-soft-success' }}">
                                        {{$order->order_status}}
                                    </span>
                                </td>
                                <td class="text-muted">{{$order->created_at->format('M d, g:i A')}}</td>
                                <td class="text-end">
                                    <button class="btn btn-sm btn-light rounded-circle"><i class="fa-solid fa-ellipsis-vertical"></i></button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div> --}}
    </div>
    <script>
        // Dashboard.blade.php script section
        $(document).ready(function() {

            function initFlatpickr(fromDate, toDate) {
                flatpickr("#dash-range", {
                    mode: "range",
                    dateFormat: "Y-m-d",
                    defaultDate: [fromDate, toDate] 
                });
            }

            // Initial Load
            initFlatpickr("{{ $from->format('Y-m-d') }}", "{{ $to->format('Y-m-d') }}");

            $('.dashboard-report').click(function() {
                let date = $('#dash-range').val();
                let box = $('.dashboardMain');

                box.html(
                    '<div class="text-center py-5"><i class="fas fa-spinner fa-spin fa-3x text-primary"></i><p class="mt-2">Updating Analytics...</p></div>'
                    );

                $.ajax({
                    url: "{{ route('admin.dashboard.body') }}",
                    data: {
                        date: date
                    },
                    success: function(html) {
                        box.html(html);
                        // Ajax success hobar por calendar-er date oi selected date-e rakhar jonno 
                        // amra flatpickr ke abar update korbo na, karon input e value thakbe.
                    },
                    error: function() {
                        box.html(
                            '<div class="text-danger text-center">Failed to load data.</div>'
                            );
                    }
                });
            });
        });
    </script>
@endsection