@extends('layouts.landing_page.master')
@section('title', 'Events Calendar')

@push('styles')
<style>
    .tooltip {
        max-width: 350px !important;
        background-color: white !important;
        padding: 0;
    }

    .tooltip .tooltip-inner {
        background-color: white !important;
        color: black !important;
        max-width: 100%;
        padding: 10px;
        border-radius: 6px;
        text-align: left;
        width: 100%;
    }
</style>
@endpush

@section('content')
<section class="main_section container-fluid my-4">
    <div class="card">
        <div class="p-2">
            <form class="mob-none" action="{{ route('event.calendar') }}" method="GET" id="eventCalendarFilterForm" onkeydown="return event.key != 'Enter';">
                <div class="row mb-3">
                    <div class="col-12 col-md-3 mb-3">
                        <div class="relative z-0 w-full mb-1 group me-4">
                            <label for="category"
                                class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10 custom-label">{{ __('Event Category') }}</label>
                            <select name="category" id="category"
                                class="select2 form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-transparent border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer h-11 pt-2 select-form">
                                <option value="">{{ __('Select Category') }}</option>
                                <option value="amplivo_training">{{ __('Amplivo Training') }}</option>
                                <option value="devlopment_training">{{ __('Devlopment Training') }}</option>
                                <option value="project_training">{{ __('Project Training') }}</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-12 col-md-3 mb-3">
                        <div class="relative z-0 w-full mb-1 groupme-4">
                            <label for="country"
                                class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10 custom-label">{{ __('Country') }}</label>
                            <select name="country_id" id="country"
                                class="select2 form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-transparent border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer h-11 pt-2 select-form">
                                <option value="">{{ __('Select Country') }}</option>
                                @foreach ($country as $row)
                                <option value="{{$row->id}}">{{$row->country_name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-12 col-md-3 mb-3">
                        <div class="relative z-0 w-full mb-1 group me-4">
                            <label for="language"
                                class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10 custom-label">{{ __('Language') }}</label>
                            <select name="language_id" id="language"
                                class="select2 form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-transparent border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer h-11 pt-2 select-form">
                                <option value="">{{ __('Select Language') }}</option>
                                @foreach ($languages as $row)
                                <option value="{{$row->id}}">{{$row->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="relative z-0 w-full mb-1 group">
                            <input type="text" class="form-control rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11" name="title" id="title" placeholder="">
                            <label for="title" class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Title') }}</label>
                        </div>
                    </div>
                </div>
            </form>

            <div class="flex justify-end items-center gap-2 w-full d-none mob-visible absolute right-2">
                <div class="flex justify-end items-center gap-2">
                    <div class="">
                        <button id="dropdownToggleButton" data-dropdown-toggle="dropdownToggle" class="p-1 text-center inline-flex items-center" type="button">
                            <i class="bi bi-search ml-2 fs-4 fw-bold"></i>
                        </button>

                        <!-- Dropdown menu for mobile -->
                        <div id="dropdownToggle" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-72 dark:bg-gray-700 dark:divide-gray-600">
                            <ul class="m-0 p-3 space-y-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownToggleButton">
                            <form action="{{ route('event.calendar') }}" method="GET" id="eventCalendarMobileFilterForm" onkeydown="return event.key != 'Enter';">
                                <li>
                                    <div class="flex p-2 rounded-sm hover:bg-gray-100 dark:hover:bg-gray-600">
                                        <div class="relative z-0 w-full group">
                                            <label for="category"
                                                class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10 custom-label">{{ __('Event Category') }}</label>
                                            <select name="category" id="category"
                                                class="select2 form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-transparent border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer h-11 pt-2 select-form">
                                                <option value="">{{ __('Select Category') }}</option>
                                                <option value="amplivo_training">{{ __('Amplivo Training') }}</option>
                                                <option value="devlopment_training">{{ __('Devlopment Training') }}</option>
                                                <option value="project_training">{{ __('Project Training') }}</option>
                                            </select>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="flex p-2 rounded-sm hover:bg-gray-100 dark:hover:bg-gray-600">
                                        <div class="relative z-0 w-full mb-1 groupme-4">
                                            <label for="country"
                                                class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10 custom-label">{{ __('Country') }}</label>
                                            <select name="country_id" id="country"
                                                class="select2 form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-transparent border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer h-11 pt-2 select-form">
                                                <option value="">{{ __('Select Country') }}</option>
                                                @foreach ($country as $row)
                                                <option value="{{$row->id}}">{{$row->country_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="flex p-2 rounded-sm hover:bg-gray-100 dark:hover:bg-gray-600">
                                        <div class="relative z-0 w-full group">
                                            <label for="language"
                                                class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10 custom-label">{{ __('Language') }}</label>
                                            <select name="language_id" id="language"
                                                class="select2 form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-transparent border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer h-11 pt-2 select-form">
                                                <option value="">{{ __('Select Language') }}</option>
                                                @foreach ($languages as $row)
                                                <option value="{{$row->id}}">{{$row->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="flex p-2 rounded-sm hover:bg-gray-100 dark:hover:bg-gray-600">
                                        <div class="relative z-0 w-full mb-1 group">
                                            <input type="text" class="form-control rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11" name="title" id="title" placeholder="">
                                            <label for="title" class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Title') }}</label>
                                        </div>
                                    </div>
                                </li>
                            </form>
                            </ul>
                        </div>
                    </div>
                    <div class="mob-visible">
                        <button id="dropdownDefaultButton" data-dropdown-toggle="dropdown" class="text-sm p-1 text-center inline-flex items-center" type="button">
                            <i class="bi bi-menu-button-wide ml-2 fs-4 fw-bold"></i>
                        </button>

                        <div id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow-sm w-fit dark:bg-gray-700">
                            <ul class="m-0 p-1 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
                                <li>
                                    <a href="#" class="block p-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white flex items-center justify-start gap-2">
                                        <i class="bi bi-list-ul ml-2 fs-4 fw-bold"></i>
                                        <span>List</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="block p-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white flex items-center justify-start gap-2">
                                        <i class="bi bi-calendar3 ml-2 fs-4 fw-bold"></i>
                                        <span>Month </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="block p-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white flex items-center justify-start gap-2">
                                        <i class="bi bi-calendar-day ml-2 fs-4 fw-bold"></i>
                                        <span>
                                            Day </span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Calendar Section -->
        <div id="calendar" class="pt-0 p-2"></div>
        <!-- event details for mobile view -->
        <div id="mobile-event-details" class=""></div>
    </div>

    @include('frontend.events.event-detail-modal')
</section>
@endsection
@push('scripts')
<script src="{{asset('frontend/js/fullcalendar.min.js')}}"></script>
<script>
    window.calendarEvents = @json($calendarEvents);
</script>
<script src="{{asset('frontend/js/page-js/event-calendar.js')}}"></script>
@endpush