@extends('layouts.index')
@section('title')
    EMS UIDBC
@endsection
@section('css')
    <link href="{{ asset('back') }}/extra-libs/datatables.net-bs4/css/dataTables.bootstrap4.css" rel="stylesheet" />
    <link href='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.css' rel='stylesheet' />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css' rel='stylesheet'>
    <style>
        #calendar {
            width: 100%;
            height: auto;
        }

        .fc-disabled {
            background-color: #F0F0F0 !important;
            color: #000;
            cursor: default;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 10px;
        }

        .fc-time {
            display: none;
        }

        .fc-title {
            white-space: normal !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            word-wrap: break-word !important;
            max-width: 100% !important;
            text-align: start !important;
        }

        .fc-scroller::-webkit-scrollbar {
            display: none;
        }

        .fc-scroller {
            scrollbar-width: none;
        }

        .d-flex {
            display: flex;
        }

        .align-items-center {
            align-items: center;
        }

        .justify-content-start {
            justify-content: flex-start;
        }

        .color-box {
            width: 15px;
            height: 15px;
            margin-right: 8px;
            border-radius: 2px;
        }

        .blue {
            background-color: #176ea6;
        }

        .purple {
            background-color: #a32bff;
        }

        .yellow {
            background-color: #f39c12;
        }

        .red {
            background-color: #f31212;
        }

        .me-4 {
            margin-right: 1.5rem;
        }

        .w-100 {
            width: 100%;
        }
        .my-custom-button {
            background-color: #15435A !important;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            font-size: 16px;
        }

        .my-custom-button:hover {
            background-color: #4ea2cc;
        }
    </style>
@endsection
@section('content')
    <div class="page-titles">
        <div class="row">
            <div class="col-lg-8 col-md-6 col-12 align-self-center">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 d-flex align-items-center">
                        <li class="breadcrumb-item active" aria-current="page">
                            Dashboard
                        </li>
                    </ol>
                </nav>
                <h1 class="mb-0 fw-bold">Create New Event UID Bali Campus</h1>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12 col-xl-12 col-md-12">
                <div class="card">
                    <div class="card-body">
                        <form id="myForm" role="form" action="{{ route('createApi') }}" method="post"
                            enctype="multipart/form-data">
                            @csrf
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="startDate" class="form-label">Start Date : <span
                                            class="text-danger">*</span></label>
                                    <input type="date" name="rdate" class="form-control required" id="startDate"
                                        required>
                                </div>
                                <div class="col-md-6">
                                    <label for="endDate" class="form-label">End Date : <span
                                            class="text-danger">*</span></label>
                                    <input type="date" name="rdaten" class="form-control required" id="endDate"
                                        required>
                                </div>
                                <div class="col-md-6">
                                    <label for="timeIn" class="form-label">Time In : <span
                                            class="text-danger">*</span></label>
                                    <input type="time" name="timein" class="form-control required" id="timeIn"
                                        required>
                                </div>
                                <div class="col-md-6">
                                    <label for="timeOut" class="form-label">Time Out : <span
                                            class="text-danger">*</span></label>
                                    <input type="time" name="timeout" class="form-control required" id="timeOut"
                                        required>
                                </div>
                                <div class="col-md-6">
                                    <label for="host" class="form-label">Host : <span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="host" class="form-control required" id="host"
                                        placeholder="Host" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="eventTitle" class="form-label">Event Title : <span
                                            class="text-danger">*</span></label>
                                    <input type="text" name="evtit" class="form-control required" id="eventTitle"
                                        placeholder="Event Title" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="eventTypeSelect" class="form-label">Event Type :</label>
                                    <select class="form-select" name="evtype" id="eventTypeSelect">
                                        <option selected>--Select--</option>
                                        <option value="One-off">One-off</option>
                                        <option value="Workshop">Workshop</option>
                                        <option value="Bootcamp">Bootcamp</option>
                                        <option value="Seminar/Conference">Seminar/Conference</option>
                                        <option value="Performance">Performance</option>
                                        <option value="Festival">Festival</option>
                                        <option value="Talk Show">Talk Show</option>
                                        <option value="Meeting">Meeting</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="primaryPillar" class="form-label">Primary Pillar :</label>
                                    <input type="text" name="prillar" class="form-control" id="primaryPillar"
                                        placeholder="Primary Pillar">
                                </div>
                                <div class="col-md-6">
                                    <label for="participant" class="form-label">Participant/pax :</label>
                                    <input type="number" name="participant" class="form-control" id="participant"
                                        placeholder="Participant">
                                </div>
                                <div class="col-md-6">
                                    <label for="eventLanguage" class="form-label">Event Language :</label>
                                    <select class="form-select" name="evlanguage" id="eventLanguage">
                                        <option selected>--Select--</option>
                                        <option value="Indonesian">Indonesian</option>
                                        <option value="English">English</option>
                                        <option value="Indonesian and English">Indonesian and English</option>
                                    </select>
                                </div>
                                <div class="col-6">
                                    <label for="eventBlurb" class="form-label required">Event Blurb : <span
                                            class="text-danger">*</span></label>
                                    <textarea class="form-control" name="evblurb" id="eventBlurb" rows="3" placeholder="Event Blurb" required></textarea>
                                </div>
                                <div class="col-md-6">
                                    <label for="zoom" class="form-label">Zoom :</label>
                                    <select class="form-select" name="zoom" id="zoom">
                                        <option selected>--Select--</option>
                                        <option value="Hybrid">Hybrid</option>
                                        <option value="Online">Online</option>
                                        <option value="Offline">Offline</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="rooms" class="form-label">Room : <span
                                            class="text-danger">*</span></label>
                                    <div class="row">
                                        <div class="col-6">
                                            <div class="form-check">
                                                <input class="form-check-input" name="room[]" value="Awan Auditorium"
                                                    type="checkbox" id="awan">
                                                <label class="form-check-label" for="awan">Awan Auditorium</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" name="room[]" value="Cloud Lounge"
                                                    type="checkbox" id="awan">
                                                <label class="form-check-label" for="awan">Cloud Lounge</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" name="room[]" value="Saraswati"
                                                    type="checkbox" id="saraswati">
                                                <label class="form-check-label" for="saraswati">Saraswati</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" name="room[]" value="Malajah"
                                                    type="checkbox" id="awan">
                                                <label class="form-check-label" for="awan">Malajah</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" name="room[]" value="Digi Lab"
                                                    type="checkbox" id="awan">
                                                <label class="form-check-label" for="awan">Digi Lab</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" name="room[]" value="Giorgian Fan"
                                                    type="checkbox" id="awan">
                                                <label class="form-check-label" for="awan">Giorgian Fan</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" name="room[]" value="Tech Incubator"
                                                    type="checkbox" id="awan">
                                                <label class="form-check-label" for="awan">Tech Incubator</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" name="room[]" value="Coco Lounge"
                                                    type="checkbox" id="awan">
                                                <label class="form-check-label" for="awan">Coco Lounge</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" name="room[]" value="Rainbow Kerthi"
                                                    type="checkbox" id="awan">
                                                <label class="form-check-label" for="awan">Rainbow Kerthi</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" name="room[]" value="Media Room"
                                                    type="checkbox" id="awan">
                                                <label class="form-check-label" for="awan">Media Room</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" name="room[]" value="Subak"
                                                    type="checkbox" id="awan">
                                                <label class="form-check-label" for="awan">Subak</label>
                                            </div>
                                            <!-- Add more room checkboxes here -->
                                        </div>
                                        <div class="col-6">
                                            <div class="form-check">
                                                <input class="form-check-input" name="room[]" value="Open Atma"
                                                    type="checkbox" id="openAtma">
                                                <label class="form-check-label" for="openAtma">Open Atma</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" name="room[]" value="Open Jagat"
                                                    type="checkbox" id="openJagat">
                                                <label class="form-check-label" for="openJagat">Open Jagat</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" name="room[]" value="Open Danu"
                                                    type="checkbox" id="openJagat">
                                                <label class="form-check-label" for="openJagat">Open Danu</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" name="room[]" value="Open Lagoon"
                                                    type="checkbox" id="openJagat">
                                                <label class="form-check-label" for="openJagat">Open Lagoon</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" name="room[]" value="Open Wana"
                                                    type="checkbox" id="openJagat">
                                                <label class="form-check-label" for="openJagat">Open Wana</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" name="room[]" value="Open Samudra"
                                                    type="checkbox" id="openJagat">
                                                <label class="form-check-label" for="openJagat">Open Samudra</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" name="room[]" value="Open Jana"
                                                    type="checkbox" id="openJagat">
                                                <label class="form-check-label" for="openJagat">Open Jana</label>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" name="room[]" value="Mezzanine"
                                                    type="checkbox" id="openJagat">
                                                <label class="form-check-label" for="openJagat">Mezzanine</label>
                                            </div>
                                            <!-- Add more room checkboxes here -->
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label for="rooms" class="form-label">Booking LED Lobby :</label>
                                    <div class="form-check">
                                        <input class="form-check-input" name="led[]" value="LED Lobby" type="checkbox"
                                            id="openJagat">
                                        <label class="form-check-label" for="openJagat">LED Lobby</label>
                                    </div>
                                </div>
                                <div class="col-12 text-center">
                                    <button type="submit" id="btn-loading"
                                        class="btn btn-primary mt-3" style="width: 120px; height: 45px; font-size: 15px"><b>Submit</b></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js'></script>
    <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/bootstrap5@6.1.15/index.global.min.js"></script>

    <script>
        @if (session('success'))
            Swal.fire({
                icon: 'success',
                title: 'Success',
                text: 'Successfully create new event',
                showConfirmButton: false,
                timer: 2500,
            });
        @elseif (session('error'))
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Error create new event',
                showConfirmButton: false,
                timer: 2500,
            });
        @endif
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var loading = document.getElementById("btn-loading");
            var form = document.getElementById("myForm");

            loading.addEventListener("click", function(event) {
                event.preventDefault();

                if (!form.checkValidity()) {
                    Swal.fire({
                        icon: "warning",
                        title: "Form is incomplete",
                        html: 'Please fill in <b style="color: red;">Start Date, End Date, Time In, Time Out, Host, Event Title, Event Blurb, and Room</b>',
                        customClass: {
                            confirmButton: 'my-custom-button'
                        }
                    });
                } else {
                    let timerInterval;
                    Swal.fire({
                        html: '<img src="{{ asset('loading-animation.gif') }}" alt="Loading..." style="width: 200px; height: 200px;"/>',
                        timer: 6000000,
                        showConfirmButton: false,
                        allowOutsideClick: false,
                        didOpen: () => {

                            form.submit();
                        },
                        willClose: () => {
                        }
                    }).then((result) => {
                        if (result.dismiss === Swal.DismissReason.timer) {
                            console.log("I was closed by the timer");
                        }
                    });
                }
            });
        });
    </script>


    <script>
        window.onload = function() {
            setTimeout(function() {
                var calendarEl = document.getElementById('calendar');
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'dayGridMonth',
                    themeSystem: 'bootstrap5',
                    customButtons: {
                        today: {
                            text: 'Today',
                            click: function() {
                                calendar.today();
                                resetDropdownsToToday
                                    ();
                            }
                        }
                    },
                    headerToolbar: {
                        left: 'prev today',
                        center: 'title',
                        right: 'next'
                    },
                    events: function(fetchInfo, successCallback, failureCallback) {
                        $.ajax({
                            url: '{{ url('controllerApi') }}',
                            dataType: 'json',
                            type: 'GET',
                            success: function(data) {
                                successCallback(data);
                                console.log(data);
                            },
                            error: function() {
                                failureCallback();
                            }
                        });
                    },
                    eventContent: function(arg) {
                        let title = document.createElement('div');
                        title.classList.add('fc-title');
                        title.innerHTML = arg.event.title;
                        return {
                            domNodes: [title]
                        };
                    },
                    datesSet: function(info) {
                        updateDropdowns(info.view
                            .currentStart);
                    }
                });

                calendar.render();

                buildMonthList(calendar);
                buildYearsList(calendar);

                $('#months').on('change', function() {
                    var selectedDate = $(this).val();
                    calendar.gotoDate(selectedDate);
                });

                $('#years').on('change', function() {
                    var selectedDate = $(this).val();
                    calendar.gotoDate(selectedDate);
                });

                function buildMonthList(calendar) {
                    $('#months').empty();
                    var currentMonth = calendar.getDate();
                    var initialMonth = currentMonth.getMonth();

                    for (var i = 0; i < 12; i++) {
                        var date = new Date(currentMonth.getFullYear(), i, 1);
                        var option = document.createElement('option');
                        option.value = date.toLocaleDateString(
                            'en-CA');
                        option.text = date.toLocaleString('default', {
                            month: 'long'
                        });
                        option.selected = (i === initialMonth);
                        $('#months').append(option);
                    }
                }

                function buildYearsList(calendar) {
                    $('#years').empty();
                    var currentYear = calendar.getDate().getFullYear();

                    for (var i = currentYear - 6; i <= currentYear + 6; i++) {
                        var date = new Date(i, 0, 1);
                        var option = document.createElement('option');
                        option.value = date.toLocaleDateString(
                            'en-CA');
                        option.text = i;
                        option.selected = (i === currentYear);
                        $('#years').append(option);
                    }
                }

                function resetDropdownsToToday() {
                    var today = new Date();

                    var todayMonthValue = new Date(today.getFullYear(), today.getMonth(), 1).toLocaleDateString(
                        'en-CA');
                    $('#months').val(todayMonthValue);

                    var todayYearValue = new Date(today.getFullYear(), 0, 1).toLocaleDateString('en-CA');
                    $('#years').val(todayYearValue);
                }

                function updateDropdowns(date) {
                    var currentMonthValue = new Date(date.getFullYear(), date.getMonth(), 1).toLocaleDateString(
                        'en-CA');
                    var currentYearValue = new Date(date.getFullYear(), 0, 1).toLocaleDateString('en-CA');

                    $('#months').val(currentMonthValue);
                    $('#years').val(currentYearValue);
                }

            }, 100);
        };
    </script>
@endsection