@extends('admin.layouts.app')

@section('content')
<div class="row">
    <div class="col-xl-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
            <h4 class="mb-sm-0">{{ __('admin/roles.list_roles') }}</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">{{ __('admin/roles.roles') }}</a></li>
                    <li class="breadcrumb-item active">{{ __('admin/roles.list') }}</li>
                </ol>
            </div>

        </div>

        <!-- menu bar -->
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center flex-wrap gap-2">
                        <div class="flex-grow-1">
                            <a href="{{ route('admin.roles.create') }}" class="btn btn-info add-btn"><i class="ri-add-fill me-1 align-bottom"></i> {{ __('admin/roles.add_role') }}</a>
                            <button class="btn btn-primary add-btn" id="create-module-btn" data-bs-toggle="modal" data-bs-target="#showModalModule" data-store-url="{{ route('admin.modules.store') }}"><i class="ri-add-fill me-1 align-bottom"></i> {{ __('admin/roles.add_module') }}</button>
                        </div>

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


        <!-- roles -->
        <div class="card">
            <div class="card-header align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">{{ __('admin/roles.list_roles') }}</h4>
                <div class="flex-shrink-0">
                    <!-- something on right -->
                </div>
            </div>

            <div class="card-body">
                <!-- <p class="text-muted">Utilisez la classe <code>table</code> pour une table Bootstrap par défaut.</p> -->
                <div class="live-preview">
                <div class="table-responsive table-card">
                    <table class="table align-middle table-nowrap table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th scope="col">ID</th>
                                    <th scope="col">{{ __('admin/roles.name') }}</th>
                                    <th scope="col">{{ __('admin/roles.permissions') }}</th>
                                    <th scope="col" class="text-end">{{ __('admin/roles.actions') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($roles as $role)
                                <tr>
                                    <th scope="row">{{ $role->id }}</th>
                                    <td>{{ $role->name }}</td>
                                    <td>
                                        <div class="d-flex flex-wrap gap-1">
                                            @forelse($role->permissions as $permission)
                                            <span class="badge rounded-pill bg-info-subtle text-info" style="font-size: 10px;">
                                                {{ $permission->name }}
                                            </span>
                                            @empty
                                            <span class="text-gray-500">{{ __('admin/roles.full_access') }}</span>
                                            @endforelse
                                        </div>
                                    </td>
                                    <td class="text-end">
                                        <div class="gap-1 d-flex justify-content-md-end">
                                            @if($role->name !== 'super_admin')
                                            <span data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" aria-label="{{ __('admin/roles.edit') }}" data-bs-original-title="{{ __('admin/roles.edit') }}" aria-describedby="tooltip520429">
                                                <a class="btn btn-icon bg-primary-subtle text-primary" href="{{ route('admin.roles.edit', $role->id) }}">
                                                    <i class="ri-pencil-line align-bottom"></i>
                                                </a>
                                            </span>
                                            <span data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" aria-label="{{ __('admin/roles.delete') }}" data-bs-original-title="{{ __('admin/roles.delete') }}">
                                                <button class="open-delete-modal btn btn-icon bg-danger-subtle text-danger"
                                                    data-bs-toggle="modal"
                                                    href="#deleteRecordModal"
                                                    data-delete-url="{{ route('admin.roles.destroy', $role->id) }}"
                                                    data-item-name="{{ $role->name }}"
                                                    data-item-type="{{ __('admin/roles.this_role') }}"
                                                    id="delete-record-role-{{ $role->id }}">
                                                    <i class="ri-delete-bin-line align-bottom"></i>
                                                </button>
                                            </span>
                                            @else
                                            <span class="text-gray-500">{{ __('admin/roles.not_modifiable') }}</span>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="4" class="text-center">{{ __('admin/roles.no_results') }}</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>


        <!-- modules -->
        <div class="card">
            <div class="card-header align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">{{ __('admin/roles.list_modules') }}</h4>
            </div>

            <div class="card-body">
                <!-- <p class="text-muted">Utilisez la classe <code>table</code> pour une table Bootstrap par défaut.</p> -->
                <div class="live-preview">
                    <div class="table-responsive table-card">
                        <table class="table align-middle table-nowrap table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th scope="col">ID</th>
                                    <th scope="col">{{ __('admin/roles.name') }}</th>
                                    <th scope="col">{{ __('admin/roles.description') }}</th>
                                    <th scope="col">{{ __('admin/roles.permissions') }}</th>
                                    <th scope="col" class="text-end">{{ __('admin/roles.actions') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($modules as $module)
                                <tr class="border-bottom">
                                    <th scope="row">{{ $module->id }}</th>
                                    <td>{{ $module->name }}</td>
                                    <td class="px-6 py-4">{{ $module->description }}</td>
                                    <td>
                                        <div class="d-flex flex-wrap gap-1">
                                            @foreach($module->permissions as $permission)
                                            <span class="badge rounded-pill bg-info-subtle text-info" style="font-size: 10px;">
                                                {{ $permission->name }}
                                            </span>
                                            @endforeach
                                        </div>
                                    </td>
                                    <td class="text-end">
                                        <div class="gap-1 d-flex justify-content-md-end">
                                            @if($role->name !== 'super_admin')
                                            <span data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" aria-label="{{ __('admin/roles.edit') }}" data-bs-original-title="{{ __('admin/roles.edit') }}" aria-describedby="tooltip520429">
                                                <button class="btn btn-icon bg-primary-subtle text-primary edit-item-btn" data-bs-toggle="modal" href="#showModalModule" data-edit="true" data-module-id="{{ $module->id }}" data-module-name="{{ $module->name }}" data-module-description="{{ $module->description }}" data-module-url="{{ route('admin.modules.update', $module->id) }}">
                                                    <i class="ri-pencil-line align-bottom"></i>
                                                </button>
                                            </span>
                                            <span data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" aria-label="{{ __('admin/roles.delete') }}" data-bs-original-title="{{ __('admin/roles.delete') }}">
                                                <button class="open-delete-modal btn btn-icon bg-danger-subtle text-danger"
                                                    data-bs-toggle="modal"
                                                    href="#deleteRecordModal"
                                                    data-delete-url="{{ route('admin.modules.destroy', $module->id) }}"
                                                    data-item-name="{{ $module->name }}"
                                                    data-item-type="{{ __('admin/roles.this_module') }}"
                                                    id="delete-record-{{ $module->id }}">
                                                    <i class="ri-delete-bin-line align-bottom"></i>
                                                </button>
                                            </span>
                                            @else
                                            <span class="text-gray-500">{{ __('admin/roles.not_modifiable') }}</span>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="4" class="text-center">{{ __('admin/roles.no_results') }}</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="d-none code-view">
                    {{-- zone pour afficher le code source si nécessaire --}}
                </div>
            </div>
        </div>


        <!-- add module modal -->
        @php
        $isEdit = isset($module) && $module->id;
        @endphp
        <div class="modal fade" id="showModalModule" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content border-0">
                    <div class="modal-header bg-info-subtle p-3">
                        <h5 class="modal-title">
                            <i class="ri-keyboard-line"></i> <span class="text-uppercase" id="modalModuleTitle">{{ $isEdit ? __('admin/roles.edit_module') : __('admin/roles.add_module') }}</span>
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('admin/roles.close') }}" id="close-modal"></button>
                    </div>
                    <form id="module-form" class="tablelist-form" method="POST" autocomplete="off">
                        @csrf

                        <!-- Pour spoof DELETE ou PUT si nécessaire -->
                        <input type="hidden" name="_method" id="form-method" value="POST">
                        <input type="hidden" id="id" name="id" /> <!-- Pour l'ID en mode édition -->

                        <div class="modal-body">
                            <div class="row g-3">
                                <div class="col-lg-12">
                                    <div>
                                        <label for="name" class="form-label">{{ __('admin/roles.module_name') }} <span class="text-danger">*</span></label>
                                        <input type="text" name="name" id="name" class="form-control" placeholder="{{ __('admin/roles.module_name_placeholder') }}" value="{{ old('name', $module->name ?? '') }}" required />
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div>
                                        <label for="description" class="form-label">{{ __('admin/roles.module_description') }}</label>
                                        <textarea name="description" id="description" class="form-control" placeholder="{{ __('admin/roles.module_description_placeholder') }}" rows="3">{{ old('description', $module->description ?? '') }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <div class="hstack gap-2 justify-content-end">
                                <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('admin/roles.close') }}</button>
                                <button type="submit" class="btn btn-success" id="modal-submit-btn">
                                    <i class="ri-loader-4-line remix-spin me-2 d-none"></i>
                                    <span class="btn-text">{{ $isEdit ? __('admin/roles.update_module') : __('admin/roles.add_module') }}</span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>


        @if(method_exists($roles, 'links'))
        <div class="mt-3">
            {{ $roles->links() }}
        </div>
        @endif
    </div>
</div>

<!-- Modal de suppression -->
<x-admin.delete-modal
    item-type="{{ __('admin/roles.selected_item') }}"
    confirm-text="{{ __('admin/roles.delete_confirmation') }}"
    delete-text="{{ __('admin/roles.delete') }}" />

<!-- Composant toast global -->
<x-admin.toast-messages />     

@endsection

@push('script')
<script>
    $(document).ready(function() {

        // Configuration CSRF AJAX globale
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // Bouton Ajouter
        $('#create-module-btn').on('click', function() {
            resetModal();
            const storeUrl = $(this).data('store-url');
            $('#module-form').attr('action', storeUrl);
            $('#form-method').val('POST');
            $('#id').val('');

            $('#modalModuleTitle').text("{{ __('admin/roles.add_module') }}");
            $('#modal-submit-btn').find('.btn-text').text("{{ __('admin/roles.add') }}");
        });

        // Bouton Modifier
        $('.edit-item-btn').on('click', function() {
            resetModal();

            const moduleId = $(this).data('module-id');
            const moduleName = $(this).data('module-name');
            const moduleDescription = $(this).data('module-description');
            const moduleUrl = $(this).data('module-url');

            $('#name').val(moduleName);
            $('#description').val(moduleDescription);
            $('#id').val(moduleId);

            $('#module-form').attr('action', moduleUrl);
            $('#form-method').val('PUT');

            $('#modalModuleTitle').text("{{ __('admin/roles.edit_module') }}");
            $('#modal-submit-btn').find('.btn-text').text("{{ __('admin/roles.update') }}");
        });

        // Reset modal à la fermeture
        $('#showModalModule').on('hidden.bs.modal', function() {
            resetModal();
        });

        // Soumission formulaire Module
        $('#module-form').on('submit', function() {
            const submitBtn = $('#modal-submit-btn');
            submitBtn.find('i.ri-loader-4-line').removeClass('d-none');
            submitBtn.prop('disabled', true);
            submitBtn.find('.btn-text').text("{{ __('admin/roles.saving') }}");
        });
      

        function resetModal() {
            $('#module-form').attr('action', '');
            $('#form-method').val('POST');
            $('#id').val('');
            $('#name').val('');
            $('#description').val('');
            $('#modalModuleTitle').text("{{ __('admin/roles.add_module') }}");
            $('#modal-submit-btn').find('.btn-text').text("{{ __('admin/roles.add') }}");
            resetModalLoadingState();
        }

        function resetModalLoadingState() {
            const submitBtn = $('#modal-submit-btn');
            submitBtn.find('i.ri-loader-4-line').addClass('d-none');
            submitBtn.prop('disabled', false);
            submitBtn.find('.btn-text').text("{{ __('admin/roles.save') }}");
        }

    });
</script>
@endpush