@extends('layouts.master')
@section('title')
    {{ TitleCase('Personal') }}
@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('Personal') }}
        @endslot
    @endcomponent
    @php
        $staffs = $data['staff'];
        $roles = $data['roles'];
    @endphp
    <div class="row">
        <div class="col-lg-12">
            <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 Personal') }}</h5>
                            </div>
                        </div>
                        <div class="col-sm-auto">
                            <div class="d-flex flex-wrap align-items-start gap-2">
                                <button type="button" class="btn btn-primary add-btn" data-bs-toggle="modal" id="create-btn" data-bs-target="#showModal"><i class="ri-add-line align-bottom me-1"></i> {{ TitleCase('Agregar Personal') }}</button>
                            </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 a personal por nombre, usuario o mail...">
                                    <i class="ri-search-line search-icon"></i>
                                </div>
                            </div>
                            <!--end col-->
                            <div class="col-xl-6">
                                <div class="row g-3">

                                    <!--end col-->
                                    <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="2">{{ TitleCase('Bloqueados') }}</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>{{ TitleCase('Filtrar') }}</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="customer_name">{{ TitleCase('Nombre y Apellido') }}</th>
                                        <th class="sort" data-sort="email">{{ TitleCase('Usuario') }}</th>
                                        <th class="sort" data-sort="rol">{{ TitleCase('Rol') }}</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 ($staffs->count() > 0)
                                        @foreach ($staffs as $item)
                                            @php
                                                $role_info = App\Models\Role::where('id', $item->role_id)->first();
                                            @endphp

                                            <tr>
                                                <td class="customer_name">{{ TitleCase($item->user->name.' '.$item->user->lastname) }}</td>
                                                <td class="email">{{ UpperCase($item->user->username) }}</td>
                                                <td class="rol">{{ TitleCase($role_info->role_name) }}</td>
                                                @if ($item->status == 1)
                                                    <td class="status"><span class="badge bg-success-subtle text-success text-uppercase">{{ TitleCase('Activo') }}</span>
                                                    </td>
                                                @else
                                                    <td class="status"><span class="badge bg-danger-subtle text-danger text-uppercase">{{ TitleCase('Inactivo') }}</span>
                                                    </td>
                                                @endif
                                                <td>
                                                    <ul class="list-inline hstack gap-2 mb-0">
                                                        <li class="list-inline-item edit" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="{{ TitleCase('Editar') }}">
                                                            <a href="#showModalEdit" data-bs-toggle="modal" class="text-primary d-inline-block edit-item-btn"
                                                                data-id = "{{ $item->id }}" data-name="{{ $item->user->name }}"
                                                                data-username="{{ $item->user->username }}" data-role="{{ $item->role_id }}" data-status ="{{ $item->status }}">
                                                                <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="{{ TitleCase('Eliminar') }}">
                                                            <a class="text-danger d-inline-block remove-item-btn" data-bs-toggle="modal" href="#deleteRecordModal" data-id ="{{ $item->id }}">
                                                                <i class="ri-delete-bin-5-fill fs-16"></i>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @else
                                        <tr>
                                            <td colspan="5" class="text-center">{{ TitleCase('No hay datos 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 ($staffs->hasPages())
                                    <div class="d-flex justify-content-end mt-3">
                                        {{ $staffs->links('vendor.pagination.bootstrap-5') }}
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    <!--MODAL DE AGREGAR-->
                    <div class="modal fade" id="showModal" 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('Agregar Personal') }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
                                </div>
                                <form class="tablelist-form" autocomplete="off" method="POST" action="{{ route('users.staff.add') }}">
                                    @csrf
                                    <div class="modal-body">
                                        <input type="hidden" id="id-field" />

                                        <div class="mb-3">
                                            <label for="personalname-field" class="form-label">{{ TitleCase('Nombres') }}</label>
                                            <input type="text" id="personalname-field" name="staff_name" class="form-control" placeholder="{{ TitleCase('Introduzca los nombres') }}" required />
                                            <div class="invalid-feedback">{{ TitleCase('Por favor introduzca el nombre del personal.') }}</div>
                                        </div>

                                        <div class="mb-3">
                                            <label for="personallastname-field" class="form-label">{{ TitleCase('Apellidos') }}</label>
                                            <input type="text" id="personallastname-field" name="staff_lastname" class="form-control" placeholder="{{ TitleCase('Introduzca los apellidos') }}" required />
                                            <div class="invalid-feedback">{{ TitleCase('Por favor introduzca el apellido del personal.') }}</div>
                                        </div>

                                        <div class="mb-3">
                                            <label for="username-field" class="form-label">{{ TitleCase('Nombre de Usuario') }}</label>
                                            <input type="text" id="username-field" name="staff_username" class="form-control" placeholder="{{ TitleCase('Introduzca el nombre de usuario') }}" required />
                                            <div class="invalid-feedback">{{ TitleCase('Por favor introduzca un nombre de usuario.') }}</div>
                                        </div>

                                        <div class="mb-3">
                                            <label for="date-field" class="form-label">{{ TitleCase('Contraseña') }}</label>
                                            <input type="text" id="pass-field" name="staff_password" class="form-control" required placeholder="Introduzca una contraseña" />
                                            <div class="invalid-feedback">{{ TitleCase('Por favor introduzca una contraseña.') }}</div>
                                        </div>

                                        <div class="mb-3">
                                            <label for="role_id" class="form-label">{{ TitleCase('Rol') }}</label>
                                            <select name="role_id" id="role_id" class="form-control" data-choices data-choices-search-false required>
                                                <option value="">{{ TitleCase('Seleccione un rol') }}</option>
                                                @foreach ($roles as $role)
                                                    <option value="{{ $role->id }}">{{ TitleCase($role->role_name) }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="mb-3">
                                            <label for="status-field" class="form-label">{{ TitleCase('Estatus') }}</label>
                                            <select class="form-control" data-choices data-choices-search-false name="staff_status" id="status-field"  required>
                                                <option value="">{{ TitleCase('Seleccione un estatus') }}</option>
                                                <option value="1">{{ TitleCase('Activo') }}</option>
                                                <option value="2">{{ TitleCase('Bloqueado') }}</option>
                                            </select>
                                        </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">{{ TitleCase('Cerrar') }}</button>
                                            <button type="submit" class="btn btn-success" id="add-btn">{{ TitleCase('Agregar Personal') }}</button>
                                            <!-- <button type="button" class="btn btn-success" id="edit-btn">Update</button> -->
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!--MODAL DE EDITAR-->
                    <div class="modal fade" id="showModalEdit" 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">{{ TitleCase('Editar Personal') }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
                                </div>
                                <form class="tablelist-form" autocomplete="off" method="POST" action="{{ route('users.staff.update') }}">
                                    @csrf
                                    <div class="modal-body">
                                        <input type="hidden" id="edit-id-field" name="staff_id" value="" />

                                        <div class="mb-3">
                                            <label for="personalname-field" class="form-label">{{ TitleCase('Nombres y Apellidos') }}</label>
                                            <input type="text" id="edit-personalname-field" name="staff_name" class="form-control" placeholder="{{ TitleCase('Introduzca los nombres') }}" required />
                                            <div class="invalid-feedback">{{ TitleCase('Por favor introduzca el nombre del personal.') }}</div>
                                        </div>

                                        <div class="mb-3">
                                            <label for="email-field" class="form-label">{{ TitleCase('Nombre de Usuario') }}</label>
                                            <input type="text" id="edit-email-field" name="staff_email" class="form-control text-muted" placeholder="{{ TitleCase('Introduzca el nombre de usuario') }}" required readonly/>
                                            <div class="invalid-feedback">{{ TitleCase('Por favor introduzca un nombre de usuario.') }}</div>
                                        </div>

                                        <div class="mb-3">
                                            <label for="date-field" class="form-label">{{ TitleCase('Contraseña') }}</label>
                                            <input type="text" id="edit-pass-field" name="staff_password" class="form-control" placeholder="{{ TitleCase('Por favor introduzca una contraseña.') }}" />
                                            <div class="invalid-feedback">{{ TitleCase('Por favor introduzca una contraseña.') }}</div>
                                        </div>

                                        <div class="mb-3">
                                            <label for="role_id" class="form-label">{{ TitleCase('Rol') }}</label>
                                            <select name="role_id" id="edit-role_id" class="form-control" required>
                                                <option value="">{{ TitleCase('Seleccione un rol') }}</option>
                                                @foreach ($roles as $role)
                                                    <option value="{{ $role->id }}">{{ TitleCase($role->role_name) }}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="mb-3">
                                            <label for="status-field" class="form-label">{{ TitleCase('Estatus') }}</label>
                                            <select class="form-control" name="staff_status" id="edit-status-field"  required>
                                                <option value="">{{ TitleCase('Seleccione un estatus') }}</option>
                                                <option value="1">{{ TitleCase('Activo') }}</option>
                                                <option value="2">{{ TitleCase('Bloqueado') }}</option>
                                            </select>
                                        </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">{{ TitleCase('Cerrar') }}</button>
                                            <button type="submit" class="btn btn-success" id="add-btn">{{ TitleCase('Actualizar Personal') }}</button>
                                            <!-- <button type="button" class="btn btn-success" id="edit-btn">Update</button> -->
                                        </div>
                                    </div>
                                </form>
                            </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">Datos del Personal</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
                                </div>
                                <form class="tablelist-form" autocomplete="off">
                                    <div class="modal-body">
                                        <input type="hidden" id="id-field" value="" />

                                        <div class="mb-3">
                                            <label for="personalname-field" class="form-label">Nombres</label>
                                            <input type="text" id="personalname-field" name="staff_name" class="form-control" placeholder="Introduzca los nombres" disabled />
                                        </div>

                                        <div class="mb-3">
                                            <label for="personallastname-field" class="form-label">Apellidos</label>
                                            <input type="text" id="personallastname-field" name="staff_lastname" class="form-control" placeholder="Introduzca los apellidos" disabled />
                                        </div>

                                        <div class="mb-3">
                                            <label for="email-field" class="form-label">Correo Electronico</label>
                                            <input type="email" id="email-field" name="staff_email" class="form-control" placeholder="Enter email" disabled />
                                        </div>

                                        <div class="mb-3">
                                            <label for="phone-field" class="form-label">Nombre de Usuario</label>
                                            <input type="text" id="user-field" name="staff_username" class="form-control" placeholder="Introduzca nombre de usuario." disabled />
                                        </div>

                                        <div class="mb-3">
                                            <label for="date-field" class="form-label">Contraseña</label>
                                            <input type="text" id="pass-field" name="staff_password" class="form-control" disabled placeholder="Introduzca una contraseña" />
                                        </div>

                                        <div>
                                            <label for="status-field" class="form-label">Estado</label>
                                            <select class="form-control" data-choices data-choices-search-false name="staff_status" id="status-field"  disabled>
                                                <option value="">Estado</option>
                                                <option value="Active">Activo</option>
                                                <option value="NoActive">Inactivo</option>
                                            </select>
                                        </div>
                                    </div>
                                </form>
                            </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>
<!--end row-->
@endsection
@section('script')
    <script>
        document.querySelectorAll('.edit-item-btn').forEach(function(btn) {
            btn.addEventListener('click', function() {
                console.log(this.dataset);
                document.getElementById('edit-id-field').value = this.dataset.id;
                document.getElementById('edit-personalname-field').value = this.dataset.name;
                document.getElementById('edit-email-field').value = this.dataset.username;
                document.getElementById('edit-role_id').value = this.dataset.role;
                document.getElementById('edit-status-field').value = this.dataset.status;
            });
        });
    </script>

    <script src="{{ URL::asset('build/js/app.js') }}"></script>
@endsection