@extends('layouts.panel')

@section('header')
    <div class="content-header-left col-md-9 col-12 mb-2">
        <div class="row breadcrumbs-top">
            <div class="col-12">
                <h2 class="content-header-title float-start mb-0">Lista Personas</h2>
                <div class="breadcrumb-wrapper">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('menu-principal.index') }}">Menu Principal</a>
                        </li>
                        <li class="breadcrumb-item"><a href="{{ route('persona.index') }}">Personas</a>
                        </li>
                        <li class="breadcrumb-item active">Lista
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="card">

                <div class="card-header border-bottom p-1">
                    <div class="head-label">
                        <h6 class="mb-0">Lista de Servicios</h6>
                    </div>
                    <div class="dt-action-buttons text-end">
                        <button type="button" class="btn btn-relief-danger btn-lg text-center m-1 btn-derivar"
                            data-bs-toggle="modal" data-bs-target="#editEvent1">
                            PREV. DE PLATAFORMA POR PISO
                        </button>

                        @can('plataformas.create')
                            <div class="dt-buttons d-inline-flex">
                                <button class="btn btn-primary btn-toggle-sidebar w-100" data-bs-toggle="modal"
                                    data-bs-target="#addEvent"><svg xmlns="http://www.w3.org/2000/svg" width="24"
                                        height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                        stroke-linecap="round" stroke-linejoin="round"
                                        class="feather feather-plus me-50 font-small-4">
                                        <line x1="12" y1="5" x2="12" y2="19">
                                        </line>
                                        <line x1="5" y1="12" x2="19" y2="12">
                                        </line>
                                    </svg>
                                    <span class="align-middle">Registrar Servicios</span>
                                </button>
                            </div>
                        @endcan

                    </div>
                </div>

                @if ($errors->any())
                    <div class="alert alert-dismissible alert-danger fade show" style="text-align: left; margin: 10px 10px;"
                        role="alert">
                        <h4 class="alert-heading">Error</h4>
                        @foreach ($errors->all() as $error)
                            <div class="">&nbsp;&nbsp;• &nbsp;{{ $error }}</div>
                        @endforeach
                    </div>
                @endif



                <div class="card-body">
                    <ul class="nav nav-pills mb-1" id="pills-tab" role="tablist">
                    </ul>
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                            aria-labelledby="pills-home-tab">

                            <form id="search-form" class="mb-1">
                                <div class="input-group">
                                    <select name="piso" class="form-select">
                                        <option value="" selected>Todos los pisos</option>
                                        @foreach ($pisos as $piso)
                                            <option value="{{ $piso->id }}"
                                                {{ request('piso') == $piso->id ? 'selected' : '' }}>
                                                {{ $piso->nombre }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <input type="text" name="search" id="search-input" class="form-control"
                                        placeholder="Buscar por nombre del Servicio">
                                    <button type="submit" class="btn btn-primary">Buscar</button>
                                </div>
                            </form>
                            <table class="table table-responsive  datatables-basic dtr-column collapsed ">
                                <thead>
                                    <tr>
                                        <th>

                                        </th>
                                        <th>
                                            N° PLATAFORMA
                                        </th>
                                        <th>
                                            PISO
                                        </th>
                                        <th>
                                            SIGLAS
                                        </th>
                                        <th>
                                            NUMERO
                                        </th>
                                        <th>
                                            ESTADO
                                        </th>
                                        <th>
                                            ACCIONES
                                        </th>
                                        <th>

                                        </th>
                                    </tr>
                                </thead>
                                <tbody id="result-table-servicios">
                                    @foreach ($plataformasTabla as $plataformas)
                                        <tr>
                                            <td>
                                                <a href="#" class="btn btn-primary btn-sm">
                                                    {{ $plataformas->id }}
                                            </td>
                                            <td>
                                                {{ $plataformas->nombre }}
                                            </td>
                                            <td>
                                                {{ $plataformas->pisos->nombre }}
                                            </td>
                                            <td>
                                                {{ $plataformas->siglas }}
                                            </td>
                                            <td>
                                                {{ $plataformas->numero }}
                                            </td>
                                            <td>
                                                <button
                                                    class="btn {{ $plataformas->estado == '1' ? 'btn-success' : 'btn-danger' }}">
                                                    {{ $plataformas->estado == '1' ? 'Habilitado' : 'Deshabilitado' }}
    
                                                </button>
                                            </td>

                                            <td>
                                                <form action="{{ route('plataforma.destroy', $plataformas) }}"
                                                    method="post" class="desactivar">
                                                    @csrf
                                                    @method('DELETE')
                                                    @can('plataformas.edit')
                                                        <a href="#" class="btn btn-primary dt-button create-new"
                                                            data-bs-toggle="modal" d ata-bs-target="#editEvent"
                                                            data-id="{{ $plataformas->id }}"
                                                            data-nombre="{{ $plataformas->nombre }}"
                                                            data-piso="{{ $plataformas->piso_id }}"
                                                            data-siglas="{{ $plataformas->siglas }}"
                                                            data-numero="{{ $plataformas->numero }}">
                                                            <i data-feather='edit'></i>

                                                        </a>
                                                    @endcan


                                                    @can('plataformas.destroy')
                                                        <button type="submit"
                                                            class="btn btn-danger {{ $plataformas->estado == '2' ? 'disabled' : '' }}">
                                                            <i data-feather='trash-2'></i>
                                                        </button>
                                                    @endcan



                                                </form>
                                            </td>
                                            <td class=" text-center">
                                                <ul class="table-controls">
                                                    <form action="{{ route('plataforma.activar', $plataformas) }}"
                                                        method="POST" class="activar">
                                                        @csrf
                                                        @method('POST')
                                                        @can('plataformas.destroy')
                                                            <button type="submit"
                                                                class="btn btn-success {{ $plataformas->estado == '1' ? 'disabled' : '' }}"
                                                                style="">Habilitar</button>
                                                        @endcan

                                                    </form>
                                                </ul>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>


                            <!-- PAGINACION - INICIO -->
                            <div class="row">
                                <div class="col-md-6 mt-1">
                                    <div id="result-info" class="dataTables_info">
                                        Mostrando {{ $plataformasTabla->firstItem() }} a
                                        {{ $plataformasTabla->lastItem() }} de
                                        {{ $plataformasTabla->total() }} registros
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div id="result-pagination" class="dataTables_paginate">
                                        <ul class="pagination justify-content-end">
                                            <li
                                                class="page-item {{ $plataformasTabla->previousPageUrl() ? '' : 'disabled' }}">
                                                <a class="page-link"
                                                    href="{{ $plataformasTabla->previousPageUrl() }}">Anterior</a>
                                            </li>

                                            @if ($plataformasTabla->currentPage() > 3)
                                                <li class="page-item">
                                                    <a class="page-link" href="{{ $plataformasTabla->url(1) }}">1</a>
                                                </li>
                                                @if ($plataformasTabla->currentPage() > 4)
                                                    <li class="page-item disabled">
                                                        <span class="page-link">...</span>
                                                    </li>
                                                @endif
                                            @endif

                                            @foreach ($plataformasTabla->getUrlRange(max($plataformasTabla->currentPage() - 2, 1), min($plataformasTabla->currentPage() + 2, $plataformasTabla->lastPage())) as $page => $url)
                                                <li
                                                    class="page-item {{ $page == $plataformasTabla->currentPage() ? 'active' : '' }}">
                                                    <a class="page-link"
                                                        href="{{ $url }}">{{ $page }}</a>
                                                </li>
                                            @endforeach

                                            @if ($plataformasTabla->currentPage() < $plataformasTabla->lastPage() - 2)
                                                @if ($plataformasTabla->currentPage() < $plataformasTabla->lastPage() - 3)
                                                    <li class="page-item disabled">
                                                        <span class="page-link">...</span>
                                                    </li>
                                                @endif
                                                <li class="page-item">
                                                    <a class="page-link"
                                                        href="{{ $plataformasTabla->url($plataformasTabla->lastPage()) }}">{{ $plataformasTabla->lastPage() }}</a>
                                                </li>
                                            @endif

                                            <li
                                                class="page-item {{ $plataformasTabla->nextPageUrl() ? '' : 'disabled' }}">
                                                <a class="page-link"
                                                    href="{{ $plataformasTabla->nextPageUrl() }}">Siguiente</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <!-- PAGINACION - FINAL -->



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






    @can('plataformas.create')
        <div class="modal fade" id="addEvent" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered modal-add-event">
                <div class="modal-content">
                    <div class="modal-header bg-transparent">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body pb-5 px-sm-5 pt-10">
                        <div class="text-center mb-2">
                            <h1 class="mb-1">Registrar Plataforma</h1>
                            <p></p>
                        </div>




                        @if ($errors->any())
                            <div class="alert alert-dismissible alert-danger fade show"
                                style="text-align:center; margin-right: 10px; margin-left: 10px" role="alert">
                                <h4 class="alert-heading">Error</h4>
                                @foreach ($errors->all() as $error)
                                    <div class="alert-body">
                                        {{ $error }}
                                    </div>
                                @endforeach
                            </div>
                        @endif


                        <form id="editAddForm" class="row gy-1 pt-75 formguardar" action="{{ route('plataforma.store') }}"
                            method="POST">
                            @csrf
                            <div class="col-md-12">
                                <div class="row">

                                    <div class="col-md-6 mt-1">
                                        <label for="estado_actividad" class="form-label">N° PLATAFORMA</label>
                                        <input type="text" id="plataforma" class="form-control" name="plataforma"
                                            required>
                                    </div>


                                    <div class="col-md-6 mt-1">
                                        <label class="form-label" for="event"> Piso:</label>

                                        <select name="piso_id" class="form-select" required>
                                            <option value="" selected disabled>Seleccione un piso......</option>
                                            @foreach ($pisos as $piso)
                                                <option value="{{ $piso->id }}"
                                                    {{ old('piso_id') == $piso->id ? 'selected' : '' }}>
                                                    {{ $piso->nombre }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('piso_id')
                                            <strong class="text-sm text-red-600" style="color: red">{{ $message }}</strong>
                                        @enderror

                                    </div>
                                    <div class="col-md-6 mt-1">
                                        <label for="estado_actividad" class="form-label">SIGLAS</label>
                                        <input id="siglas" type="text" class="form-control" name="siglas" required>
                                    </div>
                                    <div class="col-md-6 mt-1">
                                        <label for="estado_actividad" class="form-label">NUMERO</label>
                                        <input type="text" id="numero" class="form-control" name="numero" required>
                                    </div>

                                </div>
                            </div>
                            <div class="col-12 text-center mt-2 pt-50">
                                <button type="submit" class="btn btn-primary me-1" id="btnguardar">Guardar</button>
                                <button type="reset" class="btn btn-danger" data-bs-dismiss="modal" aria-label="Close">
                                    Cerrar
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endcan



    @can('plataformas.edit')
        @include('plataforma.modal')
    @endcan



    @include('plataforma.vista-modelo')






@endsection

@section('css')
    <style>
        /* Ajusta este estilo según tus necesidades */
        .fila-seleccionada {
            background-color: #c1e6f7;
            /* Cambia el color de fondo según tus preferencias */
        }
    </style>
@endsection

@section('scripts')
    <!-- MODAL - REGISTRAR SERVICIOS -->
    <script>
        $(document).ready(function() {

            $('.dt-button.create-new').click(function() {

                var id = $(this).data('id');
                var nombre = $(this).data('nombre');
                var piso = $(this).data('piso');
                var siglas = $(this).data('siglas');
                var numero = $(this).data('numero');

                $('#edit_nombre').val(nombre);
                $('#edit_piso_id').val(piso);
                $('#edit_siglas').val(siglas);
                $('#edit_numero').val(numero);
                $('#editEvent').modal('show');

                var actionUrl = "{{ route('plataforma.update', ':id') }}";
                actionUrl = actionUrl.replace(':id', id);
                $('#editActividad').attr('action', actionUrl);

            })
        })
    </script>



    <!-- MODAL - PREVISUALIZAR PLATAFORMA POR PISO -->
    <script>
        $(document).ready(function() {

            $('.dt-button.create-new').click(function() {


                $('#editEvent').modal('show');

                var actionUrl = "{{ route('plataforma.update', ':id') }}";
                actionUrl = actionUrl.replace(':id', id);
                $('#editActividad').attr('action', actionUrl);

            })
        })
    </script>



    @if (session('guardar'))
        <script>
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 6000,
                timerProgressBar: true,

            })
            Toast.fire({
                icon: 'success',
                title: 'Se Guardo Satisfactoriamente!!'
            })
        </script>
    @endif
    @if (session('actualizar'))
        <script>
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,

            })
            Toast.fire({
                icon: 'success',
                title: 'Se Actualizo Satisfactoriamente!!'
            })
        </script>
    @endif
    @if (session('desactivar'))
        <script>
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,

            })
            Toast.fire({
                icon: 'success',
                title: 'Se Deshabilito Satisfactoriamente!!'
            })
        </script>
    @endif

    @if (session('activar'))
        <script>
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,

            })
            Toast.fire({
                icon: 'success',
                title: 'Se Habilito Satisfactoriamente!!'
            })
        </script>
    @endif
    <script>
        $('.activar').submit(function(e) {
            e.preventDefault()

            Swal.fire({
                title: 'Estas seguro de Habilitar?',
                text: "¡No podrás revertir esto!",
                icon: 'info',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Si, Habilitar!',
                cancelButtonText: 'Cancelar',
            }).then((result) => {
                if (result.value) {


                    this.submit()

                }
            })

        })
    </script>
    <script>
        $('.desactivar').submit(function(e) {
            e.preventDefault()

            Swal.fire({
                title: 'Estas seguro de Deshabilitar?',
                text: "¡No podrás revertir esto!",
                icon: 'info',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Si, Deshabilitar!',
                cancelButtonText: 'Cancelar',
            }).then((result) => {
                if (result.value) {


                    this.submit()

                }
            })

        })
    </script>

    <script>
        $('.formguardar').submit(function(e) {
            e.preventDefault()

            Swal.fire({
                title: 'Estas seguro de guardar?',
                text: "¡No podrás revertir esto!",
                icon: 'info',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Si, Guardar!',
                cancelButtonText: 'Cancelar',
            }).then((result) => {
                if (result.value) {


                    this.submit()

                }
            })

        })
    </script>

    <script>
        $('.formactualizar').submit(function(e) {
            e.preventDefault()

            Swal.fire({
                title: 'Estas seguro de actualizar?',
                text: "¡No podrás revertir esto!",
                icon: 'info',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Si, Actualizar!',
                cancelButtonText: 'Cancelar',
            }).then((result) => {
                if (result.value) {


                    this.submit()

                }
            })

        })
    </script>

    <script>
        $(document).ready(function() {

            $('.btn-piso').on('click', function() {
                var pisoId = $(this).data('piso-id');

                // Aquí puedes hacer una solicitud AJAX para obtener los servicios del piso seleccionado
                // y luego actualizar dinámicamente la lista en el segundo col-md-6.

                // Ejemplo de solicitud AJAX usando jQuery con método POST:
                $.ajax({
                    url: '/servicios/obtener-servicios/' +
                        pisoId, // Reemplaza con la ruta correcta de tu aplicación
                    type: 'GET',
                    success: function(data) {
                        // Actualiza la lista de servicios en el contenedor correspondiente
                        $('#servicios-container').html(data);
                    },
                    error: function(error) {
                        console.error('Error al obtener servicios: ', error);
                    }
                });
            });
        });
    </script>


    <!--  VALIDACION - SOLO CANTIDAD DE CARACTERES -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var inputPlataforma = document.getElementById("plataforma");
            var inputSiglas = document.getElementById("siglas");

            var inputedit_nombre = document.getElementById("edit_nombre");
            var inputedit_siglas = document.getElementById("edit_siglas");

            if (inputPlataforma) {
                inputPlataforma.addEventListener('input', function() {
                    var inputValue = inputPlataforma.value;
                    // Limitar a un máximo de 5 caracteres
                    inputPlataforma.value = inputValue.slice(0, 100);
                });
            }

            if (inputSiglas) {
                inputSiglas.addEventListener('input', function() {
                    var inputValue = inputSiglas.value;
                    // Limitar a un máximo de 5 caracteres
                    inputSiglas.value = inputValue.slice(0, 100);
                });
            }
            if (inputedit_nombre) {
                inputedit_nombre.addEventListener('input', function() {
                    var inputValue = inputedit_nombre.value;
                    // Limitar a un máximo de 5 caracteres
                    inputedit_nombre.value = inputValue.slice(0, 100);
                });
            }
            if (inputedit_siglas) {
                inputedit_siglas.addEventListener('input', function() {
                    var inputValue = inputedit_siglas.value;
                    // Limitar a un máximo de 5 caracteres
                    inputedit_siglas.value = inputValue.slice(0, 100);
                });
            }
        });
    </script>



    <!--  VALIDACION - SOLO NUMEROS Y MAXIMO DE CARACTERES / REGISTRAR -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var inputNumero = document.getElementById("numero");

            if (inputNumero) {
                inputNumero.addEventListener('input', function() {
                    var inputValue = inputNumero.value;
                    inputValue = inputValue.replace(/[^0-9]/g, ''); // Permitir solo números
                    inputNumero.value = inputValue.slice(0, 5); // Limitar a un máximo de 5 caracteres
                });
            }
        });
    </script>



    <!-- VALIDACION - SOLO NUMEROS Y MAXIMO DE CARACTERES / EDITAR -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var inputNumero = document.getElementById("edit_numero");

            if (inputNumero) {
                inputNumero.addEventListener('input', function() {
                    var inputValue = inputNumero.value;
                    inputValue = inputValue.replace(/[^0-9]/g, ''); // Permitir solo números
                    inputNumero.value = inputValue.slice(0, 5); // Limitar a un máximo de 5 caracteres
                });
            }
        });
    </script>
@endsection