@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</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">Events</li>
                    <li class="breadcrumb-item active">Add Event</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</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="addEventForm" method="POST" action="{{ route('admin.events.addEventSave') }}" enctype="multipart/form-data">
                            @csrf
                            <div class="form-group">
                                <label for="eventName">Event Name:</label>
                                <input type="text" class="form-control" id="eventName" name="event_name" placeholder="Enter the event name" >
                                <p id="event_nameErr" 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 }}">{{ $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" ></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" id="startDate" name="start_date" class="form-control">
                                    <p id="start_dateErr" class="text-danger small"></p>
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="endDate">End Date:</label>
                                    <input type="date" id="endDate" name="end_date" class="form-control">
                                    <p id="end_dateErr" 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">
                                    <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" id="eventDate" name="date" class="form-control" >
                                    <p id="dateErr" 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" id="startTime" name="start_time" class="form-control" >
                                    <p id="start_timeErr" 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" id="endTime" name="end_time" class="form-control" >
                                    <p id="end_timeErr" 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">
                                    <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" placeholder="Enter event venue" ></textarea>
                                <p id="addressErr" 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">Visible</option>
                                        <option value="0">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="0">
                                    <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 id="filePreview" class="mt-2"></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>Save</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>

    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
        minDate: "today" // prevent past dates
    });

    $("#addEventForm").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.events.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);
            }
        });
    });

    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" style="max-width:200px; border:1px solid #ccc;">`;
            } else if (file.type === 'application/pdf') {
                preview.innerHTML = `<embed src="${url}" type="application/pdf" width="300" height="200">`;
            } else if (file.type.startsWith('video/')) {
                preview.innerHTML = `<video controls width="300"><source src="${url}"></video>`;
            }
        }
    }
</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;
    }
</style>
@stop