@include('layouts.navigation')

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

    body {
        background: #f9fafb;
    }

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

    .back-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #666;
        text-decoration: none;
        margin-bottom: 20px;
        font-weight: 600;
        font-size: 14px;
    }

    .back-btn:hover {
        color: #dc2626;
    }

    .detail-card {
        background: white;
        border-radius: 16px;
        padding: 40px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        margin-bottom: 20px;
    }

    .receipt-header {
        text-align: center;
        padding-bottom: 24px;
        border-bottom: 2px dashed #e5e7eb;
        margin-bottom: 24px;
    }

    .receipt-header h1 {
        color: #dc2626;
        font-size: 28px;
        font-weight: 800;
        margin-bottom: 8px;
    }

    .receipt-number {
        font-size: 20px;
        font-weight: 700;
        color: #111;
        background: #fee2e2;
        padding: 12px 20px;
        border-radius: 8px;
        display: inline-block;
        margin-top: 12px;
    }

    .status-badge {
        display: inline-block;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        margin-top: 12px;
    }

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

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

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

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

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

    .info-box {
        background: #f9fafb;
        padding: 16px;
        border-radius: 8px;
    }

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

    .info-value {
        font-size: 16px;
        font-weight: 600;
        color: #111;
    }

    .section-title {
        font-size: 18px;
        font-weight: 700;
        color: #111;
        margin-bottom: 16px;
        padding-bottom: 8px;
        border-bottom: 2px solid #fee2e2;
    }

    .items-table {
        width: 100%;
        margin-bottom: 24px;
    }

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

    .items-table th {
        background: #f9fafb;
        font-weight: 600;
        font-size: 14px;
        color: #666;
    }

    .menu-image {
        width: 50px;
        height: 50px;
        border-radius: 8px;
        object-fit: cover;
    }

    .total-section {
        background: #fee2e2;
        padding: 20px;
        border-radius: 8px;
        margin-top: 24px;
    }

    .total-row {
        display: flex;
        justify-content: space-between;
        font-size: 24px;
        font-weight: 800;
        color: #dc2626;
    }

    .action-buttons {
        display: flex;
        gap: 12px;
        margin-top: 32px;
        flex-wrap: wrap;
    }

    .btn {
        flex: 1;
        padding: 14px 24px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 15px;
        cursor: pointer;
        border: none;
        transition: 0.3s;
        text-align: center;
        text-decoration: none;
        display: block;
    }

    .btn-confirm {
        background: #3b82f6;
        color: white;
    }

    .btn-confirm:hover {
        background: #2563eb;
    }

    .btn-paid {
        background: #10b981;
        color: white;
    }

    .btn-paid:hover {
        background: #059669;
    }

    .btn-cancel {
        background: #ef4444;
        color: white;
    }

    .btn-cancel:hover {
        background: #dc2626;
    }

    .btn-print {
        background: #6b7280;
        color: white;
    }

    .btn-print:hover {
        background: #4b5563;
    }

    .alert {
        padding: 16px;
        border-radius: 8px;
        margin-bottom: 20px;
        font-weight: 600;
    }

    .alert-success {
        background: #d1fae5;
        color: #065f46;
        border-left: 4px solid #10b981;
    }

    .alert-error {
        background: #fee2e2;
        color: #991b1b;
        border-left: 4px solid #ef4444;
    }

    .cancel-form {
        margin-top: 20px;
        padding: 20px;
        background: #fef2f2;
        border-radius: 8px;
        display: none;
    }

    .cancel-form.show {
        display: block;
    }

    .form-group {
        margin-bottom: 16px;
    }

    .form-label {
        display: block;
        font-weight: 600;
        margin-bottom: 8px;
        color: #111;
    }

    .form-input {
        width: 100%;
        padding: 12px;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        font-size: 14px;
    }
</style>

<div class="container">
    <a href="{{ route('admin.transactions') }}" class="back-btn">
        ← Kembali
    </a>

    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif

    @if(session('error'))
        <div class="alert alert-error">{{ session('error') }}</div>
    @endif

    <div class="detail-card">
        <div class="receipt-header">
            <h1>🏪 Warung Ara</h1>
            <p style="color: #666; font-size: 15px;">Detail
                {{ $transaction->type == 'order' ? 'Pesanan' : 'Reservasi' }}</p>
            <div class="receipt-number">{{ $transaction->receipt_number }}</div>
            <br>
            <span class="status-badge status-{{ $transaction->status }}">
                @if($transaction->status == 'pending')
                    Pending - Menunggu Konfirmasi
                @elseif($transaction->status == 'confirmed')
                    Dikonfirmasi - Siap Bayar
                @elseif($transaction->status == 'paid')
                    Lunas
                @else
                    Dibatalkan
                @endif
            </span>
        </div>

        <div class="section-title">📋 Informasi {{ $transaction->type == 'order' ? 'Pesanan' : 'Reservasi' }}</div>

        <div class="info-grid">
            <div class="info-box">
                <div class="info-label">Tanggal Order</div>
                <div class="info-value">{{ $transaction->created_at->format('d M Y, H:i') }}</div>
            </div>
            <div class="info-box">
                <div class="info-label">Nama Customer</div>
                <div class="info-value">{{ $transaction->customer_name ?? $transaction->user->name }}</div>
            </div>
            @if($transaction->customer_phone)
                <div class="info-box">
                    <div class="info-label">No. Telepon</div>
                    <div class="info-value">{{ $transaction->customer_phone }}</div>
                </div>
            @endif
            @if($transaction->type == 'reservation')
                <div class="info-box">
                    <div class="info-label">🪑 Meja</div>
                    <div class="info-value">{{ $transaction->table->name ?? $transaction->table->table_number }}</div>
                </div>
                <div class="info-box">
                    <div class="info-label">📅 Tanggal Reservasi</div>
                    <div class="info-value">{{ \Carbon\Carbon::parse($transaction->reservation_date)->format('d M Y') }}
                    </div>
                </div>
                <div class="info-box">
                    <div class="info-label">🕐 Jam Reservasi</div>
                    <div class="info-value">{{ \Carbon\Carbon::parse($transaction->reservation_time)->format('H:i') }}</div>
                </div>
            @endif
        </div>

        <div class="section-title">🍽️ Menu yang Dipesan</div>

        <table class="items-table">
            <thead>
                <tr>
                    <th>Menu</th>
                    <th style="text-align: center;">Jumlah</th>
                    <th style="text-align: right;">Harga</th>
                    <th style="text-align: right;">Subtotal</th>
                </tr>
            </thead>
            <tbody>
                @foreach($transaction->items as $item)
                    <tr>
                        <td>
                            <div style="display: flex; align-items: center; gap: 12px;">
                                @if($item->product->image)
                                    <img src="{{ asset('storage/' . $item->product->image) }}" class="menu-image"
                                        alt="{{ $item->product->name }}">
                                @endif
                                <strong>{{ $item->product->name }}</strong>
                            </div>
                        </td>
                        <td style="text-align: center;">{{ $item->qty }}</td>
                        <td style="text-align: right;">Rp{{ number_format($item->subtotal / $item->qty, 0, ',', '.') }}</td>
                        <td style="text-align: right; font-weight: 600;">Rp{{ number_format($item->subtotal, 0, ',', '.') }}
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        <div class="total-section">
            <div class="total-row">
                <span>Total Pembayaran</span>
                <span>Rp{{ number_format($transaction->total_price, 0, ',', '.') }}</span>
            </div>
        </div>

        @if($transaction->cancel_reason)
            <div
                style="background: #fef2f2; padding: 16px; border-radius: 8px; margin-top: 20px; border-left: 4px solid #ef4444;">
                <strong style="color: #991b1b;">Alasan Dibatalkan:</strong><br>
                <span style="color: #7f1d1d;">{{ $transaction->cancel_reason }}</span>
            </div>
        @endif

        @if($transaction->status == 'pending')
            <div class="action-buttons">
                <form action="{{ route('admin.transactions.confirm', $transaction->id) }}" method="POST" style="flex: 1;">
                    @csrf
                    <button type="submit" class="btn btn-confirm" onclick="return confirm('Konfirmasi pesanan ini?')">
                        ✓ Konfirmasi Pesanan
                    </button>
                </form>
                <button type="button" class="btn btn-cancel"
                    onclick="document.getElementById('cancelForm').classList.toggle('show')">
                    ✕ Batalkan
                </button>
            </div>

            <div id="cancelForm" class="cancel-form">
                <form action="{{ route('admin.transactions.cancel', $transaction->id) }}" method="POST">
                    @csrf
                    <div class="form-group">
                        <label class="form-label">Alasan Pembatalan</label>
                        <textarea name="cancel_reason" class="form-input" rows="3"
                            placeholder="Masukkan alasan pembatalan..."></textarea>
                    </div>
                    <button type="submit" class="btn btn-cancel" onclick="return confirm('Yakin batalkan pesanan ini?')">
                        Batalkan Pesanan
                    </button>
                </form>
            </div>
        @elseif($transaction->status == 'confirmed')
            <div class="action-buttons">
                <form action="{{ route('admin.transactions.paid', $transaction->id) }}" method="POST" style="flex: 1;">
                    @csrf
                    <button type="submit" class="btn btn-paid"
                        onclick="return confirm('Konfirmasi pembayaran sudah diterima?')">
                        💰 Pembayaran Diterima
                    </button>
                </form>
                <button onclick="window.print()" class="btn btn-print">🖨️ Cetak</button>
            </div>
        @elseif($transaction->status == 'paid')
            <div class="action-buttons">
                <button onclick="window.print()" class="btn btn-print">🖨️ Cetak Resi</button>
            </div>
        @endif
    </div>
</div>