@extends('layouts.base2')
@section('title', "Interface ajout des documents de role")

@section('content')
    @section('titlePage')  <h1 class="m-0 color-ico-barreau">Liste des roles</h1> @stop
    <div class="container" style="padding-bottom: 2em; padding-top: 1em">

        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12 col-sm-12">
                        <div class="card card-primary card-tabs">
                            <div class="card-header p-0 pt-1">
                                <ul class="nav nav-tabs" id="custom-tabs-one-tab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="custom-tabs-one-home-tab" data-toggle="pill" href="#custom-tabs-one-home"
                                        role="tab" aria-controls="custom-tabs-one-home" aria-selected="true">Listes de role</a>
                                    </li>
                                </ul>
                            </div>
                            <div class="card-body">
                                <div class="tab-content" id="custom-tabs-one-tabContent">
                                    <div class="tab-pane fade show active" id="custom-tabs-one-home" role="tabpanel" aria-labelledby="custom-tabs-one-home-tab">
                                        @adminbarreau
                                            <div class="row" style="padding-top:1em">
                                                <div class="col-sm-2">
                                                    <button type="button" style="background-color:  #18528d; color: #fff" class="btn btn-primary" data-toggle="modal" data-target="#modal-default"><i class="fa-solid fa-plus"></i></button>
                                                </div>
                                            </div>
                                        @endadminbarreau
                                        <br>
                                        <div class="row">
                                            <table class="table table-hover table-striped align-middle" id="liste_roles" style="width: 100%;">
                                                <thead>
                                                    <tr>
                                                        <th><span class="color-ico-barreau"> N°</span></th>
                                                        <th><i class="fas fa-align-left color-ico-barreau"></i><span class="color-ico-barreau"> TEXT</span></th>
                                                        <th><i class="fas fa-calendar-plus color-ico-barreau"></i><span class="color-ico-barreau"> DATE D'AJOUT</span></th>
                                                        <th><i class="fas fa-cogs color-ico-barreau"></i><span class="color-ico-barreau"> ACTIONS</span></th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    {{-- Modal --}}
    <div class="modal fade" id="modal-default" tabindex="-1" role="dialog" aria-labelledby="modalRoleLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content shadow-lg border-0 rounded-4">
                <!-- Header -->
                <div class="modal-header text-white" style="background-color: #18528d;">
                    <h5 class="modal-title" id="modalRoleLabel">
                        <i class="fa-solid fa-user-tag me-2"></i> Ajouter un rôle
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-dismiss="modal" aria-label="Close"></button>
                </div>

                <!-- Form -->
                <form method="POST" action="{{ route('role.create') }}" enctype="multipart/form-data">
                    @csrf

                    <div class="modal-body px-4 py-3">
                        <div class="mb-3">
                            <label for="text" class="form-label fw-bold">📝 Description du fichier</label>
                            <textarea name="text" class="form-control rounded-3" id="text" rows="4"
                                placeholder="Décrivez le rôle (255 caractères max)..." required></textarea>
                        </div>

                        <div class="mb-2">
                            <label for="fichier_scanner" class="form-label fw-bold">📄 Fichier scanné</label>
                            <input class="form-control" type="file" id="fichier_scanner" name="fichier_scanner"
                                accept="application/pdf" required>
                            <div class="form-text">Format accepté : PDF uniquement</div>
                        </div>
                    </div>

                    <!-- Footer -->
                    <div class="modal-footer border-0 px-4 pb-4">
                        <button type="button" class="btn btn-outline-danger" data-dismiss="modal">
                            <i class="fa fa-times-circle me-1"></i> Fermer
                        </button>
                        <button type="submit" class="btn btn-success">
                            <i class="fa-solid fa-floppy-disk me-1"></i> Enregistrer
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@stop

@section('footer')

    <script>

        $(document).ready(function(){
            if ($.fn.DataTable.isDataTable('#liste_roles')) {
                $('#liste_roles').DataTable().destroy();
            }
            var oTable = $('#liste_roles').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{!! route('charger.liste.role') !!}",
                columns: [
                    {data: 'numero',name: 'numero'},
                    {data: 'text', name: 'text', searchable: true},
                    {data: 'dateAjout', name: 'dateAjout', searchable: true},
                    {data: 'action', name: 'action', searchable: false}
                ]
            });
        });

        //Gestion des erreurs
        $(function() {
            var Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3500
            });

            $('.swalDefaultWarning').ready(function() {
                @if (session('warning'))
                    Toast.fire({
                        icon: 'warning',
                        title: '{{ session('warning') }}'
                    })
                @endif
            });

            $('.swalDefaultSuccess').ready(function() {
                @if (session('status'))
                    Toast.fire({
                        icon: 'success',
                        title: '{{ session('status') }}'
                    })
                @endif
            });

            $(document).ready(function() {

                @error('fichier_scanner')
                    setTimeout(function() {
                        Toast.fire({
                            icon: 'error',
                            title: '{{ $message }}'
                        });
                    });
                @enderror

                @error('nom_fichier')
                    setTimeout(function() {
                        Toast.fire({
                            icon: 'error',
                            title: '{{ $message }}'
                        });
                    }, 2000);
                @enderror

            });


        });

    </script>

@stop