@extends('layouts.admin')

@section('content')
<div class="max-w-7xl mx-auto py-10 px-6">
    <h1 class="text-2xl font-bold mb-6 text-gray-800">Dewan Bookings Management</h1>

    @if (session('success'))
        <div class="bg-green-100 text-green-700 px-4 py-2 rounded mb-4">
            {{ session('success') }}
        </div>
    @elseif (session('error'))
        <div class="bg-red-100 text-red-700 px-4 py-2 rounded mb-4">
            {{ session('error') }}
        </div>
    @endif
    <!--
    <div class="bg-white rounded-lg shadow p-4 mb-6">
        <h3 class="text-lg font-semibold text-gray-700 mb-2">Import Old Records</h3>
        <p class="text-sm text-gray-500 mb-3">
            Upload a CSV or Excel file with old booking records.
        </p>
        <form action="{{ route('admin.dewan-reservations.import') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="flex items-center space-x-3">
                <input type="file" name="file" class="text-sm border rounded p-2" required>
                <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm hover:bg-indigo-700">
                    Upload and Import
                </button>
            </div>
            @error('file')
                <p class="text-red-600 text-sm mt-2">{{ $message }}</p>
            @enderror
        </form>
    </div>-->

    @if($bookings->isEmpty())
        <p class="text-gray-500 italic mb-4">No Dewan bookings yet.</p>
    @else
    <div class="overflow-x-auto rounded-lg shadow border border-gray-200 bg-white">
        <table class="w-full text-sm text-center border-collapse">
            <thead class="bg-gray-100 text-gray-700">
                <tr>
                    <th class="px-4 py-2 border">#</th>
                    <th class="px-4 py-2 border">User</th>
                    <th class="px-4 py-2 border">Event</th>
                    <th class="px-4 py-2 border">Date</th>
                    <th class="px-4 py-2 border">Total (RM)</th>
                    <th class="px-4 py-2 border">Status</th>
                    <th class="px-4 py-2 border">Receipts</th>
                    <th class="px-4 py-2 border">Action</th>
                </tr>
            </thead>
            <tbody>
                @forelse($bookings as $booking)
                <tr class="hover:bg-gray-50 transition">
                    <td class="border px-3 py-2 align-top text-left">{{ $booking->id }}</td>
                    <td class="border px-3 py-2 align-top text-left">{{ $booking->user->name }}</td>
                    <td class="border px-3 py-2 align-top text-left">{{ $booking->event_name }}</td>
                    <td class="border px-3 py-2 align-top">{{ \Carbon\Carbon::parse($booking->date)->format('d M Y') }}</td>
                    <td class="border px-3 py-2 align-top font-semibold">{{ number_format($booking->total_amount, 2) }}</td>
                    <td class="border px-3 py-2 align-top">
                        @php
                            $colors = [
                                'pending' => 'bg-yellow-100 text-yellow-800',
                                'need_payment' => 'bg-blue-100 text-blue-800',
                                'awaiting_verification' => 'bg-yellow-100 text-yellow-800',
                                'booked' => 'bg-green-100 text-green-800',
                                'rejected' => 'bg-red-100 text-red-800',
                                'cancelled' => 'bg-gray-200 text-gray-700',
                            ];
                        @endphp
                        <span class="px-3 py-1 rounded-full text-xs font-semibold {{ $colors[$booking->status] ?? 'bg-gray-100 text-gray-700' }}">
                            {{ ucfirst(str_replace('_', ' ', $booking->status)) }}
                        </span>
                    </td>

                    <td class="border px-3 py-2 align-top text-xs space-y-1">
                        @if ($booking->deposit_receipt_path)
                            <button 
                                type="button" 
                                onclick="showReceipt('{{ asset('storage/' . $booking->deposit_receipt_path) }}')"
                                class="bg-indigo-100 text-indigo-600 hover:text-indigo-800 px-3 py-1.5 rounded-full text-xs font-semibold w-full">
                                View Deposit
                            </button>
                        @else
                            <span class="text-gray-400 italic text-xs">No Deposit</span>
                        @endif
                        
                        @if ($booking->payment_receipt_path)
                            <button 
                                type="button" 
                                onclick="showReceipt('{{ asset('storage/' . $booking->payment_receipt_path) }}')"
                                class="bg-gray-100 text-gray-600 hover:text-gray-800 px-3 py-1.5 rounded-full text-xs font-semibold w-full">
                                View Payment
                            </button>
                        @else
                            <span class="text-gray-400 italic text-xs">No Payment</span>
                        @endif
                    </td>

                    <td class="border px-3 py-2 align-top text-center space-y-1">
                        @php
                            $buttonStyles = [
                                'approve' => 'bg-green-100 hover:bg-green-200 text-green-800',
                                'reject'  => 'bg-red-100 hover:bg-red-200 text-red-800',
                                'confirm' => 'bg-blue-100 hover:bg-blue-200 text-blue-800',
                                'print' => 'bg-gray-100 text-gray-700 hover:bg-gray-200',
                                'cancel' => 'bg-red-100 text-red-800 hover:bg-red-200',
                            ];
                            $buttonClass = "px-3 py-1.5 rounded-full text-xs font-semibold";
                        @endphp

                        @if($booking->status === 'pending')
                            <button 
                                type="button"
                                onclick="openConfirmModal(
                                    '{{ route('admin.dewan-reservations.approve', $booking->id) }}',
                                    'approve',
                                    'Approve Booking',
                                    'Are you sure you want to approve this initial booking?'
                                )"
                                class="{{ $buttonClass }} {{ $buttonStyles['approve'] }}">
                                Approve
                            </button>
                            <button 
                                type="button"
                                onclick="openConfirmModal(
                                    '{{ route('admin.dewan-reservations.reject', $booking->id) }}',
                                    'reject',
                                    'Reject Booking',
                                    'Are you sure you want to reject this booking?'
                                )"
                                class="{{ $buttonClass }} {{ $buttonStyles['reject'] }}">
                                Reject
                            </button>

                        @elseif($booking->status === 'awaiting_verification')
                            <button 
                                type="button"
                                onclick="openConfirmModal(
                                    '{{ route('admin.dewan-reservations.paid', $booking->id) }}',
                                    'approve',
                                    'Confirm Full Payment',
                                    'Are you sure you want to confirm this full payment?'
                                )"
                                class="{{ $buttonClass }} {{ $buttonStyles['confirm'] }}">
                                Confirm Payment
                            </button>
                            <button 
                                type="button"
                                onclick="openConfirmModal(
                                    '{{ route('admin.dewan-reservations.reject', $booking->id) }}',
                                    'reject',
                                    'Reject Payment',
                                    'Are you sure you want to reject this payment?'
                                )"
                                class="{{ $buttonClass }} {{ $buttonStyles['reject'] }}">
                                Reject Payment
                            </button>

                        @elseif($booking->status === 'need_payment')
                            <button 
                                type="button"
                                onclick="openConfirmModal(
                                    '{{ route('admin.dewan-reservations.paid', $booking->id) }}',
                                    'approve',
                                    'Mark as Paid',
                                    'Are you sure you want to manually mark this booking as paid?'
                                )"
                                class="{{ $buttonClass }} {{ $buttonStyles['confirm'] }}">
                                Mark as Paid
                            </button>

                        @elseif($booking->status === 'booked')
                            <a href="{{ route('reservations.receipt', $booking->id) }}" 
                               target="_blank"
                               class="{{ $buttonClass }} {{ $buttonStyles['print'] }}">
                                Print Receipt
                            </a>
                            <form method="POST" action="{{ route('reservations.destroy', $booking->id) }}" class="inline" onsubmit="return confirm('Are you sure you want to cancel this booking?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="{{ $buttonClass }} {{ $buttonStyles['cancel'] }} ml-2">
                                    Cancel
                                </button>
                            </form>
                        @elseif($booking->status === 'rejected' || $booking->status === 'cancelled')
                            <span class="inline-block px-3 py-1.5 rounded-full text-xs font-semibold {{ $booking->status === 'rejected' ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-500' }}">
                                {{ ucfirst($booking->status) }}
                            </span>
                        @endif
                    </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="9" class="py-4 text-gray-500 italic text-center">No bookings found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @endif
</div>

<div id="confirmModal" 
     class="fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center hidden z-50">
    <div id="confirmBox" 
         class="bg-white rounded-xl shadow-2xl p-6 w-11/12 sm:w-96 transform scale-95 opacity-0 transition-all duration-300">
        
        <h2 id="confirmTitle" class="text-xl font-semibold text-center mb-4 text-gray-800">
            Confirm Action
        </h2>

        <p id="confirmMessage" class="text-gray-600 text-center mb-6">
            Are you sure you want to proceed?
        </p>

        <form id="confirmForm" method="POST" class="flex justify-center gap-4">
            @csrf
            <button type="button" 
                    onclick="closeConfirmModal()"
                    class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-full text-sm font-msemibold">
                Cancel
            </button>
            <button type="submit" id="confirmBtn"
                    class="px-4 py-2 rounded text-sm font-medium text-white">
                Confirm
            </button>
        </form>
    </div>
</div>

<div id="receiptModal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-[999]">
    <div id="modalContent"
         class="bg-white w-full max-w-xl rounded-lg shadow-lg p-6 transition-all duration-200 opacity-0 scale-95">

        <h2 class="text-xl font-semibold mb-4 text-center">Payment Receipt</h2>

        <!-- IMAGE PREVIEW -->
        <img id="receiptImage"
             class="max-h-[450px] mx-auto rounded-lg hidden object-contain" />

        <!-- PDF PREVIEW -->
        <iframe id="receiptPdf"
                class="w-full h-[450px] rounded-lg hidden border"
                style="background: #f8f9fa;"></iframe>

        <div class="text-center mt-6">
            <button onclick="closeReceipt()"
                    class="bg-indigo-600 text-white px-5 py-2 rounded-md hover:bg-indigo-700">
                Close
            </button>
        </div>
    </div>
</div>

<script>
    const confirmModal = document.getElementById('confirmModal');
    const confirmBox = document.getElementById('confirmBox');
    const confirmForm = document.getElementById('confirmForm');
    const confirmBtn = document.getElementById('confirmBtn');
    const confirmTitle = document.getElementById('confirmTitle');
    const confirmMessage = document.getElementById('confirmMessage');

    // 🔽 MODIFIED: Upgraded this function to be more flexible 🔽
    function openConfirmModal(actionUrl, type, title, message) {
        confirmForm.action = actionUrl;
        confirmTitle.textContent = title;
        confirmMessage.textContent = message;

        // Set button color based on action type
        if (type === 'approve') {
            confirmBtn.className = 'px-4 py-2 rounded-full text-sm font-semibold text-green-800 bg-green-100 hover:bg-green-200';
            confirmBtn.textContent = 'Confirm';
        } else if (type === 'reject') {
            confirmBtn.className = 'px-4 py-2 rounded-full text-sm font-semibold text-red-800 bg-red-100 hover:bg-red-200';
            confirmBtn.textContent = 'Confirm Reject';
        } else {
            confirmBtn.className = 'px-4 py-2 rounded-full text-sm font-semibold text-blue-800 bg-blue-100 hover:bg-blue-200';
            confirmBtn.textContent = 'Confirm';
        }

        confirmModal.classList.remove('hidden');
        setTimeout(() => {
            confirmBox.classList.remove('scale-95', 'opacity-0');
            confirmBox.classList.add('scale-100', 'opacity-100');
        }, 10);
    }
    // 🔼 End of modification 🔼

    function closeConfirmModal() {
        confirmBox.classList.remove('scale-100', 'opacity-100');
        confirmBox.classList.add('scale-95', 'opacity-0');
        setTimeout(() => {
            confirmModal.classList.add('hidden');
        }, 200);
    }

    // --- Receipt Modal Script (copied from reference) ---
    const modal = document.getElementById('receiptModal');
    const modalContent = document.getElementById('modalContent');
    const modalImage = document.getElementById('receiptImage');

    function showReceipt(fileUrl) {
        const isPdf = fileUrl.toLowerCase().endsWith('.pdf');

        receiptImage.classList.add('hidden');
        receiptPdf.classList.add('hidden');

        if (isPdf) {
            receiptPdf.src = fileUrl;
            receiptPdf.classList.remove('hidden');
        } else {
            receiptImage.src = fileUrl;
            receiptImage.classList.remove('hidden');
        }

        receiptModal.classList.remove('hidden');
        document.body.classList.add('overflow-hidden');

        setTimeout(() => {
            modalContent.classList.remove('scale-95', 'opacity-0');
            modalContent.classList.add('scale-100', 'opacity-100');
        }, 10);
    }

    function closeReceipt() {
        modalContent.classList.remove('scale-100', 'opacity-100');
        modalContent.classList.add('scale-95', 'opacity-0');

        setTimeout(() => {
            receiptModal.classList.add('hidden');
            document.body.classList.remove('overflow-hidden');

            receiptImage.src = '';
            receiptPdf.src = '';
        }, 200);
    }
</script>

@endsection