@extends('admin.layout.content')

@section('content')
<div class="content-manager-container px-3 py-4">
    <style>
        .edit-card {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            padding: 24px;
        }
        .edit-card .info-row {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 10px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .edit-card .info-row:last-child {
            border-bottom: none;
        }
        .edit-card .info-label {
            min-width: 140px;
            color: #6b7280;
            font-size: 0.875rem;
        }
        .edit-card .info-value {
            font-weight: 600;
            color: #1f2937;
        }
        .detail-table th {
            background: #f8fafc;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #6b7280;
        }
        .detail-table td {
            font-size: 0.9rem;
        }
        @media (max-width: 575.98px) {
            .edit-card {
                padding: 16px;
            }
            .edit-card .info-row {
                flex-direction: column;
                gap: 4px;
            }
            .edit-card .info-label {
                min-width: unset;
            }
        }
    </style>

    {{-- Flash Messages --}}
    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show flash-alert" role="alert">
            <i class="material-symbols-outlined align-middle me-1">check_circle</i> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show flash-alert" role="alert">
            <i class="material-symbols-outlined align-middle me-1">error</i> {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- Header --}}
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center gap-3 mb-4">
        <div>
            <h2 class="content-manager-title h3 mb-1">
                <span class="material-symbols-outlined align-middle me-1" style="font-size: 28px;">edit</span>
                Edit Transaksi {{ $type === 'offline' ? 'Offline (POS)' : 'Online (E-Commerce)' }}
            </h2>
            <p class="text-muted mb-0">Perbarui status transaksi</p>
        </div>
        <a href="{{ route('admin.history.index', ['code' => session('admin_route_code')]) }}" class="btn btn-modern-secondary d-inline-flex align-items-center gap-1">
            <span class="material-symbols-outlined" style="font-size: 18px;">arrow_back</span> Kembali
        </a>
    </div>

    {{-- Detail Transaksi --}}
    <div class="edit-card mb-4">
        <h6 class="fw-bold mb-3 d-flex align-items-center gap-2">
            <span class="material-symbols-outlined fs-5">receipt_long</span> Informasi Transaksi
        </h6>
        <div class="row g-3">
            @if ($type === 'offline')
                <div class="col-12 col-md-6">
                    <div class="info-row">
                        <span class="info-label">No. Invoice</span>
                        <span class="info-value">{{ $transaction->invoice_number }}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="info-row">
                        <span class="info-label">Tanggal</span>
                        <span class="info-value">{{ $transaction->created_at ? $transaction->created_at->format('d/m/Y H:i') : '-' }}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="info-row">
                        <span class="info-label">Kasir</span>
                        <span class="info-value">{{ $transaction->user->username ?? $transaction->user->full_name ?? '-' }}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="info-row">
                        <span class="info-label">Metode Bayar</span>
                        <span class="info-value">{{ $transaction->payment_method ?? 'Tunai' }}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="info-row">
                        <span class="info-label">Total</span>
                        <span class="info-value text-success fw-bold">Rp {{ number_format($transaction->total_payment, 0, ',', '.') }}</span>
                    </div>
                </div>
            @else
                <div class="col-12 col-md-6">
                    <div class="info-row">
                        <span class="info-label">Invoice</span>
                        <span class="info-value">{{ $transaction->invoice_number }}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="info-row">
                        <span class="info-label">Tanggal</span>
                        <span class="info-value">{{ $transaction->created_at ? $transaction->created_at->format('d/m/Y H:i') : '-' }}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="info-row">
                        <span class="info-label">Pembeli</span>
                        <span class="info-value">{{ $transaction->user->username ?? ($transaction->user->profile->full_name ?? 'Guest') }}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="info-row">
                        <span class="info-label">Metode Bayar</span>
                        <span class="info-value">{{ $transaction->payment_method ?? '-' }}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="info-row">
                        <span class="info-label">Total</span>
                        <span class="info-value text-success fw-bold">Rp {{ number_format($transaction->total_payment, 0, ',', '.') }}</span>
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="info-row">
                        <span class="info-label">No. Resi (Tracking)</span>
                        <span class="info-value">{{ $transaction->tracking_number ?? '-' }}</span>
                    </div>
                </div>
                @if ($transaction->address)
                    <div class="col-12 col-md-6">
                        <div class="info-row">
                            <span class="info-label">Nama Penerima</span>
                            <span class="info-value">{{ $transaction->address->recipient_name ?? '-' }}</span>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="info-row">
                            <span class="info-label">No. Telepon</span>
                            <span class="info-value">{{ $transaction->address->recipient_phone ?? '-' }}</span>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="info-row">
                            <span class="info-label">Alamat Lengkap</span>
                            <span class="info-value">
                                {{ $transaction->address->full_address ?? '-' }}
                            </span>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="info-row">
                            <span class="info-label">Kelurahan/Desa</span>
                            <span class="info-value">{{ $transaction->address->village ?? '-' }}</span>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="info-row">
                            <span class="info-label">Kecamatan</span>
                            <span class="info-value">{{ $transaction->address->district ?? '-' }}</span>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="info-row">
                            <span class="info-label">Kota</span>
                            <span class="info-value">{{ $transaction->address->city ?? '-' }}</span>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="info-row">
                            <span class="info-label">Provinsi</span>
                            <span class="info-value">{{ $transaction->address->province ?? '-' }}</span>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="info-row">
                            <span class="info-label">Kode Pos</span>
                            <span class="info-value">{{ $transaction->address->postal_code ?? '-' }}</span>
                        </div>
                    </div>
                    @if ($transaction->address->address_label)
                        <div class="col-12 col-md-6">
                            <div class="info-row">
                                <span class="info-label">Label Alamat</span>
                                <span class="info-value">{{ $transaction->address->address_label }}</span>
                            </div>
                        </div>
                    @endif
                @endif
            @endif
        </div>
    </div>

    {{-- Rincian Produk --}}
    <div class="edit-card mb-4">
        <h6 class="fw-bold mb-3 d-flex align-items-center gap-2">
            <span class="material-symbols-outlined fs-5">shopping_bag</span> Rincian Produk
        </h6>
        <div class="table-responsive">
            <table class="table table-hover table-bordered align-middle detail-table mb-0">
                <thead>
                    <tr>
                        <th>Produk</th>
                        <th class="text-center">Qty</th>
                        @if ($type === 'offline' && $transaction->payment_method !== 'CASH')
                            <th class="text-center">Berat</th>
                        @endif
                        <th class="text-end">Harga</th>
                        <th class="text-end">Subtotal</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($transaction->details as $detail)
                        @php
                            $pkg = $detail->package;
                            $productName = $pkg->product->product_name ?? $pkg->package_name ?? '-';
                            $weight = $pkg->weight_in_kg ?? '-';
                            $unit = $pkg->unit->unit_abbreviation ?? $pkg->unit->unit_name ?? '';
                            $weightDisplay = ($weight !== '-' && $unit) ? $weight . ' ' . $unit : ($weight !== '-' ? $weight : '-');
                            $subtotal = $detail->quantity * $detail->unit_price;
                        @endphp
                        <tr>
                            <td class="fw-semibold">{{ $productName }}</td>
                            <td class="text-center">{{ $detail->quantity }}</td>
                            @if ($type === 'offline' && $transaction->payment_method !== 'CASH')
                                <td class="text-center">{{ $weightDisplay }}</td>
                            @endif
                            <td class="text-end">Rp {{ number_format($detail->unit_price, 0, ',', '.') }}</td>
                            <td class="text-end">Rp {{ number_format($subtotal, 0, ',', '.') }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="{{ $type === 'offline' && $transaction->payment_method !== 'CASH' ? 5 : 4 }}" class="text-center text-muted py-3">Tidak ada detail produk</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Form Update Status --}}
    <div class="edit-card">
        <h6 class="fw-bold mb-3 d-flex align-items-center gap-2">
            <span class="material-symbols-outlined fs-5">edit_note</span> Perbarui Status
        </h6>
        <form action="{{ route('admin.history.update.' . $type, $transaction->getKey()) }}" method="POST">
            @csrf
            @method('PUT')

            @if ($type === 'offline')
                {{-- Offline: hanya update QRIS status --}}
                @if ($transaction->payment_method !== 'CASH')
                    <div class="mb-4">
                        <label class="form-label text-muted mb-2">ID Transaksi Midtrans</label>
                        <input type="text" class="form-control" value="{{ $transaction->gateway_transaction_id ?? '-' }}" readonly>
                    </div>
                    <!-- <div class="mb-3">
                        <label for="midtrans_status" class="form-label fw-semibold">Status Pembayaran Non Tunai</label>
                        <select name="midtrans_status" id="midtrans_status" class="form-select">
                            <option value="PENDING" {{ ($transaction->midtrans_status ?? '') === 'PENDING' ? 'selected' : '' }}>Pending</option>
                            <option value="SUCCESS" {{ ($transaction->midtrans_status ?? '') === 'SUCCESS' ? 'selected' : '' }}>Berhasil</option>
                            <option value="FAILED" {{ ($transaction->midtrans_status ?? '') === 'FAILED' ? 'selected' : '' }}>Gagal</option>
                        </select>
                        @error('midtrans_status')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div> -->
                @else
                    <div class="alert alert-info d-flex align-items-center gap-2 mb-0">
                        <span class="material-symbols-outlined fs-5">info</span>
                        Transaksi tunai tidak memiliki status yang dapat diubah.
                    </div>
                @endif
            @else
                {{-- Online: update payment_status & order_status --}}
                <div class="row g-3">
                    <div class="col-12 col-md-6">
                        <label for="payment_status" class="form-label fw-semibold">Status Pembayaran</label>
                        <select name="payment_status" id="payment_status" class="form-select">
                            <option value="unpaid" {{ $transaction->payment_status === 'unpaid' ? 'selected' : '' }}>Belum Bayar</option>
                            <option value="paid" {{ $transaction->payment_status === 'paid' ? 'selected' : '' }}>Lunas</option>
                            <option value="expired" {{ $transaction->payment_status === 'expired' ? 'selected' : '' }}>Kedaluwarsa</option>
                            <option value="failed" {{ $transaction->payment_status === 'failed' ? 'selected' : '' }}>Gagal</option>
                        </select>
                        @error('payment_status')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-12 col-md-6">
                        <label for="order_status" class="form-label fw-semibold">Status Pesanan</label>
                        <select name="order_status" id="order_status" class="form-select">
                            <option value="pending" {{ $transaction->order_status === 'pending' ? 'selected' : '' }}>Menunggu</option>
                            <option value="processing" {{ $transaction->order_status === 'processing' ? 'selected' : '' }}>Diproses</option>
                            <option value="shipped" {{ $transaction->order_status === 'shipped' ? 'selected' : '' }}>Dikirim</option>
                            <option value="completed" {{ $transaction->order_status === 'completed' ? 'selected' : '' }}>Selesai</option>
                            <option value="cancelled" {{ $transaction->order_status === 'cancelled' ? 'selected' : '' }}>Dibatalkan</option>
                        </select>
                        @error('order_status')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-12">
                        <label for="tracking_number" class="form-label fw-semibold">Nomor Resi (Tracking Number)</label>
                        <input type="text" name="tracking_number" id="tracking_number" class="form-control" value="{{ old('tracking_number', $transaction->tracking_number) }}" placeholder="Masukkan nomor resi pengiriman (misal: JNE, J&T, dll)...">
                        @error('tracking_number')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            @endif

            <div class="d-flex justify-content-end gap-2 mt-4">
                <a href="{{ route('admin.history.index', ['code' => session('admin_route_code')]) }}" class="btn btn-modern-secondary px-4">Batal</a>
                @if ($type === 'offline' && $transaction->payment_method !== 'CASH' || $type === 'online')
                    <button type="submit" class="btn btn-success px-4">
                        <span class="material-symbols-outlined align-middle me-1" style="font-size: 18px;">save</span> Simpan
                    </button>
                @endif
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.flash-alert').forEach(alert => {
        setTimeout(() => { bootstrap.Alert.getOrCreateInstance(alert)?.close(); }, 5000);
    });
});
</script>
@endsection