@include('layouts.navigation')

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Poppins", sans-serif;
    }

    body {
        background: #f9fafb;
    }

    .container {
        max-width: 1400px;
        margin: 40px auto;
        padding: 0 20px;
    }

    .page-header {
        background: white;
        padding: 32px;
        border-radius: 16px;
        margin-bottom: 24px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .page-header h1 {
        font-size: 32px;
        font-weight: 800;
        color: #111;
        margin-bottom: 8px;
    }

    .page-header p {
        color: #666;
        font-size: 15px;
    }

    .filters {
        display: flex;
        gap: 12px;
        margin-top: 20px;
        flex-wrap: wrap;
    }

    .filter-btn {
        padding: 10px 20px;
        border-radius: 8px;
        border: 2px solid #e5e7eb;
        background: white;
        color: #666;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        transition: 0.3s;
        text-decoration: none;
        display: inline-block;
    }

    .filter-btn:hover {
        border-color: #dc2626;
        color: #dc2626;
    }

    .filter-btn.active {
        background: #dc2626;
        color: white;
        border-color: #dc2626;
    }

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

    .stat-card {
        background: white;
        padding: 24px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .stat-label {
        font-size: 13px;
        color: #666;
        margin-bottom: 8px;
    }

    .stat-value {
        font-size: 28px;
        font-weight: 800;
        color: #111;
    }

    .stat-pending {
        color: #f59e0b;
    }

    .stat-confirmed {
        color: #3b82f6;
    }

    .stat-paid {
        color: #10b981;
    }

    .transactions-table {
        background: white;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    thead {
        background: #dc2626;
        color: white;
    }

    th {
        padding: 16px;
        text-align: left;
        font-weight: 600;
        font-size: 14px;
    }

    tbody tr {
        border-bottom: 1px solid #f3f4f6;
    }

    tbody tr:hover {
        background: #f9fafb;
    }

    td {
        padding: 16px;
        font-size: 14px;
    }

    .receipt-number {
        font-weight: 700;
        color: #dc2626;
        font-size: 15px;
    }

    .type-badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
    }

    .type-order {
        background: #dbeafe;
        color: #1e40af;
    }

    .type-reservation {
        background: #fef3c7;
        color: #92400e;
    }

    .status-badge {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
    }

    .status-pending {
        background: #fee2e2;
        color: #991b1b;
    }

    .status-confirmed {
        background: #dbeafe;
        color: #1e40af;
    }

    .status-paid {
        background: #d1fae5;
        color: #065f46;
    }

    .status-cancelled {
        background: #f3f4f6;
        color: #6b7280;
    }

    .btn-detail {
        background: #dc2626;
        color: white;
        padding: 8px 16px;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
        font-size: 13px;
        display: inline-block;
        transition: 0.3s;
    }

    .btn-detail:hover {
        background: #b91c1c;
    }

    .empty-state {
        text-align: center;
        padding: 80px 20px;
    }

    .empty-state h3 {
        font-size: 20px;
        color: #666;
        margin-bottom: 8px;
    }

    .empty-state p {
        color: #999;
    }

    .pagination {
        display: flex;
        justify-content: center;
        gap: 8px;
        padding: 24px;
    }

    .pagination a,
    .pagination span {
        padding: 8px 12px;
        border-radius: 6px;
        text-decoration: none;
        color: #666;
    }

    .pagination a:hover {
        background: #fee2e2;
        color: #dc2626;
    }

    .pagination .active {
        background: #dc2626;
        color: white;
    }
</style>

<div class="container">
    <div class="page-header">
        <h1>📋 Kelola Pesanan & Reservasi</h1>
        <p>Semua pesanan dan reservasi dari customer</p>

        <div class="filters">
            <a href="{{ route('admin.transactions', ['type' => 'all', 'status' => request('status', 'all')]) }}"
                class="filter-btn {{ request('type', 'all') == 'all' ? 'active' : '' }}">
                Semua
            </a>
            <a href="{{ route('admin.transactions', ['type' => 'order', 'status' => request('status', 'all')]) }}"
                class="filter-btn {{ request('type') == 'order' ? 'active' : '' }}">
                Pesanan
            </a>
            <a href="{{ route('admin.transactions', ['type' => 'reservation', 'status' => request('status', 'all')]) }}"
                class="filter-btn {{ request('type') == 'reservation' ? 'active' : '' }}">
                Reservasi
            </a>
            <span style="width: 1px; background: #e5e7eb; margin: 0 8px;"></span>
            <a href="{{ route('admin.transactions', ['status' => 'pending', 'type' => request('type', 'all')]) }}"
                class="filter-btn {{ request('status') == 'pending' ? 'active' : '' }}">
                Pending
            </a>
            <a href="{{ route('admin.transactions', ['status' => 'confirmed', 'type' => request('type', 'all')]) }}"
                class="filter-btn {{ request('status') == 'confirmed' ? 'active' : '' }}">
                Dikonfirmasi
            </a>
            <a href="{{ route('admin.transactions', ['status' => 'paid', 'type' => request('type', 'all')]) }}"
                class="filter-btn {{ request('status') == 'paid' ? 'active' : '' }}">
                Lunas
            </a>
        </div>
    </div>

    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-label">Pending</div>
            <div class="stat-value stat-pending">{{ \App\Models\Transaction::where('status', 'pending')->count() }}
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-label">Dikonfirmasi</div>
            <div class="stat-value stat-confirmed">{{ \App\Models\Transaction::where('status', 'confirmed')->count() }}
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-label">Lunas</div>
            <div class="stat-value stat-paid">{{ \App\Models\Transaction::where('status', 'paid')->count() }}</div>
        </div>
        <div class="stat-card">
            <div class="stat-label">Total Hari Ini</div>
            <div class="stat-value">{{ \App\Models\Transaction::whereDate('created_at', today())->count() }}</div>
        </div>
    </div>

    <div class="transactions-table">
        @if($transactions->isEmpty())
            <div class="empty-state">
                <h3>Belum Ada Transaksi</h3>
                <p>Transaksi akan muncul di sini</p>
            </div>
        @else
            <table>
                <thead>
                    <tr>
                        <th>Resi</th>
                        <th>Customer</th>
                        <th>Tipe</th>
                        <th>Tanggal</th>
                        <th>Total</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($transactions as $transaction)
                        <tr>
                            <td>
                                <div class="receipt-number">{{ $transaction->receipt_number }}</div>
                                @if($transaction->type == 'reservation')
                                    <small style="color: #666;">
                                        🪑 {{ $transaction->table->name ?? $transaction->table->table_number }}
                                    </small>
                                @endif
                            </td>
                            <td>
                                <div style="font-weight: 600;">{{ $transaction->customer_name ?? $transaction->user->name }}
                                </div>
                                @if($transaction->customer_phone)
                                    <small style="color: #666;">{{ $transaction->customer_phone }}</small>
                                @endif
                            </td>
                            <td>
                                <span class="type-badge type-{{ $transaction->type }}">
                                    {{ $transaction->type == 'order' ? 'Pesanan' : 'Reservasi' }}
                                </span>
                            </td>
                            <td>
                                <div>{{ $transaction->created_at->format('d M Y') }}</div>
                                <small style="color: #666;">{{ $transaction->created_at->format('H:i') }}</small>
                                @if($transaction->type == 'reservation')
                                    <div style="margin-top: 4px; color: #dc2626; font-weight: 600; font-size: 12px;">
                                        📅 {{ \Carbon\Carbon::parse($transaction->reservation_date)->format('d M') }} -
                                        {{ \Carbon\Carbon::parse($transaction->reservation_time)->format('H:i') }}
                                    </div>
                                @endif
                            </td>
                            <td style="font-weight: 700;">Rp{{ number_format($transaction->total_price, 0, ',', '.') }}</td>
                            <td>
                                <span class="status-badge status-{{ $transaction->status }}">
                                    @if($transaction->status == 'pending')
                                        Pending
                                    @elseif($transaction->status == 'confirmed')
                                        Dikonfirmasi
                                    @elseif($transaction->status == 'paid')
                                        Lunas
                                    @else
                                        Dibatalkan
                                    @endif
                                </span>
                            </td>
                            <td>
                                <a href="{{ route('admin.transactions.show', $transaction->id) }}" class="btn-detail">
                                    Detail
                                </a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>

            <div class="pagination">
                {{ $transactions->links() }}
            </div>
        @endif
    </div>
</div>