@php
    use App\Enums\EventSettingTypesEnum;
    use Illuminate\Support\Carbon;

    $eventGeneralSettings = isset($eventSettings) && isset($eventSettings[EventSettingTypesEnum::GENERAL->value])
        ? $eventSettings[EventSettingTypesEnum::GENERAL->value]
        : null;

    $isTimerFixed = ! empty($eventGeneralSettings['tickets_timer_position']['value']) && $eventGeneralSettings['tickets_timer_position']['value'] == 'fixed';

    $countDownDate = $isTimerShow && $eventTicketsTimer ? Carbon::parse($eventTicketsTimer)->format('Y-m-d H:i:s') : null;

    // $countDownDate = $start 
    //     ? $start->format('M d, Y')
    //     : ($end ? $end->format('M d, Y') : null);
@endphp

@if (isset($tickets) && count($tickets))

    <section class="bg-light py-10" id="ticketsSection">
        <div class="container">
            {{-- <h2 class="text-primary text-uppercase fs-38 fw-bold mb-5">
                {{ __('app.Tickets') }}
            </h2> --}}

            @if ($isTimerShow && $eventTicketsTimer)
                <div style="background: #eee;" class="d-block d-md-flex align-items-center justify-content-between gap-3 py-2 px-3 
                    @if($isTimerFixed) fixed-bottom-timer @else mx-2 mx-md-3 mb-4 @endif
                ">
                    <h2 class="text-primary text-uppercase fs-38 fw-bold mb-0">
                        {{ __('app.Tickets') }}
                    </h2>
                    <div class="d-block d-md-flex flex-column align-items-start justify-content-center gap-1 py-2 px-3">
                        <div class="text-primary fw-bold text-uppercase">{{ __('labels.Prices increase') }}:</div>
                        <div id="tickets-countdown" class="d-flex align-items-center text-white">
                            <!-- The countdown boxes will be dynamically generated here -->
                        </div>
                    </div>
                </div>
            @endif

            <div class="d-flex flex-wrap justify-content-center gap-3">

                @foreach ($tickets as $key => $ticket)
                    <div class="responsive-ticket-card responsive-ticket-card-{{ count($tickets) }} d-flex flex-column">
                        @include('website.components.responsive-ticket-card', ['ticket' => $ticket])
                    </div>

                    <div class="modal fade" id="ticketCardModal{{ $ticket['id'] }}" tabindex="-1">
                        <div class="modal-dialog modal-dialog-centered modal-xl">
                            <div class="modal-content">
                                <div class="modal-header py-6">
                                    <button class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>

                                <div class="modal-body px-1 pb-1 pt-0">
                                    <div class="container">
                                        <div class="row g-0">
                                            <div class="col-12 col-xl-2 col-lg-3 col-md-4 col-sm-5">
                                                @include('website.components.responsive-ticket-card', [
                                                    'ticket' => $ticket,
                                                    'showDirectByLink' => true,
                                                ])
                                            </div>

                                            <div class="col-12 col-xl-10 col-lg-9 col-md-8 col-sm-7 mt-3 mt-md-0 d-flex flex-column justify-content-between">
                                                <div class="row g-0 mx-2">
                                                    @foreach ($ticket['benefits'] as $benefit)
                                                        <!-- Show allowed benefits -->
                                                        @if (!$benefit['is_disabled']) 
                                                            <div class="col-12 col-lg-6 border border-primary bg-color2">
                                                                <div class="d-flex align-items-center text-primary fs-16 px-2 py-1">
                                                                    <i class="uil uil-check"></i> 
                                                                    <span class="px-1"></span>
                                                                    {{ $benefit['name'] }}
                                                                </div>
                                                            </div>
                                                        @endif
                                                        {{-- <div class="col-12 col-lg-6 border border-primary @if (! $benefit['is_disabled']) bg-color2 @elseif($loop->even) bg-light @else bg-light @endif">
                                                            <div class="d-flex align-items-center @if ($benefit['is_disabled']) text-secondary @else text-primary @endif fs-16 px-2 py-1">
                                                                @if ($benefit['is_disabled'])
                                                                    <span class="text-danger">
                                                                        <i class="uil uil-times"></i>
                                                                    </span>
                                                                @else
                                                                    <i class="uil uil-check"></i> 
                                                                @endif

                                                                <span class="px-1"></span>
                                                                {{ $benefit['name'] }}
                                                            </div>
                                                        </div> --}}
                                                    @endforeach
                                                </div>
                                                <div class="row">
                                                    <!-- Include timer here also -->
                                                    @if ($isTimerShow && $eventTicketsTimer)
                                                        <div class="col-12 col-lg-auto ms-auto">
                                                            <div class="d-block bg-light p-3 rounded">
                                                                <div class="text-uppercase font-18 mb-0">Price increases in:</div>
                                                                <div id="tickets-countdown-modal-{{ $ticket['id'] }}" class="d-flex align-items-center text-event-color">
                                                                    <!-- The countdown boxes will be dynamically generated here -->
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

@endif

@pushIf($isTimerShow && $countDownDate, 'scripts')
    <script src="{{ versionedAsset('js/tickets-countdown.js') }}?v={{ filemtime(public_path('js/tickets-countdown.js')) }}"></script>
    <script>
        // Initialize countdown with the countdown date
        document.addEventListener('DOMContentLoaded', function() {
            initTicketsCountdown("{{ $countDownDate }}");
            
            // Initialize countdown for each modal
            @foreach ($tickets as $ticket)
                initTicketsCountdown("{{ $countDownDate }}", "tickets-countdown-modal-{{ $ticket['id'] }}");
            @endforeach
        });
    </script>
@endPushIf