@extends('layouts.commonmaster')

@section('title') | Dashboard @endsection

@section('content')

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

        @if($has_season)
        <div class="col-12">

            @if(Auth::user()->hasAnyRole(['super_admin', 'admin']))
            <div class="card card-md">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col">
                            <h2 class="h3">Explore Your Seasons</h2>
                            <p class="m-0 text-secondary">
                                Discover and manage your ongoing Seasons in the system seamlessly.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row row-deck row-cards mt-2">
                <div class="col-12">
                    <div class="row row-cards">
                        <div class="col-sm-6 col-6 col-md-3 col-lg-3">
                            <a href="" style="text-decoration: none;" id="createEventCardBtn">
                                <div class="card card-sm" style="background-color: #C4EED0;">
                                    <div class="card-body">
                                        <div class="row align-items-center">
                                            <div class="col-auto">
                                                <span class="bg-primary text-white avatar">
                                                    <i class="ti ti-ticket"></i>
                                                </span>
                                            </div>
                                            <div class="col">
                                                <div class="font-weight-medium">
                                                    <strong>Create Event</strong>
                                                </div>
                                                <div class="text-secondary">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-sm-6 col-6 col-md-3 col-lg-3">
                            <a href="{{ route('other') }}" style="text-decoration: none;" id="viewSpecialEvent">
                                <div class="card card-sm" style="background-color: #A5DFF4;">
                                    <div class="card-body">
                                        <div class="row align-items-center">
                                            <div class="col-auto">
                                                <span class="bg-primary text-white avatar">
                                                    <i class="ti ti-ticket"></i>
                                                </span>
                                            </div>
                                            <div class="col">
                                                <div class="font-weight-medium">
                                                    <strong>View Other Events</strong>
                                                </div>
                                                <div class="text-secondary">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="row">
                    @foreach($seasons as $s)
                    <div class="mt-4 col-md-4 col-xl-4 col-sm-6">

                        <div class="card card-link card-link-pop shadow-lg">

                            <a href="{{ route('season.index', ['id' => $s->id]) }}">
                                <div class="card-cover card-cover-blurred text-center" style="background-image: url('{{ asset('storage/' . $s->season_banner_file) }}');">
                                    <span class="avatar avatar-xl avatar-thumb rounded" style="background-image: url('{{ asset('storage/' . $s->season_banner_file) }}');"></span>
                                </div>
                            </a>

                            @if($s->is_open == 0)
                            <div class="ribbon bg-red">Closed Season</div>
                            @else
                            <div class="ribbon bg-green">Ongoing</div>
                            @endif


                            <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>
                                    Season: <strong>
                                        {{ $s->name }}
                                    </strong>
                                </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>
                                    Start Date: <strong>{{ $s->start_date }}</strong>
                                </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>{{ $s->end_date }}</strong>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>

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

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

                @endif

            </div>
            @else
            <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">There are no upcoming seasons in the system</h2>
                                <p class="m-0 text-secondary">
                                    No Upcoming Seasons Scheduled
                                </p>
                            </div>
                            <div class="col-auto">
                                <a href="#" class="btn" data-bs-toggle="modal" data-bs-target="#modal-success">
                                    Create Season
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <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 upcoming seasons found</p>
                    <p class="empty-subtitle text-secondary">
                        Try creating a season to populate your dashboard
                    </p>
                    <div class="empty-action">
                        <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modal-success">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon" 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="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
                            Create Season
                        </a>
                    </div>
                </div>
            </div>
            @endif
        </div>
    </div>
</div>

<!-- Modal for creating season for the organization -->
<div class="modal modal-blur fade" id="modal-success" tabindex="-1" role="dialog" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
        <div class="modal-content">
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            <div class="modal-status bg-success"></div>
            <form method="POST" action="{{ route('season.store') }}" id="createSeason" enctype="multipart/form-data">
                @csrf

                <div class="modal-body text-center py-4">
                    <i style="font-size: 70px;color: green;" class="ti ti-ticket"></i>
                    <h3>Season Details</h3>
                    <div class="form-group">
                        <label for="name"><strong>Season Name</strong></label>
                        <input required type="text" class="form-control" placeholder="Enter season name" name="name">
                    </div>
                    <div class="form-group mt-2">
                        <label for="name"><strong>Start Date</strong></label>
                        <input required class="form-control datepicker" autocomplete="off" name="start_date" placeholder="Select a date" id="datepicker_icon"/>
                    </div>
                    <div class="form-group mt-2">
                        <label for="name"><strong>End Date</strong></label>
                        <input required class="form-control datepicker" autocomplete="off" name="end_date" placeholder="Select a date" id="datepicker_icon"/>
                    </div>
                    <div class="form-group mt-2">
                        <label class="form-label"><strong>Season Banner Image</strong></label>
                        <div class="dropzone" id="dropzone-default" autocomplete="off" novalidate>
                            <div class="fallback">
                                <input name="season_banner_file" type="file" required  />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="w-100">
                        <div class="row">
                            <div class="col"><a href="#" class="btn w-100" data-bs-dismiss="modal">
                                Cancel
                            </a></div>
                            <div class="col"><button type="submit" class="btn btn-success w-100">
                                Add Season
                            </button></div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal for add events to the organization -->
<div class="modal fade" id="createEventModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="createEventModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 40vw;">
        <div class="modal-content">
            <div class="card-header overflow-hidden p-0">
                <img class="w-100" height="360px" src="{{ asset('images/events/football/football.jpg') }}" >
            </div>
            <div class="modal-body" style="background-color: #F9FAFB;">
                <p class="mb-3" style="color: #6B7280; font-size: 0.875rem;">
                    Choose the event type. Only selectable options are currently enabled based on system settings.
                </p>
                <div class="mb-3">
                    <div id="eventRadioButton">
                        @foreach($tags as $tag)
                        <label class="form-check form-check-inline">
                            <input name="eventTag" class="form-check-input" {{ $tag->tag == 'fundraiser' ? '' : 'disabled' }} type="radio" name="radios-inline" style="cursor: pointer" value="{{ $tag->tag }}"/>
                            <span class="form-check-label">{{ ucfirst($tag->tag) }}</span>
                        </label>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="createEventBtn" disabled>Create Event</button>
                </div>
            </div>
        </div>
    </div>

    @endsection()

    @push('scripts')
    <script>
$(document).ready(function(){
    $('#createEventCardBtn').on('click', function(e) {
        e.preventDefault()
        $('#createEventModal').modal('show')
    })

    $('input[name="eventTag"]').on('change', function() {
        if($('input[name="eventTag"]:checked').length > 0){
            $('#createEventBtn').prop('disabled', false)
        }else{
            $('#createEventBtn').prop('disabled', true)
        }
    })

    $('#createEventBtn').on('click', function(e) {
        e.preventDefault()

        const season_id = {{ json_encode($season_id) }}
        var tag = $('input[name="eventTag"]:checked').val();

        window.location.href = '/ticketier/event/create/' + tag + '/' + season_id

    })

})

    </script>
    @endpush