@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</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</li>
                    <!-- <li class="breadcrumb-item active">India Clubs</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</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="editEventForm" method="POST" action="{{ route('admin.events.editEventUpdate', ['id' => $event->id]) }}" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="h_id" value="{{ $event->id }}">

                            <div class="form-group">
                                <label for="eventName">Event Name:</label>
                                <input type="text" class="form-control" id="eventName" name="event_name"
                                    value="{{ old('event_name', $event->event_name) }}" >
                                <p id="event_nameEditErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                            </div>

                            <div class="form-group">
                                <label for="eventName">Department Name:</label>
                                <select name="department_id" id="department_id" class="form-control" required>
                                    <option value="">-- Select Department --</option>
                                        @foreach($departments as $dept)
                                            <option value="{{ $dept->id }}" @if($dept->id == $event->department_id) selected @endif>{{ $dept->name }}</option>
                                        @endforeach
                                    </select>
                                <p id="department_idErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                            </div>

                            <div class="form-group">
                                <label for="event_description">Description:</label>
                                <textarea class="form-control" id="event_description" name="event_description" rows="3" placeholder="Enter event description" >{{ old('event_description', $event->event_description) }}</textarea>
                                <p id="event_descriptionErr" 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="startDate">Start Date:</label>
                                    <input type="date" class="form-control" id="startDate" name="start_date"
                                        value="{{ old('start_date', $event->start_date->format('Y-m-d')) }}">
                                    <p id="start_dateEditErr" class="text-danger small"></p>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="endDate">End Date:</label>
                                    <input type="date" class="form-control" id="endDate" name="end_date"
                                        value="{{ old('end_date', optional($event->end_date)->format('Y-m-d')) }}">
                                    <p id="end_dateEditErr" class="text-danger small"></p>
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label for="labelDate">Date Label:</label>
                                    <input type="text" id="labelDate" name="label_date" class="form-control" value="{{ old('label_date', $event->label_date) }}" >
                                    <p id="label_dateErr" class="text-danger small"></p>
                                </div>
                            </div>

                            <div class="form-row">
                                {{--<div class="form-group col-md-6">
                                    <label for="eventDate">Select Date:</label>
                                    <input type="date" class="form-control" id="eventDate" name="date" 
                                        value="{{ old('date', $event->date->format('Y-m-d')) }}">
                                    <p id="dateEditErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                                </div>--}}

                                <div class="form-group col-md-6">
                                    <label for="startTime">Start Time (of Start Date):</label>
                                    <input type="time" class="form-control" id="startTime" name="start_time" 
                                        value="{{ old('start_time', $event->start_time->format('H:i')) }}">
                                    <p id="start_timeEditErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="endTime">End Time (of End Date):</label>
                                    <input type="time" class="form-control" id="endTime" name="end_time" 
                                        value="{{ old('end_time', $event->end_time->format('H:i')) }}">
                                    <p id="end_timeEditErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                                </div>
                            </div>
                            
                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label for="labelTime">Time Label:</label>
                                    <input type="text" id="labelTime" name="label_time" class="form-control" value="{{ old('label_time', $event->label_time) }}" >
                                    <p id="label_timeErr" class="text-danger small"></p>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="address">Venue:</label>
                                <textarea class="form-control" id="address" name="address" rows="3" >{{ old('address', $event->address) }}</textarea>
                                <p id="addressEditErr" 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="visibility">Visibility:</label>
                                    <select class="form-control" id="visibility" name="visibility" >
                                        <option value="1" {{ isset($events) && $events->visibility == 1 ? 'selected' : '' }}>Visible</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 class="form-group col-md-6">
                                    <label for="priority">Priority:</label>
                                    <input type="number" id="priority" name="priority" class="form-control"
                                        value="{{ old('priority', $event->priority) }}">
                                    <p id="priorityErr" class="text-danger small"></p>
                                </div>
                            </div>

                            <div class="form-group col-md-12">
                                <label for="eventFile">Upload File (Image / Video / PDF):</label>
                                <input type="file" id="eventFile" name="event_file" class="form-control"
                                    accept=".jpg,.jpeg,.png,.gif,.webp,.mp4,.avi,.mov,.pdf"
                                    onchange="previewFile(event)">
                                <p id="event_fileErr" class="text-danger small"></p>

                                <div class="d-flex flex-row mt-2" style="gap:20px;">
                                    @if($event->file_name)
                                        <div id="currentFilePreview" class="preview-box">
                                            <p class="text-center">Current File</p>
                                            @php 
                                                $ext = pathinfo($event->file_name, PATHINFO_EXTENSION);
                                                $fileUrl = asset('storage/distribution/images/events/files/'.$event->file_name);
                                            @endphp

                                            @if(in_array(strtolower($ext), ['jpg','jpeg','png','gif','webp']))
                                                <img src="{{ $fileUrl }}" alt="Current File">
                                            @elseif(strtolower($ext) === 'pdf')
                                                <embed src="{{ $fileUrl }}" type="application/pdf">
                                            @elseif(in_array(strtolower($ext), ['mp4','avi','mov']))
                                                <video controls><source src="{{ $fileUrl }}"></video>
                                            @else
                                                <a href="{{ $fileUrl }}" target="_blank">View File</a>
                                            @endif
                                        </div>
                                    @endif

                                    <div id="filePreview" class="preview-box">
                                        <p class="text-center">New File</p>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Form Footer -->
                            <div class="card-footer">
                                <div class="d-flex justify-content-between">
                                    <a href="{{ route('admin.events.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
            minDate: "today" // prevent past dates
        });
    });
    
    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);
            }
        });
    }

    $("#editEventForm").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.events.showEvents') }}";
                    }, 1500); // Adjust the delay time as needed

                } else if (response.status == 422) {
                    // Handle validation errors
                    $.each(response.errors, function(key, value) {
                        $('#' + key + 'EditErr').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);
            }
        });
    });

    function previewFile(event) {
        let file = event.target.files[0];
        let preview = document.getElementById('filePreview');
        preview.innerHTML = '';

        if (file) {
            let url = URL.createObjectURL(file);

            if (file.type.startsWith('image/')) {
                preview.innerHTML = `<img src="${url}" alt="Preview">`;
            } else if (file.type === 'application/pdf') {
                preview.innerHTML = `<embed src="${url}" type="application/pdf">`;
            } else if (file.type.startsWith('video/')) {
                preview.innerHTML = `<video controls><source src="${url}"></video>`;
            } else {
                preview.innerHTML = `<a href="${url}" target="_blank">View File</a>`;
            }
        }
    }

</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;
    }


    .preview-box {
        width: 300px;      /* fixed width */
        height: 200px;     /* fixed height */
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex-direction: column;
    }

    .preview-box img,
    .preview-box video,
    .preview-box embed {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
</style>
@stop