@extends('dashboard.partials.master')

@section('title')
    Edit Role & Permissiones
@endsection

@section('css')
@endsection
@section('content')
    <!-- end sidebar Navbar -->
    <main class="home home-section">
        <!-- start breadcrumb -->
        <h1 class="brain-title pt-4 ">Add Role & Permissiones </h1>
        <nav aria-label="breadcrumb mb-5">
            <ol class="breadcrumb">
                <li><a href="{{ route('dashboard') }}">Home</a></li>
                <li><a href="{{ route('roles.index') }}">Roles</a></li>
                <li class="active" aria-current="page">Add Role</li>
            </ol>
        </nav>
        <!-- end breadcrumb -->
        <div class="card role-table mt-4 ">
            <div class="card-body">
                <form action="{{ route('roles.update', $role->id) }}" method="POST" class="form-roles">
                    @csrf
                    @method('PUT') <!-- تستخدم لتحديد أن هذا الطلب هو تعديل -->

                    <!-- حقل تعديل اسم الدور -->
                    <div class="mb-3 d-flex align-items-baseline flex-wrap">
                        <label for="Name_Role" class="col-md-1 col-4 col-form-label fw-semibold">Name Role</label>
                        <div class="col-md-5 col-8 ">
                            <input type="text" class="form-control" id="Name_Role" name="name"
                                value="{{ $role->name }}" placeholder="Enter Name Role">
                        </div>
                    </div>

                    <!-- قائمة الصلاحيات -->
                    <div class="flex-col mt-4">
                        <h5>Permissions</h5>
                        <small>Choose Permissions </small>
                    </div>

                    <!-- container select roles -->
                    <div class="row mt-3">
                        <!-- select all -->
                        <div class="d-flex justify-content-between align-items-baseline flex-wrap p-2">
                            <p class="fw-semibold">
                                <i class="fa-solid fa-user-secret"></i>
                                <span class="p-3"> Select All Roles</span>
                            </p>
                            <div class="form-check form-switch">
                                <input style="padding: 10px 25px;" class="form-check-input" type="checkbox" id="select-all"
                                    role="switch">
                            </div>
                        </div>

                        <!-- عرض الصلاحيات -->
                        @foreach ($permissions as $permission)
                            <div class="d-flex justify-content-between align-items-baseline flex-wrap p-2">
                                <p class="fw-semibold">
                                    <i class="fa-solid fa-user-secret"></i>
                                    <span class="p-3">{{ $permission->name }}</span>
                                </p>
                                <div class="form-check form-switch">
                                    <input style="padding: 10px 25px;" class="form-check-input permission-checkbox"
                                        name="permissions[]" type="checkbox" value="{{ $permission->name }}"
                                        {{ $role->hasPermissionTo($permission->name) ? 'checked' : '' }}>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="d-flex justify-content-center mt-4">
                        <button class="add-role"><i class="fa-solid fa-save"></i> Save</button>
                    </div>
                </form>
            </div>
        </div>
        <!-- Loading screen (you can customize the design as needed) -->
        <div id="loading-screen"
            style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: rgba(255, 255, 255, 0.8); z-index: 9999; text-align: center; padding-top: 20%;">
            {{-- <h2>Loading...</h2> --}}
            <img src="{{ asset('dashboard') }}/images/loading.svg" alt="Loading">
        </div>
    </main>
@endsection

@push('js')
    <script>
        // Select All Permissions
        $('#select-all').on('change', function() {
            $('.permission-checkbox').prop('checked', this.checked);
        });

        function showLoading() {
            $('#loading-screen').show(); //show the loading screen
        }

        function hideLoading() {
            $('#loading-screen').hide(); //hide the loading screen
        }

        function handleSuccess(message) {
            Swal.fire({
                title: 'Success',
                text: message,
                icon: 'success',
            }).then(() => {
                location.reload(); //reload the page after success message
            });
        }

        function handleError() {
            Swal.fire('Error', 'Failed!', 'error');
        }

        $(document).on('submit', '.form-roles', function(e) {
            e.preventDefault();

            showLoading(); //show the loading screen before sending the AJAX request

            //get data for form submission
            var formData = $(this).serialize();

            //send data
            $.ajax({
                url: $(this).attr('action'),
                method: 'PUT',
                data: formData,
                success: function(response) {
                    if (response.success) {
                        hideLoading(); //hide the loading screen after receiving the response
                        handleSuccess('Role updateing successfully!');
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        // If the error is due to a duplicate name
                        Swal.fire({
                            icon: 'error',
                            title: 'Validation Error',
                            text: xhr.responseJSON.message,
                        });
                        hideLoading(); //hide the loading screen in case of an error
                    } else {
                        hideLoading(); //hide the loading screen in case of an error
                        handleError();
                    }
                }
            });
        });
    </script>
@endpush