@extends('layouts/page')
@section('page-styles')
    <link rel="stylesheet" href="{{ asset(mix('assets/css/dropify.css')) }}" />
@endsection
@section('content')
    <!-- Content wrapper -->

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

        <div class="container-xxl flex-grow-1 container-p-y bg-grey">
            @csrf
            <div class="card">

                <div class="px-3 pt-3 border-bottom d-flex justify-content-between">
                    <h4 class="fw-bold">{{ $title }}</h4>
                </div>

                <div class="row g-3 p-4">
                    @csrf
                    <div class="col-12 col-sm-6 mb-1">
                        <label class="form-label" for="name"><span class="text-danger fst-italic">*</span> Nama</label>
                        <input type="text" placeholder="Masukkan Nama Mu Disini" id="name" class="form-control"
                            name="name" required autofocus>
                    </div>

                    <div class="col-12 col-sm-6 mb-1">
                        <label class="form-label" for="username"><span class="text-danger fst-italic">*</span>
                            Username</label>
                        <input type="text" placeholder="Masukkan Username Disini" id="username" class="form-control"
                            username="username" required autofocus>
                    </div>

                    <div class="col-12 col-sm-6 mb-1">
                        <label class="form-label" for="email"><span class="text-danger fst-italic">*</span> Email</label>
                        <input type="text" placeholder="Email" id="email" class="form-control" name="email"
                            required autofocus>
                    </div>

                    <div class="col-12 col-sm-6 mb-1">
                        <label class="form-label" for="mobilephone">
                            No.Telepon</label>
                        <input type="number" class="form-control" id="mobilephone" name="mobilephone" placeholder="+62"
                            value="" />
                    </div>

                    <div class="col-md-6">
                        <label class="form-label" for="kecamatan">Kecamatan</label>
                        <select class="select2 form-select kecamatan" id="kecamatan" name="kecamatan"
                            data-placeholder="Pilih Kecamatan">
                            <option value=""></option>

                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label" for="kelurahan">Kelurahan</label>
                        <select class="select2 form-select kelurahan" id="kelurahan" name="kelurahan"
                            data-placeholder="Pilih Kelurahan">
                            <option value=""></option>

                        </select>
                    </div>

                    <div class="col-md-6 mb-2">
                        <label class="form-label" for="password"><span class="text-danger fst-italic">*</span>
                            Password</label>
                        <div class="input-group input-group-merge form-Password-toggle">
                            <input class="form-control form-control-merge" type="password" id="password" name="Password"
                                placeholder="Masukan Password" aria-describedby="login-konfirmasiPassword" tabindex="2" />
                            <span class="input-group-text cursor-pointer"><i id="icon-pass2" class='bx bx-show'></i></span>
                        </div>
                    </div>

                    <div class="col-md-6 mb-2">
                        <label class="form-label" for="RePassword"><span class="text-danger fst-italic">*</span> Konfirmasi
                            Password</label>
                        <div class="input-group input-group-merge form-RePassword-toggle">
                            <input class="form-control form-control-merge" type="password" id="RePassword" name="RePassword"
                                placeholder="Konfirmasi Password" aria-describedby="login-konfirmasiPassword"
                                tabindex="2" />
                            <span id="togglePasswordIcon3" class="input-group-text cursor-pointer"><i id="icon-pass3"
                                    class='bx bx-show'></i></span>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-3">
                            <span id="delapan-karakter" class="mb-0 d-flex align-items-center pb-0 fs-10"><i
                                    class='bx bx-check-circle bx-sm'></i> <span>&nbsp; 8+ karakter</span> </span>
                        </div>
                        <div class="col-md-3">
                            <span id="huruf-besar" class="mb-0 d-flex align-items-center pb-0 fs-10"><i
                                    class='bx bx-check-circle bx-sm'></i> <span>&nbsp; 1 huruf besar</span> </span>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-3">
                            <span id="huruf-kecil" class="mb-0 d-flex align-items-center pb-0 fs-10"><i
                                    class='bx bx-check-circle bx-sm'></i> <span>&nbsp; 1 huruf kecil</span> </span>
                        </div>
                        <div class="col-md-3">
                            <span id="simbol-angka" class="mb-0 d-flex align-items-center pb-0 fs-10"><i
                                    class='bx bx-check-circle bx-sm'></i> <span>&nbsp; simbol dan angka</span>
                            </span>
                        </div>
                    </div>

                    <div class="col-12 mb-1">
                        <label class="form-label" for="address">Alamat</label>
                        <textarea class="form-control" type="text" id="address" name="address" style="height: 130px" placeholder=""
                            value=""></textarea>
                    </div>

                    <div class="col-md-12">
                        <input class="form-check-input" name="SK" type="checkbox" id="SK">
                        <label class="form-check-label" for="SK"><span class="text-danger fst-italic">*</span> Saya
                            menyatakan bahwa data yang saya berikan
                            adalah benar dan akurat.
                        </label>
                        <br>
                    </div>

                    <div class="d-flex">
                        <a href="{{ url('usermanagement/list') }}">
                            <button type="button"
                                class="btn btn-label-secondary waves-effect waves-light m-2">Kembali</button>
                        </a>
                        <button id="addUsermanagement" type="button"
                            class="btn btn-primary waves-effect waves-light m-2">Simpan</button>
                    </div>
                </div>

            </div>

        </div>
    @endsection
    @section('page-scripts')
        <script>
            $(document).ready(function() {
                let kd_kota = "{{ Config::get('app.kd_kota') }}";
                kecamatan(kd_kota);
                $('#kecamatan').change(function() {
                    let selected_kecamatan = $(this).val();

                    if (selected_kecamatan !== '') {
                        kelurahan(selected_kecamatan);
                        $('#kelurahan').prop("disabled", false);
                    } else {
                        $('#kelurahan').prop("disabled", true);
                    }
                });
            });

            let isPasswordValidated = false;

            $('#password').on('keyup', function(event) {
                event.preventDefault();
                let password = $("#password").val();

                let isLengthValid = password.length >= 8;
                let hasUpperCase = /[A-Z]/.test(password);
                let hasLowerCase = /[a-z]/.test(password);
                let hasSymbol = /[\W_]/.test(password);
                let hasNumber = /\d/.test(password);
                let hasSymbolAndNumber = hasSymbol && hasNumber;

                $('#delapan-karakter').toggleClass('text-success', isLengthValid);
                $('#huruf-besar').toggleClass('text-success', hasUpperCase);
                $('#huruf-kecil').toggleClass('text-success', hasLowerCase);
                $('#simbol-angka').toggleClass('text-success', hasSymbolAndNumber);

                isPasswordValidated = isLengthValid && hasUpperCase && hasLowerCase && hasSymbolAndNumber;
            });

            $('#addUsermanagement').on('click', function(event) {
                let isValid = true;
                skCheckbox = $('#SK');
                if ($("#name").val() == "" || $("#email").val() == "" || $("#username").val() == "" || $("#password")
                    .val() == "" || $("#RePassword").val() == "") {
                    custom_alert('warning', 'Peringatan',
                        'Pastikan Nama, Username, Email, Password dan Konfirmasi Password Sudah Terisi!'
                    )
                    isValid = false;
                } else if (!isPasswordValidated) {
                    custom_alert('warning', 'Peringatan',
                        'Harap Lengkapi Aturan Format Password Secara Lengkap.'
                    )
                    isValid = false;
                } else if ($("#password").val() !== $("#RePassword").val()) {
                    custom_alert('warning', 'Peringatan',
                        'Konfirmasi Password dan Password Harus Sesuai!'
                    )
                    isValid = false;
                } else if (!skCheckbox.prop('checked')) {
                    custom_alert('warning', 'Peringatan',
                        'Syarat dan Ketentuan Wajib Diisi!!'
                    )
                    isValid = false;
                } 
                
                if (isValid) {
                    sendData();
                }
            });

            function sendData() {
                let formData = new FormData();
                formData.append("name", $('#name').val());
                formData.append("username", $('#username').val());
                formData.append("email", $('#email').val());
                formData.append("password", $('#password').val());
                formData.append("address", $('#address').val());
                formData.append("kecamatan", $('#kecamatan').val());
                formData.append("kelurahan", $('#kelurahan').val());
                formData.append("mobilephone", $('#mobilephone').val());

                $.ajax({
                    url: "{{ url('usermanagement/_add_usermanagement') }}",
                    method: "POST",
                    data: formData,
                    processData: false,
                    contentType: false,
                    beforeSend: function() {
                        $(".spinnerloader").show()
                    },
                    success: function(response) {
                        var responseData = JSON.parse(response);
                        if (responseData.Status === 200) {
                            $(".spinnerloader").hide()

                            let siteid = "{{ Session::get('SiteId') }}";
                            let messagetext = (siteid == 171) ?
                                "Akun Berhasil Ditambahkan, Menunggu Verifikasi User" : "Data Berhasil Di Tambah";

                            Swal.fire({
                                title: "Berhasil",
                                icon: "success",
                                text: messagetext,
                                showClass: {
                                    popup: 'animate__animated animate__bounceIn'
                                },
                                customClass: {
                                    confirmButton: 'btn btn-primary'
                                },
                                allowOutsideClick: false,
                                buttonsStyling: false
                            }).then(function() {
                                var redirectUrl = "{{ url('usermanagement/list') }}";
                                window.location.href = redirectUrl;
                            });
                        } else if (responseData.Status === 500 && responseData.Message.includes(
                                'Error 1062 (23000)')) {
                            $(".spinnerloader").hide()
                            Swal.fire({
                                title: 'Error',
                                text: 'Email already exists.',
                                icon: 'error',
                                customClass: {
                                    confirmButton: 'btn btn-primary'
                                },
                                buttonsStyling: false
                            });
                        } else {
                            $(".spinnerloader").hide()
                            Swal.fire({
                                title: 'Error',
                                text: responseData.Message,
                                icon: 'error',
                                customClass: {
                                    confirmButton: 'btn btn-primary'
                                },
                                buttonsStyling: false
                            });
                        }
                    },
                    error: function() {
                        $(".spinnerloader").hide()
                        Swal.fire({
                            title: 'Error',
                            text: 'An error occurred while updating the content. Please try again.',
                            icon: 'error',
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            buttonsStyling: false
                        });
                    }
                });

            }

            function addTogglePasswordListener(iconId, inputId) {
                var passwordInput = document.getElementById(inputId);
                var passwordToggleIcon = document.getElementById(iconId);

                passwordToggleIcon.addEventListener('click', function() {
                    togglePassword(passwordInput, passwordToggleIcon);
                });
            }

            function togglePassword(passwordInput, passwordToggleIcon) {
                if (passwordInput.type === 'password') {
                    passwordInput.type = 'text';
                    passwordToggleIcon.classList.remove('bx-show');
                    passwordToggleIcon.classList.add('bx-hide');
                } else {
                    passwordInput.type = 'password';
                    passwordToggleIcon.classList.remove('bx-hide');
                    passwordToggleIcon.classList.add('bx-show');
                }
            }

            addTogglePasswordListener('icon-pass2', 'password');
            addTogglePasswordListener('icon-pass3', 'RePassword');
        </script>
    @endsection