@extends('layouts.app')

@section('title', 'Services')

@section('content')

    {{-- <div class="bg-main-green py-5 text-center">
        <img src="{{ asset('images/checkout.png') }}" class="img-fluid" alt="">
    </div> --}}
    <div class=" py-5 bg-[#38247b] w-full h-full absolute">
        <form action="{{ url('buy-tickets') }}" method="POST" class="w-full flex justify-center">
            @csrf
            <div class="flex w-full">
                <div class="col-12 col-sm-12 col-md-6 mx-auto bg-white p-8 w-[30rem] rounded-2xl">
                    <table id="tickets-table" class="bg-transparent w-100 mb-3">
                        <thead>
                            <tr>
                                <th class="p-2 text-center" width="10%">QTY</th>
                                <th class="p-2"> DAY</th>
                            </tr>
                        </thead>
                        <tbody class="text-black">
                            @if (!empty($tickets))
                                @foreach ($tickets as $day => $quantity)
                                    <tr style="border-top: 2px solid #38247b;" class="poppins-regular font-semibold">
                                        <td class="p-2 text-center text-black">
                                            <!-- Display the quantity for each day -->
                                            <input type="number" name="tickets[{{ $day }}]"
                                                value="{{ $quantity }}" class="text-center w-10" readonly>
                                        </td>
                                        <td class="p-2 text-black flex justify-center">
                                            Day {{ $day }} |
                                            @if ($day == 1)
                                                Dec 27, 2024
                                            @elseif ($day == 2)
                                                Dec 28, 2024
                                            @elseif ($day == 3)
                                                Dec 29, 2024
                                            @elseif ($day == 4)
                                                Dec 30, 2024
                                            @endif
                                        </td>
                                        <td class="p-2 text-black text-center">
                                            <span class="ticket-amount" data-price="300"></span>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="3" class="text-center p-2">No tickets available for the selected days.
                                    </td>
                                </tr>
                            @endif
                        </tbody>

                    </table>

                    <div class="card">
                        <div class="card-header bg-main-green text-white">
                            PAYMENT METHODS
                        </div>
                        <div class="card-body">

                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <div class="form-check">
                                        <input class="form-check-input hidden" type="radio" name="payment_channel"
                                            id="payment_channel1" checked value="HitPay">
                                        <label class="form-check-label w-100 " for="payment_channel1">
                                            <!--HitPay-->
                                            <div class="row mt-2">
                                                <div class="col-4 align-self-center">
                                                    <img src="{{ asset('assets/MAIN MATERIALS/gcash.svg') }}"
                                                        class="img-fluid m-3" height="auto">
                                                </div>
                                                <div class="col-4 align-self-center">
                                                    <img src="{{ asset('assets/MAIN MATERIALS/ubonline.svg') }}"
                                                        class="img-fluid h-10 m-3">
                                                </div>
                                                <div class="col-4 align-self-center">
                                                    <img src="{{ asset('assets/MAIN MATERIALS/upay_instapay.png') }}"
                                                        class="img-fluid m-3" height="auto">
                                                </div>
                                            </div>
                                        </label>
                                    </div>
                                </li>
                                <!--<li class="list-group-item">-->
                                <!--    <div class="form-check">-->
                                <!--        <input class="form-check-input" type="radio" name="payment_channel" id="payment_channel2" value="ipay88_1">-->
                                <!--        <label class="form-check-label w-100" for="payment_channel2">-->
                                <!--          Ipay88-->
                                <!--            <div class="row mt-2">-->
                                <!--                <div class="col-12 align-self-center">-->
                                <!--                    <img src="{{ asset('images/visa.png') }}" class="img-fluid" height="auto">-->
                                <!--                    <img src="{{ asset('images/master.png') }}" class="img-fluid" height="auto">-->
                                <!--                </div>-->

                                <!--            </div>-->
                                <!--        </label>-->
                                <!--    </div>-->
                                <!--</li>-->
                                <!-- <li class="list-group-item">
                                                                                                                                                                    <div class="form-check">
                                                                                                                                                                        <input class="form-check-input" type="radio" name="payment_channel" id="payment_channel3" value="ipay88_3">
                                                                                                                                                                        <label class="form-check-label w-100" for="payment_channel3">
                                                                                                                                                                            Ipay88
                                                                                                                                                                            <div class="row mt-2">
                                                                                                                                                                                <div class="col-4 align-self-center">
                                                                                                                                                                                    <img src="{{ asset('images/gcash.svg') }}" height="auto">
                                                                                                                                                                                </div>
                                                                                                                                                                            </div>
                                                                                                                                                                        </label>
                                                                                                                                                                    </div>
                                                                                                                                                                </li> -->
                                <!--<li class="list-group-item">-->
                                <!--    <div class="form-check">-->
                                <!--        <input class="form-check-input" type="radio" name="payment_channel" id="payment_channel4" value="ipay88_57">-->
                                <!--        <label class="form-check-label w-100" for="payment_channel4">-->
                                <!--            Ipay88-->
                                <!--            <div class="row mt-2">-->
                                <!--                <div class="col-4 align-self-center">-->
                                <!--                    <img src="{{ asset('images/maya.png') }}" height="auto">-->
                                <!--                </div>-->
                                <!--            </div>-->
                                <!--        </label>-->
                                <!--    </div>-->
                                <!--</li>-->
                            </ul>
                        </div>
                    </div>

                    <!-- Total amount -->
                    <input type="hidden" name="total_amount" id="hidden-total-amount" value="0">

                    <button type="submit"
                        class="btn btn-lg w-100 mt-3 btn-dark border-0 bg-[#38247b] text-white font-weight-bolder p-4 rounded-full font-semibold">CONFIRM</button>
                </div>
            </div>
        </form>
    </div>
    </div>
@stop