@extends('layouts.commonmaster')

@section('title') | Create Event @endsection

@section('content')

<!-- Page body -->
<div class="page-body">
    <div class="container-xl">

        @if($has_draft_event)

        <div class="col-12">
            <div class="card card-md">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <h2 class="h3">Refine your draft Events</h2>
                            <p class="m-0 text-secondary">
                                Draft events are events that have been created but are incomplete. Click on the event to add more information to them
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            @if(Auth::user()->hasAnyRole(['super_admin', 'admin']))
            <div class="row">
                @foreach($is_draft_events as $ide)
                <div class="mt-4 col-md-6 col-xl-4">

                    <a href="{{ route('event.edit', ['id' => $ide->id]) }}" style="text-decoration: none; color: black;">
                        <div class="card card-link">
                            <div class="card-cover card-cover-blurred text-center" style="background-image: url('{{ asset('images/dashboard/construction.webp') }}');">
                                <span class="avatar avatar-xl avatar-thumb rounded" style="background-image: url('{{ asset('images/dashboard/construction.webp') }}');"></span>
                            </div>

                            <div class="card-body">
                                <div class="card-title">Basic info</div>
                                <div class="mb-2">
                                    <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-ticket"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 5l0 2" /><path d="M15 11l0 2" /><path d="M15 17l0 2" /><path d="M5 5h14a2 2 0 0 1 2 2v3a2 2 0 0 0 0 4v3a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-3a2 2 0 0 0 0 -4v-3a2 2 0 0 1 2 -2" /></svg>
                                    Event: <strong>
                                        {{ $ide->team_a }} vs {{ $ide->team_b }}
                                    </strong>
                                </div>
                                <div class="mb-2">
                                    <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-door-enter"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M13 12v.01" /><path d="M3 21h18" /><path d="M5 21v-16a2 2 0 0 1 2 -2h6m4 10.5v7.5" /><path d="M21 7h-7m3 -3l-3 3l3 3" /></svg>
                                    Venue: <strong>{{ $ide->venue_name }}</strong>
                                </div>
                                <div class="mb-2">
                                    <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"  class="icon icon-tabler icons-tabler-filled icon-tabler-map-pin"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18.364 4.636a9 9 0 0 1 .203 12.519l-.203 .21l-4.243 4.242a3 3 0 0 1 -4.097 .135l-.144 -.135l-4.244 -4.243a9 9 0 0 1 12.728 -12.728zm-6.364 3.364a3 3 0 1 0 0 6a3 3 0 0 0 0 -6z" /></svg>
                                    Venue Address: <strong>{{ $ide->venue_address }}</strong> at {{ $ide->start_time }}
                                </div>
                                <div class="mb-2">
                                    <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-eye-check"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M11.102 17.957c-3.204 -.307 -5.904 -2.294 -8.102 -5.957c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6a19.5 19.5 0 0 1 -.663 1.032" /><path d="M15 19l2 2l4 -4" /></svg>
                                    Start Date: <strong>{{ $ide->start_date }}</strong> at {{ $ide->start_time }}
                                </div>
                                <div class="mb-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2 text-secondary" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0" /><path d="M12 7v5l3 3" /></svg>
                                    End Date: <strong>{{ $ide->end_date }}</strong> at {{ $ide->end_time }}
                                </div>
                                <div class="">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon me-2 text-secondary" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
                                    Event Visibility: <strong class="badge badge-outline text-azure">{{ $ide->event_visibility }}</strong>
                                </div>
                            </div>
                        </div>

                    </a>
                </div>
                @endforeach
            </div>

            @elseif(Auth::user()->hasRole('clerk'))

            <x-clerk.clerk :eventTickets="$eventTickets" :eventId="$eventId" />

            @endif

        </div>
        @else
        <div class="page-body">
            <div class="container-xl">
                <div class="col-md-12">
                    <div class="row row-cards">
                        <div class="space-y">

                            <div class="container-xl d-flex flex-column justify-content-center">
                                <div class="empty">
                                    <div class="empty-img"><img src="{{ asset('images/static/illustrations/void.svg') }}" height="128" alt="">
                                    </div>
                                    <p class="empty-title">No Draft events found</p>
                                    <p class="empty-subtitle text-secondary">
                                        This page will get populated when you have created events that lack some metadata
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
</div>

@endsection()

@push('scripts')

@endpush