@extends('layout')
@section('content')
    <div class="dashboard_main-content">
        <div class="dashboard_main-header">
            <div class="dashboard_main-header_info">
                <h1 class="dashboard_main-title">{{ __('Event Details') }}</h1>
                <ul class="dashboard_main-breadcrumb">
                    <li>
                        <a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a>
                    </li>
                    <li>
                        <a href="{{ route('events.index') }}">{{ __('Events') }}</a>
                    </li>
                    <li>
                        <a href="#">{{ __('Event Details') }}</a>
                    </li>
                </ul>
            </div>
            <div class="dashboard_main-actions">
                <a href="{{ route('events.edit', $event->id) }}" class="dashboard_main-btn">
                    {{ __('Quick Action') }}
                    <img src="{{ asset('assets/images/icons/angle_right.svg') }}" alt="icon" class="svg" />
                </a>
            </div>
        </div>
        <div class="dashboard_main-body">
            <div class="event_details-card">
                <div class="event_details-card_img">
                    <img loading="lazy"
                        src="{{ $event->getFirstMediaUrl('event_cover') ?: asset('assets/images/event.jpg') }}"
                        alt="{{ $event->name }} image" class="img-cover" />
                </div>




                {{-- if event registeration deadline true --}}
                @php
                    $deadlinePassed = now()->gt(\Carbon\Carbon::parse($event->registeration_deadline));
                @endphp

                @if ($deadlinePassed)
                    <section
                        style="
        margin:30px 0;
        padding:25px;
        border-radius:12px;
        background:linear-gradient(135deg,#ffe8e8,#fff5f5);
        border:1px solid #ffb3b3;
        box-shadow:0 8px 20px rgba(255,0,0,0.08);
        font-family: Arial, Helvetica, sans-serif;
    ">
                        <div style="display:flex;align-items:center;gap:20px;">

                            <div style="font-size:42px;color:#e63946;">
                                ⏰
                            </div>

                            <div>
                                <h3
                                    style="
                    margin:0;
                    color:#b00020;
                    font-size:22px;
                    font-weight:700;
                ">
                                    {{ __('Registration Closed') }}
                                </h3>

                                <p
                                    style="
                    margin:8px 0;
                    font-size:15px;
                    color:#444;
                ">
                                    {{ __('The registration deadline for this event has passed on') }}
                                    <strong>
                                        {{ \Carbon\Carbon::parse($event->registeration_deadline)->format('F d, Y h:i A') }}
                                    </strong>.
                                </p>

                                <span
                                    style="
                    font-size:14px;
                    color:#888;
                ">
                                </span>
                            </div>

                        </div>
                    </section>
                @endif





                <div class="event_details-card_body">
                    <div class="event_details-card_head">
                        <div class="event_details-card_head_info">
                            <h3 class="event_details-card_title">
                                {{ $event->title }}
                            </h3>
                            <p class="event_details-card_desc">
                                {{ $event->provider->name }}
                            </p>
                            <p class="event_details-card_tags">
                                <span> {{ $event->type }}
                                </span>
                                <span>{{ $event->category }}</span>
                            </p>
                        </div>
                        <div class="event_details-card_head_data">
                            <p class="event_details-card_id">
                                <span class="title">{{ __('ID') }}</span>
                                <span class="value">
                                    {{ $event->id }}
                                </span>
                                <button class="copy-btn" type="button"
                                    onclick="navigator.clipboard.writeText('VD-012564')">
                                    <img src="{{ asset('assets/images/icons/copy.svg') }}" alt="icon" class="svg" />
                                </button>
                            </p>


                            <span class="event_details-card_status {{ strtolower($event->status) }}">
                                {{ ucfirst($event->status) }}
                            </span>

                        </div>
                    </div>
                    <p class="event_details-desc">
                        {{ $event->description }}
                    </p>
                    <div class="event_details-address">
                        <ul class="event_details-list">
                            <li>
                                <span class="title">
                                    {{ __('Start From') }}
                                </span>
                                <span class="value">
                                    {{ \Carbon\Carbon::parse($event->start_date)->format('d M, Y') }}
                                </span>
                            </li>
                            <li>
                                <span class="title"> {{ __('To') }} </span>
                                <span class="value">
                                    {{ \Carbon\Carbon::parse($event->end_date)->format('d M, Y') }}
                                </span>
                            </li>
                            <li>
                                <span class="title"> {{ __('Venue') }} </span>
                                <span class="value"> {{ $event->venue }} </span>
                            </li>
                            <li>
                                <span class="title"> {{ __('At') }} </span>
                                <span class="value">
                                    {{ $event->location }}
                                </span>
                            </li>
                        </ul>
                        <div class="address-map">
                            <div id="map"></div>
                        </div>
                        <ul class="event_details-list">
                            <li class="full-w">
                                <span class="title">
                                    {{ __('Registration Deadline at') }}
                                </span>
                                <span class="value">
                                    {{ \Carbon\Carbon::parse($event->end_date)->format('d M, Y') }}

                                </span>
                            </li>
                        </ul>
                    </div>
                    <div class="event_details-progress">

                        @foreach ($event->eventTickets as $ticket)
                            <div class="event_details-item">
                                <div class="head">
                                    <span class="title">
                                        {{ $ticket->ticketType->name }}
                                    </span>
                                    <strong class="value">{{ $ticket->price }}</strong>
                                </div>
                                <div class="body">
                                    <div class="progress" style="--width: 50%"></div>
                                    <span class="label">{{ $ticket->order_items()?->count() }}/{{ $ticket->quantity }}
                                        {{ __('Tickets sold') }}</span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="event_details-switchers">
                        <div class="switcher">
                            <label>
                                <input type="checkbox" @if ($event->visable == 1) checked @endif disabled />
                                <span class="slider"></span>
                                <span class="text">
                                    {{ __('Make this event visible to everyone.') }}
                                </span>
                            </label>
                        </div>
                        <div class="switcher">
                            <label>
                                <input type="checkbox" @if ($event->waitlist == 1) checked @endif disabled />
                                <span class="slider"></span>
                                <span class="text">
                                    {{ __('Enable waitlist when event is full') }}
                                </span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>







    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
        integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"
        integrity="sha384-G/EV+4j2dNv+tEPo3++6LCgdCROaejBqfUeNjuKAiuXbjrxilcCdDz6ZAVfHWe1Y" crossorigin="anonymous">
    </script>
    <script src="{{ asset('assets/js/svg.js') }}"></script>
    <script src="{{ asset('assets/js/main.js') }}"></script>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDG_YTiNT7XKtOgwleiwGa4s2v20OAbLNQ&callback=initMap" async
        defer></script>
    <script>
        function initMap() {
            let lat = 31.046944;
            let lng = 31.402676;
            const myLatlng = {
                lat: lat,
                lng: lng
            };
            const map = new google.maps.Map(
                document.getElementById("map"), {
                    zoom: 21,
                    center: myLatlng,
                    draggable: true,
                    scrollwheel: true,
                    disableDoubleClickZoom: true,
                    zoomControl: true,
                }
            );
        }
    </script>
@endsection