@extends('layouts.superadmin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Add School</title>


@section('main-content')
    <style>
        .input {
            color: #697a8d;
        }

        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-text-fill-color: #697a8d !important;
        }

        #loader {
            text-align: center;
            /* Align the loader to the center */
            margin-left: 15px;
            /* Adjust this value to manage space between loader and button */
            width: auto;
            display: inline-block;
        }

        #loader img {
            width: 30px;
        }
        .modal-dialog {
            max-width: 60%;
            /* Adjust width as needed */
            height: 80vh;
            /* Adjust height as needed */
        }

        .modal-body {
            max-height: 70vh;
            /* Adjust content height */
            overflow-y: auto;
            /* Enable scroll if needed */
        }

        .cropper-container {
            width: 100%;
            height: 500px;
            /* Adjust height */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #cropperImage {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
    </style>
    <!-- Cropper.js CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css" rel="stylesheet">

    <div id="alert" class="col-md-6">
        @if (Session::has('success'))
            <div class="alert alert-primary" role="alert">
                {{ Session::get('success') }}
            </div>
        @endif
    </div>

    <div class="content-wrapper">
        <!-- Content -->
        <div class="container-xxl flex-grow-1 container-p-y">
            <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light"></span> Add New School</h4>
            <!-- Basic Layout -->
            <div class="row">
                <div class="col-xl">
                    <div class="card mb-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">School</h5>
                            <!-- <small class="text-muted float-end">Merged input group</small> -->
                        </div>
                        <div class="card-body">
                            <form method="POST" action="/super-admin/school" enctype="multipart/form-data">
                                <div class="row">
                                    <div class="mb-3 col-xl-4">
                                        <label class="form-label" for="basic-icon-default-fullname">School Admin
                                            First Name</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-fullname2" class="input-group-text"><i
                                                    class="bx bx-user"></i></span>
                                            <input type="text" name="first_name"
                                                class="form-control input form-control-line" id="first_name">
                                        </div>
                                    </div>
                                    <div class="mb-3 col-xl-4">
                                        <label class="form-label" for="basic-icon-default-fullname">School Admin
                                            Email</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-fullname2" class="input-group-text"><i
                                                    class="bx bx-user"></i></span>
                                            <input type="text" name="school_admin_email"
                                                class="form-control input form-control-line" id="school_admin_email">
                                        </div>
                                    </div>
                                    <div class="mb-3 col-xl-4">
                                        <label class="form-label" for="basic-icon-default-fullname">School Name</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-fullname2" class="input-group-text"><i
                                                    class="bx bx-user"></i></span>
                                            <input type="text" name="school_name"
                                                class="form-control input form-control-line" id="school_name">
                                        </div>
                                    </div>
                                    <div class="mb-3 col-xl-12">
                                        <label class="form-label" for="basic-icon-default-fullname">School Address</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-fullname2" class="input-group-text"><i
                                                    class="bx bx-user"></i></span>
                                            <textarea name="school_address" class="form-control input form-control-line" id="school_address" cols="10"
                                                rows="4"></textarea>
                                        </div>
                                    </div>
                                    <div class="mb-3 col-xl-6">
                                        <label class="form-label" for="basic-icon-default-fullname">School Banner</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-fullname2" class="input-group-text"><i
                                                    class="bx bx-user"></i></span>
                                            <input type="file" name="school_banner"
                                                class="form-control input form-control-line" id="school_banner"
                                                accept="image/*">
                                        </div>
                                    </div>
                                    <!-- Modal for Cropping -->
                                    <div id="cropperModal" class="modal fade" tabindex="-1" role="dialog">
                                        <div class="modal-dialog modal-xl" role="document"> <!-- Enlarged modal -->
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <h5 class="modal-title">Crop Image</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="cropper-container">
                                                        <img id="cropperImage"
                                                            style="width:100%; height:500px; object-fit: contain;">
                                                        <!-- Bigger image -->
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                        data-bs-dismiss="modal">Cancel</button>
                                                    <button type="button" id="cropImageBtn" class="btn btn-primary">Crop
                                                        & Save</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="mb-3 col-xl-6">
                                        <label class="form-label" for="basic-icon-default-fullname">School Logo</label>
                                        <div class="input-group">
                                            <span id="basic-icon-default-fullname2" class="input-group-text"><i
                                                    class="bx bx-user"></i></span>
                                            <input type="file" name="school_logo"
                                                class="form-control input form-control-line" id="school_logo"
                                                accept="image/*">
                                        </div>
                                    </div>
                                </div>


                                <div class="form-group loaderbtn_div">
                                    <button type="button" class="btn btn-success text-white save_btn"
                                        onclick="addSchool()">Save</button>
                                    <div class="loaderDiv" id="loader" style="display: none;">
                                        <!-- Your loader HTML or spinner goes here -->
                                        <img src="{{ asset('assets/loader.gif') }}" alt="Loading..." />
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- / Content -->
        <div class="content-backdrop fade"></div>
    </div>
    <!-- Cropper.js JS -->
    <!-- Bootstrap JS (Required for Modals) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>

    <script>
        var cropper;
        var croppedBlob;
        document.addEventListener('DOMContentLoaded', function() {
            let cropperModal = document.getElementById('cropperModal');
            let schoolBannerInput = document.getElementById('school_banner');
            let cropperImage = document.getElementById('cropperImage');
            let cropper;

            // Reset input field when modal is closed
            cropperModal.addEventListener('hidden.bs.modal', function() {
                cropperImage.src = ''; // Clear image preview
                if (cropper) {
                    cropper.destroy();
                }
            });

            // Open modal and initialize cropper
            schoolBannerInput.addEventListener('change', function(event) {
                let file = event.target.files[0];
                if (file) {
                    let reader = new FileReader();
                    reader.onload = function(e) {
                        cropperImage.src = e.target.result;

                        // Show modal
                        let myModal = new bootstrap.Modal(document.getElementById('cropperModal'));
                        myModal.show();
                    };
                    reader.readAsDataURL(file);
                }
            });

            // Initialize cropper when modal is shown
            document.getElementById('cropperModal').addEventListener('shown.bs.modal', function() {
                if (cropper) {
                    cropper.destroy();
                }
                cropper = new Cropper(cropperImage, {
                    aspectRatio: 400 / 145,
                    viewMode: 1,
                    autoCropArea: 1,
                    responsive: true,
                });
            });

            // Handle crop and replace file
            document.getElementById('cropImageBtn').addEventListener('click', function() {
                let canvas = cropper.getCroppedCanvas({
                    width: 800,
                    height: 290
                });

                canvas.toBlob(function(blob) {
                    let file = new File([blob], "cropped_banner.jpg", {
                        type: "image/jpeg"
                    });

                    // Replace input file
                    let dt = new DataTransfer();
                    dt.items.add(file);
                    schoolBannerInput.files = dt.files;

                    // Hide modal
                    let modalInstance = bootstrap.Modal.getInstance(document.getElementById(
                        'cropperModal'));
                    modalInstance.hide();
                }, 'image/jpeg');
            });
        });

        // $( document ).ready(function() {
        function addSchool() {
            $('.text-danger').remove();
            $('#loader').show();
            $(".save_btn").prop("disabled", true);

            var formData = new FormData();
            var school_admin_email = $('#school_admin_email').val();
            formData.append('school_admin_email', school_admin_email);
            var first_name = $('#first_name').val();
            formData.append('first_name', first_name);
            var school_name = $('#school_name').val();
            formData.append('school_name', school_name);
            var school_address = $('#school_address').val();
            formData.append('school_address', school_address);

            // 
            var croppedFile = $('#school_banner').data('croppedFile');
            if (croppedFile) {
                formData.append('school_banner', croppedFile);
            } else {
                var school_banner = $('#school_banner').prop('files')[0];
                formData.append('school_banner', school_banner);
            }

            var school_logo = $('#school_logo').prop('files')[0];
            formData.append('school_logo', school_logo);

            $.ajax({
                type: "post",
                url: "/super-admin/add-school",
                contentType: 'multipart/form-data',
                cache: false,
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: formData,
                success: function(data) {
                    if (data.success) {
                        window.location.href = data.success;
                    } else {
                        // Handle errors
                        $.each(data.error, function(field_name, error) {
                            // Check if the error message for the field already exists
                            if (!$('#' + field_name + '').closest('div').next().hasClass(
                                    'text-danger')) {
                                $('#' + field_name + '').closest('div').after(
                                    '<span class="text-strong text-danger">' + error + '</span>');
                            }
                        });
                    }
                    $(".save_btn").prop("disabled", false);
                },
                error: function() {
                    // Hide loader in case of an error
                    $('#loader').hide();
                    $(".save_btn").prop("disabled", false);
                    // Handle error
                },
                complete: function() {
                    // Hide loader when the request is completed (success, error, or failure)
                    $('#loader').hide();
                    $(".save_btn").prop("disabled", false);
                }
            });
        }
    </script>
@endsection