@extends('layouts.admin')

@section('content')
    <div class="container mx-auto p-4">
        <h1 class="text-3xl font-extrabold text-center mb-6 text-gray-800">Create New Match</h1>

        <div class="bg-white p-6 rounded-xl shadow-lg max-w-lg mx-auto">
            <form action="{{ route('admin.matches.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="mb-4">
                    <label for="tournament_name" class="block text-gray-700 font-medium mb-2">Tournament Name</label>
                    <input type="text" name="tournament_name" id="tournament_name" class="w-full p-3 border border-gray-300 rounded-lg" required>
                    @error('tournament_name')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-4">
                    <label for="home_team" class="block text-gray-700 font-medium mb-2">Home Team</label>
                    <input type="text" name="home_team" id="home_team" class="w-full p-3 border border-gray-300 rounded-lg" required>
                    @error('home_team')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-4">
                    <label for="away_team" class="block text-gray-700 font-medium mb-2">Away Team</label>
                    <input type="text" name="away_team" id="away_team" class="w-full p-3 border border-gray-300 rounded-lg" required>
                    @error('away_team')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-4">
                    <label for="match_date" class="block text-gray-700 font-medium mb-2">Match Date & Time</label>
                    <input type="datetime-local" name="match_date" id="match_date" class="w-full p-3 border border-gray-300 rounded-lg" required>
                    @error('match_date')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-4">
                    <label for="stadium" class="block text-gray-700 font-medium mb-2">Stadium</label>
                    <input type="text" name="stadium" id="stadium" class="w-full p-3 border border-gray-300 rounded-lg" required>
                    @error('stadium')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-4">
                    <label for="home_team_flag" class="block text-gray-700 font-medium mb-2">Home Team Flag</label>
                    <input type="file" name="home_team_flag" id="home_team_flag" class="w-full p-3 border border-gray-300 rounded-lg" accept="image/*" required>
                    @error('home_team_flag')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-4">
                    <label for="away_team_flag" class="block text-gray-700 font-medium mb-2">Away Team Flag</label>
                    <input type="file" name="away_team_flag" id="away_team_flag" class="w-full p-3 border border-gray-300 rounded-lg" accept="image/*" required>
                    @error('away_team_flag')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-4">
                    <label class="block text-gray-700 font-medium mb-2">Available Seat Blocks</label>
                
                    <div class="flex items-center mb-3">
                        <input type="checkbox" id="select-all" class="mr-2 rounded text-indigo-600 focus:ring-indigo-500">
                        <label for="select-all" class="text-sm text-gray-800 font-medium">Select All</label>
                    </div>
                
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-y-1 gap-x-4">
                        @foreach (\App\Models\Seat::all() as $seat)
                            <div class="flex items-center">
                                <input type="checkbox" name="blocks[]" value="{{ $seat->id }}" id="block-{{ $seat->id }}" class="mr-2 rounded text-indigo-600 focus:ring-indigo-500 block-checkbox">
                                <label for="block-{{ $seat->id }}" class="text-sm text-gray-800">{{ $seat->block }} ({{ $seat->type }}, {{ $seat->number_of_seats }} seats, {{ $seat->access_gate }})</label>
                            </div>
                        @endforeach
                    </div>
                
                    @error('blocks')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
                
                @section('scripts')
                    <script>
                        document.getElementById('select-all').addEventListener('change', function() {
                            const checkboxes = document.querySelectorAll('.block-checkbox');
                            checkboxes.forEach(checkbox => {
                                checkbox.checked = this.checked;
                            });
                        });
                    </script>
                @endsection

                <div class="mb-4">
                    <label for="vvip_amount" class="block text-gray-700 font-medium mb-2">VVIP Ticket Price</label>
                    <input type="number" name="vvip_amount" id="vvip_amount" step="0.01" min="0" class="w-full p-3 border border-gray-300 rounded-lg" required>
                    @error('vvip_amount')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-4">
                    <label for="vip_amount" class="block text-gray-700 font-medium mb-2">VIP Ticket Price</label>
                    <input type="number" name="vip_amount" id="vip_amount" step="0.01" min="0" class="w-full p-3 border border-gray-300 rounded-lg" required>
                    @error('vip_amount')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="mb-4">
                    <label for="1st_class_amount" class="block text-gray-700 font-medium mb-2">1st ClassTicket Price</label>
                    <input type="number" name="1st_class_amount" id="1st_class_amount" step="0.01" min="0" class="w-full p-3 border border-gray-300 rounded-lg" required>
                    @error('1st_class_amount')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                {{-- <div class="mb-4">
                    <label for="total_ticket_number" class="block text-gray-700 font-medium mb-2">Total Number of Tickets</label>
                    <input type="number" name="total_ticket_number" id="total_ticket_number" min="0" class="w-full p-3 border border-gray-300 rounded-lg" required>
                    @error('total_ticket_number')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div> --}}

                <button type="submit" class="w-full bg-indigo-600 text-white p-3 rounded-lg font-semibold hover:bg-indigo-700 transition duration-200 shadow-md">
                    Create Match
                </button>
            </form>
        </div>
    </div>
@endsection