@extends('layouts.fans')

@section('content')
<style>
    .ticket-qr-section {
        width: 100% !important;
        padding: 1.5rem !important;
        border-top: 2px dashed #f59e0b; /* Add border top for mobile stack */
        border-left: none !important; /* Remove left border */
    }
}
</style>

<div class="container mx-auto p-4">
    <h1 class="text-3xl font-extrabold text-center mb-6 text-gray-800">Purchase Your Ticket</h1>

    @if(session('error'))
    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
        {{ session('error') }}
    </div>
    @endif

    @if($errors->any())
    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
        <ul>
            @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <div class="bg-white p-6 rounded-xl shadow-lg max-w-lg mx-auto" x-data="ticketForm()" x-init="updateAmounts()">
        <form action="{{ route('fans.tickets.store') }}" method="POST">
            @csrf

            <div class="mb-4">
                <label for="match_id" class="block text-gray-700 font-medium mb-2">Select Match</label>
                <select name="match_id" id="match_id" x-model="matchId" @change="updateAmounts()"
                    class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-150"
                    required>
                    <option value="">Select a Match</option>
                    @foreach ($matches as $match)
                    <option value="{{ $match->match_id }}" data-vvip-amount="{{ $match->vvip_amount }}"
                        data-vip-amount="{{ $match->vip_amount }}"
                        data-1st-class-amount="{{ $match->{'1st_class_amount'} }}"
                        data-seats='{{ json_encode($match->seats) }}'>
                        {{ $match->home_team }} vs {{ $match->away_team }} - {{
                        \Carbon\Carbon::parse($match->match_date)->format('Y-m-d H:i') }}
                    </option>
                    @endforeach
                </select>
                @error('match_id')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-4">
                <label for="seat_id" class="block text-gray-700 font-medium mb-2">Select Block</label>
                <select name="seat_id" id="seat_id" x-model="seatId" @change="updateDetails()"
                    class="w-full p-3 border border-gray-300 rounded-lg" required>
                    <option value="">Select a Block</option>
                    <!-- Options will be populated via JS based on matchId -->
                </select>
                @error('seat_id')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-4">
                <label for="category" class="block text-gray-700 font-medium mb-2">Ticket Category</label>
                <select name="category" id="category" x-model="category" @change="updateAmounts()"
                    class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-150"
                    required>
                    <option value="vvip">VVIP</option>
                    <option value="vip">VIP</option>
                    <option value="1st_class">1st Class</option>
                </select>
                @error('category')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-4">
                <label for="amount_display" class="block text-gray-700 font-medium mb-2">Ticket Amount</label>
                <input type="text" id="amount_display" x-model="amount" readonly
                    class="w-full p-3 border border-gray-300 rounded-lg bg-gray-100" required>
                <input type="hidden" name="amount" x-model="amount">
                @error('amount')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- NEW: Payment Method Selection -->
            <!-- PAYMENT METHOD + PHONE (conditional) -->
            <div class="mb-6">
                <label for="payment_method" class="block text-gray-700 font-medium mb-2">Payment Method</label>
                <select name="payment_method" id="payment_method" x-model="paymentMethod" @change="togglePhoneField()"
                    class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-150"
                    required>
                    <option value="stripe"><img src="{{ asset('storage/imgs/stripe.png') }}" alt="Stripe" class="h-10 w-auto fill-current text-gray-800 dark:text-gray-200">Credit/Debit Card (Stripe)</option>
                    <option value="paypal"><img src="{{ asset('storage/imgs/paypal.png') }}" alt="Paypal" class="h-10 w-auto fill-current text-gray-800 dark:text-gray-200">PayPal</option>
                    <option value="bongapay"><img src="{{ asset('storage/imgs/bongapay.png') }}" alt="BongaPay" class="h-10 w-auto fill-current text-gray-800 dark:text-gray-200">MTN MoMo (BongaPay)</option>
                </select>
                @error('payment_method')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- PHONE NUMBER – shown only for BongaPay -->
            <div x-show="paymentMethod === 'bongapay'" x-transition class="mb-4">
                <label for="payer_phone" class="block text-gray-700 font-medium mb-2">
                    MTN MoMo Phone Number <span class="text-red-500">*</span>
                </label>
                <input type="text" name="payer_phone" id="payer_phone" placeholder="256772123456" x-model="payerPhone"
                    class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-150"
                    :required="paymentMethod === 'bongapay'">
                <p class="text-xs text-gray-500 mt-1">Enter the phone number registered with MTN MoMo</p>
                @error('payer_phone')
                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            {{-- Terms and Conditions --}}
            <div class="mb-4">
                <input type="checkbox" name="terms_and_conditions" id="terms_and_conditions" class="mr-2">
                <label for="terms_and_conditions" class="text-gray-700 font-medium">I agree to the <a href="{{ route('termsandconditions') }}" class="text-blue-500">Terms and Conditions</a></label>
                @error('terms_and_conditions')
                <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">
                Proceed to Payment
            </button>
        </form>
    </div>

    @if (session('ticket'))
    <div class="relative z-10 max-w-4xl mx-auto my-8 p-2 md:p-0">
        <div class="bg-gradient-to-r from-green-600 via-green-700 to-green-800 rounded-lg shadow-2xl overflow-hidden border-4 border-amber-500 w-full h-auto flex flex-col md:flex-row p-0">
            <div class="flex-grow p-4 md:p-6 text-gray-900 ticket-perforation w-full md:w-3/4">

                <div class="text-center mb-4">
                    <h2 class="text-sm md:text-lg font-bold uppercase tracking-wider text-white">{{ session('ticket')->match->tournament_name }}</h2>
                </div>

                <div class="text-center mb-4">
                    <h1 class="text-3xl md:text-5xl font-extrabold text-yellow-300 uppercase border-b border-amber-500 pb-2">
                        {{ session('ticket')->category ?? session('ticket')->match->category }}
                    </h1>
                </div>

                <div class="bg-red-600 text-white p-2 text-center mb-4 rounded-md border-l-2 border-yellow-600">
                    <p class="text-xs md:text-sm font-semibold uppercase">
                        Date: {{ \Carbon\Carbon::parse(session('ticket')->match->match_date)->format('d M Y') }}
                        | Kick-Off: 3PM
                        | Venue: {{ session('ticket')->match->stadium }}
                    </p>
                </div>

                <div class="grid grid-cols-2 md:grid-cols-5 gap-2 md:gap-4 items-center text-center pb-4 mb-4">
                    <div class="col-span-1 md:col-span-2">
                        <img src="{{ asset('storage/'.session('ticket')->match->home_team_flag) }}" alt="Home Flag" class="h-12 w-12 md:h-16 md:w-16 mx-auto rounded-full object-cover border-2 border-green-600" />
                        <h3 class="text-xs md:text-md text-white font-semibold mt-1">{{ session('ticket')->match->home_team }}</h3>
                    </div>
                    <div class="col-span-1 md:col-span-1">
                        <h3 class="text-xl md:text-3xl font-extrabold text-white">VS</h3>
                    </div>
                    <div class="col-span-2 md:col-span-2">
                        <img src="{{ asset('storage/'.session('ticket')->match->away_team_flag) }}" alt="Away Flag" class="h-12 w-12 md:h-16 md:w-16 mx-auto rounded-full object-cover border-2 border-green-600" />
                        <h3 class="text-xs md:text-md text-white font-semibold mt-1">{{ session('ticket')->match->away_team }}</h3>
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 md:gap-4 text-xs md:text-md bg-gray-50 p-3 rounded">
                    <div>
                        <p class="text-xs font-medium text-gray-500 uppercase">Block / Gate</p>
                        <p class="text-lg md:text-xl font-bold text-green-700">{{ session('ticket')->seat->block }} / {{ session('ticket')->seat->access_gate }}</p>
                    </div>
                    <div>
                        <p class="text-xs font-medium text-gray-500 uppercase">Seat Number</p>
                        <p class="text-lg md:text-xl font-bold text-green-700">{{ session('ticket')->seat->seat_number }}</p>
                    </div>
                    <div>
                        <p class="text-xs font-medium text-gray-500 uppercase">Price</p>
                        <p class="text-lg md:text-xl font-bold text-green-700">SSP {{ number_format(session('ticket')->amount, 2) }}</p>
                    </div>
                </div>

                <div class="mt-4 flex justify-end">
                    <img src="{{ asset('storage/imgs/ssff_logo_ticko.png') }}" alt="SSFF Ticketing Portal" class="h-8 w-auto opacity-70">
                </div>

            </div>

            <div class="w-full md:w-1/4 p-4 flex flex-col items-center justify-between text-center bg-green-50">
                <div>
                    <p class="text-xs uppercase font-bold text-gray-600 mb-2">Scan for Validation</p>
                    <div class="max-w-24 mx-auto p-1 border border-green-600 rounded-md bg-white inline-block transform scale-50 md:scale-75 -ml-32 md:ml-0">
                        {!! session('ticket')->qr_code !!}
                    </div>
                </div>
                <div>
                    <p class="text-xs uppercase font-medium text-gray-500 mt-4">Ticket No:</p>
                    <p class="text-md md:text-lg font-extrabold text-green-800 break-all">{{ session('ticket')->ticket_number }}</p>
                </div>
                <img src="{{ asset('storage/imgs/ssff_logo_ticko.png') }}" alt="SSFF Logo" class="h-4 w-auto opacity-50 mt-4">
            </div>
            <div class="mt-4 flex justify-end">
                <p class="text-xs text-gray-500 text-center text-semibold md:text-sm">This ticket can only be used once. If scanned by the SSFF Personnel, it will be invalidated and you will not be able to use it again.</p>
            </div>
        </div>
    </div>
    @endif

</div>

<script>
    function ticketForm() {
            console.log('ticketForm initialized');
            return {
                matchId: '',
                seatId: '',
                category: 'vvip',
                vvipAmount: 0,
                vipAmount: 0,
                firstClassAmount: 0,
                amount: '',
                availableBlocks: [],
                paymentMethod: 'stripe',
                payerPhone: '',

                updateAmounts() {
                    const select = document.getElementById('match_id');
                    const selectedOption = select.options[select.selectedIndex];
                    
                    if (selectedOption && this.matchId) {
                        this.vvipAmount = parseFloat(selectedOption.getAttribute('data-vvip-amount')) || 0;
                        this.vipAmount = parseFloat(selectedOption.getAttribute('data-vip-amount')) || 0;
                        this.firstClassAmount = parseFloat(selectedOption.getAttribute('data-1st-class-amount')) || 0;
                    } else {
                        this.vvipAmount = 0;
                        this.vipAmount = 0;
                        this.firstClassAmount = 0;
                    }

                    if (this.category === 'vvip') {
                        this.amount = this.vvipAmount.toFixed(2);
                    } else if (this.category === 'vip') {
                        this.amount = this.vipAmount.toFixed(2);
                    } else if (this.category === '1st_class') {
                        this.amount = this.firstClassAmount.toFixed(2);
                    } else {
                        this.amount = '';
                    }
                    this.loadBlocks();
                },
                
                loadBlocks() {
                    if (!this.matchId) {
                        this.availableBlocks = [];
                        return;
                    }
                    const select = document.getElementById('match_id');
                    const selectedOption = select.options[select.selectedIndex];
                    this.availableBlocks = JSON.parse(selectedOption.getAttribute('data-seats') || '[]');
                    
                    let seatSelect = document.getElementById('seat_id');
                    seatSelect.innerHTML = '<option value="">Select a Block</option>';
                    this.availableBlocks.forEach(block => {
                        let option = document.createElement('option');
                        option.value = block.id;
                        option.text = `${block.block} (${block.type}, ${block.access_gate})`;
                        seatSelect.appendChild(option);
                    });
                    seatSelect.value = this.seatId;
                },
                
                updateDetails() {
                    const block = this.availableBlocks.find(b => b.id == this.seatId);
                    if (block) {
                        this.category = block.type.toLowerCase().replace(/ /g, '_');
                        this.updateAmounts();
                    }
                },
                togglePhoneField() {
                    if (this.paymentMethod === 'bongapay') {
                        this.payerPhone = '';
                    }
                }
            }
        }
</script>
@endsection