@extends('layouts.admin')

@section('title', 'Admin Dashboard')

@section('content')

<div class="admin-page-header">
    <h1><i class="bi bi-speedometer2"></i> Dashboard Admin</h1>
</div>

<!-- Statistik -->
<div class="row g-3 mb-4">

    <div class="col-lg-3 col-md-6">
        <div class="stat-card">
            <div class="stat-card-icon">
                <i class="bi bi-people-fill"></i>
            </div>
            <div class="stat-card-label">Total Pengguna</div>
            <div class="stat-card-value">{{ $totalUsers }}</div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="stat-card success">
            <div class="stat-card-icon">
                <i class="bi bi-calendar-check-fill"></i>
            </div>
            <div class="stat-card-label">Total Pemesanan</div>
            <div class="stat-card-value">{{ $totalBookings }}</div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="stat-card warning">
            <div class="stat-card-icon">
                <i class="bi bi-cash-coin"></i>
            </div>
            <div class="stat-card-label">Total Pendapatan</div>
            <div class="stat-card-value">
                Rp {{ number_format($totalRevenue, 0, ',', '.') }}
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6">
        <div class="stat-card danger">
            <div class="stat-card-icon">
                <i class="bi bi-hourglass-split"></i>
            </div>
            <div class="stat-card-label">Update Progress</div>
            <div class="stat-card-value">{{ $totalProgress }}</div>
        </div>
    </div>

</div>


<!-- Status Booking -->
<div class="row g-3 mb-4">

    <div class="col-lg-8">
        <div class="admin-card">
            <div class="admin-card-header">
                <h5 class="mb-0">
                    <i class="bi bi-pie-chart"></i> Status Pemesanan
                </h5>
            </div>

            <div class="admin-card-body">
                <div class="row text-center">

                    <div class="col-md-3">
                        <h3 style="color:#f59e0b;">{{ $pendingBookings }}</h3>
                        <p style="color:#9ca3af;">Pending</p>
                    </div>

                    <div class="col-md-3">
                        <h3 style="color:#3b82f6;">{{ $confirmedBookings }}</h3>
                        <p style="color:#9ca3af;">Confirmed</p>
                    </div>

                    <div class="col-md-3">
                        <h3 style="color:#10b981;">{{ $completedBookings }}</h3>
                        <p style="color:#9ca3af;">Completed</p>
                    </div>

                    <div class="col-md-3">
                        <h3 style="color:#ef4444;">{{ $cancelledBookings }}</h3>
                        <p style="color:#9ca3af;">Cancelled</p>
                    </div>

                </div>
            </div>
        </div>
    </div>


    <!-- Booking per kelas -->
    <div class="col-lg-4">
        <div class="admin-card">
            <div class="admin-card-header">
                <h5 class="mb-0">
                    <i class="bi bi-bar-chart"></i> Pemesanan per Kelas
                </h5>
            </div>

            <div class="admin-card-body">

                @forelse($bookingsByClass as $class)
                    <div class="mb-3">

                        <div class="d-flex justify-content-between mb-2">
                            <span>{{ ucfirst($class->class) }}</span>
                            <strong>{{ $class->total }}</strong>
                        </div>

                        <div class="progress" style="height:6px; background:rgba(255,255,255,0.1);">
                            <div class="progress-bar"
                                 style="width: {{ $totalBookings > 0 ? ($class->total / $totalBookings) * 100 : 0 }}%; background:#3b82f6;">
                            </div>
                        </div>

                    </div>
                @empty
                    <p class="text-center text-muted">Belum ada data</p>
                @endforelse

            </div>
        </div>
    </div>

</div>


<!-- Booking terbaru -->
<div class="row mb-4">
    <div class="col-12">

        <div class="admin-card">

            <div class="admin-card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">
                    <i class="bi bi-list-ul"></i> Pemesanan Terbaru
                </h5>

                <a href="{{ route('admin.bookings.index') }}"
                   class="btn btn-sm btn-admin-primary">
                    Lihat Semua
                </a>
            </div>

            <div class="admin-table">
                <table class="table">

                    <thead>
                        <tr>
                            <th>Kode</th>
                            <th>Pelanggan</th>
                            <th>Rute</th>
                            <th>Tanggal</th>
                            <th>Status</th>
                            <th>Harga</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>

                    <tbody>

                    @forelse($recentBookings as $booking)
                        <tr>

                            <td>
                                <strong>{{ $booking->booking_code }}</strong>
                            </td>

                            <td>
                                {{ $booking->user->name ?? 'N/A' }}
                            </td>

                            <td>
                                {{ $booking->route_from }} → {{ $booking->route_to }}
                            </td>

                            <td>
                                {{ \Carbon\Carbon::parse($booking->departure_date)->format('d M Y') }}
                            </td>

                            <td>
                                <span class="badge"
                                      style="background:
                                      {{ $booking->status === 'completed' ? '#10b981' :
                                         ($booking->status === 'cancelled' ? '#ef4444' :
                                         ($booking->status === 'confirmed' ? '#3b82f6' : '#f59e0b')) }};">
                                    {{ ucfirst($booking->status) }}
                                </span>
                            </td>

                            <td>
                                Rp {{ number_format($booking->price, 0, ',', '.') }}
                            </td>

                            <td>

                                <a href="{{ route('admin.bookings.show', $booking->id) }}"
                                   class="btn btn-sm btn-admin-secondary"
                                   title="Detail">
                                    <i class="bi bi-eye"></i>
                                </a>

                                <a href="{{ route('admin.bookings.edit', $booking->id) }}"
                                   class="btn btn-sm btn-admin-warning"
                                   title="Edit">
                                    <i class="bi bi-pencil"></i>
                                </a>

                            </td>

                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center text-muted py-4">
                                Belum ada pemesanan
                            </td>
                        </tr>
                    @endforelse

                    </tbody>

                </table>
            </div>

        </div>

    </div>
</div>


<!-- Quick Actions -->
<div class="row">
    <div class="col-12">

        <div class="admin-card">

            <div class="admin-card-header">
                <h5 class="mb-0">
                    <i class="bi bi-lightning"></i> Aksi Cepat
                </h5>
            </div>

            <div class="admin-card-body">

                <div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem;">

                    <a href="{{ route('admin.users.create') }}"
                       class="btn btn-admin btn-admin-primary">
                        <i class="bi bi-person-plus"></i>
                        Tambah User
                    </a>

                    <a href="{{ route('admin.bookings.create') }}"
                       class="btn btn-admin btn-admin-success">
                        <i class="bi bi-plus-circle"></i>
                        Tambah Booking
                    </a>

                    <a href="{{ route('admin.users.index') }}"
                       class="btn btn-admin btn-admin-secondary">
                        <i class="bi bi-people"></i>
                        Kelola User
                    </a>

                    <a href="{{ route('admin.bookings.index') }}"
                       class="btn btn-admin btn-admin-secondary">
                        <i class="bi bi-calendar-event"></i>
                        Kelola Booking
                    </a>

                    <a href="{{ route('admin.progress.index') }}"
                       class="btn btn-admin btn-admin-secondary">
                        <i class="bi bi-hourglass-split"></i>
                        Kelola Progress
                    </a>

                </div>

            </div>
        </div>

    </div>
</div>

@endsection