@php
    use Illuminate\Support\Carbon;

    $isTimerShow = $eventTicketsSettings['tickets_timer_is_show'] ?? false;
    $isTimerFixed = ! empty($eventTicketsSettings['tickets_timer_position']) && $eventTicketsSettings['tickets_timer_position'] == 'fixed';

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

@extends('website.layouts.app')

@section('meta_title', "Techne | Tickets")
@section('meta_description', "Techne Summit Tickets Page")
@section('meta_keywords', 'Techne, Tickets, Event')

@section('content')

    @if (isset($tickets) && count($tickets))
        <section class="bg-light py-10" id="ticketsPage">
            <div class="container">
                {{-- <h2 class="text-primary text-uppercase fs-38 fw-bold mb-7 text-center">
                    {{ \Carbon\Carbon::parse($event->start_date)->year }} {{ __('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">
                            {{ \Carbon\Carbon::parse($event->start_date)->year }} {{ __('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) }}">
                            @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="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">
                                                <div class="row g-0 mx-2">
                                                    @foreach ($ticket['benefits'] as $benefit)
                                                        <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-5 col-md-4 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>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    @include('website.sections.subscribe-form')

@endsection


@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