@extends('layouts.master')
@section('title')
    @lang('translation.Validation')
@endsection
@section('css')
    <!-- Lightbox css -->
    <link href="{{ URL::asset('/assets/libs/magnific-popup/magnific-popup.min.css') }}" rel="stylesheet" type="text/css" />
 
    <link href="{{ URL::asset('/assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />

    <link href="{{ URL::asset('/assets/libs/bootstrap-editable/bootstrap-editable.min.css') }}" rel="stylesheet"
        type="text/css" />

    <link href="{{ URL::asset('/assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ URL::asset('/assets/libs/datatables/datatables.min.css') }}" rel="stylesheet" type="text/css" />

    <link href="{{ URL::asset('/assets/libs/dropzone/dropzone.min.css') }}" rel="stylesheet" type="text/css" />

    <link href="{{ URL::asset('/assets/libs/magnific-popup/magnific-popup.min.css') }}" rel="stylesheet" type="text/css" />


    <style type="text/css">
        #datatable-buttons tr.child td.child ul.dtr-details li {
            overflow: auto;
        }

        #datatable-buttons tr.child td.child ul.dtr-details li span.dtr-data div.recorte {
            float: none;
        }

        .imagen_carga{
            width: 300px;
        }

        .recorte {
           width: 50px;
            height: 50px;
            overflow: hidden;
            margin: 10px;
            position: relative;
            float: left;
        }

        .recorte img {
            position:absolute;
            left: -100%;
            right: -100%;
            top: -100%;
            bottom: -100%;
            margin: auto;
            min-height: 100%;
            min-width: 100%;
        }
         
        .custom-file-input {
          color: transparent;
          width: 115px;
        }
        .custom-file-input::-webkit-file-upload-button {
          visibility: hidden;
        }
        .custom-file-input::before {
          content: 'Cargar';
          color: black;
          display: inline-block;
          background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
          border: 1px solid #999;
          border-radius: 3px;
          padding: 5px 8px;
          outline: none;
          white-space: nowrap;
          -webkit-user-select: none;
          cursor: pointer;
          text-shadow: 1px 1px #fff;
          font-weight: 700;
          font-size: 10pt;
        }
        .custom-file-input:hover::before {
          border-color: black;
        }
        .custom-file-input:active {
          outline: 0;
        }
        .custom-file-input:active::before {
          background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9); 
        }
        .valor_stock{

            width: 70px;
            text-align: left;
            margin-right: 9px;
            float: left;
            padding: 3px;
            border: solid 1px #fff
        },

    </style>

@endsection
@section('content')
    @component('common-components.breadcrumb')
        @slot('pagetitle') Inicio @endslot
        @slot('title') Materiales @endslot
    @endcomponent 


    <div class="modal fade" id="modalAumentoStock" tabindex="-1" aria-labelledby="modalAumentoStock" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="row">       
                        <div class="col-md-12 d-grid gap-2">
                            <button type="button" class="btn btn-secondary btn-lg btn-block waves-effect waves-light" data-bs-dismiss="modal">x</button>
                        </div>
                    </div>
                </div>
                <div class="modal-body">
                    <h5 class="modal-title" id="modalAumentoStock">Material : <span id="id_nom_material"></span> </h5>
    
                    <form method="POST" enctype="multipart/form-data" id="form-aumento-stock" action="/aumento_stock" class="custom-validation" >          
                        <div class="form-group">
                            <input type="hidden" name="bodega_id" value="{{ $bodega_id }}">
                            <input type="hidden" class="form-control" id="material_id" name="material_id">
                            <input type="hidden" class="form-control" id="user_recibe_id" name="user_recibe_id" value="{{ Auth::user()->id }} ">
                        </div>
                        <div class="form-group">
                            <label for="recipient-rut" class="col-form-label ">Cantidad:</label>
                            <input type="text" class="form-control" id="agrega_cantidad" required data-parsley-type="number" name="cantidad">
                            <div class="invalid-feedback">
                                Campo requerido!
                            </div>  
                        </div>
                        <div class="form-group">
                            <label for="id_documento" class="col-form-label ">Documento:</label>

                            <input type='file' onchange="readImage(this)" class="custom-file-input" id=""  accept="image/*" value="Cargar Imagen" name="document" />
                            <img src="" name="img"  width="50">

                        </div>

                        {{-- <div class="form-group mb-3">
                            <label class="form-label">Empresa:</label>
                            <select class="form-control" name="empresa_id"  id="id_empresa_ingresa" required>
                                <option value="">Seleccione</option>
                                <option value="84">Araya Briones</option> 
                                <option value="">Minera Centinela</option> 
                            </select>
                        </div> --}}
                        <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}" />
                        <button type="submit" id="btn-ingresar-material" class="btn btn-primary">Ingresar Material</button>        
                    </form> 
                </div>
                <div class="modal-footer">

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

    <div class="modal fade" id="agregaMaterial" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="row">       
                        <div class="col-md-12 d-grid gap-2">
                            <button type="button" class="btn btn-secondary btn-lg btn-block waves-effect waves-light" data-bs-dismiss="modal">x</button>
                        </div>
                    </div>
                </div>
                <div class="modal-body">

                    <h5 class="modal-title">Nuevo Repuesto</h5>
    
                    <form method="POST" enctype="multipart/form-data" id="form_nuevo_material" class="custom-validation" action="/creamaterial" >          

                        <div class="form-group">
                            <label for="categoria_material_id" class="col-form-label ">Categoria:</label>
                            <select class="form-select"  required name="categoria_material_id" id="categoria_material_id">
                                <option value="">Seleccione</option>
                                @foreach ($categorias as $c)
                                    <option value="{{ $c->id }}">{{ $c->nombre }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="categoria_material_id" class="col-form-label ">Marca Vehículo:</label>
                            <select class="form-select"  required name="marca_vehiculo_id" id="marca_vehiculo_id">
                                <option value="">Seleccione</option>
                                @foreach ($marcas as $m)
                                    <option value="{{ $m->id }}">{{ $m->nombre }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="recipient-email" class="col-form-label ">Modelo Vehículo:</label>
                            <select class="form-select"  required name="modelo_vehiculo_id" id="modelo_vehiculo_id">
                                <option value="">Seleccione</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="recipient-rut" class="col-form-label ">Año:</label>
                            <input type="text" class="form-control" id="agrega_anio"  required name="anio">
                        </div>

                        <div class="form-group">
                            <label for="nombre_material" class="col-form-label ">Nombre:</label>
                            <input type="text" class="form-control" id="nombre_material" required name="nombre">
                        </div>

                        <div class="form-group">
                            <label for="recipient-rut" class="col-form-label ">Stock:</label>
                            <input type="text" class="form-control" id="agrega_stock"  required name="stock">
                        </div>
                        <div class="form-group">
                            <label for="recipient-email" class="col-form-label ">Stock critico:</label>
                            <input type="text" class="form-control" id="stock_critico"  required name="stock_critico">
                        </div>

                        <div class="form-group">
                            <label for="recipient-email" class="col-form-label ">Valor:</label>
                            <input type="number" class="form-control" id="agrega_valor"  required name="valor">
                        </div>

                        <br>

                        <div class="form-group">
                            <label for="recipient-email" class="col-form-label ">Código de Barra:</label>
                            <input type="text" class="form-control" id="agrega_codigo"  required name="codigo">
                        </div>
                        
                        <br>
                        <div class="form-group">
                            <label for="recipient-email" class="col-form-label ">Imagen:</label>
                            <input type="file" name="image" placeholder="Choose image"  id="image">
                        </div>
                        <br>

                        <input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}" />
                        {{-- <input type="hidden" name="categoria_material_id" id="categoria_material_id" value="1" /> --}}
                        <input type="hidden" name="bodega_id" value="{{ $bodega_id }}">
                        <input type="hidden" name="tipo_movimiento" id="tipo_movimiento" value="1" />
                        <button type="submit" id="btn-crear-repuesto" class="btn btn-primary">Crear Repuesto</button>        
                    </form>

                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>


    <div class="row">       
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">       
                    <button type="button" class="btn btn-primary waves-effect waves-light" data-bs-toggle="modal" data-bs-target="#agregaMaterial">Nuevo</button>

                    <div class="d-inline-block ms-3">
                        <label class="form-label mb-0 me-1">Estado:</label>
                        <select id="filtro-estado" class="form-select form-select-sm d-inline-block" style="width: auto;">
                            <option value="1" selected>Habilitados</option>
                            <option value="0">Deshabilitados</option>
                            <option value="todos">Todos</option>
                        </select>
                    </div>

                    <table id="datatable-buttons" class="table table-striped table-bordered dt-responsive nowrap data_table_search"
                        style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                        <thead>
                            <tr>
                                <th>Nombre</th>
                                <th>Categoria</th>
                                <th>Stock</th>
                                <th>Stock crítico</th>
                                <th>Código de Barras</th>
                                <th>Valor</th>
                                <th>Imagen</th>
                                <th>Aumentar Stock</th>                                          
                                <th>Habilitado</th>  
                            </tr> 
                        </thead>
                        <tbody>
                        </tbody> 


                </div>
            </div>
        </div>
    </div><!--end row-->

@endsection
@section('script')
    <script src="{{ URL::asset('/assets/libs/parsleyjs/parsleyjs.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/parsleyjs/es.js') }}"></script>

    <script src="{{ URL::asset('/assets/js/pages/form-validation.init.js') }}"></script>
    <!-- Magnific Popup-->
    <script src="{{ URL::asset('/assets/libs/magnific-popup/magnific-popup.min.js') }}"></script>
    <!-- lightbox init js-->
    <script src="{{ URL::asset('/assets/js/pages/lightbox.init.js') }}"></script>
 
    <script src="{{ URL::asset('/assets/libs/select2/select2.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/libs/bootstrap-editable/bootstrap-editable.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/libs/datatables/datatables.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/jszip/jszip.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/pdfmake/pdfmake.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/libs/magnific-popup/magnific-popup.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/js/funcionesGlobales.min.js')}}"></script>

    <script type="text/javascript">

    function eligeMaterial(input){

        $("#material_id").val($(input).data('id'));
        $("#id_nom_material").text($(input).data('nombre'));

    }
    function readImage(input, edita_imagen) {
        console.log("edita_imagen: ", edita_imagen);

        // alert("se ejecuta");
        var _URL = window.URL || window.webkitURL;
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {

               $(input).next().attr('src', e.target.result );
           //    $(input).next().next().val( e.target.result );
                img = new Image();
                var objectUrl = _URL.createObjectURL(input.files[0]);
                img.onload = function () {
                 
                    // $(input).parent().prev().children().removeAttr('width').removeAttr('height'); // se eliminan atributos 

                    // if(this.width < this.height){ // segun sea el caso , para que la imagen se sentre si es apiasada  o no 
                    //     $(input).parent().prev().children().attr('src', e.target.result).attr('width','50'); 
                    // }else{
                    //      $(input).parent().prev().children().attr('src', e.target.result).attr('height','50');
                    // }
                    // $(input).closest('form').submit();
                };
                 // $(input).parent().prev().children().click();
                // Swal.fire({
                //     position: 'top-center',
                //     icon: 'success',
                //     title: 'Editado con éxito',
                //     showConfirmButton: true,
                //     timer: 31500,
                //     html: "<img src='"+e.target.result+"' alt='Google'  width='200' >",
                //     customClass: 'class-name',
                // }); 
             //   $("#modalImagen").modal("show");
                img.src = objectUrl;

            }
            reader.readAsDataURL(input.files[0]);

            if(typeof edita_imagen != "undefined" && edita_imagen == "'edita_img'"){
                console.log("edita imagen");
                $(input).parent().submit();
            }
        }
    }

    function activoInactivo(input) {
        var materialId = $(input).data('id');
        var bodegaId = $(input).data('bodega');
        var activo = $(input).is(':checked') ? 1 : 0;

        $.ajax({
            url: '/cambia_estado_material',
            type: 'POST',
            data: {
                material_id: materialId,
                bodega_id: bodegaId,
                activo_inactivo: activo,
                _token: '{{ csrf_token() }}'
            },
            success: function(result) {
                mensajeRetorno(result.mensaje, 'success', 6000);
                myTable.ajax.reload(null, false);
            },
            error: function() {
                alert('Ha ocurrido un error. Favor notificar a Soporte.');
                myTable.ajax.reload(null, false);
            }
        });
    }

    var CategoriasDesdeVista = @json($categorias);
    var myTable;

    $(document).ready(function(){

        var OpcionesSelectCategorias = CategoriasDesdeVista.map(function(objeto) {
            return { value: objeto.id, text: objeto.nombre };
        });

        $.fn.editableform.buttons =
            '<button type="submit" class="btn btn-success editable-submit btn-sm waves-effect waves-light"><i class="mdi mdi-check"></i></button>' +
            '<button type="button" class="btn btn-danger editable-cancel btn-sm waves-effect waves-light"><i class="mdi mdi-close"></i></button>';

        function initEditables() {
            // Editable text fields
            $('#datatable-buttons .edita_campo_en_tabla').editable('destroy');
            $('#datatable-buttons .edita_campo_en_tabla').editable({
                mode: 'inline',
                emptytext: 'Vacío',
                inputclass: 'form-control-sm',
                success: function(response, newValue) {
                    var id = $(this).data('id');
                    var campo = $(this).data('campo');
                    $.get($(this).data('ruta-ajax'), { val: newValue, id: id, campo: campo }, function() {
                        mensajeRetorno('Campo editado con éxito', 'success', 6000);
                        myTable.ajax.reload(null, false);
                    });
                }
            });

            // Editable select fields
            $('#datatable-buttons .edita_campo_select').each(function() {
                var $a = $(this);
                $a.editable('destroy');
                $a.editable({
                    mode: 'inline',
                    inputclass: 'form-select form-select-sm',
                    value: $a.data('pk'),
                    source: OpcionesSelectCategorias,
                    success: function(response, newValue) {
                        var id = $a.data('id');
                        var campo = $a.data('campo');
                        $.get('/edita_campo_en_tabla', { val: newValue, id: id, campo: campo }, function() {
                            mensajeRetorno('Campo editado con éxito', 'success', 6000);
                            myTable.ajax.reload(null, false);
                        });
                    }
                });
            });

            // Magnific Popup
            $('#datatable-buttons .popup-gallery').magnificPopup({
                delegate: 'a',
                type: 'image',
                gallery: { enabled: true, navigateByImgClick: true, preload: [0, 1] }
            });
        }

        myTable = $('#datatable-buttons').DataTable({
            serverSide: true,
            processing: true,
            ordering: false,
            lengthChange: false,
            ajax: {
                url: '/materiales_data/{{ $bodega_id }}',
                type: 'GET',
                data: function(d) {
                    d.filtro_estado = $('#filtro-estado').val();
                },
                dataSrc: function(json) {
                    console.log('DataTables response:', json);
                    return json.data || [];
                },
                error: function(xhr, error, thrown) {
                    console.error('DataTables AJAX error:', error, thrown, xhr.responseText);
                }
            },
            columns: [
                { data: '0' },
                { data: '1' },
                { data: '2' },
                { data: '3' },
                { data: '4' },
                { data: '5' },
                { data: '6' },
                { data: '7' },
                { data: '8' }
            ],
            buttons: ['excel', 'pdf'],
            drawCallback: function() {
                initEditables();
            }
        });

        myTable.buttons().container().appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');

        // Filtros por columna en el header
        var filterRow = $('<tr class="filters"></tr>');
        $('#datatable-buttons thead').append(filterRow);

        var filterTypes = ['text', 'select', null, 'text', 'text', null, null, null, null];

        filterTypes.forEach(function(type, colIdx) {
            var th = $('<th></th>');
            if (type === 'text') {
                var input = $('<input type="text" class="form-control form-control-sm" />');
                input.on('keyup change clear', function() {
                    myTable.column(colIdx).search($(this).val()).draw();
                });
                th.append(input);
            } else if (type === 'select') {
                var select = $('<select class="form-select form-select-sm"><option value="">Todos</option></select>');
                CategoriasDesdeVista.forEach(function(cat) {
                    select.append('<option value="' + cat.id + '">' + cat.nombre + '</option>');
                });
                select.on('change', function() {
                    myTable.column(colIdx).search($(this).val()).draw();
                });
                th.append(select);
            }
            filterRow.append(th);
        });

        // Filtro estado externo
        $('#filtro-estado').on('change', function() {
            myTable.ajax.reload();
        });

        var success = @json(Session::get('success'));
        if (success) {
            mensajeRetorno(success, 'success', 6000);
        }

        $(".select2").select2();

        $("#marca_vehiculo_id").on('change', function(e){
            var idMarca = $(this).val();
            var selectModelos = $('#modelo_vehiculo_id');

            selectModelos.empty();

            $.ajax({
                url: "/modelos_por_marca",
                dataType: 'json',
                type: 'POST',
                data: {'id_marca': idMarca}, 
                success: function(result){
                    // console.log(result);
                    if(result.error == false){
                        // Agregar una opción por cada modelo obtenido
                        selectModelos.append('<option value="">Seleccione</option>')
                        $.each(result.modelos, function(index, modelo) {
                            selectModelos.append('<option value="' + modelo.id + '">' + modelo.nombre + '</option>');
                        });
                    }
                },
                error: function(error) {
                    console.error(error);
                    alert("Ha ocurrido un error a nivel de servidor. Favor notificar a Soporte.");
                }
            });
            
        });

        $("#form-aumento-stock").on('submit', function(){
            $("#btn-ingresar-material").prop("disabled", true);
        });

        $("#form_nuevo_material").on('submit', function(){
            $("#btn-crear-repuesto").prop("disabled", true);
        });

    });
        

    </script>
@endsection