@extends('layouts.master')
@section('title')
    {{ TitleCase('Roles') }}
@endsection
@section('css')
    <link href="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
@endsection
@section('content')
    @component('components.breadcrumb')
        @slot('li_1')
            {{ TitleCase('Gestion de Usuarios') }}
        @endslot
        @slot('title')
            {{ TitleCase('Roles') }}
        @endslot
    @endcomponent
    @php
        $i = 0;
        $roles = $data['roles'];
        $modules = $data['modules'];
        $sub_modules = $data['sub_modules'];
    @endphp
    <div class="row">
        <div class="col-lg-8">
            <div class="card" id="customerList">
                <div class="card-header border-bottom-dashed">

                    <div class="row g-4 align-items-center">
                        <div class="col-sm">
                            <div>
                                <h5 class="card-title mb-0">{{ TitleCase('Listado de Roles') }}</h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body border-bottom-dashed border-bottom">
                    <form>
                        <div class="row g-3">
                            <div class="col-xl-6">
                                <div class="search-box">
                                    <input type="text" class="form-control search" placeholder="Buscar rol por nombre...">
                                    <i class="ri-search-line search-icon"></i>
                                </div>
                            </div>
                            <!--end col-->
                            <div class="col-xl-6">
                                <div class="row g-3">
                                    <div class="col-sm-4">
                                        <div>
                                            <select class="form-control" data-plugin="choices" data-choices data-choices-search-false name="choices-single-default" id="idStatus">
                                                <option value="">{{ TitleCase('Todos') }}</option>
                                                <option value="1">{{ TitleCase('Activos') }}</option>
                                                <option value="0">{{ TitleCase('Inactivos') }}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <!--end col-->

                                    <div class="col-sm-4">
                                        <div>
                                            <button type="button" class="btn btn-primary w-100" onclick="SearchData();"> <i class="ri-equalizer-fill me-2 align-bottom"></i>Filtar</button>
                                        </div>
                                    </div>
                                    <!--end col-->
                                </div>
                            </div>
                        </div>
                        <!--end row-->
                    </form>
                </div>
                <div class="card-body">
                    <div>
                        <div class="table-responsive table-card mb-1">
                            <table class="table align-middle" id="customerTable">
                                <thead class="table-light text-muted">
                                    <tr>
                                        <th class="sort" data-sort="id">ID</th>
                                        <th class="sort" data-sort="customer_name">{{ TitleCase('Nombre') }}</th>
                                        <th class="sort" data-sort="status">{{ TitleCase('Estado') }}</th>
                                        <th class="sort" data-sort="action">{{ TitleCase('Acciones') }}</th>
                                    </tr>
                                </thead>
                                <tbody class="list form-check-all">
                                    @if ($roles->count() > 0)
                                        @foreach ($roles as $role)
                                            <tr>
                                                <td class="id"><a href="" class="fw-medium link-primary" data-bs-toggle="modal" data-bs-target="#showModal">{{$role->id}}</a></td>
                                                <td class="customer_name">{{ UpperCase($role->role_name) }}</td>
                                                @if ($role->status == '1')
                                                    <td class="status"><span class="badge bg-success-subtle text-success text-uppercase">{{ UpperCase('Activo') }}</span></td>
                                                @else
                                                    <td class="status"><span class="badge bg-warning-subtle text-warning text-uppercase">{{ UpperCase('Inactivo') }}</span></td>
                                                @endif
                                                <td>
                                                    <ul class="list-inline hstack mb-0">

                                                        <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover"
                                                            data-bs-placement="top" title="{{ TitleCase('Editar') }}">
                                                            <a class="text-primary d-inline-block edit-item-btn" id="editar" onclick="edit_rol_modal({{$role->id}})">
                                                                <i class="ri-pencil-fill fs-16"></i>
                                                            </a>

                                                        </li>
                                                        {{-- <li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Eliminar">
                                                            <a class="text-danger d-inline-block remove-item-btn" data-bs-toggle="modal" href="#deleteRecordModal">
                                                                <i class="ri-delete-bin-5-fill fs-16"></i>
                                                            </a>
                                                        </li> --}}
                                                    </ul>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @else
                                        <tr>
                                            <td colspan="4" class="text-center">{{ TitleCase('No hay roles disponibles.') }}</td>
                                        </tr>
                                    @endif


                                </tbody>
                            </table>
                            <div class="noresult" style="display: none">
                                <div class="text-center">
                                    <lord-icon src="https://cdn.lordicon.com/msoeawqm.json" trigger="loop" colors="primary:#121331,secondary:#08a88a" style="width:75px;height:75px">
                                    </lord-icon>
                                    <h5 class="mt-2">¡Lo siento! No se encontraron resultados.</h5>
                                    <p class="text-muted mb-0">We have all looked for staff.
                                        No encontramos ningún personal para tu búsqueda.</p>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-end mt-2">
                            <div class="pagination-wrap hstack gap-3">
                                @if ($roles->hasPages())
                                    <div class="d-flex justify-content-end mt-3">
                                        {{ $roles->links('vendor.pagination.bootstrap-5') }}
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    <!--MODAL DE VER-->
                    <div class="modal fade" id="showModalView" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header bg-light p-3">
                                    <h5 class="modal-title">{{ UpperCase('Editar Rol') }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
                                </div>
                                <div class="modal-content">
                                    <div class="card card-body" id="modal_content">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Modal -->
                    <div class="modal fade zoomIn" id="deleteRecordModal" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="btn-close" id="deleteRecord-close" data-bs-dismiss="modal" aria-label="Close" id="btn-close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="mt-2 text-center">
                                        <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon>
                                        <div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
                                            <h4>¿Estas seguro?</h4>
                                            <p class="text-muted mx-4 mb-0">¿Estás seguro de que quieres eliminar este personal?</p>
                                        </div>
                                    </div>
                                    <div class="d-flex gap-2 justify-content-center mt-4 mb-2">
                                        <button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">Cerrar</button>
                                        <button type="button" class="btn w-sm btn-danger " id="delete-record">!Si, Eliminar!</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--end modal -->
                </div>
            </div>

        </div>
        <!--end col-->
        <div class="col-lg-4">
            <div class="card" id="permisosList">
                <div class="card-header border-bottom-dashed">

                    <div class="row g-4 align-items-center">
                        <div class="col-sm">
                            <div>
                                <h5 class="card-title mb-0">{{ UpperCase('Agregar Nuevo Rol') }}</h5>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body border-bottom-dashed border-bottom">
                    <form action="{{ route('users.roles.add') }}" method="POST" id="permisos-form" autocomplete="off" class="needs-validation" novalidate>
                        @csrf
                        <div class="mb-3">
                            <p class="text-muted">{{ TitleCase('Selecciona los modulos y sub-modulos para el nuevo rol.') }}</p>

                            <label for="role_description" class="form-label">{{ TitleCase('Nombre del rol') }}</label>
                            <input type="text" id="role_description" name="role_description" class="form-control choices fs-12" placeholder="Introduzca los nombres" required />

                            <label for="modules" class="form-label">{{ TitleCase('Modulos') }}</label>
                            <select class="form-control" id="modules" name="modules[]" data-choices data-choices-multiple-groups="true" multiple>
                                <option value="">{{ TitleCase('Selecciona los Modulos') }}</option>
                                <optgroup label="{{ TitleCase('Modulos Principales') }}">
                                    @foreach ($modules as $module)
                                            <option value="{{$module->id}}">{{$module->description}}</option>
                                        @endforeach
                                </optgroup>
                            </select>

                            <label for="sub_modules" class="form-label">{{ TitleCase('Sub-Modulos') }}</label>
                            <select class="form-control" id="sub_modules" name="sub_modules[]" data-choices data-choices-multiple-groups="true" multiple>
                                <option value="">{{ TitleCase('Selecciona los Sub-Modulos') }}</option>
                                @foreach ($sub_modules as $key=>$values)
                                    <optgroup label="{{App\Models\AppModule::where('id', $key)->first()->description}}">
                                        @foreach ($values as $sub_module)
                                            <option value="{{$sub_module->id}}">{{$sub_module->description}}</option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            </select>

                            <label for="idStatus-module" class="form-label">{{ TitleCase('Estado') }}</label>
                            <select class="form-control" data-plugin="choices" data-choices data-choices-search-false name="role_status" id="role_status">
                                <option value="">{{ TitleCase('Seleccione') }}</option>
                                <option value="1">{{ TitleCase('Activo') }}</option>
                                <option value="0">{{ TitleCase('Inactivo') }}</option>
                            </select>
                        </div>
                        <div class="col-12">
                            <div class="d-flex flex-wrap align-items-start gap-2">
                                <button type="submit" class="btn btn-primary w-100"><i class="ri-add-line align-bottom me-1"></i> {{ TitleCase('Agregar Rol') }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
<!--end row-->
@endsection
@section('script')
    <script>
        function edit_rol_modal(id)
        {
            console.log("abrir modal editar con el id: "+id);
            var params = {_token:'{{ csrf_token() }}', id:id}
            $.ajax({
                type: "POST",
                url: "{{route('users.roles.show.modal.edit')}}",
                data: params,
                success: function (data) {
                    // console.log(data);
                    $('#showModalView .modal-content #modal_content').html(data);
                    $('#showModalView').modal('show', {backdrop: 'static'});

                    const selects = $('#showModalView').find('select[data-choices]');
                    selects.each(function() {
                        new Choices(this, {
                            removeItemButton: true,
                            shouldSort: false
                        });
                    });
                }
            });
        }
    </script>
    <script src="{{ URL::asset('build/js/app.js') }}"></script>



@endsection