@extends('fragments.fullTemplate')
@section('titulo')
    Servicios
@endsection
@section('contenido')
@php
    //
@endphp
    <div class="ui big breadcrumb">
        <div class="section">Catálogo</div>
        <i class="right chevron icon divider"></i>
        <div class="active section">Servicios</div>
    </div>
    <div class="ui divider"></div>
    <div data-module-notifications-anchor></div>
    <div class="content">
        <div class="col-lg-12 col-md-12 col-sm-12">
            @if(session()->has('warning'))
            <div class="alert alert-warning text-center">
                <strong>{{ session()->get('warning') }}</strong>
            </div>
            @endif
            @if(session()->has('success'))
                <div class="alert alert-success text-center">
                    <strong>{{ session()->get('success') }}</strong>
                </div>
            @endif
            @if (count($errors) > 0)
            <div class="alert alert-danger">
                <strong>¡Error!</strong> Revise los campos obligatorios.<br><br>
                <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
                </ul>
            </div>
            @endif
        </div>
    </div>
    @include('Control_documentos.Notificacion.notificacion_documento_version')
    <div class="ui segment">
        <form class="ui form" action="servicioSearch" method="get">
            <div class="inline fields sx-remove-margin">
                <div class="twelve wide field">
                    <input type="search" name="search" id="search" placeholder="Nombre de el servicio...">
                </div>
                <div class="four wide field">
                    <input class="ui button" type="submit" name="" value="Buscar servicio">
                </div>
            </div>
        </form>
    </div>
    <a class="ui button fluid primary" id="new_servicio">
        <i class="pencil alternate icon"></i> Nuevo servicio
    </a>
    <div class="ui divider"></div>

    <div class="sx-autorender">
        <div class="sx-scroll-x">
            <p class="text-center" >{{$servicios->count()}}</strong> resultados en esta página</p>
            <table class="ui celled table unstackable">
                <thead>
                    <tr>
                        <th class="text-center collapsing">Norma (servicio)</th>
                        <th class="text-center collapsing">Descripción</th>                        
                        <th class="text-center collapsing">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @if($servicios->count())
                    @foreach ($servicios as $servicio)
                        <tr>                            
                            <td>{{$servicio->servicio}}</td>                            
                            <td>{{$servicio->descripcion}}</td>                            
                            <td class="text-center">
                                <div class="ui tiny icon buttons">
                                    <!-- Editar -->                                    
                                    <a class="ui button green edit_servicio" 
                                       title="Modifica" 
                                       id="servicio{{$servicio->id_servicio}}"

                                       data-id_servicio="{{$servicio->id_servicio}}">
                                        <i class="pencil alternate icon"></i>
                                    </a>
                                                                        <!-- Eliminar -->
                                    
                                    <button class="ui button red eliminarServicio" data-id_servicio="{{$servicio->id_servicio}}" data-servicio="{{$servicio->servicio}}">
                                        <i class="trash alternate icon"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                    @else
                    <tr>
                        <td colspan="8">No se encontraron registros</td>
                    </tr>
                    @endif
                </tbody>
            </table>
            {{$servicios->links("pagination::bootstrap-4")}}
        </div>
    </div>
    @include('Servicios.new_servicio')
    <script>
        $(document).ready(function(){
            $('#new_servicio').click(function(){
                $('#ModalServicio').modal('show');
            });
            
        });
    </script>    
    @include('Servicios.modify_modal')    
    <script>
        var resultData = {};
        
        $(document).ready(function(){
            $('a.edit_servicio').on('click', function(){
                
                idServicio = $(this).attr('id');
                id_servicio = $('#'+idServicio).data('id_servicio');
               
                //alert(id_servicio);
                
                $.ajax({
                    url:"show_servicios",
                    method:"POST",
                    data:{'id_servicio': id_servicio, '_token': _token = $('input[name="_token"]').val()},
                    success:function(response){
                        //alert(response);
                        result = JSON.parse(response); 
                        resultData = result.data;
                        
                        console.log(resultData);
                        //alert(resultData);
                        $('#modify_modal').modal('show');
                    }
                });
                
                
                                
            });
        });
        
        $('#modify_modal').on('show.bs.modal', function () {
            //$('#id_servicio').val(id_servicio);
            console.log(id_servicio);
            
            $("#modal-form-modify :input").each(function(){                 
                input = $(this).attr('id'); // This is the jquery object of the input, do what you will
                //console.log(input);
                if(input in resultData.servicios){
                    
                    $('#modify_modal #'+input).val(resultData.servicios[input]);
                    
                }
            });
            
            tabla_productos = "<table class='ui celled table unstackable'><thead><tr><th>Tipo de producto</th><th>Días hábiles estimados</th><th>Precio unitario</th><th></th></tr></thead><tbody>";
            
            if (resultData.productos.length > 0) {
                
                $.each(resultData.productos, function(key, value_productos) {
                    tabla_productos +="<tr><td>"+value_productos.tipo_producto+"</td><td>"+value_productos.dias+"</td><td>"+value_productos.precio_mxn+"</td><td><div class='ui tiny icon buttons'> <a class='ui button green edit_producto_mod' title='Modifica' id='id_producto"+value_productos.id_producto+"' data-id_producto='"+value_productos.id_producto+"' data-id_servicio='"+value_productos.id_servicio+"' data-tipo_producto='"+value_productos.tipo_producto+"' data-dias='"+value_productos.dias+"' data-precio_mxn='"+value_productos.precio_mxn+"'><i class='pencil alternate icon'></i></a> <a class='ui button red eliminarProducto' id='eliminarProducto"+value_productos.id_producto+"' data-id_producto='"+value_productos.id_producto+"' data-producto='"+value_productos.id_producto+"'><i class='trash alternate icon'></i></a></div></td></tr>";
                });
            }else{
                tabla_productos +="<tr><td class='text-center' colspan='8'>No se encontraron registros</td></tr>" 
            }
            
            tabla_productos +="</tbody></table>";   
            
            
            $('#productos_de_servicios').html(tabla_productos);
            
        });
    </script>    
    @include('Servicios.delete_modal')
    <script>
        $(document).on('click','.eliminarServicio',function(){
            var id_servicio=$(this).attr('data-id_servicio');
            var servicio=$(this).attr('data-servicio');
            alert(id_servicio);
            
            $('#id_servicio_elimina').val(id_servicio);
            $('#servicio_elimina').html(servicio);

            $('#delete_servicio_mod').modal('show'); 
        });
    </script>    
    @include('Servicios.modify_producto_modal')
    <script>
        var resultData_edit = {};
        $(document).ready(function(){
            
            $(document).on('click','.edit_producto_mod',function(){
            //$('a.edit_producto_mod').on('click', function(){
                idProducto = $(this).attr('id');
                id_producto = $('#'+idProducto).data('id_producto');
                id_servicio = $('#'+idProducto).data('id_servicio');
                tipo_producto = $('#'+idProducto).data('tipo_producto');
                dias = $('#'+idProducto).data('dias');
                precio_mxn = $('#'+idProducto).data('precio_mxn');
                
                //alert(tipo_producto);
                
                $.ajax({
                    url:"show_productos",
                    method:"POST",
                    data:{'id_producto': id_producto, '_token': _token = $('input[name="_token"]').val()},
                    success:function(response){
                        //alert(response);
                        result = JSON.parse(response); 
                        resultData_edit = result.data;
                            
                        console.log(resultData_edit);
                        //alert(resultData_edit);
                        $('#id_producto_edit').val(id_producto);
                        $('#id_servicio_edit').val(id_servicio);
                        $('#tipo_producto_edit').val(tipo_producto);
                        $('#dias_edit').val(dias);
                        $('#precio_mxn_edit').val(precio_mxn);                       
                        
                        $('#modify_producto_mod').modal('show');
                    }
                });
            });
        }); 
        
        $('#modify_producto_mod').on('show.bs.modal', function () {
            $('#id_producto_edit').val(id_producto);
            console.log(id_producto);
            $("#modify_producto_mod :input").each(function(){
                input = $(this).attr('id');
                //alert(input); // This is the jquery object of the input, do what you will
                //console.log(input);
                if(input in resultData_edit){

                    $('#modify_producto_mod #'+input).val(resultData_edit[input]);

                }
            });
        });
        
    </script> 
@include('Servicios.delete_modal_producto')    
<script>
    $(document).on('click','.eliminarProducto',function(){

        var id_producto=$(this).attr('data-id_producto');
        var producto=$(this).attr('data-producto');

        //alert(nombre_empresa);
        $('#id_producto_elimina').val(id_producto);            
        $('#producto').html(producto);
        //alert(nombre_completo+' '+id_cliente);

        $('#delete_producto_mod').modal('show'); 
    });
</script>
    
@endsection