@extends('layout')

@section('content')
    <h1 class="text-3xl font-bold mb-4">Dashboard Overview</h1>
    <!-- resources/views/components/dashboard.blade.php -->
    <style>
        .cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 10px;
            margin-bottom: 30px;
        }

        .card {
            background-color: #00796b;
            padding: 20px;
            color: white;
            border-radius: 10px;
            flex: 1;
            margin: 10px;
            min-width: 200px;
            max-height: 230px;
            display: flex;
            text-align: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            flex-direction: column;
            align-items: center;
            gap: 10px;

        }

        .card-title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 5px;
        }

        .card-value {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .card-detail {
            font-size: 14px;
            opacity: 0.8;
        }

        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 5px;
            margin-bottom: 30px;
        }

        .stat-box {
            display: flex;
            align-items: center;
            background-color: #fff;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }

        .logo-box {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            color: #fff;
        }

        .logo-box.processing {
            background-color: #0a64f8;
        }

        .logo-box.cancel {
            background-color: #e40707;
        }

        .logo-box.pending {
            background-color: #e19903;
        }

        .logo-box.delivered {
            background-color: #03714f;
        }

        .text-box {
            display: flex;
            flex-direction: column;
        }

        .stat-title {
            font-size: 14px;
            color: #666;
        }

        .stat-value {
            font-size: 24px;
            font-weight: 700;
        }

        .table-div {
            overflow-x: auto;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            padding: 10px;
        }

        .table th,
        .table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        .table th {
            background-color: #f2f2f2;
            font-size: 14px;
            font-weight: 500;
            color: #2ca5d6;
            text-transform: capitalize;
        }

        .table td {
            font-size: 14px;
        }

        .table tbody tr:hover {
            background-color: #f1f1f1;
        }

        .status-badge {
            border-radius: 20px;
            padding: 4px 10px;
            font-size: 12px;
            font-weight: bold;
            color: #fff;
        }

        .status-badge.delivered {
            background-color: #4CAF50;
        }

        .status-badge.pending {
            background-color: #FFC107;
        }

        .status-badge.processing {
            background-color: #2196F3;
        }

        .status-badge.cancel {
            background-color: #F44336;
        }

        .status-badge.active {
            background-color: #4CAF50;
        }

        .status-badge.inactive {
            background-color: #F44336;
        }

        .pagination-container {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-top: 20px;
        }

        .pagination-button {
            background-color: #fff;
            border: 1px solid #ddd;
            padding: 8px 12px;
            border-radius: 5px;
            margin: 0 5px;
            cursor: pointer;
        }

        .pagination-button:disabled {
            cursor: not-allowed;
            opacity: 0.5;
        }

        .pagination-text {
            margin: 0 10px;
            font-size: 14px;
        }
    </style>

    <div class="dashboard-container">
        <div class="cards-container">
            <div class="card" style="background-color: #00796b;">
                <p class="card-title">User Registrations Over Time</p>
                <p class="card-value">Today: {{ $todayUsers }} , Total: {{ $totalUsers }}</p>
            </div>
            <div class="card" style="background-color: #ffa726;">
                <p class="card-title">Total Bookings</p>
                <p class="card-value">Today: {{ $todayBookings }} , Total: {{ $totalBookings }}</p>
            </div>

            <div class="card" style="background-color: #42a5f5;">
                <p class="card-title">Total Payment</p>
                <p class="card-value">Total: ₹{{ number_format($overallPayments->total ?? 0) }}</p>
                <p class="card-detail">
                    Wallet: ₹{{ number_format($overallPayments->wallet_total ?? 0) }},
                    UPI: ₹{{ number_format($overallPayments->upi_total ?? 0) }}
                </p>
            </div>

            <div class="card" style="background-color: #26c6da;">
                <p class="card-title">Current Month Payment</p>
                <p class="card-value">Total: ₹{{ number_format($currentMonthPayments->total ?? 0) }}</p>
                <p class="card-detail">
                    Wallet: ₹{{ number_format($currentMonthPayments->wallet_total ?? 0) }},
                    UPI: ₹{{ number_format($currentMonthPayments->upi_total ?? 0) }}
                </p>
            </div>



            <div class="card" style="background-color: #2e7d32;">
                <p class="card-title">Total Partner</p>
                <p class="card-value">Today: {{ $todayPartners }} , Total: {{ $totalPartners }}</p>
            </div>
        </div>

        <div class="stats-container">
            <div class="stat-box">
                <div class="logo-box processing">
                    <!-- Icon: Shopping Cart -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="feather feather-shopping-cart">
                        <circle cx="9" cy="21" r="1"></circle>
                        <circle cx="20" cy="21" r="1"></circle>
                        <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
                    </svg>
                </div>
                <div class="text-box">
                    <p class="stat-title">Confirmed Booking</p>
                    <p class="stat-value" style="color: #0a64f8;">{{ $confirmedTotal }}</p>
                </div>
            </div>

            <div class="stat-box">
                <div class="logo-box cancel">
                    <!-- Icon: Times Circle -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="feather feather-x-circle">
                        <circle cx="12" cy="12" r="10"></circle>
                        <line x1="15" y1="9" x2="9" y2="15"></line>
                        <line x1="9" y1="9" x2="15" y2="15"></line>
                    </svg>
                </div>
                <div class="text-box">
                    <p class="stat-title">Completed Booking</p>
                    <p class="stat-value" style="color: #e40707;">{{ $completedTotal }}</p>
                </div>
            </div>

            <div class="stat-box">
                <div class="logo-box pending">
                    <!-- Icon: Hourglass Half -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="feather feather-hourglass">
                        <path d="M14.5 10a4 4 0 0 0-4-4H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h6.5a4 4 0 0 0 4-4v-4z"></path>
                        <path d="M22 17h-8.5a4 4 0 0 0-4-4v-4a4 4 0 0 0 4-4H22"></path>
                    </svg>
                </div>
                <div class="text-box">
                    <p class="stat-title">Pending Booking</p>
                    <p class="stat-value" style="color: #e19903;">{{ $pendingTotal }}</p>
                </div>
            </div>

            <div class="stat-box">
                <div class="logo-box delivered">
                    <!-- Icon: Check Circle -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                        class="feather feather-check-circle">
                        <path d="M22 11.08V12a10 10 0 1 1-5.93-8.08"></path>
                        <polyline points="22 4 12 14.01 9 11.01"></polyline>
                    </svg>
                </div>
                <div class="text-box">
                    <p class="stat-title">Cancelled Booking</p>
                    <p class="stat-value" style="color: #03714f;">{{ $cancelledTotal }}</p>
                </div>
            </div>
        </div>


        <h2 class="text-xl font-bold mb-4">Latest Orders</h2>
        <div class="table-div">
            <table class="table">
                <thead>
                    <tr>
                        <th>Booking Id</th>
                        <th>Date</th>
                        <th>User Name</th>
                        <th>Time Slot</th>
                        <th>Price</th>
                        <th>Status</th>
                        <th>Created At</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($latestBookings as $b)
                        @php
                            $start = \Carbon\Carbon::parse($b->time);
                            $end = (clone $start)->addHour(); // assume 1-hour slot
                            $labelMap = [
                                'completed' => 'Delivered',
                                'confirmed' => 'Confirmed',
                                'pending' => 'Pending',
                                'cancelled' => 'Cancelled',
                            ];
                            $classMap = [
                                'completed' => 'delivered',
                                'confirmed' => 'processing',
                                'pending' => 'pending',
                                'cancelled' => 'cancelled',
                            ];
                            $label = $labelMap[$b->status] ?? ucfirst($b->status);
                            $badge = $classMap[$b->status] ?? 'pending';
                        @endphp
                        <tr>
                            <td>{{ $b->booking_id }}</td>
                            <td>{{ \Carbon\Carbon::parse($b->date)->format('d M y') }}</td>
                            <td>{{ $b->user->name ?? 'N/A' }}</td>
                            <td>{{ $start->format('h:i A') }} - {{ $end->format('h:i A') }}</td>
                            <td>₹{{ number_format($b->amount, 2) }}</td>
                            <td><span class="status-badge {{ $badge }}">{{ $label }}</span></td>
                            <td>{{ $b->created_at?->format('d M y') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center">No recent bookings</td>
                        </tr>
                    @endforelse
                </tbody>

            </table>
        </div>

        <h2 class="text-xl font-bold mt-8 mb-4">Latest Referrals</h2>
        <div class="table-div">
            <table class="table">
                <thead>
                    <tr>
                        <th>Referral Code (used)</th>
                        <th>Referrer Name (whose code)</th>
                        <th>Referred Name (who used)</th>
                        <th>User Mobile No</th>
                        <th>Referral Mobile No</th>
                        <th>Coins (User | Referrer)</th>
                        <th>Created At</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($referrals as $row)
                        <tr>
                            <td>{{ $row->referral_code }}</td>
                            <td>{{ $row->referrer_name ?? 'N/A' }}</td>
                            <td>{{ $row->referred_name }}</td>
                            <td>{{ $row->user_mobile }}</td>
                            <td>{{ $row->referral_mobile ?? 'N/A' }}</td>
                            <td>{{ number_format($row->child_coins, 2) }} | {{ number_format($row->parent_coins, 2) }}
                            </td>
                            <td>{{ \Carbon\Carbon::parse($row->created_at)->format('d M y') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center">No referral data</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>

        </div>
    </div>
@endsection