@extends('central.dashboard.layouts.master')

@section('sidebar')
    @include('central.dashboard.layouts.sidebar', ['page' => 'users'])
@endsection

@section('content')
    <div class="create-form-layout py-4">
        <div class="alert alert-danger" role="alert" style="display: none;" id="password-mismatch-alert">
            كلمة المرور وتأكيد كلمة المرور غير متطابقين.
        </div>

        <form action="{{ route('central.dashboard.admins.store') }}" method="post" id="create-user-form">
            @csrf
            <div class="row my-3">
                <div class="col-md-6 col-sm-6">
                    <label for="user_name" class="rs">إسم المستخدم</label>
                    <input type="text" name="user_name" id="user_name" class="form-control" placeholder="إسم المستخدم"
                        value="{{ request()->old('user_name') }}" required>
                </div>

                <div class="col-md-6 col-sm-6">
                    <label for="password" class="rs">كلمة المرور</label>
                    <input type="password" name="password" id="password" class="form-control px-5" placeholder="كلمة السر"
                        value="{{ request()->old('password') }}" required>
                    <div class="password-icon position-relative">
                        <span id="eye-icon"
                            style="position: absolute; top: -36px; right: 1%; font-size: 24px">&#128065;</span>
                    </div>
                </div>
                <div class="col-md-6 col-sm-6">
                    <label for="password_confirmation" class="rs">تأكيد كلمة المرور</label>
                    <input type="password" name="password_confirmation" id="password_confirmation" class="form-control"
                        placeholder="تأكيد كلمة السر" required>
                </div>
                <hr class="m-3">
                <label for="permissions" class="rs">الصلاحيات</label>
                {{-- permissions  Table --}}
                <div class="permissions-layout" id="permissions">
                    <table class="table table-bordered table-striped table-hover">
                        <thead>
                            <tr>
                                <th class="d-flex right-0">
                                    <div class="form-check mx-2">
                                        <input type="checkbox" id="selectAll" class="custom-checkbox">
                                    </div>
                                    تحديد الكل
                                </th>
                                <th colspan="4">اسم الصلاحية</th>
                            </tr>
                        </thead>
                        <tbody>

                            <tr>
                                @php $counter = 0; @endphp
                                @foreach ($permissions as $permission)
                                    <td>
                                        <input type="checkbox" name="permissions[]" id="permissions-{{ $permission->id }}"
                                            class="section-checkbox" value="{{ $permission->name }}">
                                        <label for="permissions-{{ $permission->id }}"> {{ $permission->name }}</label>
                                    </td>
                                    @php $counter++; @endphp

                                    @if ($counter % 4 === 0)
                            </tr>
                            <tr>
                                @endif
                                @endforeach
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-12 text-center mt-3">
                    <button id="submit-btn" class="btn btn-success submit-form-btn">إضافة</button>
                    <span class="text-danger submit-note" style="display: none;">الرجاء الانتظار ...</span>
                </div>
            </div>
        </form>
    </div>
@endsection
@push('script')
    <script>
        $(() => {
            $("#submit-btn").on("click", function() {
                event.preventDefault();
                var password = $("#password").val();
                var confirmPassword = $("#password_confirmation").val();

                if (password !== confirmPassword) {
                    $("#password-mismatch-alert").show();
                    setTimeout(function() {
                        $("#password-mismatch-alert").hide();
                    }, 1300);
                } else {
                    $("#create-user-form").submit();
                }
            });

            // Check All checkbox
            $("#selectAll").on("change", function() {
                $("input[name=\"permissions[]\"]").prop("checked", $(this).prop("checked"));
            });

            // Uncheck "Check All" checkbox if any of the  checkboxes is unchecked
            $("input[name=\"permissions[]\"]").on("change", function() {
                if (!$(this).prop("checked")) {
                    $("#selectAll").prop("checked", false);
                }
            });

            $('#eye-icon').on('click', function togglePasswordVisibility() {
                const passwordInput = document.getElementById("password");
                const confirmPasswordInput = document.getElementById("password_confirmation");
                const eyeIcon = document.getElementById("eye-icon");

                if (passwordInput.type === "password") {
                    passwordInput.type = "text";
                    confirmPasswordInput.type = "text";
                    eyeIcon.innerHTML = "&#128064;"; // Show the crossed-eye symbol
                } else {
                    passwordInput.type = "password";
                    confirmPasswordInput.type = "password";
                    eyeIcon.innerHTML = "&#128065;"; // Show the open-eye symbol
                }
            });
        });
    </script>
@endpush