@extends('header_nuevo_generico')
@section('main')
<div class="container-fluid pt-5 mt-5" style="width: 100%;">        
    <div>
        <h3 class="text-fidelitas my-5" style="text-align: center;">Administrador Tipo de Servicio / Sector</h3>
    </div>       
    <form id="frmCliente">
        <div class="row mt-3 justify-content-center">
            <input type="hidden" name="_token"  id="token" value="{{ csrf_token() }}">
            <div class="col-md-4">
                <label for="seleccionar_cliente" class="form-label">Cliente</label>
                <select class="form-select form-select-sm cliente" name="cliente" id="cliente">
                    <option selected>Seleccione cliente...</option>
                    <!-- Assuming $clientes is a variable passed from your backend -->
                    @foreach($clientes as $cliente)
                        <option value="{{ $cliente->cliente }}">{{ $cliente->nombre_cliente }}</option>
                    @endforeach
                </select>
            </div>            
            <div class="col-md-4">
                <label for="productos" class="form-label">Productos</label>
                <select name="productos" id="productos" class="form-select form-select-sm">
                    <option value="">Seleccione un producto...</option>
                </select>
            </div>
        </div>
    </form>        
    <div id="tablaServicioSector" class="mt-5 mb-5"></div>       
</div>
<div class="modal modal_desactivar" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="frmDesactivarRegistro">
                {{ csrf_field() }}
                <input type="hidden" id="idreg_baja" name="idreg_baja" value="">
                <input type="hidden" id="cliente_b" name="cliente_b" value="">
                <input type="hidden" id="servicio_b" name="servicio_b" value="">
                <div class="modal-header">
                    <h5 class="modal-title">Desactivar Registro</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Esta seguro que desea desactivar este registro?</p>
                    <div id="" class="form-text">Una vez desactivado no podra recuperarlo. Para verlo de nuevo lo tendra que dar de alta.</div>
                </div>
                <div class="modal-footer">
                    <div id="cargando_accion_3" class="d-none">
                        <div class="spinner-border text-fidelitas justify-content-center" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div> 
                    </div> 
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="bi bi-x"></i> Cancelar</button>
                    <button type="submit" class="btn btn-fidelitas"><i class="bi bi-check-lg"></i> Aceptar</button>
                </div>
            </form>           
        </div>
    </div>
</div>
@include('abm-servicio-sector/alta_modal_srevicio') 
@include('abm-servicio-sector/mod_modal_modificar_servicio')
@endsection
@section('funcionesJS')
    <script>
        $(document).ready(function () {     
            $('#cliente').on('change', function() {
                let cliente = $(this).val();

                $.ajax({
                    method: "POST",
                    url: "/tipo-servicio-sector/productos", 
                    data: $('#frmCliente').serialize(), 
                    beforeSend: function(){
                        $('#producto').empty();                    
                    },
                    success: function(productos){
                        $('#productos').html('<option value="">Seleccione un producto...</option>');
                        for ( producto of productos) {
                            $('#productos').append('<option value="'+producto.id_producto+'">'+producto.nombre_producto+'</option>');
                        }
                    },
                    error: function(err){ 
                        mensaje('Error en la Busqueda');  
                    }
                });
            });

            $('#productos').on('change', function() {                        
                let productos = $(this).val();                                    
                
                $.ajax({
                    method: "POST",
                    url: "/tipo-servicio-sector/tabla", 
                    data: $('#frmCliente').serialize(), 
                    beforeSend: function(){
                        $('#tablaServicioSector').html('');                    
                    },
                    success: function(data){
                        $('#tablaServicioSector').html(data);
                    },
                    error: function(err){ 
                        mensaje('Error en la Busqueda');  
                    }
                });
            });
            
            $('#frmEditarRegistro').on('submit', function(e){
                e.preventDefault();
                let data = $('#frmEditarRegistro').serialize();
                $.ajax({
                    method: 'POST',
                    url: '/tipo-servicio-sector/modificar',
                    data: data,
                    beforeSend: function(){
                        $('#tablaServicioSector').html('');
                        $('#cargando_accion').removeClass('d-none')                    
                    },
                    success: function(data){
                        $('#tablaServicioSector').html(data);
                        $('#cargando_accion').addClass('d-none')
                        setTimeout(() => {
                            $('.modal_modificar_registro').modal('hide'); 
                        }, 200);
                    },
                    error: function(err){ 
                        mensaje('Error en la Busqueda');  
                    }
                })                
            })
            
            $('#frmAltaRegistro').on('submit', function(e){
                e.preventDefault();
                let data = $('#frmAltaRegistro').serialize();
                $.ajax({
                    method: 'POST',
                    url: '/tipo-servicio-sector/alta',
                    data: data,
                    beforeSend: function(){
                        $('#tablaServicioSector').html('');
                        $('#cargando_accion_2').removeClass('d-none');                     
                    },
                    success: function(data){                        
                        $('#tablaServicioSector').html(data);
                        $('#cargando_accion_2').addClass('d-none');
                        setTimeout(() => {
                            $('#modal_alta_registro').modal('hide')
                        }, 200);                        
                    },
                    error: function(err){ 
                        mensaje('Error en la Busqueda');  
                    }
                })     
            })

            $('#frmDesactivarRegistro').on('submit', function(e){
                e.preventDefault();
                let data = $('#frmDesactivarRegistro').serialize();
                $.ajax({
                    method: 'POST',
                    url: '/tipo-servicio-sector/desactivar',
                    data: data,
                    beforeSend: function(){
                        $('#tablaServicioSector').html('');
                        $('#cargando_accion_3').removeClass('d-none');                     
                    },
                    success: function(data){                        
                        $('#tablaServicioSector').html(data);
                        $('#cargando_accion_3').addClass('d-none');
                        setTimeout(() => {
                            $('#modal_desactivar').modal('hide')
                        }, 200);                        
                    },
                    error: function(err){ 
                        mensaje('Error en la Busqueda');  
                    }
                })
            })

            $('#modal_desactivar').on('hidden.bs.modal', function () {
                $(this).find('form').trigger('reset');
            })

            $('#modal_alta_registro').on('hidden.bs.modal', function () {
                $(this).find('form').trigger('reset');
            })                        
        })

        function abrirModalDesactivar(datos){
            console.log(datos);
            $('#idreg_baja').val(datos.idreg);
            $('#cliente_b').val(datos.cliente);
            $('#servicio_b').val(datos.servicio_contratado);
            
            $('.modal_desactivar').modal('show');
        }

        function abrirModalAlta(){
            $.ajax({
                method: "POST",
                url: "/tipo-servicio-sector/productos", 
                data: $('#frmCliente').serialize(), 
                beforeSend: function(){
                    $('#selec_servicio_alta').empty();                    
                },
                success: function(productos){                        
                    $('#selec_servicio_alta').html('<option value="">Seleccione un producto...</option>');
                    for ( producto of productos) {
                        $('#selec_servicio_alta').append('<option value="'+producto.id_producto+'">'+producto.nombre_producto+'</option>');
                    }
                    $('#cliente_registro_alta').val(productos[0].cliente)
                    $('#modal_alta_registro').modal('show')
                },
                error: function(err){ 
                    mensaje('Error en la Busqueda');  
                }
            });                        
        }

        //Funcion que abre el modal de edicion de registro
        function abrirModalModf(datos){
            $.ajax({
                method: "POST",
                url: "/tipo-servicio-sector/productos", 
                data : {_token:$('#token').val(), cliente:datos.cliente}, 
                beforeSend: function(){
                    $('#selec_servicio').empty();                    
                },
                success: function(productos){
                    $('#selec_servicio').html('<option value="">Seleccione un producto...</option>');
                    for ( producto of productos) {
                        $('#selec_servicio').append('<option value="'+producto.id_producto+'">'+producto.nombre_producto+'</option>');
                    }
                    $('#nombre_servicio').val(datos.nombre_largo);
                    $('#selec_servicio option[value="' + datos.servicio_contratado + '"]').attr("selected", "selected");
                    $('#tipo_servicio option[value="' + datos.agrupacion + '"]').attr("selected", "selected");
                    $('#cliente_registro').val(datos.cliente);
                    $('#idReg').val(datos.idreg);                                  

                    $('.modal_modificar_registro').modal('show');  
                },
                error: function(err){ 
                    mensaje('Error en la Busqueda');  
                }
            });                                                          
        }                
    </script>
@endsection