@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">
        <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="card-body">
                    <div class="row g-2">
                        <div class="col-md-4 mb-2">
                            <div class="d-flex align-items-center flex-column">
                                <label for="file-input">
                                    <img src="{{ asset('images/avatars/avatar.png') }}" id="account-upload-img"
                                        class="img-fluid rounded-circle img-border mt-3 mb-2" alt="User avatar"
                                        height="110" width="110" />
                                </label>
                                <div class="user-info text-center">
                                    <div><b>{{ !empty($usermanagement['Name']) ? $usermanagement['Name'] : '' }}</b></div>
                                    <div>{{ !empty($usermanagement['Email']) ? $usermanagement['Email'] : '' }}</div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-8 mb-2">
                            <table class="table mb-0 border-bottom border-top mb-3 mt-1">
                                <tbody>
                                    <tr>
                                        <th>Email</th>
                                        <td>{{ !empty($usermanagement['Email']) ? $usermanagement['Email'] : '' }}</td>
                                    </tr>
                                    <tr>
                                        <th>Tanggal Buat</th>
                                        <td>
                                            <script>
                                                var createDate = "{{ !empty($usermanagement['CreateDate']) ? $usermanagement['CreateDate'] : '' }}";
                                                var formattedCreateDate = createDate.replace(/[TZ]/g, ' ');
                                                document.write(formattedCreateDate);
                                            </script>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>Tanggal Perubahan</th>
                                        <td>
                                            <script>
                                                var createDate = "{{ !empty($usermanagement['ModifyDate']) ? $usermanagement['ModifyDate'] : '' }}";
                                                var formattedCreateDate = createDate.replace(/[TZ]/g, ' ');
                                                document.write(formattedCreateDate);
                                            </script>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="card-tabs">
                            <ul class="nav nav-tabs">
                                <li class="nav-item">
                                    <a class="nav-link active" id="user-tab" data-bs-toggle="tab" href="#user"
                                        aria-controls="home" role="tab" aria-selected="true">
                                        <i class='bx bx-user'></i>&nbsp; User Role
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="member-tab" data-bs-toggle="tab" href="#member"
                                        aria-controls="profile" role="tab" aria-selected="false">
                                        <i class='bx bx-chalkboard'></i>&nbsp; Member
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="setup-tab" data-bs-toggle="tab" href="#setupIcon"
                                        aria-controls="about" role="tab" aria-selected="false">
                                        <i class='bx bx-area'></i>&nbsp; Setup Member
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" id="password-tab" data-bs-toggle="tab" href="#password-menu"
                                        aria-controls="about" role="tab" aria-selected="false">
                                        <i class='bx bx-edit-alt'></i>&nbsp; Ubah Password
                                    </a>
                                </li>
                            </ul>
                        </div>

                        <div class="tab-content">
                            <div class="tab-pane active" id="user" aria-labelledby="user-tab" role="tabpanel">
                                <div class="card-datatable table-responsive">
                                    <table id="userroletable" class="datatables-users table border-top">
                                        <thead>
                                            <tr>
                                                <th>Code Site</th>
                                                <th>Nama Site</th>
                                                <th>Role</th>
                                                <th>Tanggal Buat Akun</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="tab-pane" id="member" aria-labelledby="member-tab" role="tabpanel">
                                <div class="card-datatable table-responsive">
                                    <table id="membertable" class="datatables-users table border-top">
                                        <thead>
                                            <tr>
                                                <th>Code Site</th>
                                                <th>Nama Site</th>
                                                <th>Organisasi</th>
                                                <th>Tanggal Buat Akun</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="tab-pane" id="setupIcon" aria-labelledby="setup-tab" role="tabpanel">
                                <div class="col-md-12 mb-2">
                                    <label class="form-label" for="siteid">Nama Site</label>
                                    <select id="siteid" name="siteid" class="select2 form-select"
                                        data-placeholder="Cari Berdasarkan">
                                        <option value="" selected></option>
                                        @if (!empty($site['Site']))
                                            @foreach ($site['Site'] as $st)
                                                <option value="{{ $st['SiteId'] }}">
                                                    {{ $st['Name'] }}&nbsp;-&nbsp;{{ $st['Domain'] }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>

                                <div class="col-md-12 mb-2">
                                    <label class="form-label" for="organizationid">Organisasi</label>
                                    <select id="organizationid" name="organizationid" class="select2 form-select"
                                        data-placeholder="Cari Berdasarkan">
                                        <option value="" selected></option>
                                        @if (!empty($organization['Organizations']))
                                            @foreach ($organization['Organizations'] as $org)
                                                <option value="{{ $org['Id'] }}">{{ $org['Name'] }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>

                                <div class="col-md-12">
                                    <label class="form-label" for="roleid">Role</label>
                                    <select id="roleid" name="roleid" class="select2 form-select"
                                        data-placeholder="Cari Berdasarkan">
                                        <option value="" selected></option>
                                        @if (!empty($role['Roles']))
                                            @foreach ($role['Roles'] as $rl)
                                                <option value="{{ $rl['Id'] }}">{{ $rl['Name'] }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                                <div class="col-12 text-end">
                                    <button id="addUsermanagement" type="button" onclick="setupmember()"
                                        class="btn btn-primary waves-effect waves-light mt-3">Simpan</button>
                                </div>
                            </div>

                            <div class="tab-pane" id="password-menu" aria-labelledby="password-tab" role="tabpanel">
                                <div class="col-md-12 mb-2">
                                    <label class="form-label" for="passwordOld">Password Lama</label>
                                    <div class="input-group input-group-merge form-oldpassword-toggle">
                                        <input class="form-control form-control-merge" type="password" id="oldPassword"
                                            name="oldPassword" placeholder="Masukan Password Lama"
                                            aria-describedby="login-oldpassword" tabindex="2" />
                                        <span id="togglePasswordIcon1" class="input-group-text cursor-pointer"><i
                                                id="icon-pass1" class='bx bx-show'></i></span>
                                    </div>
                                    <span id="validation-oldpassword" class="text-danger fst-italic">*password lama wajib
                                        diisi.</span>
                                </div>

                                <div class="col-md-12 mb-1">
                                    <label class="form-label" for="password">Password Baru</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 Baru"
                                            aria-describedby="login-konfirmasiPassword" tabindex="2" />
                                        <span class="input-group-text cursor-pointer"><i id="icon-pass2"
                                                class='bx bx-show'></i></span>
                                    </div>
                                    <span id="validation-password" class="text-danger fst-italic">*silakan lengkapi aturan
                                        format
                                        password secara lengkap.</span>
                                </div>

                                <div class="row mb-2">
                                    <div class="col-md-6">
                                        <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-6">
                                        <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 class="col-md-6">
                                        <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-6">
                                        <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 atau angka</span>
                                        </span>
                                    </div>
                                </div>


                                <div class="col-md-12 mb-2">
                                    <label class="form-label" for="RePassword">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>
                                    <span id="validation-repassword" class="text-danger fst-italic">*konfirmasi password
                                        tidak sesuai
                                        dengan password.</span>
                                </div>

                                <div class="col-12 text-end">
                                    <button id="editPassword" type="button"
                                        class="btn btn-primary waves-effect waves-light mt-3">Simpan</button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .hidden {
            display: none;
        }
    </style>
@endsection
@section('page-scripts')
    <script>
        let membertable = $("#membertable").DataTable({
            "responsive": true,
            "paging": true,
            "ordering": true,
            "info": true,
            "searching": true,
            "bFilter": false,
            "processing": true,
            "serverSide": true,
            "aaSorting": [],
            columns: [{
                    data: "SiteCode",
                },
                {
                    data: "SiteName",
                },
                {
                    data: "OrganizationName",
                },
                {
                    data: "CreateDate",
                    className: '',
                    orderable: true,
                    render: function(data, type, row) {
                        var formattedDate = data.replace(/[TZ]/g, ' ');
                        return formattedDate;
                        return data;
                    }
                },
            ],
            ajax: {
                url: '{{ url('usermanagement/_memberlist') }}/{{ $usermanagement['Id'] }}',
                method: 'POST',
                "data": function(d) {}
            },
            pagingType: "simple_numbers",
            pageLength: 10,
            fixedColumns: true
        });

        let userroletable = $("#userroletable").DataTable({
            "responsive": true,
            "paging": true,
            "ordering": true,
            "info": true,
            "searching": true,
            "bFilter": false,
            "processing": true,
            "serverSide": true,
            "aaSorting": [],
            columns: [{
                    data: "SiteCode",
                },
                {
                    data: "SiteName",
                },
                {
                    data: "RoleName",
                },
                {
                    data: "CreateDate",
                    className: '',
                    orderable: true,
                    render: function(data, type, row) {
                        var formattedDate = data.replace(/[TZ]/g, ' ');
                        return formattedDate;
                        return data;
                    }
                },
            ],
            ajax: {
                url: '{{ url('usermanagement/_userrolelist') }}/{{ $usermanagement['Id'] }}',
                method: 'POST',
                "data": function(d) {}
            },
            pagingType: "simple_numbers",
            pageLength: 10,
            fixedColumns: true
        });

        function setupmember() {
            let formData = new FormData();

            formData.append("userid", `{{ $usermanagement['Id'] }}`)
            formData.append("organizationid", $('#organizationid').val());
            formData.append("siteid", $('#siteid').val());
            formData.append("roleid", $('#roleid').val());

            if ($('#siteid').val().trim() == '') {
                $('#siteid').focus();
                alert('Site Wajib Diisi');
                return false;
            }
            if ($('#organizationid').val().trim() == '') {
                $('#organizationid').focus();
                alert('Organisasi Wajib Diisi');
                return false;
            }
            if ($('#roleid').val().trim() == '') {
                $('#roleid').focus();
                alert('Role Wajib Diisi');
                return false;
            }

            $.ajax({
                url: "{{ url('usermanagement/_setupmember') }}",
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".spinnerloader").show()
                },
                success: function(response, data) {
                    if (response) {
                        $(".spinnerloader").hide()
                        Swal.fire({
                            title: "Berhasil",
                            icon: "success",
                            text: "Data Berhasil Di Tambah",
                            showClass: {
                                popup: 'animate__animated animate__bounceIn'
                            },
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            allowOutsideClick: false,
                            buttonsStyling: false
                        }).then(function() {
                            membertable.ajax.reload(null, false);
                            userroletable.ajax.reload(null, false);
                        });
                    } else {
                        Swal.fire({
                            title: 'Error',
                            text: 'An error occurred while updating the content. Please try again.',
                            icon: 'error',
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            buttonsStyling: false
                        });
                    }
                },
                error: function() {
                    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 editPassword() {
            let formData = new FormData();

            formData.append('id', `{{ $usermanagement['Id'] }}`)
            formData.append("password", $('#password').val());

            $.ajax({
                url: "{{ url('usermanagement/_edit_usermanagement') }}",
                method: "POST",
                data: formData,
                processData: false,
                contentType: false,
                beforeSend: function() {
                    $(".spinnerloader").show()
                },
                success: function(response, data) {
                    if (data === "success") {
                        $(".spinnerloader").hide()
                        Swal.fire({
                            title: "Berhasil",
                            icon: "success",
                            text: "Password Berhasil Di Ubah",
                            showClass: {
                                popup: 'animate__animated animate__bounceIn'
                            },
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            allowOutsideClick: false,
                            buttonsStyling: false
                        }).then(function() {
                            location.reload();
                        });
                    } else {
                        Swal.fire({
                            title: 'Error',
                            text: 'An error occurred while updating the content. Please try again.',
                            icon: 'error',
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            buttonsStyling: false
                        });
                    }
                },
                error: function() {
                    Swal.fire({
                        title: 'Error',
                        text: 'An error occurred while updating the content. Please try again.',
                        icon: 'error',
                        customClass: {
                            confirmButton: 'btn btn-primary'
                        },
                        buttonsStyling: false
                    });
                }
            });
        }


        $(document).ready(function() {
            $('#validation-password').hide();
            $('#validation-repassword').hide();
            $('#validation-oldpassword').hide();
        });

        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 hasSymbolOrNumber = /[\W\d]/.test(password)

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

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

        $('#editPassword').on('click', function(event) {
            let oldPassword = $("#oldPassword").val();
            let password = $("#password").val();
            let rePassword = $("#RePassword").val();

            if (!oldPassword.trim()) {
                $('#validation-oldpassword').show();
                return;
            }

            if (!isPasswordValidated) {
                $('#validation-password').show();
                return;
            }

            if (password !== rePassword) {
                $('#validation-repassword').show();
                return;
            }

            editPassword();
        });

        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-pass1', 'oldPassword');
        addTogglePasswordListener('icon-pass2', 'password');
        addTogglePasswordListener('icon-pass3', 'RePassword');
    </script>
@endsection