@php use App\Services\Cart; @endphp
@extends('layouts.app')

@section('title', 'Booking List')

@section('content')
    <div class="container mx-auto px-4 py-8" x-data="{ showModal: false }">
        <h1 class="text-3xl font-bold text-gray-900 mb-8">Booking List</h1>

        @if(session('cart') && count(session('cart')) > 0)
            <div class="bg-white shadow-lg rounded-lg overflow-hidden">
                <div class="p-6">
                    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
                        <h2 class="text-xl font-semibold text-gray-900">Your Seva Bookings</h2>
                        <div class="flex items-center space-x-4">
                            <span class="text-gray-600">{{ count(session('cart')) }} items</span>
                            <button type="button"
                                @click="showModal = true"
                                class="text-xs explore-history-btn flex items-center space-x-1 py-1 px-3 rounded-md">
                                <span>Clear Booking List</span>
                            </button>
                        </div>
                    </div>

                    <!-- Cart Items Table -->
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                            <tr>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Seva Details
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Booking Date
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Tickets
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Total
                                </th>
                                <th scope="col"
                                    class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                    Actions
                                </th>
                            </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                            @foreach(Cart::items() as $id => $details)
                                <tr>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="flex items-center">
                                            <div class="flex-shrink-0 h-16 w-16">
                                                <img class="h-16 w-16 rounded-md object-cover"
                                                     src="{{ asset('uploads/sevas/'. $details['image']) }}"
                                                     alt="{{ $details['name'] }}">
                                            </div>
                                            <div class="ml-4">
                                                <div
                                                    class="text-sm font-medium text-gray-900">{{ ucwords($details['name']) }}</div>
                                                <div class="text-xs text-gray-400">{{ $details['category_name'] }}</div>
                                                <div class="text-xs text-gray-500 price-text">
                                                    ₹{{ $details['price']}}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div
                                            class="text-sm text-gray-900">{{ \Carbon\Carbon::parse($details['date'])->format('D, d M Y') }}</div>
                                        <div class="text-xs text-gray-500">{{ $details['time_slot'] ?? ''}}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900">{{ $details['slots'] }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-semibold text-gray-900 price-text">
                                            ₹{{ $details['price'] * $details['slots'] }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        <form action="{{ route('cart.remove', $id) }}" method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="text-red-600 hover:text-red-800">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
                                                     viewBox="0 0 24 24" stroke="currentColor">
                                                    <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"/>
                                                </svg>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>

                    <div
                        class="mt-8 flex flex-col md:flex-row justify-between items-start md:items-center space-y-4 md:space-y-0">
                        <div class="text-lg font-semibold text-gray-900 price-text">
                            Total:
                            ₹{{ Cart::subtotal() }}
                        </div>
                        <div class="flex space-x-4">
                            <a href="{{ route('sevas.index') }}"
                               class="px-6 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
                                Add More Sevas
                            </a>
                            @auth
                                <a href="{{ route('checkout') }}"
                                   class="px-6 py-2 bg-red-700 text-white rounded-md hover:bg-red-800">
                                    Proceed to Checkout
                                </a>
                            @else
                                <a href="{{ route('login') }}?redirect={{ urlencode(route('cart')) }}"
                                   class="px-6 py-2 bg-red-700 text-white rounded-md hover:bg-red-800">
                                    Login to Checkout
                                </a>
                            @endauth
                        </div>
                    </div>
                </div>
            </div>
        @else
            <div class="bg-white shadow-lg rounded-lg overflow-hidden">
                <div class="p-6 text-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-gray-400" fill="none"
                         viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"/>
                    </svg>
                    <h2 class="mt-4 text-xl font-semibold text-gray-900">Your booking list is empty</h2>
                    <p class="mt-2 text-gray-600">Looks like you haven't added any sevas to your cart yet.</p>
                    <a href="{{ route('sevas.index') }}"
                       class="mt-6 inline-block px-6 py-2 bg-red-700 text-white rounded-md hover:bg-red-800">
                        Browse Sevas
                    </a>
                </div>
            </div>
        @endif

        <!-- Clear Cart Confirmation Modal -->
        <div x-show="showModal"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="fixed inset-0 z-50 overflow-y-auto"
             style="display: none;">

            <!-- Background overlay -->
            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"></div>

            <!-- Modal panel -->
            <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
                <div x-show="showModal"
                     x-transition:enter="transition ease-out duration-300"
                     x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                     x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                     x-transition:leave="transition ease-in duration-200"
                     x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                     x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                     class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">

                    <!-- Modal content -->
                    <div class="sm:flex sm:items-start">
                        <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                            <svg class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                            </svg>
                        </div>
                        <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                            <h3 class="text-lg font-semibold leading-6 text-gray-900">Clear Booking List</h3>
                            <div class="mt-2">
                                <p class="text-sm text-gray-500">
                                    Are you sure you want to clear your cart? This action cannot be undone.
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Modal actions -->
                    <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                        <form action="{{ route('cart.clear') }}" method="POST" class="inline">
                            @csrf
                            @method('DELETE')
                            <button type="submit"
                                    class="inline-flex w-full justify-center bg-red-700 text-white rounded-md hover:bg-red-800 px-3 py-2 text-sm font-normal text-white shadow-sm sm:ml-3 sm:w-auto">
                                Clear Booking List
                            </button>
                        </form>
                        <button type="button"
                                @click="showModal = false"
                                class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-normal text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto">
                            Cancel
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection