@extends('dashboard.partials.master')

@section('title')
    Add 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 id="role-form">
                    @csrf
                    <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"
                                placeholder="Enter Name Role">
                        </div>
                    </div>

                    <div class="flex-col mt-4">
                        <h5>Permissions</h5>
                        <small>Choose Permissions</small>
                    </div>

                    <div class="row mt-3">
                        <!-- Select All Checkbox -->
                        <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 Permissions</span>
                            </p>
                            <div class="form-check form-switch">
                                <input style="padding: 10px 25px;" class="form-check-input" id="select-all" type="checkbox">
                            </div>
                        </div>

                        <!-- Permissions List -->
                        @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 }}">
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="d-flex justify-content-center mt-4">
                        <button type="submit" 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');
        }

        // Ajax for storing role
        $('#role-form').on('submit', function(e) {
            e.preventDefault();
            showLoading(); //show the loading screen before sending the AJAX request
            $.ajax({
                type: 'POST',
                url: '{{ route('roles.store') }}',
                data: $(this).serialize(),
                success: function(response) {
                    hideLoading(); //hide the loading screen after receiving the response
                    handleSuccess('Role added successfully!');
                },
                error: function() {
                    hideLoading(); //hide the loading screen in case of an error
                    handleError();
                }
            });
        });
    </script>
@endpush