@extends('layouts.app')

@section('content')
    <div class="bg-gray-50 min-h-screen">
        <div class="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
            <div class="sm:flex sm:items-center sm:justify-between pb-6 border-b-2 border-gray-200">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900">🕒 Riwayat Transaksi</h1>
                    <p class="text-gray-600 mt-1">Pantau dan kelola riwayat transaksi penjualan.</p>
                </div>

                {{-- Filter Form --}}
                <form action="{{ route('transactions.index') }}" method="GET"
                    class="mt-4 sm:mt-0 flex flex-col sm:flex-row gap-2">
                    <input type="text" name="search" value="{{ request('search') }}"
                        placeholder="Cari nota / customer / no pesanan"
                        class="w-full sm:w-64 rounded-lg border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                    <label class="text-xs font-medium text-gray-700 sm:hidden">Mulai Tanggal</label>
                    <input type="date" name="start_date" value="{{ request('start_date') }}"
                        class="w-full sm:w-auto rounded-lg border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 text-sm">

                    <span class="hidden sm:inline-flex items-center text-gray-500">-</span>

                    <label class="text-xs font-medium text-gray-700 sm:hidden">Sampai Tanggal</label>
                    <input type="date" name="end_date" value="{{ request('end_date') }}"
                        class="w-full sm:w-auto rounded-lg border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 text-sm">

                    <select name="status"
                        class="w-full sm:w-auto rounded-lg border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                        <option value="">Semua Status</option>
                        <option value="pending" @selected(request('status') == 'pending')>Pending</option>
                        <option value="completed" @selected(request('status') == 'completed')>Sukses</option>
                        <option value="cancelled" @selected(request('status') == 'cancelled')>Dibatalkan</option>
                    </select>
                    <button type="submit"
                        class="w-full sm:w-auto px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 text-sm font-medium">Filter</button>
                    @if(request()->anyFilled(['search', 'start_date', 'end_date', 'status']))
                        <a href="{{ route('transactions.index') }}"
                            class="w-full sm:w-auto px-4 py-2 bg-white text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50 text-center text-sm font-medium">Reset</a>
                    @endif
                </form>
            </div>

            @if(session('success'))
                <div class="mt-6 bg-green-50 border border-green-200 text-sm text-green-700 px-4 py-3 rounded-lg shadow">
                    {{ session('success') }}
                </div>
            @endif
            @if(session('error'))
                <div class="mt-6 bg-red-50 border border-red-200 text-sm text-red-700 px-4 py-3 rounded-lg shadow">
                    {{ session('error') }}
                </div>
            @endif

            <div class="mt-8">
                <div class="bg-white rounded-xl shadow-md border border-gray-200 overflow-hidden">
                    <div class="space-y-4 p-4 md:hidden">
                        @forelse($transactions as $transaction)
                            <div class="rounded-2xl border border-gray-200 p-4 shadow-sm">
                                <div class="flex items-start justify-between gap-3">
                                    <div class="min-w-0">
                                        <a href="{{ route('transactions.show', $transaction) }}"
                                            class="text-sm font-semibold text-indigo-600 hover:underline">
                                            {{ $transaction->transaction_code }}
                                        </a>
                                        @if($transaction->order_type === 'booking')
                                            <div class="mt-1">
                                                <span
                                                    class="inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-semibold text-amber-700">
                                                    BOOKING {{ $transaction->booking_code ? '• ' . $transaction->booking_code : '' }}
                                                </span>
                                            </div>
                                        @endif
                                        <p class="mt-2 text-xs text-gray-500">{{ $transaction->created_at->isoFormat('D MMM YYYY HH:mm') }}</p>
                                        @php $orderNumbers = $transaction->items->pluck('order_number')->filter()->unique()->values(); @endphp
                                        @if($orderNumbers->isNotEmpty())
                                            <p class="mt-2 text-xs text-orange-600">No. Pesanan: {{ $orderNumbers->take(2)->join(', ') }}{{ $orderNumbers->count() > 2 ? ' +' . ($orderNumbers->count() - 2) : '' }}</p>
                                        @endif
                                    </div>
                                    <div class="text-right">
                                        <p class="text-sm font-bold text-gray-900">Rp {{ number_format($transaction->total_amount, 0, ',', '.') }}</p>
                                        <p class="text-xs text-gray-500 capitalize">{{ $transaction->payment_method }}</p>
                                    </div>
                                </div>

                                <div class="mt-4 grid grid-cols-2 gap-3 text-sm">
                                    <div>
                                        <p class="text-[11px] font-semibold uppercase tracking-wide text-gray-400">Kasir</p>
                                        <p class="mt-1 text-gray-900">{{ $transaction->user->name ?? '-' }}</p>
                                    </div>
                                    <div>
                                        <p class="text-[11px] font-semibold uppercase tracking-wide text-gray-400">Status</p>
                                        <div class="mt-1">
                                            @if($transaction->status == 'pending')
                                                <span class="inline-flex items-center rounded-full bg-yellow-100 px-2.5 py-1 text-xs font-semibold text-yellow-700">
                                                    Pending{{ $transaction->payment_status == 'partial' ? ' • DP' : '' }}
                                                </span>
                                            @elseif($transaction->status == 'completed')
                                                <span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-1 text-xs font-semibold text-green-700">Sukses</span>
                                            @else
                                                <span class="inline-flex items-center rounded-full bg-red-100 px-2.5 py-1 text-xs font-semibold text-red-700">Dibatalkan</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <div class="mt-4 flex flex-wrap gap-2">
                                    <a href="{{ route('transactions.show', $transaction) }}"
                                        class="inline-flex items-center rounded-lg border border-indigo-200 bg-indigo-50 px-3 py-2 text-sm font-medium text-indigo-700">
                                        Detail
                                    </a>
                                    <a href="{{ route('transactions.print-invoice', ['transaction' => $transaction->id, 't' => time()]) }}"
                                        target="_blank"
                                        class="inline-flex items-center rounded-lg border border-green-200 bg-green-50 px-3 py-2 text-sm font-medium text-green-700">
                                        Cetak
                                    </a>
                                    <a href="{{ route('transactions.print-receipt', ['transaction' => $transaction->id, 't' => time()]) }}"
                                        target="_blank"
                                        class="inline-flex items-center rounded-lg border border-sky-200 bg-sky-50 px-3 py-2 text-sm font-medium text-sky-700">
                                        Cetak Ulang Struk
                                    </a>
                                    @if(auth()->user()->role === 'admin' && $transaction->status !== 'cancelled')
                                        <button type="button"
                                            onclick="confirmVoid('{{ $transaction->transaction_code }}', '{{ route('transactions.destroy', $transaction) }}')"
                                            class="inline-flex items-center rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm font-medium text-red-700">
                                            Batalkan
                                        </button>
                                    @endif
                                </div>
                            </div>
                        @empty
                            <div class="px-2 py-12 text-center text-gray-500">Tidak ada data transaksi ditemukan.</div>
                        @endforelse
                    </div>

                    <div class="hidden md:block overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th
                                        class="px-2 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        No. Nota</th>
                                    <th
                                        class="px-2 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        Tanggal</th>
                                    <th
                                        class="px-2 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        Kasir</th>
                                    <th
                                        class="px-2 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        Total</th>
                                    <th
                                        class="px-2 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        Metode</th>
                                    <th
                                        class="px-2 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        Status</th>
                                    <th class="relative px-2 py-3"><span class="sr-only">Aksi</span></th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @forelse($transactions as $transaction)
                                    <tr class="hover:bg-gray-50 transition-colors duration-200">
                                        <td class="px-2 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">
                                            <a href="{{ route('transactions.show', $transaction) }}" class="hover:underline">
                                                {{ $transaction->transaction_code }}
                                            </a>
                                            @if($transaction->order_type === 'booking')
                                                <div class="mt-1">
                                                    <span
                                                        class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-semibold bg-amber-100 text-amber-700">
                                                        BOOKING {{ $transaction->booking_code ? '• ' . $transaction->booking_code : '' }}
                                                    </span>
                                                </div>
                                            @endif
                                            @php $orderNumbers = $transaction->items->pluck('order_number')->filter()->unique()->values(); @endphp
                                            @if($orderNumbers->isNotEmpty())
                                                <div class="mt-1 text-[11px] text-orange-600">
                                                    Pesanan: {{ $orderNumbers->take(2)->join(', ') }}{{ $orderNumbers->count() > 2 ? ' +' . ($orderNumbers->count() - 2) : '' }}
                                                </div>
                                            @endif
                                        </td>
                                        <td class="px-2 py-4 whitespace-nowrap text-sm text-gray-500">
                                            {{ $transaction->created_at->isoFormat('D MMM YYYY HH:mm') }}
                                        </td>
                                        <td class="px-2 py-4 text-sm text-gray-900">
                                            {{ $transaction->user->name ?? '-' }}
                                        </td>
                                        <td class="px-2 py-4 whitespace-nowrap text-sm font-bold text-gray-900">
                                            Rp {{ number_format($transaction->total_amount, 0, ',', '.') }}
                                        </td>
                                        <td class="px-2 py-4 whitespace-nowrap text-sm text-gray-500 capitalize">
                                            {{ $transaction->payment_method }}
                                        </td>
                                        <td class="px-2 py-4 whitespace-nowrap text-center">
                                            @if($transaction->status == 'pending')
                                                <div class="flex items-center justify-center space-x-1" title="Pending">
                                                    <svg class="w-6 h-6 text-yellow-500" fill="none" stroke="currentColor"
                                                        viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                    </svg>
                                                    @if($transaction->payment_status == 'partial')
                                                        <span
                                                            class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">DP</span>
                                                    @endif
                                                </div>
                                            @elseif($transaction->status == 'completed')
                                                <div class="flex justify-center" title="Sukses">
                                                    <svg class="w-6 h-6 text-green-500" fill="none" stroke="currentColor"
                                                        viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                    </svg>
                                                </div>
                                            @else
                                                <div class="flex justify-center" title="Dibatalkan">
                                                    <svg class="w-6 h-6 text-red-500" fill="none" stroke="currentColor"
                                                        viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z">
                                                        </path>
                                                    </svg>
                                                </div>
                                            @endif
                                        </td>
                                        <td class="px-2 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <div class="flex justify-end space-x-2">
                                                {{-- Detail --}}
                                                <a href="{{ route('transactions.show', $transaction) }}"
                                                    class="text-indigo-600 hover:text-indigo-900 bg-indigo-50 p-2 rounded-lg transition-colors border border-indigo-100 hover:border-indigo-300"
                                                    title="Detail Transaksi">
                                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
                                                        </path>
                                                    </svg>
                                                </a>

                                                {{-- Print --}}
                                                <a href="{{ route('transactions.print-invoice', ['transaction' => $transaction->id, 't' => time()]) }}"
                                                    target="_blank"
                                                    class="text-green-600 hover:text-green-900 bg-green-50 p-2 rounded-lg transition-colors border border-green-100 hover:border-green-300"
                                                    title="Cetak Invoice (A4)">
                                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                            d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z">
                                                        </path>
                                                    </svg>
                                                </a>
                                                <a href="{{ route('transactions.print-receipt', ['transaction' => $transaction->id, 't' => time()]) }}"
                                                    target="_blank"
                                                    class="text-sky-600 hover:text-sky-900 bg-sky-50 p-2 rounded-lg transition-colors border border-sky-100 hover:border-sky-300"
                                                    title="Cetak Ulang Struk">
                                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                            d="M9 17h6m-6-4h6m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h7l5 5v11a2 2 0 01-2 2z">
                                                        </path>
                                                    </svg>
                                                </a>

                                                {{-- Cancel --}}
                                                @if(auth()->user()->role === 'admin' && $transaction->status !== 'cancelled')
                                                    <button type="button"
                                                        onclick="confirmVoid('{{ $transaction->transaction_code }}', '{{ route('transactions.destroy', $transaction) }}')"
                                                        class="text-red-600 hover:text-red-900 bg-red-50 p-2 rounded-lg transition-colors border border-red-100 hover:border-red-300"
                                                        title="Batalkan Transaksi">
                                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                                d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
                                                            </path>
                                                        </svg>
                                                    </button>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="px-2 py-12 text-center text-gray-500">
                                            Tidak ada data transaksi ditemukan.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="mt-4">
                    {{ $transactions->withQueryString()->links() }}
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        // Void / Cancel Prompt
        function confirmVoid(code, url) {
            Swal.fire({
                title: 'Batalkan Transaksi #' + code + '?',
                text: "Riwayat tetap tersimpan, stok dikembalikan, dan laporan omzet/jumlah transaksi akan menyesuaikan. Aksi ini tidak dapat dibatalkan!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'Ya, Batalkan!',
                cancelButtonText: 'Kembali'
            }).then((result) => {
                if (result.isConfirmed) {
                    const form = document.getElementById('void-form');
                    form.action = url;
                    form.submit();
                }
            })
        }
    </script>
    <form id="void-form" method="POST" class="hidden">
        @csrf
        @method('DELETE')
    </form>
@endpush