@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 Past Prsidents</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">CMS Settings</li>
                    <li class="breadcrumb-item active">Affiliated Clubs</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">Add past presidents 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="addEventForm" method="POST" action="{{ route('admin.savePastPresidents') }}" enctype="multipart/form-data" onsubmit="setUncheckedCheckboxValues(event)">
                            @csrf
                            <div class="form-group">
                                <label for="presidentName">President Name:</label>
                                <input type="text" class="form-control" id="presidentName" name="presidentName" placeholder="Enter the president's name" required>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="presidentStartYear">From Year:</label>
                                    <input type="text" id="eventYear" name="presidentStartYear" class="form-control" required>
                                </div>

                                <div class="form-group col-md-6">
                                    <label for="presidentEndYear">To Year:</label>
                                    <input type="text" id="eventYear" name="presidentEndYear" class="form-control" required>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="presidentImage">President Image:</label>
                                <input type="file" name="presidentImage" id="presidentImage" class="form-control-file" onchange="showPreview(event, 'siteLogoPreview')">
                                <small id="siteLogoErr" class="text-danger"></small>
                                <div class="mt-3">
                                    <img id="siteLogoPreview" src="" alt="President Image Preview" style="max-width: 200px; cursor: pointer; display: none;" onclick="openModal('siteLogoPreview', 'President Image')">
                                    <div id="imageAltText" class="text-muted" style="display: none;">No image selected</div>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary float-right"><i class="fa fa-save"></i> Save</button>
                        </form> -->

                        <form id="addEventForm" method="POST" action="{{ route('admin.savePastPresidents') }}" enctype="multipart/form-data">
                            @csrf

                            <!-- President Name -->
                            <div class="form-group">
                                <label for="presidentName">President Name:</label>
                                <input type="text" class="form-control @error('presidentName') is-invalid @enderror" id="presidentName" name="presidentName" value="{{ old('presidentName') }}" placeholder="Enter the president's name" required>
                                @error('presidentName')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- From Year -->
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="presidentStartYear">From Year:</label>
                                    <input type="text" id="presidentStartYear" name="presidentStartYear" class="form-control @error('presidentStartYear') is-invalid @enderror" value="{{ old('presidentStartYear') }}" required>
                                    @error('presidentStartYear')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- To Year -->
                                <div class="form-group col-md-6">
                                    <label for="presidentEndYear">To Year:</label>
                                    <input type="text" id="presidentEndYear" name="presidentEndYear" class="form-control @error('presidentEndYear') is-invalid @enderror" value="{{ old('presidentEndYear') }}" required>
                                    @error('presidentEndYear')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Image Upload -->
                            <div class="form-group">
                                <label for="presidentImage">President Image:</label>
                                <input type="file" name="presidentImage" id="presidentImage" class="form-control-file @error('presidentImage') is-invalid @enderror" onchange="showPreview(event, 'siteLogoPreview')">
                                @error('presidentImage')
                                <div class="text-danger">{{ $message }}</div>
                                @enderror
                                <div class="mt-3">
                                    <img id="siteLogoPreview" src="" alt="President Image Preview" style="max-width: 200px; cursor: pointer; display: none;" onclick="openModal('siteLogoPreview', 'President Image')">
                                    <div id="imageAltText" class="text-muted" style="display: none;">No image selected</div>
                                </div>
                            </div>

                            <button type="submit" class="btn btn-primary float-right">
                                <i class="fa fa-save"></i> Save
                            </button>
                        </form>


                        <!-- Modal Structure -->
                        <div class="modal fade" id="imageModal" 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"></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>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
</section>



@stop

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

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

    // flatpickr("#startYear", {
    //     dateFormat: "Y", // Format: Year
    //     enableTime: false, // Disable time selection
    //     dateFormat: "Y", // Only show the year
    //     defaultDate: new Date().getFullYear(), // Set the default date to the current year
    //     onReady: function(selectedDates, dateStr, instance) {
    //         instance.setDate(new Date().getFullYear(), true); // Set the default year
    //     }
    // });

    // flatpickr("#endYear", {
    //     dateFormat: "Y", // Format: Year
    //     enableTime: false, // Disable time selection
    //     defaultDate: new Date().getFullYear(), // Set the default date to the current year
    //     onReady: function(selectedDates, dateStr, instance) {
    //         instance.setDate(new Date().getFullYear(), true); // Set the default year
    //     }
    // });

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

        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                preview.src = e.target.result;
                preview.style.display = 'block'; // Show the preview
                altText.style.display = 'none'; // Hide the alt text
                preview.alt = file.name; // Set the alt text to the file name
            }
            reader.readAsDataURL(file);
        } else {
            preview.src = ""; // Reset the preview if no file is selected
            preview.style.display = 'none'; // Hide the preview
            altText.style.display = 'block'; // Show the alt text
        }
    }

    function openModal(previewId, title) {
        const modal = $('#imageModal');
        const modalImage = document.getElementById("modalImage");
        const modalTitle = document.getElementById("imagePreviewModalLabel");

        const preview = document.getElementById(previewId);
        modalImage.src = preview.src; // Set the modal image source
        modalTitle.innerText = title; // Set the modal title
        modal.modal('show'); // Show the modal
    }

    function closeModal() {
        const modal = document.getElementById("imageModal");
        modal.style.display = "none"; // Hide the modal
    }
</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;
    }
</style>
@stop