@extends('adminlte::page')

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Add Event Gallery</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{route('admin.home')}}">Home</a></li>
                    <li class="breadcrumb-item">Event Gallery</li>
                    <li class="breadcrumb-item active">Add Event Gallery</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<section class="content">

    <div class="container-fluid">
        <div class="row">
            <div class="col-12">


                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Add Event Gallery Form</h3>
                    </div>
                    <!-- <div class="filter-group pl-4 pt-4">
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-add">
                            Add Clubs
                        </button>
                    </div> -->


                    <div class="card-body table-responsive">
                        <!-- <p class="text-right font-bold mb-2 total_clients">Total No. of Clubs: 0</p> -->
                        <form id="addEventGalleryForm" method="POST" action="{{route('admin.addEventSave')}}" enctype="multipart/form-data" onsubmit="setUncheckedCheckboxValues(event)">
                            @csrf
                            <div class="form-group">
                                <label for="eventName">Event Name:</label>
                                <select class="form-control select2" id="eventName" name="eventName">
                                    <option value="">Choose or type new event name</option>
                                    @foreach($events as $val)
                                        <option value="{{ $val->id }}">{{ $val->event_name }}</option>
                                    @endforeach
                                </select>
                                <small class="form-text text-muted">Choose an existing event or type a new event name and press Enter.</small>
                                <p id="eventNameErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                            </div>


                            <div class="form-row">
                                <!-- <div class="form-group col-md-6">
                                    <label for="eventYear">Select Year:</label>
                                    <select class="form-control" id="eventYear" name="eventYear" required>
                                        <script>
                                            const yearSelect = document.getElementById('eventYear');
                                            const currentYear = new Date().getFullYear();
                                            for (let year = currentYear; year >= 1895; year--) {
                                                const option = document.createElement('option');
                                                option.value = year;
                                                option.textContent = year;
                                                yearSelect.appendChild(option);
                                            }
                                        </script>
                                    </select>
                                </div> -->

                                <div class="form-group col-md-6">
                                    <label for="eventYear">Start Date:</label>
                                    <input type="date" id="eventYear" name="eventYear" class="form-control">
                                    <p id="eventYearErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="visibility">Visibility:</label>
                                    <select class="form-control" id="visibility" name="visibility" >
                                        <option value="1">Visible</option>
                                        <option value="2">Archive</option>
                                        <option value="0">Invisible</option>
                                    </select>
                                    <p id="visibilityErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                                </div>
                            </div>

                            <!-- <label>Event Image:</label>
                            <div class="form-group">
                                <div class="file-input-group image-container">
                                    <div class="checkbox-wrapper">
                                        <input type="checkbox" name="primaryImage[0]" value="1" class="form-check-input" onclick="selectPrimaryImage(this)">
                                    </div>
                                    <input type="file" class="form-control-file" id="eventImage" name="eventImage[]" accept="image/*" onchange="previewImage(event, this)" required>
                                    <img id="eventImagePreview" class="image-preview" style="display:none;" />
                                    <button type="button" class="btn btn-danger btn-sm remove-button" onclick="removeImageInput(this)">Remove</button>
                                </div>
                            </div>
                            <div id="additionalImages"></div>
                            <div class="form-group add-more-button">
                                <button type="button" class="btn btn-secondary" onclick="addImageInput()">Add More Image</button>
                            </div> -->

                            <label>Event Image:</label>
                            <div class="form-group">
                                <input type="file" class="form-control-file" id="bulkImageUpload" name="eventImage[]" accept="image/*" multiple onchange="previewBulkImages(event)">
                            </div>
                            <div id="bulkImagePreviewContainer" class="bulk-image-preview-container"></div>
                            <p id="eventImageErr" class="text-danger" style="font-style: italic; font-size: small;"></p>

                            <!-- Modal Structure -->
                            <div class="modal fade" id="imagePreviewModal" tabindex="-1" role="dialog" aria-labelledby="imagePreviewModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-dialog-centered" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="imagePreviewModalLabel">Image Preview</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                        <div class="modal-body text-center">
                                            <img id="modalImage" src="" alt="Image Preview" class="img-fluid">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <label>Event Video Link (with iframe):</label>
                            <div class="form-group">
                                <div class="file-input-group video-container">
                                    <div class="checkbox-wrapper">
                                        <input type="checkbox" name="primaryVideo[url_0]" value="1" class="form-check-input" onclick="selectPrimaryVideo(this)">
                                        <span>Thumbnail</span>
                                    </div>
                                    <input type="" class="form-control" name="eventVideo[]" placeholder="Enter video link" >
                                    <button type="button" class="btn btn-danger btn-sm remove-button" onclick="removeVideoInput(this)">Remove</button>
                                </div>
                                <p id="primaryVideoErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                                <p id="eventVideoErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                            </div>
                            <div id="additionalVideos"></div>
                            <div class="form-group add-more-button">
                                <button type="button" class="btn btn-secondary" onclick="addVideoInput()">Add More Video Link</button>
                            </div>

                            <label>Event Video Files:</label>
                            <div class="form-group">
                                <input type="file" class="form-control-file" id="bulkVideoUpload" name="eventVideoFile[]" accept="video/*" multiple onchange="previewBulkVideos(event)">
                            </div>
                            <div id="bulkVideoPreviewContainer" class="bulk-video-preview-container"></div>  
                            <p id="eventVideoFileErr" class="text-danger" style="font-style: italic; font-size: small;"></p>

                            <!-- <button type="submit" class="btn btn-primary">Save</button> -->
                            <!-- Form Footer -->
                            <div class="card-footer">
                                <div class="d-flex justify-content-between">
                                    <a href="{{ route('admin.showEvents') }}" class="btn btn-secondary">Cancel</a>
                                    <button type="submit" class="btn btn-primary"><span>Save</span></button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
</section>


<!-- <section class="content py-3">
    <div class="container">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Event Details</h5>
            </div>
            <div class="card-body">
                <form id="addEventForm" method="POST" action="{{route('admin.addEventSave')}}" enctype="multipart/form-data" onsubmit="setUncheckedCheckboxValues(event)">
                    @csrf
                    <div class="form-group">
                        <label for="eventName">Event Name:</label>
                        <input type="text" class="form-control" id="eventName" name="eventName" placeholder="Enter the event name" required>
                    </div>

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="eventYear">Select Year:</label>
                            <select class="form-control" id="eventYear" name="eventYear" required>
                                <script>
                                    const yearSelect = document.getElementById('eventYear');
                                    const currentYear = new Date().getFullYear();
                                    for (let year = currentYear; year >= 1895; year--) {
                                        const option = document.createElement('option');
                                        option.value = year;
                                        option.textContent = year;
                                        yearSelect.appendChild(option);
                                    }
                                </script>
                            </select>
                        </div>

                        <div class="form-group col-md-6">
                            <label for="visibility">Visibility:</label>
                            <select class="form-control" id="visibility" name="visibility" required>
                                <option value="1">Visible</option>
                                <option value="0">Archive</option>
                            </select>
                        </div>
                    </div>

                    <label>Event Image:</label>
                    <div class="form-group">
                        <div class="file-input-group image-container">
                            <div class="checkbox-wrapper">
                                <input type="checkbox" name="primaryImage[0]" value="1" class="form-check-input" onclick="selectPrimaryImage(this)">
                            </div>
                            <input type="file" class="form-control-file" id="eventImage" name="eventImage[]" accept="image/*" onchange="previewImage(event, this)" required>
                            <img id="eventImagePreview" class="image-preview" style="display:none;" />
                            <button type="button" class="btn btn-danger btn-sm remove-button" onclick="removeImageInput(this)">Remove</button>
                        </div>
                    </div>

                    <div id="additionalImages"></div>

                    <div class="form-group add-more-button">
                        <button type="button" class="btn btn-secondary" onclick="addImageInput()">Add More Image</button>
                    </div>

                    <button type="submit" class="btn btn-primary">Save</button>
                </form>
            </div>
        </div>
    </div>
</section> -->
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>
    // function addImageInput() {
    //     const additionalImagesDiv = document.getElementById('additionalImages');
    //     const fileInputGroup = document.createElement('div');
    //     fileInputGroup.className = 'file-input-group image-container';

    //     const checkboxWrapper = document.createElement('div');
    //     checkboxWrapper.className = 'checkbox-wrapper';

    //     const checkbox = document.createElement('input');
    //     checkbox.type = 'checkbox';
    //     checkbox.name = `primaryImage[${additionalImagesDiv.childElementCount + 1}]`;
    //     checkbox.value = "1";
    //     checkbox.className = 'form-check-input';
    //     checkbox.onclick = function() {
    //         selectPrimaryImage(this);
    //     };

    //     checkboxWrapper.appendChild(checkbox);

    //     const fileInput = document.createElement('input');
    //     fileInput.type = 'file';
    //     fileInput.name = 'eventImage[]';
    //     fileInput.required = true;
    //     fileInput.className = 'form-control-file';
    //     fileInput.accept = 'image/*';
    //     fileInput.onchange = function(event) {
    //         previewImage(event, fileInput);
    //     };

    //     const imagePreview = document.createElement('img');
    //     imagePreview.className = 'image-preview';
    //     imagePreview.style.display = 'none';

    //     const removeBtn = document.createElement('button');
    //     removeBtn.textContent = 'Remove';
    //     removeBtn.className = 'btn btn-danger btn-sm ml-2';
    //     removeBtn.onclick = function(e) {
    //         e.preventDefault();
    //         additionalImagesDiv.removeChild(fileInputGroup);
    //     };

    //     fileInputGroup.appendChild(checkboxWrapper);
    //     fileInputGroup.appendChild(fileInput);
    //     fileInputGroup.appendChild(imagePreview);
    //     fileInputGroup.appendChild(removeBtn);
    //     additionalImagesDiv.appendChild(fileInputGroup);
    // }

    function addImageInput() {
        const additionalImagesDiv = document.getElementById('additionalImages');
        const fileInputGroup = document.createElement('div');
        fileInputGroup.className = 'file-input-group image-container';

        const checkboxWrapper = document.createElement('div');
        checkboxWrapper.className = 'checkbox-wrapper';

        // Calculate the next index based on existing primaryImage checkboxes
        const existingCheckboxes = document.querySelectorAll('input[name^="primaryImage"]');
        const nextIndex = existingCheckboxes.length;

        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.name = `primaryImage[${nextIndex}]`;
        checkbox.value = "1";
        checkbox.className = 'form-check-input';
        checkbox.onclick = function() {
            selectPrimaryImage(this);
        };

        checkboxWrapper.appendChild(checkbox);

        const fileInput = document.createElement('input');
        fileInput.type = 'file';
        fileInput.name = 'eventImage[]';
        fileInput.required = true;
        fileInput.className = 'form-control-file';
        fileInput.accept = 'image/*';
        fileInput.onchange = function(event) {
            previewImage(event, fileInput);
        };

        const imagePreview = document.createElement('img');
        imagePreview.className = 'image-preview';
        imagePreview.style.display = 'none';

        const removeBtn = document.createElement('button');
        removeBtn.textContent = 'Remove';
        removeBtn.className = 'btn btn-danger btn-sm ml-2';
        removeBtn.onclick = function(e) {
            e.preventDefault();
            additionalImagesDiv.removeChild(fileInputGroup);
        };

        fileInputGroup.appendChild(checkboxWrapper);
        fileInputGroup.appendChild(fileInput);
        fileInputGroup.appendChild(imagePreview);
        fileInputGroup.appendChild(removeBtn);
        additionalImagesDiv.appendChild(fileInputGroup);
    }

    function selectPrimaryImage(checkbox) {
        const checkboxes = document.querySelectorAll('input[name^="primaryImage"]');
        checkboxes.forEach(cb => {
            if (cb !== checkbox) {
                cb.checked = false;
            }
        });
    }

    function previewImage(event, input) {
        const file = input.files[0];
        const imagePreview = input.nextElementSibling;

        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                imagePreview.src = e.target.result;
                imagePreview.style.display = 'block';
                imagePreview.onclick = function() {
                    openImageModal(e.target.result);
                };
            };
            reader.readAsDataURL(file);
        } else {
            imagePreview.style.display = 'none';
        }
    }

    function removeImageInput(button) {
        const imageWrapper = button.parentElement;
        imageWrapper.parentElement.removeChild(imageWrapper);
    }

    function setUncheckedCheckboxValues(event) {
        const checkboxes = document.querySelectorAll('input[type="checkbox"]');
        checkboxes.forEach(checkbox => {
            if (!checkbox.checked) {
                const hiddenInput = document.createElement('input');
                hiddenInput.type = 'hidden';
                hiddenInput.name = checkbox.name;
                hiddenInput.value = '0';
                checkbox.parentNode.appendChild(hiddenInput);
            }
        });
    }

    // flatpickr("#eventYear", {
    //     dateFormat: "Y-m-d", // Format: Year-Month-Day
    //     defaultDate: new Date(), // Set the default date to today
    //     maxDate: new Date() // Prevent future dates if needed
    // });

    function addVideoInput() {
        const additionalVideosDiv = document.getElementById('additionalVideos');
        const videoInputGroup = document.createElement('div');
        videoInputGroup.className = 'file-input-group video-container';

        const checkboxWrapper = document.createElement('div');
        checkboxWrapper.className = 'checkbox-wrapper';

        // Calculate the next index based on existing primaryVideo checkboxes
        const existingCheckboxes = document.querySelectorAll('input[name^="primaryVideo"]');
        const nextIndex = existingCheckboxes.length;

        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.name = `primaryVideo[url_${nextIndex}]`;
        checkbox.value = "1";
        checkbox.className = 'form-check-input';
        checkbox.onclick = function() {
            selectPrimaryVideo(this);
        };

        checkboxWrapper.appendChild(checkbox);
        checkboxWrapper.appendChild(document.createTextNode('Thumbnail'));

        const videoInput = document.createElement('input');
        videoInput.type = 'url';
        videoInput.name = 'eventVideo[]';
        videoInput.required = true;
        videoInput.className = 'form-control';
        videoInput.placeholder = 'Enter video link';

        const removeBtn = document.createElement('button');
        removeBtn.textContent = 'Remove';
        removeBtn.className = 'btn btn-danger btn-sm ml-2';
        removeBtn.onclick = function(e) {
            e.preventDefault();
            additionalVideosDiv.removeChild(videoInputGroup);
        };

        videoInputGroup.appendChild(checkboxWrapper);
        videoInputGroup.appendChild(videoInput);
        videoInputGroup.appendChild(removeBtn);
        additionalVideosDiv.appendChild(videoInputGroup);
    }

    function selectPrimaryVideo(checkbox) {
        const checkboxes = document.querySelectorAll('input[name^="primaryVideo"]');
        checkboxes.forEach(cb => {
            if (cb !== checkbox) {
                cb.checked = false;
            }
        });
    }

    function removeVideoInput(button) {
        const videoWrapper = button.parentElement;
        videoWrapper.parentElement.removeChild(videoWrapper);
    }

    // let selectedFiles = []; 

    // function previewBulkImages(event) {
    //     selectedFiles = Array.from(event.target.files); // Store all selected files
    //     const previewContainer = document.getElementById('bulkImagePreviewContainer');

    //     // Clear existing previews
    //     previewContainer.innerHTML = '';

    //     selectedFiles.forEach((file, index) => {
    //         const fileReader = new FileReader();
    //         fileReader.onload = function(e) {
    //             const imageWrapper = document.createElement('div');
    //             imageWrapper.className = 'image-preview-wrapper';
    //             imageWrapper.setAttribute('data-index', index); // Set index to track this image

    //             const img = document.createElement('img');
    //             img.src = e.target.result;
    //             img.className = 'image-preview';
    //             img.onclick = function() {
    //                 openImageModal(e.target.result); // Open the image in a modal on click
    //             };

    //             const checkboxWrapper = document.createElement('div');
    //             checkboxWrapper.className = 'checkbox-wrapper';

    //             const existingCheckboxes = document.querySelectorAll('input[name^="primaryImage"]');
    //             const nextIndex = existingCheckboxes.length;

    //             const checkbox = document.createElement('input');
    //             checkbox.type = 'checkbox';
    //             checkbox.name = `primaryImage[${nextIndex}]`;
    //             checkbox.value = "1";
    //             checkbox.className = 'form-check-input';
    //             checkbox.onclick = function() {
    //                 selectPrimaryImage(this);
    //             };

    //             checkboxWrapper.appendChild(checkbox);
    //             checkboxWrapper.appendChild(document.createTextNode('Primary'));

    //             const removeBtn = document.createElement('button');
    //             removeBtn.textContent = 'Remove';
    //             removeBtn.className = 'btn btn-danger btn-sm ml-2';
    //             removeBtn.onclick = function(e) {
    //                 e.preventDefault();
    //                 removeImage(index); // Remove the image from the list
    //                 imageWrapper.remove(); // Remove the preview from the DOM
    //             };

    //             imageWrapper.appendChild(img);
    //             imageWrapper.appendChild(checkboxWrapper);
    //             imageWrapper.appendChild(removeBtn);
    //             previewContainer.appendChild(imageWrapper);
    //         };
    //         fileReader.readAsDataURL(file);
    //     });
    // }

    // function removeImage(index) {
    //     // Remove the image from the selectedFiles array by filtering it out
    //     selectedFiles = selectedFiles.filter((_, i) => i !== index);

    //     // Update the input field with the remaining files
    //     const dataTransfer = new DataTransfer();
    //     selectedFiles.forEach(file => dataTransfer.items.add(file));
    //     document.getElementById('bulkImageUpload').files = dataTransfer.files;
    // }

    // function openImageModal(imageSrc) {
    //     const modalImage = document.getElementById('modalImage');
    //     modalImage.src = imageSrc;
    //     $('#imagePreviewModal').modal('show');
    // }

    // function selectPrimaryImage(checkbox) {
    //     const checkboxes = document.querySelectorAll('input[name^="primaryImage"]');
    //     checkboxes.forEach(cb => {
    //         if (cb !== checkbox) {
    //             cb.checked = false;
    //         }
    //     });
    // }

    // function selectPrimaryImage(checkbox) {
    //     const checkboxes = document.querySelectorAll('input[name^="primaryImage"]');
    //     checkboxes.forEach(cb => {
    //         if (cb !== checkbox) {
    //             cb.checked = false;
    //         }
    //     });
    // }

    let selectedFiles = []; // Store the selected files

    function previewBulkImages(event) {
        const existingFileNames = selectedFiles.map(file => file.name); // Track existing files

        const newFiles = Array.from(event.target.files).filter(
            file => !existingFileNames.includes(file.name)
        ); // Add only new files

        selectedFiles = [...selectedFiles, ...newFiles]; // Merge new and old files

        renderPreviews(); // Show all previews together
    }

    function renderPreviews() {
        const previewContainer = document.getElementById('bulkImagePreviewContainer');
        previewContainer.innerHTML = ''; // Clear previous previews

        selectedFiles.forEach(file => {
            const fileReader = new FileReader();
            fileReader.onload = function(e) {
                const imageWrapper = document.createElement('div');
                imageWrapper.className = 'image-preview-wrapper';
                imageWrapper.setAttribute('data-name', file.name); // Use file name to track

                const img = document.createElement('img');
                img.src = e.target.result;
                img.className = 'image-preview';
                img.onclick = function() {
                    openImageModal(e.target.result); // Open image in a modal
                };

                const imageName = document.createElement('p');
                imageName.textContent = file.name;
                imageName.className = 'image-name text-center mt-2';

                const checkboxWrapper = document.createElement('div');
                checkboxWrapper.className = 'checkbox-wrapper';

                const checkbox = document.createElement('input');
                checkbox.type = 'checkbox';
                checkbox.name = `primaryImage[${file.name}]`; // Track by file name
                checkbox.value = "1";
                checkbox.className = 'form-check-input';
                checkbox.onclick = function() {
                    selectPrimaryImage(this);
                };

                checkboxWrapper.appendChild(checkbox);
                checkboxWrapper.appendChild(document.createTextNode('Thumbnail'));

                const removeBtn = document.createElement('button');
                removeBtn.textContent = 'Remove';
                removeBtn.className = 'btn btn-danger btn-sm ml-2';
                removeBtn.onclick = function(e) {
                    e.preventDefault();
                    removeImage(file.name); // Remove by file name
                };

                imageWrapper.appendChild(img);
                imageWrapper.appendChild(imageName);
                imageWrapper.appendChild(checkboxWrapper);
                imageWrapper.appendChild(removeBtn);
                previewContainer.appendChild(imageWrapper);
            };
            fileReader.readAsDataURL(file);
        });

        updateInputFiles(); // Keep the input field in sync
    }

    function removeImage(fileName) {
        // Remove the file from selectedFiles by matching the file name
        selectedFiles = selectedFiles.filter(file => file.name !== fileName);

        renderPreviews(); // Re-render previews after removal
    }

    function openImageModal(imageSrc) {
        const modalImage = document.getElementById('modalImage');
        modalImage.src = imageSrc;
        $('#imagePreviewModal').modal('show');
    }

    function updateInputFiles() {
        const dataTransfer = new DataTransfer();
        selectedFiles.forEach(file => dataTransfer.items.add(file));
        document.getElementById('bulkImageUpload').files = dataTransfer.files;
    }

    // Function to add more video links dynamically
    function addVideoInput() {
        const additionalVideosDiv = document.getElementById('additionalVideos');
        const videoInputGroup = document.createElement('div');
        videoInputGroup.className = 'file-input-group video-container';

        const checkboxWrapper = document.createElement('div');
        checkboxWrapper.className = 'checkbox-wrapper';

        const existingCheckboxes = document.querySelectorAll('input[name^="primaryVideo"]');
        const nextIndex = existingCheckboxes.length;

        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.name = `primaryVideo[url_${nextIndex}]`;
        checkbox.value = "1";
        checkbox.className = 'form-check-input';
        checkbox.onclick = function() {
            selectPrimaryVideo(this);
        };

        checkboxWrapper.appendChild(checkbox);
        checkboxWrapper.appendChild(document.createTextNode('Thumbnail'));

        const videoInput = document.createElement('input');
        videoInput.type = 'text';
        videoInput.name = 'eventVideo[]';
        videoInput.className = 'form-control';
        videoInput.placeholder = 'Enter video link';

        const removeBtn = document.createElement('button');
        removeBtn.textContent = 'Remove';
        removeBtn.className = 'btn btn-danger btn-sm ml-2';
        removeBtn.onclick = function(e) {
            e.preventDefault();
            additionalVideosDiv.removeChild(videoInputGroup);
        };

        videoInputGroup.appendChild(checkboxWrapper);
        videoInputGroup.appendChild(videoInput);
        videoInputGroup.appendChild(removeBtn);
        additionalVideosDiv.appendChild(videoInputGroup);
    }

    // Function to select the primary video from multiple video inputs
    function selectPrimaryVideo(checkbox) {
        const checkboxes = document.querySelectorAll('input[name^="primaryVideo"]');
        checkboxes.forEach(cb => {
            if (cb !== checkbox) {
                cb.checked = false;
            }
        });
    }

    // Function to remove video link input dynamically
    function removeVideoInput(button) {
        const videoWrapper = button.parentElement;
        videoWrapper.parentElement.removeChild(videoWrapper);
    }

    let selectedVideoFiles = [];

    function previewBulkVideos(event) {
        const existingFileNames = selectedVideoFiles.map(file => file.name);
        const newFiles = Array.from(event.target.files).filter(
            file => !existingFileNames.includes(file.name)
        );

        selectedVideoFiles = [...selectedVideoFiles, ...newFiles];
        renderVideoPreviews();
    }

    function renderVideoPreviews() {
        const previewContainer = document.getElementById('bulkVideoPreviewContainer');
        previewContainer.innerHTML = '';

        selectedVideoFiles.forEach(file => {
            const fileReader = new FileReader();
            fileReader.onload = function(e) {
                const videoWrapper = document.createElement('div');
                videoWrapper.className = 'video-preview-wrapper';
                videoWrapper.setAttribute('data-name', file.name);

                const video = document.createElement('video');
                video.src = e.target.result;
                video.controls = true;
                video.className = 'video-preview';

                const videoName = document.createElement('p');
                videoName.textContent = file.name;
                videoName.className = 'image-name text-center mt-2';

                const checkboxWrapper = document.createElement('div');
                checkboxWrapper.className = 'checkbox-wrapper';

                const checkbox = document.createElement('input');
                checkbox.type = 'checkbox';
                checkbox.name = `primaryVideo[${file.name}]`;
                checkbox.value = "1";
                checkbox.className = 'form-check-input';
                checkbox.onclick = function() {
                    selectPrimaryVideo(this);
                };

                checkboxWrapper.appendChild(checkbox);
                checkboxWrapper.appendChild(document.createTextNode('Thumbnail'));

                const removeBtn = document.createElement('button');
                removeBtn.textContent = 'Remove';
                removeBtn.className = 'btn btn-danger btn-sm ml-2';
                removeBtn.onclick = function(e) {
                    e.preventDefault();
                    removeVideoPreview(file.name);
                };

                videoWrapper.appendChild(video);
                videoWrapper.appendChild(videoName);
                videoWrapper.appendChild(checkboxWrapper);
                videoWrapper.appendChild(removeBtn);
                previewContainer.appendChild(videoWrapper);
            };
            fileReader.readAsDataURL(file);
        });

        updateVideoInputFiles();
    }

    function removeVideoPreview(fileName) {
        selectedVideoFiles = selectedVideoFiles.filter(file => file.name !== fileName);
        renderVideoPreviews();
    }

    function updateVideoInputFiles() {
        const dataTransfer = new DataTransfer();
        selectedVideoFiles.forEach(file => dataTransfer.items.add(file));
        document.getElementById('bulkVideoUpload').files = dataTransfer.files;
    }
</script>

<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
<script>
    $(document).ready(function () {  
        function toggleEventDateInput(isExistingEvent) {
            $('#eventYear').prop('readonly', isExistingEvent);
            if (!isExistingEvent) {
                $('#eventYear').val('');
            }
        }

        $('#eventName').on('change', function () {  
            var eventId = $(this).val();
            var isExistingEvent = /^\d+$/.test(eventId);

            if (eventId && isExistingEvent) {
                toggleEventDateInput(true);
                $.ajax({
                    url: "{{ route('admin.getEventDate', ['id' => ':id']) }}".replace(':id', eventId),
                    type: 'GET',
                    success: function (response) {
                        if (response.date) {
                            $('#eventYear').val(response.date);
                        } else {
                            $('#eventYear').val('');
                        }
                    },
                    error: function () {
                        alertify.set('notifier', 'position', 'top-right');
                        alertify.error('Unable to fetch event date. Please try again.');
                        // alert('Unable to fetch event date. Please try again.');
                    }
                });
            } else {
                toggleEventDateInput(false);
            }
        });

        $("#addEventGalleryForm").submit(function(event) {
            event.preventDefault();

            var submitForm = $(this);
            var submitBtn = submitForm.find('button[type="submit"]');

            $.ajax({
                url: submitForm.attr('action'),
                data: new FormData(submitForm[0]),
                type: 'POST',
                dataType: 'json',
                cache: false,
                contentType: false,
                processData: false,
                beforeSend: function() {
                    submitBtn.attr("disabled", true).find('span').text('Saving...');
                    submitForm.find('.text-danger').text(''); // Clear previous error messages
                    submitForm.find('input').removeClass('is-invalid'); // Remove error styling
                },
                success: function(response) {
                    submitBtn.attr("disabled", false).find('span').text('Save');

                    if (response.status == 200) {
                        alertify.set('notifier', 'position', 'top-right');
                        alertify.success(response.msg);
                        setTimeout(function() {
                            window.location.href = "{{ route('admin.showEvents') }}";
                        }, 1500); // Adjust the delay time as needed

                    } else if (response.status == 422) {
                        // Handle validation errors
                        $.each(response.errors, function(key, value) {
                            $('#' + key + 'Err').text(value[0]); // Display validation error
                            $('[name="' + key + '"]').addClass('is-invalid'); // Highlight the invalid field
                        });
                    } else if (response.status == 500) {
                        alertify.set('notifier', 'position', 'top-right');
                        alertify.error(response.msg);
                    }
                },
                error: function(xhr) {
                    submitBtn.attr("disabled", false).find('span').text('Save');
                    alertify.set('notifier', 'position', 'top-right');
                    // alertify.error("An error occurred: " + xhr.responseText);
                }
            });
        });

        $('#eventName').select2({
            placeholder: "Choose or type new event name",
            allowClear: true,
            tags: true,
            createTag: function(params) {
                const term = $.trim(params.term);

                if (term === '') {
                    return null;
                }

                return {
                    id: term,
                    text: term,
                    newTag: true
                };
            },
            templateResult: function(data) {
                if (data.loading) {
                    return data.text;
                }

                if (data.newTag) {
                    return $('<span>New event name: <strong>' + data.text + '</strong></span>');
                }

                return data.text;
            },
            templateSelection: function(data) {
                return data.id === '' ? 'Choose or type new event name' : data.text;
            },
            minimumResultsForSearch: 0, // always show search
            width: 'resolve'
        });
    });
</script>
@stop


@section('css')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">


<style>
    body {
        background-color: #f8f9fa;
    }

    /* .content-header h1 {
        font-weight: 700;
        color: #343a40;
        margin-bottom: 0;
    } */

    .card-header {
        background-color: #007bff;
        color: white;
    }

    .card {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .btn-primary {
        background-color: #007bff;
        border-color: #007bff;
    }

    .btn-danger {
        margin-left: 10px;
    }

    .form-group label {
        font-weight: 600;
        color: #495057;
    }

    .form-control,
    .form-control-file {
        border-radius: 0.25rem;
        border-color: #ced4da;
    }

    .image-preview {
        max-height: 100px;
        max-width: 100px;
        /* margin-left: 15px; */
        border: 1px solid #ddd;
        border-radius: 5px;
        object-fit: cover;
    }

    .file-input-wrapper {
        display: flex;
        align-items: center;
        margin-top: 10px;
    }

    .file-input-wrapper input {
        flex: 1;
        margin-right: 15px;
    }

    .checkbox-wrapper {
        display: flex;
        align-items: center;
        margin-left: 20px;
    }

    .checkbox-wrapper input {
        margin-right: 5px;
    }

    .remove-button {
        margin-left: 10px;
    }

    .file-input-group {
        display: flex;
        align-items: center;
    }

    .add-more-button {
        margin-top: 20px;
    }

    .image-container {
        gap: 10px;
        margin-bottom: 20px;
    }

    .video-container {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        gap: 10px;
    }

    .bulk-image-preview-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 10px;
        /* margin-bottom: 15px; */
    }

    .image-preview-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 10px;
        margin-bottom: 15px;
    }

    .image-preview {
        max-width: 100px;
        max-height: 100px;
        object-fit: cover;
        margin-bottom: 5px;
    }

    .checkbox-wrapper {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
    }

    .remove-button {
        margin-top: 5px;
    }

    /* Custom CSS for larger video previews */
    .video-preview {
        max-width: 300px; /* Set a larger width */
        max-height: 300px; /* Set a larger height */
        object-fit: cover;
        margin-bottom: 5px;
        border-radius: 5px;
        border: 2px solid #ddd; /* Optional: Border styling */
    }

    .video-preview-wrapper {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 10px;
        margin-bottom: 15px;
    }

    .bulk-video-preview-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }


    .select2-container--default .select2-selection--single {
        height: 35px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 35px;
    }
</style>
@stop