@extends('layouts.admin')

@section('content')
<div class="max-w-7xl mx-auto px-6 py-2">
    <h1 class="text-2xl font-bold mb-6">Manage Bookings</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="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">Facility</th>
                    <th class="px-4 py-2 border">Date</th>
                    <th class="px-4 py-2 border">Time</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">Receipt</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">{{ $booking->id }}</td>
                        <td class="border px-3 py-2">{{ $booking->user->name }}</td>
                        <td class="border px-3 py-2">{{ $booking->facility->name }}</td>
                        <td class="border px-3 py-2">{{ \Carbon\Carbon::parse($booking->date)->format('d M Y') }}</td>
                        <td class="border px-3 py-2">{{ $booking->time_start }}–{{ $booking->time_end }}</td>
                        <td class="border px-3 py-2 font-semibold">{{ number_format($booking->total_amount, 2) }}</td>
                        <td class="border px-3 py-2">
                            @php
                                $colors = [
                                    'pending' => 'bg-yellow-100 text-yellow-800',
                                    'awaiting_verification' => 'bg-blue-100 text-blue-800',
                                    'approved' => '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>

                        {{-- ✅ Receipt column --}}
                         <td class="px-6 py-3 text-center">
                            @if ($booking->payment && $booking->payment->receipt_path)
                                <button 
                                    type="button" 
                                    onclick="showReceipt('{{ asset('storage/' . $booking->payment->receipt_path) }}')"
                                    class="bg-indigo-100 text-indigo-600 hover:text-indigo-800 px-3 py-1.5 rounded-full text-xs font-semibold">
                                    View Receipt
                                </button>
                            @else
                                <span class="text-gray-400 italic">No receipt</span>
                            @endif
                        </td>

                        {{-- ✅ Action buttons --}}
                        <td class="border px-3 py-2 text-center space-x-2">
                            @php
                                $buttonStyles = [
                                    'approve' => 'bg-green-100 hover:bg-green-200 text-green-800',
                                    'reject'  => 'bg-red-100 hover:bg-red-200 text-red-800',
                                    'view'    => 'bg-yellow-400 hover:bg-yellow-500 text-white',
                                    'print'   => 'bg-gray-300 hover:bg-gray-400 text-gray-800',
                                    'cancel' => 'bg-red-100 text-red-800 hover:bg-red-200',
                                ];
                            @endphp

                            {{-- 🔹 If booking is awaiting verification --}}
                            @if($booking->status === 'awaiting_verification')
                                <!-- Approve Button -->
                                <button 
                                    type="button"
                                    onclick="openConfirmModal('{{ route('admin.bookings.approve', $booking->id) }}', 'approve')"
                                    class="px-3 py-1.5 rounded-full text-xs font-semibold {{ $buttonStyles['approve'] }}">
                                    Approve
                                </button>

                                <!-- Reject Button -->
                                <button 
                                    type="button"
                                    onclick="openConfirmModal('{{ route('admin.bookings.reject', $booking->id) }}', 'reject')"
                                    class="px-3 py-1.5 rounded-full text-xs font-semibold {{ $buttonStyles['reject'] }}">
                                    Reject
                                </button>

                            {{-- 🔹 If booking already approved --}}
                            @elseif($booking->status === 'approved')
                                <a href="{{ route('payments.receipt', $booking->id) }}" 
                                target="_blank"
                                class="inline-block px-3 py-1.5 rounded-full text-xs font-semibold {{ $buttonStyles['print'] }}">
                                Print Receipt
                                </a>
                                <form method="POST" action="{{ route('bookings.cancel', $booking->id) }}" class="inline" onsubmit="return confirm('Cancel this booking?');">
                                        @csrf
                                        <button type="submit" class="px-3 py-1 rounded-full text-xs font-semibold {{ $buttonStyles['cancel'] }}">
                                            Cancel
                                        </button>
                                    </form>
                            {{-- 🔹 If booking rejected --}}
                            @elseif($booking->status === 'rejected')
                                <span class="inline-block px-3 py-1.5 rounded-full text-xs font-semibold bg-red-100 text-red-700">
                                    Rejected
                                </span>

                            {{-- 🔹 If booking cancelled --}}
                            @elseif($booking->status === 'cancelled')
                                <span class="inline-block px-3 py-1.5 rounded-full text-xs font-semibold bg-gray-100 text-gray-500">
                                    Cancelled
                                </span>

                            {{-- 🔹 Default fallback --}}
                            @else
                                <span class="text-gray-400 text-xs italic">No actions</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="9" class="py-4 text-gray-500 italic">No bookings found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- 🔹 Confirmation Modal -->
<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>

<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');

    function openConfirmModal(actionUrl, type) {
        confirmForm.action = actionUrl;

        if (type === 'approve') {
            confirmTitle.textContent = 'Approve Booking';
            confirmMessage.textContent = 'Are you sure you want to approve this booking?';
            confirmBtn.className = 'px-4 py-2 rounded-full text-sm font-semibold text-green-800 bg-green-100 hover:bg-green-200';
        } else {
            confirmTitle.textContent = 'Reject Booking';
            confirmMessage.textContent = 'Are you sure you want to reject this booking?';
            confirmBtn.className = 'px-4 py-2 rounded-full text-sm font-semibold text-red-800 bg-red-100 hover:bg-red-200';
        }

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

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

<!-- 🔹 Receipt Preview Modal -->
<div id="receiptModal" class="fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center hidden z-50 transition-all duration-300 ease-out">
    <div id="modalContent" class="bg-white rounded-2xl shadow-2xl w-11/12 md:w-3/4 lg:w-2/3 max-w-4xl relative p-6 transform scale-95 opacity-0 transition-all duration-300 ease-in-out">
        
        <!-- Close button -->
        <button 
            type="button" 
            onclick="closeReceipt()" 
            class="absolute top-3 right-3 text-gray-500 hover:text-gray-700 text-2xl font-bold">
            &times;
        </button>

        <!-- Modal Header -->
        <h2 class="text-xl font-semibold text-gray-700 mb-4 text-center">
            Payment Receipt
        </h2>

        <!-- Image Preview -->
        <div class="flex justify-center items-center">
            <img id="receiptImage" src="" alt="Receipt Image" class="max-h-[80vh] rounded-lg shadow-lg transition-transform duration-300">
        </div>

        <!-- Footer -->
        <div class="mt-6 text-center">
            <button 
                onclick="closeReceipt()" 
                class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2.5 rounded-md font-medium shadow">
                Close
            </button>
        </div>
    </div>
</div>

<!-- 🔸 Modal Script -->
<script>
    const modal = document.getElementById('receiptModal');
    const modalContent = document.getElementById('modalContent');
    const modalImage = document.getElementById('receiptImage');

    function showReceipt(imageUrl) {
        modalImage.src = imageUrl;
        modal.classList.remove('hidden');
        document.body.classList.add('overflow-hidden');
        // Animate in (fade + zoom)
        setTimeout(() => {
            modalContent.classList.remove('scale-95', 'opacity-0');
            modalContent.classList.add('scale-100', 'opacity-100');
        }, 10);
    }

    function closeReceipt() {
        // Animate out (fade + zoom out)
        modalContent.classList.remove('scale-100', 'opacity-100');
        modalContent.classList.add('scale-95', 'opacity-0');
        setTimeout(() => {
            modal.classList.add('hidden');
            document.body.classList.remove('overflow-hidden');
            modalImage.src = '';
        }, 200);
    }
</script>


@endsection