@extends('admin.layout.dashboard_master')

@section('content')
    <main id="main" class="main">

        <div class="pagetitle">
            <h1>Event</h1>
            <nav>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">American Plastic</a></li>
                    <li class="breadcrumb-item">Dashboard</li>
                    <li class="breadcrumb-item active">Event</li>
                    <li class="breadcrumb-item active">Manage Event</li>
                </ol>
            </nav>
        </div><!-- End Page Title -->
        <style>
            .fade-screen {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 9999;
                display: none;
                justify-content: center;
                align-items: center;
                color: white;
                font-size: 1.5em;
                text-align: center;
            }
        </style>

        <div class="fade-screen" id="fadeScreen">
            Please wait...
        </div>
        <section class="section">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Event Form</h5>

                            <!-- General Form Elements -->
                            <form id="event_form" method="POST" onsubmit="return validateForm()">
                                @csrf
                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <!-- Upload Area -->
                                        <div id="uploadArea" class="upload-area">
                                            <!-- Header -->
                                            <div class="upload-area__header">
                                                <label>Event title</label>
                                                <input type="text" class="form-control" name="event_title"
                                                    id="eventtitle" maxlength="60">

                                            </div>
                                            <!-- End Header -->

                                            <div class="upload-area__header py-2">
                                              <div class="row">
                                                <div class="col-md-6">
                                                    <label for="eventStatus">Event Status</label>
                                                    <select id="eventStatus" name="eventStatus" class="form-control">

                                                        <option value="upcoming" selected>Upcoming</option>
                                                        <option value="past">Past Event</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-6">
                                                    <label>Event Date</label>
                                                    <input type="date" class="form-control" name="event_date"
                                                    id="eventdate">
                                                </div>
                                              </div>

                                            </div>

                                            <div class="upload-area__header py-2">
                                                <label>Event Description</label>
                                            <textarea type="text" class="form-control" name="event_description"
                                                id="eventdescription"></textarea>
                                            </div>
                                            <!-- Drop Zoon -->
                                            <div class="upload-area__header py-2">
                                                <label>Event Image(1024 x 768)</label>
                                                <div id="dropZoon" class="upload-area__drop-zoon drop-zoon"
                                                    style="margin-top: 1rem">
                                                    <p class="upload-area__paragraph py-2">
                                                        File should be an image
                                                        <strong class="upload-area__tooltip">
                                                            Like
                                                            <span class="upload-area__tooltip-data"></span>
                                                            <!-- Data Will be Comes From Js -->
                                                        </strong>
                                                    </p>
                                                    <span class="drop-zoon__icon">
                                                        <i class='bx bxs-file-image'></i>
                                                    </span>
                                                    <p class="drop-zoon__paragraph">Drop your file here or Click to browse</p>
                                                    <span id="loadingText" class="drop-zoon__loading-text">Please Wait</span>
                                                    <img src="" alt="Preview Image" id="previewImage"
                                                        class="drop-zoon__preview-image" draggable="false">
                                                    <input type="file" id="fileInput" class="drop-zoon__file-input"
                                                        name="event_img" accept="image/*">
                                                </div>
                                            </div>
                                            <!-- End Drop Zoon -->

                                            <!-- File Details -->
                                            <div id="fileDetails" class="upload-area__file-details file-details">
                                                <h3 class="file-details__title">Uploaded File</h3>

                                                <div id="uploadedFile" class="uploaded-file">
                                                    <div class="uploaded-file__icon-container">
                                                        <i class='bx bxs-file-blank uploaded-file__icon'></i>
                                                        <span class="uploaded-file__icon-text"></span>
                                                        <!-- Data Will be Comes From Js -->
                                                    </div>

                                                    <div id="uploadedFileInfo" class="uploaded-file__info">
                                                        <span class="uploaded-file__name">Proejct 1</span>
                                                        <span class="uploaded-file__counter">0%</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- End File Details -->
                                        </div>
                                        <!-- End Upload Area -->
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-10">
                                        <button type="button" id="create_admin" class="btn btn-primary"
                                            onclick="validateForm()">Create</button>
                                    </div>
                                </div>
                            </form><!-- End General Form Elements -->
                        </div>
                    </div>
                </div>

                <div class="modal fade" id="event_modalform" tabindex="-1" role="dialog"
                    aria-labelledby="assignRoleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Edit Event</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <form id="event_modal_form">
                                    <div class="mb-3">
                                        <label for="roleSelect" class="form-label">Event title</label>
                                        <input type="text" class="form-control" id="edit_eventtitle"
                                            name="edit_event_title" maxlength="60">
                                        <input type="hidden" id="update_id" name="updateid">
                                    </div>

                                    <div class="mb-3">
                                        <label for="roleSelect" class="form-label">Event description</label>
                                        <textarea type="text" class="form-control" name="edit_news_description"
                                        id="edit_eventdescription"></textarea>
                                    </div>

                                    <div class="mb-3">
                                        <label for="roleSelect" class="form-label">Event date</label>
                                        <input type="date" class="form-control" name="editevent_date"
                                        id="editeventdate" >
                                    </div>



                                        <div class="mb-3">
                                            <label class="form-label" for="cat_image">Image</label>
                                            <input type="file" name="editimage" id="event_image" class="form-control"
                                                onchange="loadFile(event)">
                                            <span class="text-danger" id="image-input-error"></span>
                                        </div>
                                        <img id="category_image" class="responsive"
                                            style="height:1250%; max-height: 60%; max-width:100%; width: 1250%;  border-radius:20px; border: 2px solid #555;">&nbsp;&nbsp;&nbsp;

                                </form>
                            </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" data-id=""
                                    id="updatebtn">Update</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="table-responsive text-nowrap p-4">
                                <table class="table" id="event_table">
                                    <thead>
                                        <tr>
                                            <th>Event ID</th>
                                            <th>Event Title</th>
                                            <th>Event Status</th>
                                            <th>Image</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>


            </div>
            <style>
                /* General Styles */

                * {
                    box-sizing: border-box;
                }

                :root {
                    --clr-white: rgb(255, 255, 255);
                    --clr-black: rgb(0, 0, 0);
                    --clr-light: rgb(245, 248, 255);
                    --clr-light-gray: rgb(196, 195, 196);
                    --clr-blue: rgb(63, 134, 255);
                    --clr-light-blue: rgb(171, 202, 255);
                }


                /* End General Styles */

                /* Upload Area */
                .upload-area {
                    width: 100%;
                    max-width: 55rem;
                    background-color: var(--clr-white);
                    box-shadow: 0 10px 60px rgb(218, 229, 255);
                    border: 2px solid var(--clr-light-blue);
                    border-radius: 24px;
                    padding: 2rem 1.875rem 5rem 1.875rem;
                    margin: 0.625rem;

                }

                .upload-area--open {
                    /* Slid Down Animation */
                    animation: slidDown 500ms ease-in-out;
                }

                @keyframes slidDown {
                    from {
                        height: 28.125rem;
                        /* 450px */
                    }

                    to {
                        height: 35rem;
                        /* 560px */
                    }
                }

                /* Header */
                .upload-area__header {}

                .upload-area__title {
                    font-size: 1.8rem;
                    font-weight: 500;
                    margin-bottom: 0.3125rem;
                }

                .upload-area__paragraph {
                    font-size: 0.9375rem;
                    color: var(--clr-light-gray);
                    margin-top: 0;
                }

                .upload-area__tooltip {
                    position: relative;
                    color: var(--clr-light-blue);
                    cursor: pointer;
                    transition: color 300ms ease-in-out;
                }

                .upload-area__tooltip:hover {
                    color: var(--clr-blue);
                }

                .upload-area__tooltip-data {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -125%);
                    min-width: max-content;
                    background-color: var(--clr-white);
                    color: var(--clr-blue);
                    border: 1px solid var(--clr-light-blue);
                    padding: 0.625rem 1.25rem;
                    font-weight: 500;
                    opacity: 0;
                    visibility: hidden;
                    transition: none 300ms ease-in-out;
                    transition-property: opacity, visibility;
                }

                .upload-area__tooltip:hover .upload-area__tooltip-data {
                    opacity: 1;
                    visibility: visible;
                }

                /* Drop Zoon */
                .upload-area__drop-zoon {
                    position: relative;
                    height: 11.25rem;
                    /* 180px */
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    border: 2px dashed var(--clr-light-blue);
                    border-radius: 15px;
                    margin-top: 2.1875rem;
                    cursor: pointer;
                    transition: border-color 300ms ease-in-out;
                }

                .upload-area__drop-zoon:hover {
                    border-color: var(--clr-blue);
                }

                .drop-zoon__icon {
                    display: flex;
                    font-size: 3.75rem;
                    color: var(--clr-blue);
                    transition: opacity 300ms ease-in-out;
                }

                .drop-zoon__paragraph {
                    font-size: 0.9375rem;
                    color: var(--clr-light-gray);
                    margin: 0;
                    margin-top: 0.625rem;
                    transition: opacity 300ms ease-in-out;
                }

                .drop-zoon:hover .drop-zoon__icon,
                .drop-zoon:hover .drop-zoon__paragraph {
                    opacity: 0.7;
                }

                .drop-zoon__loading-text {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    display: none;
                    color: var(--clr-light-blue);
                    z-index: 10;
                }

                .drop-zoon__preview-image {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    padding: 0.3125rem;
                    border-radius: 10px;
                    display: none;
                    z-index: 1000;
                    transition: opacity 300ms ease-in-out;
                }

                .drop-zoon:hover .drop-zoon__preview-image {
                    opacity: 0.8;
                }

                .drop-zoon__file-input {
                    display: none;
                }

                /* (drop-zoon--over) Modifier Class */
                .drop-zoon--over {
                    border-color: var(--clr-blue);
                }

                .drop-zoon--over .drop-zoon__icon,
                .drop-zoon--over .drop-zoon__paragraph {
                    opacity: 0.7;
                }

                /* (drop-zoon--over) Modifier Class */
                .drop-zoon--Uploaded {}

                .drop-zoon--Uploaded .drop-zoon__icon,
                .drop-zoon--Uploaded .drop-zoon__paragraph {
                    display: none;
                }

                /* File Details Area */
                .upload-area__file-details {
                    height: 0;
                    visibility: hidden;
                    opacity: 0;
                    text-align: left;
                    transition: none 500ms ease-in-out;
                    transition-property: opacity, visibility;
                    transition-delay: 500ms;
                }

                /* (duploaded-file--open) Modifier Class */
                .file-details--open {
                    height: auto;
                    visibility: visible;
                    opacity: 1;
                }

                .file-details__title {
                    font-size: 1.125rem;
                    font-weight: 500;
                    color: var(--clr-light-gray);
                }

                /* Uploaded File */
                .uploaded-file {
                    display: flex;
                    align-items: center;
                    padding: 0.625rem 0;
                    visibility: hidden;
                    opacity: 0;
                    transition: none 500ms ease-in-out;
                    transition-property: visibility, opacity;
                }

                /* (duploaded-file--open) Modifier Class */
                .uploaded-file--open {
                    visibility: visible;
                    opacity: 1;
                }

                .uploaded-file__icon-container {
                    position: relative;
                    margin-right: 0.3125rem;
                }

                .uploaded-file__icon {
                    font-size: 3.4375rem;
                    color: var(--clr-blue);
                }

                .uploaded-file__icon-text {
                    position: absolute;
                    top: 1.5625rem;
                    left: 50%;
                    transform: translateX(-50%);
                    font-size: 0.9375rem;
                    font-weight: 500;
                    color: var(--clr-white);
                }

                .uploaded-file__info {
                    position: relative;
                    top: -0.3125rem;
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                }

                .uploaded-file__info::before,
                .uploaded-file__info::after {
                    content: '';
                    position: absolute;
                    bottom: -0.9375rem;
                    width: 0;
                    height: 0.5rem;
                    background-color: #ebf2ff;
                    border-radius: 0.625rem;
                }

                .uploaded-file__info::before {
                    width: 100%;
                }

                .uploaded-file__info::after {
                    width: 100%;
                    background-color: var(--clr-blue);
                }

                /* Progress Animation */
                .uploaded-file__info--active::after {
                    animation: progressMove 800ms ease-in-out;
                    animation-delay: 300ms;
                }

                @keyframes progressMove {
                    from {
                        width: 0%;
                        background-color: transparent;
                    }

                    to {
                        width: 100%;
                        background-color: var(--clr-blue);
                    }
                }

                .uploaded-file__name {
                    width: 100%;
                    max-width: 6.25rem;
                    /* 100px */
                    display: inline-block;
                    font-size: 1rem;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .uploaded-file__counter {
                    font-size: 1rem;
                    color: var(--clr-light-gray);
                }
            </style>
            <script>
                // Design By
                // - https://dribbble.com/shots/13992184-File-Uploader-Drag-Drop

                // Select Upload-Area
                const uploadArea = document.querySelector('#uploadArea')

                // Select Drop-Zoon Area
                const dropZoon = document.querySelector('#dropZoon');

                // Loading Text
                const loadingText = document.querySelector('#loadingText');

                // Slect File Input
                const fileInput = document.querySelector('#fileInput');

                // Select Preview Image
                const previewImage = document.querySelector('#previewImage');

                // File-Details Area
                const fileDetails = document.querySelector('#fileDetails');

                // Uploaded File
                const uploadedFile = document.querySelector('#uploadedFile');

                // Uploaded File Info
                const uploadedFileInfo = document.querySelector('#uploadedFileInfo');

                // Uploaded File  Name
                const uploadedFileName = document.querySelector('.uploaded-file__name');

                // Uploaded File Icon
                const uploadedFileIconText = document.querySelector('.uploaded-file__icon-text');

                // Uploaded File Counter
                const uploadedFileCounter = document.querySelector('.uploaded-file__counter');

                // ToolTip Data
                const toolTipData = document.querySelector('.upload-area__tooltip-data');

                // Images Types
                const imagesTypes = [
                    "jpeg",
                    "png",
                    "svg",
                    "gif"
                ];

                // Append Images Types Array Inisde Tooltip Data
                toolTipData.innerHTML = [...imagesTypes].join(', .');

                // When (drop-zoon) has (dragover) Event
                dropZoon.addEventListener('dragover', function(event) {
                    // Prevent Default Behavior
                    event.preventDefault();

                    // Add Class (drop-zoon--over) On (drop-zoon)
                    dropZoon.classList.add('drop-zoon--over');
                });

                // When (drop-zoon) has (dragleave) Event
                dropZoon.addEventListener('dragleave', function(event) {
                    // Remove Class (drop-zoon--over) from (drop-zoon)
                    dropZoon.classList.remove('drop-zoon--over');
                });

                // When (drop-zoon) has (drop) Event
                dropZoon.addEventListener('drop', function(event) {
                    // Prevent Default Behavior
                    event.preventDefault();

                    // Remove Class (drop-zoon--over) from (drop-zoon)
                    dropZoon.classList.remove('drop-zoon--over');

                    // Select The Dropped File
                    const file = event.dataTransfer.files[0];

                    // Call Function uploadFile(), And Send To Her The Dropped File :)
                    uploadFile(file);
                });

                // When (drop-zoon) has (click) Event
                dropZoon.addEventListener('click', function(event) {
                    // Click The (fileInput)
                    fileInput.click();
                });

                // When (fileInput) has (change) Event
                fileInput.addEventListener('change', function(event) {
                    // Select The Chosen File
                    const file = event.target.files[0];

                    // Call Function uploadFile(), And Send To Her The Chosen File :)
                    uploadFile(file);
                });

                // Upload File Function
                function uploadFile(file) {
                    // FileReader()
                    const fileReader = new FileReader();
                    // File Type
                    const fileType = file.type;
                    // File Size
                    const fileSize = file.size;

                    // If File Is Passed from the (File Validation) Function
                    if (fileValidate(fileType, fileSize)) {
                        // Add Class (drop-zoon--Uploaded) on (drop-zoon)
                        dropZoon.classList.add('drop-zoon--Uploaded');

                        // Show Loading-text
                        loadingText.style.display = "block";
                        // Hide Preview Image
                        previewImage.style.display = 'none';

                        // Remove Class (uploaded-file--open) From (uploadedFile)
                        uploadedFile.classList.remove('uploaded-file--open');
                        // Remove Class (uploaded-file__info--active) from (uploadedFileInfo)
                        uploadedFileInfo.classList.remove('uploaded-file__info--active');

                        // After File Reader Loaded
                        fileReader.addEventListener('load', function() {
                            // After Half Second
                            setTimeout(function() {
                                // Add Class (upload-area--open) On (uploadArea)
                                uploadArea.classList.add('upload-area--open');

                                // Hide Loading-text (please-wait) Element
                                loadingText.style.display = "none";
                                // Show Preview Image
                                previewImage.style.display = 'block';

                                // Add Class (file-details--open) On (fileDetails)
                                fileDetails.classList.add('file-details--open');
                                // Add Class (uploaded-file--open) On (uploadedFile)
                                uploadedFile.classList.add('uploaded-file--open');
                                // Add Class (uploaded-file__info--active) On (uploadedFileInfo)
                                uploadedFileInfo.classList.add('uploaded-file__info--active');
                            }, 500); // 0.5s

                            // Add The (fileReader) Result Inside (previewImage) Source
                            previewImage.setAttribute('src', fileReader.result);

                            // Add File Name Inside Uploaded File Name
                            uploadedFileName.innerHTML = file.name;

                            // Call Function progressMove();
                            progressMove();
                        });

                        // Read (file) As Data Url
                        fileReader.readAsDataURL(file);
                    } else { // Else

                        this; // (this) Represent The fileValidate(fileType, fileSize) Function

                    };
                };

                // Progress Counter Increase Function
                function progressMove() {
                    // Counter Start
                    let counter = 0;

                    // After 600ms
                    setTimeout(() => {
                        // Every 100ms
                        let counterIncrease = setInterval(() => {
                            // If (counter) is equle 100
                            if (counter === 100) {
                                // Stop (Counter Increase)
                                clearInterval(counterIncrease);
                            } else { // Else
                                // plus 10 on counter
                                counter = counter + 10;
                                // add (counter) vlaue inisde (uploadedFileCounter)
                                uploadedFileCounter.innerHTML = `${counter}%`
                            }
                        }, 100);
                    }, 600);
                };


                // Simple File Validate Function
                function fileValidate(fileType, fileSize) {
                    // File Type Validation
                    let isImage = imagesTypes.filter((type) => fileType.indexOf(`image/${type}`) !== -1);

                    // If The Uploaded File Type Is 'jpeg'
                    if (isImage[0] === 'jpeg') {
                        // Add Inisde (uploadedFileIconText) The (jpg) Value
                        uploadedFileIconText.innerHTML = 'jpg';
                    } else { // else
                        // Add Inisde (uploadedFileIconText) The Uploaded File Type
                        uploadedFileIconText.innerHTML = isImage[0];
                    };

                    // If The Uploaded File Is An Image
                    if (isImage.length !== 0) {
                        // Check, If File Size Is 2MB or Less
                        if (fileSize <= 2000000) { // 2MB :)
                            return true;
                        } else { // Else File Size
                            return alert('Please Your File Should be 2 Megabytes or Less');
                        };
                    } else { // Else File Type
                        return alert('Please make sure to upload An Image File Type');
                    };
                };

                // :)
            </script>
        </section>

        <script>
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            function validateForm() {

                document.getElementById('fadeScreen').style.display = 'block';
                var eventdate = document.getElementById("eventdate").value.trim();
                var title = document.getElementById("eventtitle").value.trim();
                var imageInput = document.getElementById('fileInput');
                var description=document.getElementById("eventdescription").value.trim();

                // Add more validations as needed
                if (title === "" || imageInput.files.length === 0 || description ==="" || eventdate ===0) {
                    Alert.info('Info! All fields are required. Please fill out every field before submitting.', 'Info', {
                        displayDuration: 3000
                    })
                    document.getElementById('fadeScreen').style.display = 'none';
                    return false;
                } else {

                    var add_event = $('#event_form')[0];
                    var add_event_ajax = new FormData(add_event);
                    $.ajax({
                            type: 'POST',
                            url: "{{ route('admin.add.new.event') }}",
                            data: add_event_ajax,
                            contentType: false,
                            processData: false,
                            success: (response) => {
                                if (response) {
                                    document.getElementById("previewImage").src = ""; // Clear preview image
                                    document.getElementById("fileInput").value = ""; // Reset file input

                                    // Clear uploaded file details
                                    document.getElementById("uploadedFileInfo").innerHTML =
                                    ""; // Clear uploaded file info
                                    document.getElementById("uploadedFile").style.display = "none";
                                    resetForm();
                                    Alert.success('Success! The Event has been successfully created.', 'Success', {
                                        displayDuration: 3000,
                                        pos: 'top'
                                    });

                                    table.ajax.reload();
                                    document.getElementById('fadeScreen').style.display = 'none';
                                }
                            },
                            error: function(response) {
                                Alert.error('An unexpected error occurred. Please try again later. ', 'Error', {
                                    displayDuration: 3000
                                });
                                document.getElementById('fadeScreen').style.display = 'none';
                            }
                        })
                        .always(function() {});
                }

            }

            function resetForm() {
                document.getElementById('event_form').reset();

            }

            var table = $('#event_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.event.get') }}",
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'event_title',
                        name: 'event_title'
                    },
                    {
                        data: 'event_status',
                        name: 'event_status'
                    },
                    {
                        data: 'image',
                        name: 'image'
                    },

                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });


            $('body').on('click', '.edit', function() {
                let csrfToken = $('meta[name="csrf-token"]').attr('content');
                let id = $(this).data('id');

                $.ajax({
                    url: '{{ route('admin.event.edit', ['id' => 'id']) }}'.replace('id', id),
                    method: 'GET',
                    success: function(response) {

                        $('#event_modalform').modal('show');
                        $('#update_id').val(response.id);
                        $('#edit_eventtitle').val(response.event_title);
                        $('#editeventdate').val(response.date);
                        $('#edit_eventdescription').val(response.description);
                        $('#category_image').attr('src', '../admin/assets/img/event/' + response
                            .event_image);
                    },
                    error: function(error) {}
                });

            });

            $('body').on('click', '.setpast', function() {
                let csrfToken = $('meta[name="csrf-token"]').attr('content');
                let id = $(this).data('id');

                $.ajax({
                    url: '{{ route('admin.event.set.past', ['id' => 'id']) }}'.replace('id', id),
                    method: 'GET',
                    success: function(response) {
                            table.ajax.reload();
                    },
                    error: function(error) {}
                });

            });




            $('body').on('click', '#updatebtn', function() {
                var update_event = $('#event_modal_form')[0];
                var edit_event_ajax = new FormData(update_event);

                $.ajax({
                        type: 'POST',
                        url: "{{ route('ajax.update.exsiting.event') }}",
                        data: edit_event_ajax,
                        contentType: false,
                        processData: false,
                        success: (response) => {
                            if (response) {
                                Alert.success('Success! The Event has been successfully updated.', 'Success', {
                                    displayDuration: 3000,
                                    pos: 'top'
                                });
                                $('#event_modalform').modal('hide');
                                table.ajax.reload();
                                window.location.reload();
                            }
                        },
                        error: function(response) {
                            Alert.error('An unexpected error occurred. Please try again later. ', 'Error', {
                                displayDuration: 3000
                            });
                        }
                    })
                    .always(function() {});
            });


            $('body').on('click', '.delete', function() {
                let csrfToken = $('meta[name="csrf-token"]').attr('content');
                let eventid = $(this).data('id');
                $.ajax({
                    type: "POST", // or "GET" depending on your route configuration
                    url: "{{ route('delete.event', ':eventid') }}".replace(':eventid', eventid),
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    }, // replace with the actual route URL
                    success: function(response) {
                        // Handle the success response from the server
                        Alert.trash('Delete! The news has been successfully deleted.', 'Delete', {
                            displayDuration: 3000
                        });
                        table.ajax.reload();
                    },
                    error: function(error) {
                        Alert.error('An unexpected error occurred. Please try again later. ', 'Error', {
                            displayDuration: 3000
                        });
                    }
                });

            });
        </script>
    </main><!-- End #main -->
@endsection