@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Profile</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

<style>
    /* The Modal (background) */
    .modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1;
        /* Sit on top */
        padding-top: 100px;
        /* Location of the box */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(0, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.4);
        /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
    }

    /* The Close Button */
    .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
    .current_banner_div .old_img {
        width: 420px;
        border: 1px solid #ccc;
        padding: 7px;
        border-radius: 6px;
    }
    .img_crop_div {
        width: 60%;
    }
</style>

<!-- Cropper.js CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css" rel="stylesheet">

@section('main-content')
    <div id="school_info" class="col-md-3 ms-4 mt-3 d-none">
        <div class="alert alert-success" role="alert">
            School Information added successfully
        </div>
    </div>

    <div id="alert" class="col-md-3 ms-4 mt-3 {{ Session::has('success') ? '' : 'd-none' }}">
        @if (Session::has('success'))
            <div class="alert alert-primary" role="alert">
                {{ Session::get('success') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>


    <!-- Content wrapper -->
    <div class="content-wrapper">
        <!-- Content -->

        <div class="container-xxl container-p-y">
            <h4 class="fw-bold mb-4"><span class="text-muted fw-light">Account Settings /</span> Account</h4>

            <div class="row">
                <div class="col-md-12">
                    <div class="card mb-4">
                        <h5 class="card-header">Profile Details</h5>
                        <!-- Account -->
                        <form method="POST" action="{{ url('update-admin-profile') }}" enctype="multipart/form-data"
                            class="form-horizontal form-material mx-2">
                            @csrf
                            <div class="card-body">
                                <div class="d-flex align-items-start align-items-sm-center gap-4">
                                    <div class="d-none">
                                        @if (!Auth::user()->profile_photo_path)
                                            <img src="{{ URL::asset('assets/images/users/avatar.jpg') }}"
                                                class="d-block rounded" height="100" width="100">
                                        @else
                                            <img src="{{ Auth::user()->profile_photo_path }}" alt="user"
                                                class="d-block rounded" height="100" width="100" id="uploadedAvatar">
                                        @endif
                                        <div class="button-wrapper">
                                            <label for="upload" class="btn btn-primary me-2 mb-4" tabindex="0">
                                                <span class="d-none d-sm-block">Upload new photo</span>
                                                <i class="bx bx-upload d-block d-sm-none"></i>
                                                <input type="file" id="upload" name="image"
                                                    class="account-file-input" hidden accept="image/png, image/jpeg" />
                                            </label>
                                            <button type="button"
                                                class="btn btn-outline-secondary account-image-reset mb-4">
                                                <i class="bx bx-reset d-block d-sm-none"></i>
                                                <span class="d-none d-sm-block">Reset</span>
                                            </button>
                                        </div>
                                    </div>

                                    <div>
                                        @if (!Auth::user()->profile_photo_path)
                                            <img src="{{ URL::asset('assets/images/users/avatar.jpg') }}"
                                                class="d-block rounded" height="100" width="100">
                                        @else
                                            <img src="{{ Auth::user()->profile_photo_path }}" style="object-fit: cover"
                                                alt="user" class="d-block rounded" height="100" width="100">
                                        @endif
                                        <label for="uploadmyFile" class="btn btn-primary mt-3 me-2 mb-4" tabindex="0">
                                            <span class="d-none d-sm-block">Upload new photo</span>
                                            <i class="bx bx-upload d-block d-sm-none"></i>
                                            <input type="file" id="uploadmyFile" name="image"
                                                class="account-file-input uploaded_img" hidden
                                                accept="image/png, image/jpeg, image/jpg" />
                                        </label>
                                        <a href="javaScript:void(0);" onclick="openingModal(1)" id="prvImg1"
                                            class="d-none">Preview Image</a>
                                    </div>
                                </div>
                            </div>
                            <hr class="my-0" />
                            <div class="card-body">
                                <!-- <form id="formAccountSettings" method="POST" onsubmit="return false"> -->
                                <div class="row">
                                    <div class="mb-3 col-md-6">
                                        <label for="firstName" class="form-label">First Name</label>
                                        <input class="form-control" type="text" id="firstName" name="firstName"
                                            value="{{ $firstName }}" placeholder="John" autofocus required
                                            onkeydown="return /[a-z]/i.test(event.key)" maxlength="30" />
                                    </div>
                                    <div class="mb-3 col-md-6">
                                        <label for="lastName" class="form-label">Last Name</label>
                                        <input class="form-control" type="text" name="lastName" id="lastName"
                                            value="{{ $lastName }}" placeholder="Last Name" required
                                            onkeydown="return /[a-z]/i.test(event.key)" maxlength="30" />
                                    </div>
                                    <div class="mb-3 col-md-6">
                                        <label for="email" class="form-label">E-mail</label>
                                        <input type="email" value="{{ Auth::user()->email }}"
                                            class="form-control input form-control-line" name="email" id="email"
                                            pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}"
                                            title="Please Enter Valid Email : example@mail.com" />
                                    </div>
                                    @error('email')
                                        <span class="text-danger"><b>{{ $message }}</b></span>
                                    @enderror
                                    <div class="mb-3 col-md-6">
                                        <label class="form-label" for="phoneNumber">Phone Number</label>
                                        <div class="input-group input-group-merge">
                                            <input type="text" value="{{ Auth::user()->phone }}" name="phone"
                                                class="form-control input form-control-line" minlength="10"
                                                maxlength="10" pattern="[0-9]{1}[0-9]{9}"
                                                title="Please Enter Valid 10 digits Phone Number" />
                                        </div>
                                        @error('phone')
                                            <span class="text-danger"><b>{{ $message }}</b></span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="mt-2">
                                    <button type="submit" class="btn btn-primary me-2" id="save_changes">Save
                                        changes</button>
                                    {{-- <a href="admin-dashboard" class="btn btn-outline-secondary">Cancel</a> --}}
                                </div>
                            </div>
                        </form>
                        <!-- /Account -->
                    </div>
                    @if (Auth::user()->role == '1')
                        <div class="card mb-4">
                            <h5 class="card-header">Update password</h5>
                            <!-- Account -->

                            <div class="card-body">
                                <!-- <form id="formAccountSettings" method="POST" onsubmit="return false"> -->
                                <div class="row">
                                    <div class="mb-3 col-md-12 mb-6">
                                        <label for="OldPassword" class="form-label">Old Password</label>
                                        <input class="form-control" type="text" id="OldPassword" name="OldPassword"
                                            placeholder="************" autofocus required maxlength="30" />
                                    </div>
                                    <div class="mb-3 col-md-12 mb-6">
                                        <label for="NewPassword" class="form-label">New Password</label>
                                        <input class="form-control" type="text" name="NewPassword" id="NewPassword"
                                            placeholder="**********" required maxlength="30" />
                                    </div>
                                    <div class="mb-3 col-md-12 mb-6">
                                        <label for="NewPassword_confirmation" class="form-label">Confirm Password</label>
                                        <input class="form-control" type="text" name="NewPassword_confirmation"
                                            id="NewPassword_confirmation" placeholder="*********" required
                                            maxlength="30" />
                                    </div>
                                </div>
                                <div class="mt-2">
                                    <button onclick="UpdatePassword()" class="btn btn-primary me-2"
                                        id="save_changes">Save
                                        changes</button>
                                    {{-- <a href="admin-dashboard" class="btn btn-outline-secondary">Cancel</a> --}}
                                </div>
                            </div>
                            </form>
                            <!-- /Account -->
                        </div>
                    @endif
                    <div class="card-body mt-2 bg-white rounded pre_school_details">
                        <h5>Pre School Details</h5>
                        <div class="row">
                            {{-- @if ($schoolInfo && $schoolInfo->logo)
                        <div class="col-12 col-md-6 mb-3">
                            <div class="form-label">Uploaded Logo</div>
                            <a href="{{asset('assets/pre_school_logo')."/".$schoolInfo->logo}}" class="form-control" target="_blank">Logo</a>
                        </div>
        
                        <div class="col-12 col-md-6">
                            <div class="form-label">New Logo</div>
                            <input type="file" accept="image/jpg, image/jpeg, image/png, image/svg" class="form-control" id="pre_logo"/>
                        </div>
                    @else
                        <div class="col-12">
                            <div class="form-label">Logo</div>
                            <input type="file" accept="image/jpg, image/jpeg, image/png, image/svg" class="form-control" id="pre_logo"/>
                        </div>
                    @endif --}}
                        </div>

                        <div class="mt-3">
                            <div class="form-label">Name</div>
                            <input type="text" class="form-control" minlength="3" maxlength="50" id="pre_name"
                                placeholder="Name" value="{{ $schoolInfo ? $schoolInfo->name : '' }}" />
                        </div>
                        <div class="mt-3">
                            <div class="form-label">Address</div>
                            <input type="text" class="form-control" minlength="5" maxlength="100" id="pre_address"
                                placeholder="Address" value="{{ $schoolInfo ? $schoolInfo->address : '' }}" />
                        </div>
                        <div class="mt-3">
                            <div class="form-label">School Banner</div>

                            <!-- Old Image Preview from CDN -->
                                {{-- <label class="form-label">Current Banner:</label> --}}
                                <div class="current_banner_div">
                                    <img class="old_img" id="oldImage"
                                    src="{{ $schoolInfo && $schoolInfo->banner ? $cdn . $schoolInfo->banner : '' }}"
                                    alt="Current Banner" width="200">
                                </div>
                                

                            <!-- Image Upload -->
                            <input type="file" id="imageInput" class="form-control mt-2" accept="image/*">

                            <!-- Cropping Area -->
                            <div id="cropArea" class="mt-3 img_crop_div" style="display: none;">
                                <img id="croppableImage" style="max-width: 100%; height: auto;">
                                <button type="button" id="cropButton" class="btn btn-success mt-2">Crop Image</button>
                            </div>

                        </div>

                        <!-- Hidden Canvas for Cropping -->
                        <canvas id="croppedCanvas" style="display: none;"></canvas>

                        <!-- Cropped Image Preview -->
                        <div class="mt-2">
                            <img id="croppedPreview" style="max-width: 100%; display: none;">
                        </div>
                    </div>

                    <div class="mt-3">
                        <button class="btn btn-primary text-white" id="save_preschool_details">Save</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- / Content -->

    <!-- Footer -->
    <footer class="content-footer footer bg-footer-theme">
        <div class="container-xxl d-flex flex-wrap justify-content-between py-2 flex-md-row flex-column">
            <div class="mb-2 mb-md-0">
                ©
                <script>
                    document.write(new Date().getFullYear());
                </script>
                , made with ❤️ by
                <a href="https://megamindcreations.com" target="_blank" class="footer-link fw-bolder">Megamind
                    Creations</a>
            </div>
        </div>
    </footer>
    <!-- / Footer -->

    <div class="content-backdrop fade"></div>
    <div id="myModal" class="modal" style="padding-top: 50px;">

        <!-- Modal content -->
        <div class="modal-content" style="width: 40%;">
            <div><span class="close text-end">&times;</span></div>
            <h4 class="text-center" id="change_heading">Image Uploaded</h4>
            <input type="hidden" id="leave_id" />
            <div class="text-center mb-5">
                <img src="{{ URL::asset('assets/images/users/avatar.jpg') }}" id="aadhar_card_pic" height="470"
                    width="100%" />
            </div>
        </div>
    </div>
    </div>
    <!-- Content wrapper -->
    <!-- Cropper.js JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
    <!-- Cropper.js Script -->



    <script>
        function UpdatePassword() {
            $('.text-strong').text('');
            const OldPassword = $('#OldPassword').val();
            const NewPassword = $('#NewPassword').val();
            const NewPassword_confirmation = $('#NewPassword_confirmation').val();
            var formData = new FormData();
            formData.append('OldPassword', OldPassword);
            formData.append('NewPassword', NewPassword);
            formData.append('NewPassword_confirmation', NewPassword_confirmation);

            $.ajax({
                type: "post",
                url: "/update-admin-password",
                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) {
                        alert('Password Updated Successfully');
                        location.reload();
                    } else if (data.warning) {
                        alert(data.warning);
                    } else {
                        // console.log(data.error);
                        console.log(data.error);

                        $.each(data.error, function(field_name, error) {
                            $('#' + field_name + '').closest('div').after(
                                '<span class="text-strong text-danger">' + error[0] + '</span>');

                        });
                    }
                    // $('#save_btn').prop('disabled', false);
                },
                error: function() {
                    // Hide loader in case of an error
                    $('#save_btn').prop('disabled', false);
                    $('#loader').hide();
                    // Handle error
                },
                complete: function() {
                    // Hide loader when the request is completed (success, error, or failure)
                    $('#save_btn').prop('disabled', false);
                    $('#loader').hide();
                }

            })
        }

        function allowNumberOnly(evt) {
            var theEvent = evt || window.event;
            // Handle paste
            if (theEvent.type === 'paste') {
                key = event.clipboardData.getData('text/plain');
            } else {
                // Handle key press
                var key = theEvent.keyCode || theEvent.which;
                key = String.fromCharCode(key);
            }
            var regex = /[0-9]|\./;
            if (!regex.test(key) && evt.keyCode != 8) {
                theEvent.returnValue = false;
                if (theEvent.preventDefault) theEvent.preventDefault();
            }
        }

        let reset_img = false;
        $("#uploadmyFile").on("change", (e) => {
            e.stopPropagation();
            fileInput = document.getElementById('uploadmyFile');
            file = fileInput.files[0];

            const sizeInMB = file.size / (1024 * 1024).toFixed(2);

            if (sizeInMB > 5) {
                file.value = null;
                file.value = '';
                $("#prvImg1").addClass('d-none');
                alert("Image should be less than 5 MB.");
                return;
            }
            $("#prvImg1").removeClass('d-none');
        });

        function openingModal(pass_val) {
            var modal = document.getElementById("myModal");

            // Get the <span> element that closes the modal
            var span = document.getElementsByClassName("close")[0];

            modal.style.display = "block";
            let fileInput, file;

            if (pass_val === 1) {
                fileInput = document.getElementById('uploadmyFile');
            } else {
                return;
            }

            file = fileInput.files[0];
            const imgElement = document.getElementById('aadhar_card_pic');

            if (file) {
                const fileURL = URL.createObjectURL(file);
                imgElement.src = fileURL;
            }

            // When the user clicks on <span> (x), close the modal
            span.onclick = function() {
                modal.style.display = "none";
            }

            // When the user clicks anywhere outside of the modal, close it
            window.onclick = function(event) {
                if (event.target == modal) {
                    modal.style.display = "none";
                }
            }
        }

        $(document).ready(function() {
            let croppedImageData = null; // Cropped image ko yahan store karenge

            // Image input change event
            $("#imageInput").on("change", function(event) {
                const file = event.target.files[0];
                if (!file) return;

                const reader = new FileReader();
                reader.onload = function(e) {
                    $("#oldImage").hide(); // Purana image hide karo
                    $("#croppableImage").attr("src", e.target.result);
                    $("#cropArea").show();

                    // Cropper initialize
                    if (window.cropper) {
                        window.cropper.destroy();
                    }
                    window.cropper = new Cropper($("#croppableImage")[0], {
                        aspectRatio: 400 / 145,
                        viewMode: 2
                    });
                };
                reader.readAsDataURL(file);
            });

            // Crop Button Click Event
            $("#cropButton").on("click", function() {
                if (!window.cropper) return;

                const canvas = window.cropper.getCroppedCanvas({
                    width: 400,
                    height: 145
                });
                canvas.toBlob(function(blob) {
                    croppedImageData = blob; // Cropped image ko store kar diya
                    $("#cropArea").hide();
                    $("#oldImage").attr("src", URL.createObjectURL(blob))
                        .show(); // Naya cropped image dikhao
                }, "image/png");
            });

            // Save Preschool Details
            $("#save_preschool_details").on("click", function(e) {
                e.preventDefault();
                $(".pre_school_details .text-danger").remove();
                $(".pre_school_details input, .pre_school_details select").removeClass("is-invalid");
                $(this).prop("disabled", true);
                $("#save_changes").prop("disabled", true);

                const pre_name = ($("#pre_name").val()).trim();
                const pre_address = ($("#pre_address").val()).trim();

                let formData = new FormData();
                formData.append("pre_name", pre_name);
                formData.append("pre_address", pre_address);

                // Cropped Image ko formData me append karo
                if (croppedImageData) {
                    formData.append("cropped_image", croppedImageData, "cropped_image.png");
                }

                $.ajax({
                    url: "{{ url('/updatePreSchoolInfo') }}",
                    type: "post",
                    cache: false,
                    contentType: false,
                    processData: false,
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                    },
                    data: formData,
                    success: function(resp) {
                        if (resp["status"] == 400) {
                            $.each(resp.errors, function(field_name, error) {
                                if (!$(`#${field_name}`).closest("div").next().hasClass(
                                        "text-danger")) {
                                    $(`#${field_name}`).addClass("is-invalid");
                                    $(`#${field_name}`).closest("div").append(
                                        '<span class="text-strong text-danger">' +
                                        error[0] + "</span>"
                                    );
                                }
                            });
                        } else {
                            window.scrollTo({
                                top: 0,
                                behavior: "smooth"
                            });
                            setTimeout(() => {
                                $("#school_info").addClass("d-none");
                            }, 3000);
                            $("#school_info").removeClass("d-none");
                        }
                        $("#save_preschool_details, #save_changes").prop("disabled", false);
                    },
                    error: function(resp) {
                        $("#save_preschool_details, #save_changes").prop("disabled", false);
                    }
                });
            });
        });
    </script>
@endsection