@extends('layouts.superadmin')

<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;
    }
</style>
@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="/super-admin/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 }}" 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>
                    <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>
                   
                    </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 -->
    <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: "/super-admin/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() {
            $("#save_preschool_details").on("click", function(e) {
                e.preventDefault();
                $('.pre_school_details .text-danger').remove();
                $('.pre_school_details input').removeClass('is-invalid');
                $('.pre_school_details select').removeClass('is-invalid');
                $(this).prop("disabled", true);
                $("#save_changes").prop("disabled", true);

                // const pre_logo = $("#pre_logo").prop('files')[0];
                const pre_name = ($("#pre_name").val()).trim();
                const pre_address = ($("#pre_address").val()).trim();

                let formData = new FormData();

                // formData.append("pre_logo",pre_logo?pre_logo:"");
                formData.append("pre_name", pre_name);
                formData.append("pre_address", pre_address);

                $.ajax({
                    url: "{{ url('/updatePreSchoolInfo') }}",
                    type: "post",
                    contentType: 'multipart/form-data',
                    cache: false,
                    contentType: false,
                    processData: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: formData,
                    success: function(resp) {
                        const status = resp["status"];

                        if (status == 400) {
                            $.each(resp.errors, 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}`).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").prop("disabled", false);
                        $("#save_changes").prop("disabled", false);
                    },
                    error: function(resp) {
                        $("#save_preschool_details").prop("disabled", false);
                        $("#save_changes").prop("disabled", false);
                    }
                });
            });
        });
    </script>
@endsection