@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">Crear 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>Crear 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::open(['route' => 'shipments.store', 'files' => 'true', 'id' => 'shipments-form']) !!}

                    <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"></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/shipments/create.js"></script> 
    
    <script>
            let contador = 0;
            let aplicarValSecundaria = false;
            let selectAnterior = '';
            
            const mensajeError = document.querySelector("#mensaje-error");
            @if( $customers->count() > 0 )
                console.log('Cliente existente' );
            @else
                console.log('Cliente no existente' );
                $('#createValidacion').modal({backdrop: 'static', keyboard: false });
                $('#createValidacionTitle').text('Validación de Cliente existente:');
                $('.modal-body .modal-title:nth-child(1)').hide();
                $('.modal-body .modal-title').text('No contamos con Cliente existente.');
                $('.modal-body .total_cantidad').text('');
                $('#form_create .btn-primary').text('Ir a Clientes');
            
                $('#createValidacion').modal('show');
            @endif  

            $('.btn-secondary').on('click', function(){
                location.href="{{ route('shipments.index') }}";
            });

            $('#form_create').submit(function(event){
                event.preventDefault();
                console.log('llegando');
                location.href="{{ route('customers.create') }}";
            });
            
        $(document).ready(function(){

            "use strict";

            // $('#shipments-form').submit(function(event){
            //     event.preventDefault();
            //     aplicar_validacion(event);
            // });
            $('#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();
                console.log('contador');
                contador--;
            });

            selectAnterior = document.getElementById("customers_id").value;
        });

        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)) {
                    document.querySelector("#errorDeliver").classList.add("d-block")
                    validacion = false;
                }     
                else{
                    document.querySelector("#errorDeliver").classList.remove("d-block")
                }       

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

                    console.log(id);

                    if($(this).val() > 0){
                        id.text('');
                        id.slideUp();
                        document.querySelector("#errorCustomers").classList.remove("d-block")
                        
                    }else{

                        id.html("Debe seleccionar una opción valida");
                        id.slideDown();
                        validacion = false;
                        document.querySelector("#errorCustomers").classList.add("d-block")
                    }
                })

                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");
            contentComponents.innerHTML = '';
            
            selectAnterior = document.getElementById("customers_id").value;

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