@extends('layouts.app')

@push('page_css')
    <link href="{{ asset('assets') }}/plugins/select2/css/select2.min.css" rel="stylesheet">   
@endpush

@section('content')
    <div class="page-info">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ url('/home'); }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ url('/shipments'); }}">Listado de embarques</a></li>
                <li class="breadcrumb-item active" aria-current="page">Editar embarque</li>
            </ol>
        </nav>
        <div class="page-options">
        </div>
    </div>


    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-12">
                    <h1>Editar embarque</h1>
                </div>
            </div>
        </div>
    </section>

    
    <div class="main-wrapper">
        <div class="row">
            <div class="col">
                
                <div>
                    <p id="mensaje-error" class="mensaje-error alert alert-danger alert-transparent alert-sm text-center">Añade por lo menos un componente, por favor.</p>
                </div>

                @include('adminlte-templates::common.errors')

                <div class="card">

                    {!! Form::model($shipment, ['route' => ['shipments.update', $shipment->id], 'method' => 'patch',"id" => "editar-shipments-form", 'files' => 'true']) !!}

                    <div class="card-body">
                        <div class="row">
                            @include('shipments.fields')
                        </div>

                        <div class="page-info">
                            <nav aria-label="breadcrumb">
                            </nav>
                            <div class="page-options">
                                <a  href="#" id="agregar-form" class="btn btn-success">
                                    <img src=" {{  asset('assets/iconos/agregar.png') }} " alt="usuarios" style="height: 20px;">
                                    Agregar
                                </a>
                            </div>
                        </div>
                        <div id="content-components-guardados">
                                @foreach ($shipment_products as $shipment)
                                    <div class="row" >
                                        @include('shipment_products.fields')
                                    </div>
                                @endforeach
                            </div>

                        <div id="content-components"></div>
                    </div>

                    <div class="card-footer">
                        {!! Form::submit('Guardar', ['class' => 'btn btn-primary']) !!}
                        <a href="{{ route('shipments.index') }}" class="btn btn-default">Cancelar</a>
                    </div>

                {!! Form::close() !!}
                </div>
            </div>
        </div>
    <livewire:modal-validacion/> 
    <!-- Modal -->
    <div class="modal fade" id="deleteValidacion" tabindex="-1" role="dialog" aria-labelledby="deleteValidacionTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteValidacionTitle">¿Desea cambiar de cliente?<span id="modulo_modal_title"></span></h5>
                    {{-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="material-icons">close</i>
                    </button> --}}
                </div>
                
                    <div class="modal-body">
                        <h5 class="modal-title">Se limpiara el contenedor de productos</h5>
                        <p class="producto_name"></p>
                        <div class="row create_content_form"></div>
                        <input type="hidden" id="id_form">
                        <div class="class_message_danger"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn" onclick="cancelarModal()">Cancelar</button>
                        <button  type="submit" class="btn btn-primary" onclick="aceptarModal()">Aceptar</button>
                    </div>
                
            </div>
        </div>
    </div>
    </div>
@endsection

@push('page_scripts')
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
    <script src="{{ asset('assets') }}/plugins/select2/js/select2.full.min.js"></script>    
    
    <script src=" {{ asset('assets') }}/js/validaciones.js"></script>
    {{-- <script src=" {{ asset('assets') }}/views_js/row_materials/create.js"></script> --}}
    
    <script>
        let contador = {{ $shipment_products->count() }};

        let aplicarValSecundaria = false;
        let selectAnterior = document.getElementById("customers_id").value;
        const mensajeError = document.querySelector("#mensaje-error");


        $(document).ready(function(){
            
            "use strict";

            $('#editar-shipments-form').submit(function(event){
                event.preventDefault();
                console.log(aplicarValSecundaria);
                if(validarCampos()){                    
                    if(contador){
                        mensajeError.classList.remove("d-block");          
                        if(validarCamposSecundarios()){
                            event.target.submit();
                        }
                    } 
                    else{
                        mensajeError.classList.add("d-block");             
                    }
                }
            });


            $('.date').datetimepicker({
                format: 'YYYY-MM-DD',
                useCurrent: true,
                icons: {
                    up: "icon-arrow-up-circle icons font-2xl",
                    down: "icon-arrow-down-circle icons font-2xl"
                },
                sideBySide: true
            })

            $('.select_tow').select2();    

            $('#agregar-form').on('click', function(event){
                event.preventDefault();
                add_component();    
            });

            $('.delete').on('click', function(event){
                $(this).parent().parent().remove();
                contador--;
            });
                    
        });

        function add_component(){

            let customers_id = $('#customers_id').val();

            fetch('{{ url('/formulario_shipment/') }}/'+ customers_id)
                .then(res => res.text())
                .then(html => {
                    $('#content-components').append(`<div class="row">${html}</div>`);

                    $('.delete').on('click', function(event){
                        $(this).parent().parent().remove();
                        contador--;
                    });

                    $('.select_tow').select2();   
                    contador++; 
                });
                
        }
        function validarCampos(){
            console.log('Valida');
            let validacion = true;
                if (!validar_texto_minimo('#deliver_date', '#errorDeliver', 1)) {
                    validacion = false;
                }      

                $.each($('.customers_id'),function(key,value){
                    const id = $(value).parent().find('.messageAddInput');

                    console.log(id);

                    if($(this).val() > 0){
                        id.text('');
                        id.slideUp();
                        
                    }else{

                        id.html("Debe seleccionar una opción valida");
                        id.slideDown();
                        validacion = false;
                    }
                })
                return validacion;
        }
        function validarCamposSecundarios(event){
            let validacion = true;
            console.log('ValidaCamposSecundarios');
            $.each($('.quantity'),function(key,value){
                    const id = $(value).parent().find('.messageAddInput');

                    console.log(id);

                    if($(this).val() > 0){
                        id.text('');
                        id.slideUp();
                        
                    }else{

                        id.html("La cantidad debe ser mayo a cero");
                        id.slideDown();
                        validacion = false;
                        
                    }
                })
                $.each($('.products_id'),function(key,value){
                    const id = $(value).parent().find('.messageAddInput');

                    if($(this).val() > -1){
                        id.text('');
                        id.slideUp();
                        
                    }else{

                        id.html("Debe seleccionar una opción valida");
                        id.slideDown();
                        validacion = false;
                        
                    }
                })
                if(validacion){
                    return true;
                }
                else{
                    return false;
                }
        }
        function changeCustomer(){
            
            $('#deleteValidacion').modal('show');
        
        }

        function cancelarModal(){
            document.getElementById("customers_id").value  =  selectAnterior;
            $('.select_tow').select2();
            $('#deleteValidacion').modal('hide');
        }

        function aceptarModal(){
            let contentComponents = document.getElementById("content-components");
            let contentComponentsGuardados = document.getElementById("content-components-guardados");
           
            contentComponents.innerHTML = '';
            contentComponentsGuardados.innerHTML = '';
            selectAnterior = document.getElementById("customers_id").value;

            $('.select_tow').select2();
            $('#deleteValidacion').modal('hide');
            contador=0;
        }
    </script>
@endpush