@extends('adminlte::page')

@section('content')
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Edit 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">Edit 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">Edit Event Gallery Form</h3>
                    </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="editEventGalleryForm" method="POST" action="{{ route('admin.editEventUpdate', ['id' => $events->id]) }}" enctype="multipart/form-data" onsubmit="setUncheckedCheckboxValues(event)">
                            @csrf
                            <input type="hidden" name="h_id" value="{{$events->id}}">
                            <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"
                                    value="{{ isset($events) ? $events->name : '' }}" required> -->
                                <!-- <select class="form-control" id="eventName" name="eventName" required>
                                    <option value="">Select Event</option>
                                    @foreach($event as $val)
                                    <option value="{{$val->id}}" {{ isset($events) && $events->event_id == $val->id ? 'selected' : '' }}>{{$val->event_name}}</option>
                                    @endforeach
                                </select> -->
                                <input type="text" class="form-control" id="eventName" name="eventName" value="{{ isset($events) ? $events->name : '' }}" required>
                                <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>
                                    <input type="date" class="form-control" id="eventYear" name="eventYear" readonly
                                        value="{{ isset($events) ? $events->year : '' }}">
                                    <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" {{ isset($events) && $events->visibility == 1 ? 'selected' : '' }}>Visible</option>
                                        <option value="2" {{ isset($events) && $events->visibility == 2 ? 'selected' : '' }}>Archive</option>
                                        <option value="0" {{ isset($events) && $events->visibility == 0 ? 'selected' : '' }}>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">
                                @foreach ($photos as $index => $photo)
                                <div class="file-input-group image-container" id="photoContainer_{{ $photo->id }}">
                                    <input type="hidden" name="photo_id[]" value="{{$photo->id}}">
                                    <div class="checkbox-wrapper">
                                        <input type="checkbox" name="primaryImage[{{ $index }}]" value="1" class="form-check-input"
                                            {{ $photo->is_primary ? 'checked' : '' }} onclick="selectPrimaryImage(this)">
                                        <span>Thumbnail</span>
                                    </div>
                                    <input type="file" class="form-control-file" id="eventImage{{ $index }}" name="eventImage[]"
                                        accept="image/*" onchange="previewImage(event, this)">
                                    <img id="eventImagePreview{{ $index }}" class="image-preview"
                                        src="{{ asset('storage/distribution/images/events/' . $photo->name) }}" style="width: 100px; height: auto;" />
                                    <button type="button" class="btn btn-danger btn-sm remove-button"
                                        onclick="deletePhoto('{{$photo->id}}')">Delete</button>
                                </div>
                                @endforeach
                                <p id="eventImageErr" class="text-danger" style="font-style: italic; font-size: small;"></p>

                                <!-- If no photos exist, show a default file input -->
                                @if ($photos->isEmpty())
                                <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)">
                                            <span>Thumbnail</span>
                                        </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>
                                <p id="eventImageErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                                @endif
                            </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 Video Link:</label>
                            <div class="form-group">
                                <!-- Loop through existing videos -->
                                @foreach($videos as $index => $video)
                                <div class="file-input-group video-container" id="videoContainer_{{ $video->id }}">
                                    <input type="hidden" name="video_id[]" value="{{ $video->id }}">
                                    <div class="checkbox-wrapper">
                                        <input type="checkbox" name="primaryVideo[{{ $index }}]" value="1" class="form-check-input"
                                            {{ $video->is_primary ? 'checked' : '' }} onclick="selectPrimaryVideo(this)">
                                    </div>
                                    <input type="url" class="form-control" name="eventVideo[]" value="{{ $video->link }}" placeholder="Enter video link" required>
                                    <button type="button" class="btn btn-danger btn-sm remove-button" onclick="deleteVideo('{{ $video->id }}')">Delete</button>
                                </div>
                                @endforeach
                                <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>

                                <!-- If no videos exist, show a default input -->
                                @if ($videos->isEmpty())
                                <div class="form-group">
                                    <div class="file-input-group video-container">
                                        <div class="checkbox-wrapper">
                                            <input type="checkbox" name="primaryVideo[0]" value="1" class="form-check-input" onclick="selectPrimaryVideo(this)">
                                        </div>
                                        <input type="url" class="form-control" name="eventVideo[]" placeholder="Enter video link" required>
                                        <button type="button" class="btn btn-danger btn-sm remove-button" onclick="removeVideoInput(this)">Remove</button>
                                    </div>
                                </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>
                                @endif
                            </div>--}}

                            <label>Event Video Links:</label>
                            <div class="form-group" id="videoList">
                                @foreach($videos->whereNotNull('link') as $index => $video)
                                    <div class="file-input-group video-container" id="videoContainer_{{ $video->id }}">
                                        <input type="hidden" name="video_id[]" value="{{ $video->id }}">

                                        <div class="checkbox-wrapper">
                                            <!-- Hidden input ensures unchecked checkbox sends 0 -->
                                            <input type="hidden" name="primaryVideo[url_{{ $video->id }}]" value="0">

                                            <input type="checkbox" name="primaryVideo[url_{{ $video->id }}]" value="1" class="form-check-input"
                                                {{ $video->is_primary ? 'checked' : '' }}
                                                onclick="selectPrimaryVideo(this)">
                                            <span>Thumbnail</span>
                                        </div>

                                        <input type="" class="form-control" name="eventVideo[]" value="{{ $video->link }}" placeholder="Enter video link">
                                        <button type="button" class="btn btn-danger btn-sm remove-button" onclick="deleteVideo('{{ $video->id }}')">Delete</button>
                                    </div>
                                @endforeach
                            </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">
                                @foreach($videos as $index => $video)
                                <div class="file-input-group video-container" id="videoFileContainer_{{ $video->id }}">
                                    <input type="hidden" name="video_id[]" value="{{ $video->id }}">
                                    <div class="checkbox-wrapper">
                                        <input type="checkbox" name="primaryVideo[{{ $index }}]" value="1" class="form-check-input"
                                            {{ $video->is_primary ? 'checked' : '' }} onclick="selectPrimaryVideo(this)">
                                    </div>

                                    <!-- Existing file preview (if any) -->
                                    @if($video->event_video_file)
                                        <p>Current File: 
                                            <a href="{{ asset('storage/distribution/videos/events/' . $video->event_video_file) }}" target="_blank">
                                                {{ $video->event_video_file }}
                                            </a>
                                        </p>
                                    @endif

                                    <!-- File input for replacement -->
                                    <input type="file" class="form-control-file" name="eventVideoFile[]" accept="video/*">

                                    <button type="button" class="btn btn-danger btn-sm remove-button" onclick="deleteVideo('{{ $video->id }}')">Delete</button>
                                </div>
                                @endforeach
                                <p id="eventVideoFileErr" class="text-danger" style="font-style: italic; font-size: small;"></p>

                                <!-- If no videos exist, show a default input -->
                                @if ($videos->isEmpty())
                                <div class="form-group">
                                    <div class="file-input-group video-container">
                                        <div class="checkbox-wrapper">
                                            <input type="checkbox" name="primaryVideo[0]" value="1" class="form-check-input" onclick="selectPrimaryVideo(this)">
                                        </div>
                                        <input type="url" class="form-control" name="eventVideo[]" placeholder="Enter video link" required>
                                        <input type="file" class="form-control-file" name="eventVideoFile[]" accept="video/*" required>
                                        <button type="button" class="btn btn-danger btn-sm remove-button" onclick="removeVideoInput(this)">Remove</button>
                                    </div>
                                </div>
                                <p id="eventVideoFileErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                                @endif
                            </div>--}}

                            <label>Event Video Files:</label>
                            <div class="form-group">
                                @foreach($videos->whereNotNull('event_video_file') as $index => $video)
                                    <div class="file-input-group video-container" id="videoFileContainer_{{ $video->id }}">
                                        <input type="hidden" name="video_file_id[]" value="{{ $video->id }}">
                                        <div class="checkbox-wrapper">
                                            <input type="hidden" name="primaryVideo[file_{{ $video->id }}]" value="0">
                                            <input type="checkbox" name="primaryVideo[file_{{ $video->id }}]" value="1" class="form-check-input"
                                                {{ $video->is_primary ? 'checked' : '' }}
                                                onclick="selectPrimaryVideo(this)">
                                            <span>Thumbnail</span>
                                        </div>
                                        <video id="videoFilePreview{{ $video->id }}" width="220" height="140" controls class="video-file-preview">
                                            <source src="{{ asset('storage/distribution/videos/events/' . $video->event_video_file) }}" type="video/mp4">
                                            Your browser does not support the video tag.
                                        </video>
                                        <input type="file" class="form-control-file" name="eventVideoFile[]" accept="video/*"
                                            onchange="previewVideoFile(event, 'videoFilePreview{{ $video->id }}')">
                                        <button type="button" class="btn btn-danger btn-sm remove-button" onclick="deleteVideoFile('{{ $video->id }}')">Delete</button>
                                    </div>
                                @endforeach
                            </div>


                            <div id="additionalVideoFiles"></div>

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





                            
                            {{--<label>Event Videos (Link + File):</label>
                            <div class="form-group">
                                <!-- Existing videos -->
                                @foreach($videos as $index => $video)
                                <div class="file-input-group video-container" id="videoContainer_{{ $video->id }}">
                                    <input type="hidden" name="video_id[]" value="{{ $video->id }}">
                                    <div class="checkbox-wrapper">
                                        <input type="checkbox" name="primaryVideo[{{ $index }}]" value="1" class="form-check-input"
                                            {{ $video->is_primary ? 'checked' : '' }} onclick="selectPrimaryVideo(this)">
                                    </div>
                                    <!-- Video link -->
                                    <input type="url" class="form-control" name="eventVideo[]" value="{{ $video->link }}" placeholder="Enter video link">
                                    
                                    <!-- File input + preview -->
                                    @if($video->event_video_file)
                                        <p>Current File:
                                            <a href="{{ asset('storage/distribution/videos/events/' . $video->event_video_file) }}" target="_blank">
                                                {{ $video->event_video_file }}
                                            </a>
                                        </p>
                                    @endif
                                    <input type="file" class="form-control-file" name="eventVideoFile[]" accept="video/*">

                                    <button type="button" class="btn btn-danger btn-sm remove-button"
                                        onclick="deleteVideo('{{ $video->id }}')">Delete</button>
                                </div>
                                @endforeach

                                <!-- New videos -->
                                @if ($videos->isEmpty())
                                <div class="file-input-group video-container">
                                    <input type="hidden" name="video_id[]" value="">
                                    <div class="checkbox-wrapper">
                                        <input type="checkbox" name="primaryVideo[0]" value="1" class="form-check-input" onclick="selectPrimaryVideo(this)">
                                    </div>
                                    <input type="url" class="form-control" name="eventVideo[]" placeholder="Enter video link">
                                    <input type="file" class="form-control-file" name="eventVideoFile[]" accept="video/*">
                                    <button type="button" class="btn btn-danger btn-sm remove-button"
                                        onclick="removeVideoInput(this)">Remove</button>
                                </div>
                                @endif
                            </div>

                            <div id="additionalVideos"></div>
                            <div class="form-group add-more-button">
                                <button type="button" class="btn btn-secondary" onclick="addVideoInput()">Add More Video</button>
                            </div>--}}



                            

                            <!-- <button type="submit" class="btn btn-primary">Update</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>Update</span></button>
                                </div>
                            </div>

                        </form>

                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
</section>
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        flatpickr("#eventYear", {
            dateFormat: "Y-m-d", // Format: Year-Month-Day
            defaultDate: "{{ isset($events) ? $events->year : '' }}", // Set the previously selected date
            maxDate: new Date() // Prevent future dates if needed
        });
    });

    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);
        checkboxWrapper.appendChild(document.createTextNode('Thumbnail'));

        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';
            };
            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);
            }
        });
    }

    function deletePhoto(photoId) {
        if (confirm('Are you sure you want to delete this photo?')) {
            const url = `{{ route('admin.editEventPhotoDelete', ':id') }}`.replace(':id', photoId);

            $.ajax({
                url: url,
                type: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}', // Add CSRF token for security
                },
                success: function(data) {
                    if (data.success) {
                        // Remove the photo's HTML container from the DOM
                        $('#photoContainer_' + photoId).remove();
                        setTimeout(function() {
                            alert(data.message); // Show success message
                        }, 100);
                    } else {
                        alert(data.message || 'Failed to delete the photo. Please try again.');
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error('Error:', errorThrown);
                    alert('An unexpected error occurred while deleting the photo.');
                }
            });
        }
    }

    // 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[${nextIndex}]`;
    //     checkbox.value = "1";
    //     checkbox.className = 'form-check-input';
    //     checkbox.onclick = function() {
    //         selectPrimaryVideo(this);
    //     };

    //     checkboxWrapper.appendChild(checkbox);

    //     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 addVideoInput() {
    //     const additionalVideosDiv = document.getElementById('additionalVideos');
    //     const videoInputGroup = document.createElement('div');
    //     videoInputGroup.className = 'file-input-group video-container';

    //     // Hidden input for new video (no id yet)
    //     const hiddenId = document.createElement('input');
    //     hiddenId.type = 'hidden';
    //     hiddenId.name = 'video_id[]';
    //     hiddenId.value = '';
    //     videoInputGroup.appendChild(hiddenId);

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

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

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

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

    //     // File input
    //     const fileInput = document.createElement('input');
    //     fileInput.type = 'file';
    //     fileInput.name = 'eventVideoFile[]';
    //     fileInput.className = 'form-control-file';
    //     fileInput.accept = 'video/*';

    //     // Remove button
    //     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);
    //     };

    //     // Append all
    //     videoInputGroup.appendChild(checkboxWrapper);
    //     videoInputGroup.appendChild(videoInput);
    //     videoInputGroup.appendChild(fileInput);
    //     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 addVideoInput() {
        const additionalVideosDiv = document.getElementById('additionalVideos');
        const videoInputGroup = document.createElement('div');
        videoInputGroup.className = 'file-input-group video-container';

        // Hidden input for new video (no ID yet)
        const hiddenId = document.createElement('input');
        hiddenId.type = 'hidden';
        hiddenId.name = 'video_id[]';
        hiddenId.value = '';
        videoInputGroup.appendChild(hiddenId);

        // Determine next index based on existing eventVideo inputs
        const existingVideos = document.querySelectorAll('input[name="eventVideo[]"]');
        const nextIndex = existingVideos.length;

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

        // Hidden input to ensure unchecked sends 0
        const hiddenCheckbox = document.createElement('input');
        hiddenCheckbox.type = 'hidden';
        hiddenCheckbox.name = `primaryVideo[url_new_${nextIndex}]`;
        hiddenCheckbox.value = "0";

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

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

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

        // Remove button
        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);
        };

        // Append all
        videoInputGroup.appendChild(checkboxWrapper);
        videoInputGroup.appendChild(videoInput);
        videoInputGroup.appendChild(removeBtn);

        additionalVideosDiv.appendChild(videoInputGroup);
    }


    // Ensure only one primary checkbox is selected
    function selectPrimaryVideo(checkbox) {
        if (checkbox.checked) {
            document.querySelectorAll('input[type="checkbox"][name^="primaryVideo"]').forEach(cb => {
                if (cb !== checkbox) cb.checked = false;
            });
        }
    }

    // Delete existing video via AJAX (optional)
    // function deleteVideo(videoId) {
    //     if (!confirm('Are you sure you want to delete this video?')) return;
    //     const container = document.getElementById(`videoContainer_${videoId}`);
    //     container.remove();
    //     // Optional: send AJAX request to delete in database
    // }


    function addVideoFileInput() {
        const container = document.getElementById('additionalVideoFiles');
        const index = container.children.length;
        const div = document.createElement('div');
        div.classList.add('form-group');
        div.innerHTML = `
            <div class="file-input-group video-container">
                <div class="checkbox-wrapper">
                    <input type="hidden" name="primaryVideo[file_new_${index}]" value="0">
                    <input type="checkbox" name="primaryVideo[file_new_${index}]" value="1" class="form-check-input" onclick="selectPrimaryVideo(this)">
                    <span>Thumbnail</span>
                </div>
                <video id="newVideoFilePreview${index}" width="220" height="140" controls class="video-file-preview" style="display:none;"></video>
                <input type="file" class="form-control-file" name="eventVideoFile[]" accept="video/*" required onchange="previewVideoFile(event, 'newVideoFilePreview${index}')">
                <button type="button" class="btn btn-danger btn-sm remove-button" onclick="this.parentElement.remove()">Remove</button>
            </div>
        `;
        container.appendChild(div);
    }

    function previewVideoFile(event, previewId) {
        const file = event.target.files[0];
        const preview = document.getElementById(previewId);

        if (!preview) return;

        if (file) {
            const videoUrl = URL.createObjectURL(file);
            preview.src = videoUrl;
            preview.style.display = 'block';
            preview.load();
        }
    }


    function deleteVideo(videoId) {
        if (confirm('Are you sure you want to delete this video?')) {
            const url = `{{ route('admin.editEventVideoDelete', ':id') }}`.replace(':id', videoId);

            $.ajax({
                url: url,
                type: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                success: function(data) {
                    if (data.success) {
                        $('#videoFileContainer_' + videoId).remove();
                        // alert(data.message);
                        alertify.set('notifier', 'position', 'top-right');
                        alertify.success(data.message);
                        setTimeout(function() {
                            window.location.href = "{{ route('admin.showEvents') }}";
                        }, 1500);
                    } else {
                        // alert(data.message || 'Failed to delete the video.');
                        alertify.set('notifier', 'position', 'top-right');
                        alertify.error(data.message);
                    }
                },
                error: function() {
                    // alert('An error occurred while deleting the video.');
                    alertify.set('notifier', 'position', 'top-right');
                    alertify.error('An error occurred while deleting the video.');
                }
            });
        }
    }

    function deleteVideoFile(videoId) {
        if (confirm('Are you sure you want to delete this video file?')) {
            const url = `{{ route('admin.editEventVideoFileDelete', ':id') }}`.replace(':id', videoId);

            $.ajax({
                url: url,
                type: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                success: function(data) {
                    if (data.success) {
                        $('#videoContainer_' + videoId).remove();
                        // alert(data.message);
                        alertify.set('notifier', 'position', 'top-right');
                        alertify.success(data.message);
                        setTimeout(function() {
                            window.location.href = "{{ route('admin.showEvents') }}";
                        }, 1500);
                    } else {
                        // alert(data.message || 'Failed to delete the video file.');
                        alertify.set('notifier', 'position', 'top-right');
                        alertify.error(data.message);
                    }
                },
                error: function() {
                    // alert('An error occurred while deleting the video file.');
                    alertify.set('notifier', 'position', 'top-right');
                    alertify.error('An error occurred while deleting the video file.');
                }
            });
        }
    }
</script>

<script>
    $(document).ready(function () {  
        $('#eventName').on('change', function () {  
            var eventId = $(this).val();  

            // if event id and event id is not string  
            if (eventId && !isNaN(eventId)) {
                $.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 {
                $('#eventYear').val(''); // reset if no event selected
            }
        });

        $("#editEventGalleryForm").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('Updating...');
                    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('Update');

                    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('Update');
                    alertify.set('notifier', 'position', 'top-right');
                    // alertify.error("An error occurred: " + xhr.responseText);
                }
            });
        });
    });
</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: 10px;
    }

    .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 {
        margin-bottom: 20px;
    }
</style>
@stop