@extends('layouts.app')

@push('page_css')
    <link href="{{ asset('assets') }}/plugins/select2/css/select2.min.css" rel="stylesheet">  
    <link href="{{ asset('assets') }}/plugins/autocompletado/autocompletado.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('/boms'); }}">Listado Boms</a></li>
                <li class="breadcrumb-item active" aria-current="page">Crear Boms</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 Bom</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' => 'boms.store', 'id' => 'bom-form']) !!}

                    <div class="card-body">
                        <div class="row">
                            @include('boms.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('boms.index') }}" class="btn btn-default">Cancelar</a>
                    </div>

                    {!! Form::close() !!}

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

        <livewire:modal-validacion/> 

    </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') }}/plugins/autocompletado/autocompletado.js"></script>
    <script src=" {{ asset('assets') }}/views_js/areas/create.js"></script>
    
    {{-- <script src=" {{ asset('assets') }}/views_js/row_materials/create.js"></script> --}}
    
    <script>
        let productos = {!! $products_description !!};
        let contador = 0;
        let aplicarValSecundaria = false;
        var materiras_primas = {!! $materia_prima !!};
        console.log(materiras_primas);
        var countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua &amp; Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia &amp; Herzegovina","Botswana","Brazil","British Virgin Islands","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Cayman Islands","Central Arfrican Republic","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica","Cote D Ivoire","Croatia","Cuba","Curacao","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Falkland Islands","Faroe Islands","Fiji","Finland","France","French Polynesia","French West Indies","Gabon","Gambia","Georgia","Germany","Ghana","Gibraltar","Greece","Greenland","Grenada","Guam","Guatemala","Guernsey","Guinea","Guinea Bissau","Guyana","Haiti","Honduras","Hong Kong","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Isle of Man","Israel","Italy","Jamaica","Japan","Jersey","Jordan","Kazakhstan","Kenya","Kiribati","Kosovo","Kuwait","Kyrgyzstan","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macau","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands","Mauritania","Mauritius","Mexico","Micronesia","Moldova","Monaco","Mongolia","Montenegro","Montserrat","Morocco","Mozambique","Myanmar","Namibia","Nauro","Nepal","Netherlands","Netherlands Antilles","New Caledonia","New Zealand","Nicaragua","Niger","Nigeria","North Korea","Norway","Oman","Pakistan","Palau","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre &amp; Miquelon","Samoa","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia","Seychelles","Sierra Leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","South Korea","South Sudan","Spain","Sri Lanka","St Kitts &amp; Nevis","St Lucia","St Vincent","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad &amp; Tobago","Tunisia","Turkey","Turkmenistan","Turks &amp; Caicos","Tuvalu","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States of America","Uruguay","Uzbekistan","Vanuatu","Vatican City","Venezuela","Vietnam","Virgin Islands (US)","Yemen","Zambia","Zimbabwe"];
        const mensajeError = document.querySelector("#mensaje-error");
        // let products = {!!  $products !!}; 

        // const getLengthOfObject = (obj) => {
        // let lengthOfObject = Object.keys(obj).length; 
        //     return lengthOfObject;
        // }

        // if(getLengthOfObject(products) > 0 ){
        //     alert('pasa' + products);
        // }
        // else{
        //     alert('no pasa' + products);
        // }
        @if( $products->count() > 0 )
            console.log('Producto existente' );
        @else
                $('#createValidacion').modal({backdrop: 'static', keyboard: false });
                $('#createValidacionTitle').text('Validación de producto existente:');
                $('.modal-body .modal-title:nth-child(1)').hide();
                $('.modal-body .modal-title').text('No contamos con productos existentes.');
                $('.modal-body .total_cantidad').text('');
                $('#form_create .btn-primary').text('Ir a Productos');
            
                $('#createValidacion').modal('show');

            // confirmacion = confirm('Para generar un BOM se requiere crear un Producto');
            // console.log(confirmacion);
            // if(confirmacion==true){
            //     location.href="{{ route('products.create') }}";
            // }
            //  else{
            //     location.href="{{ route('boms.index') }}";
            //  }
        @endif     

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

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

            "use strict";

            $('#bom-form').submit(function(event){
                event.preventDefault();
                console.log(aplicarValSecundaria);
                if(validarCampos()){                    
                    if(aplicarValSecundaria){
                        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();
            });
            
            $('#product_id').on('change', function(){
                var indiceSeleccionado = $('#product_id')[0].selectedIndex;
                $('#description').val(productos[indiceSeleccionado].description);
            });

        });

        function add_component(){

            console.log('bloquea boton');
            fetch('{{ url('/formulario/') }}/'+contador)
                .then(res => res.text())
                .then(html => {
                    $('#content-components').append(`<div class="row" id="${contador}">${html}</div>`);
                    aplicarValSecundaria = true;
                    $('.delete').on('click', function(event){
                        $(this).parent().parent().remove();
                    });
                    $('.select_tow').select2();    
                    autocomplete(document.getElementById("row_materials"+contador), materiras_primas);
                    contador++;

                    console.log('desbloquea boton');
                });
        }
        
        function validarCampos(){
            let validacion = true;
            if(! validar_seleccion("#product_id",  "#mensje_error_product_id", 1)){
                document.querySelector("#errorNoParte").classList.add("d-block")
                validacion = false;
            }
            else{
                document.querySelector("#errorNoParte").classList.remove("d-block")
            }
            if(! validar_seleccion("#description",  "#mensje_error_description", 1)){
                validacion = false;
                document.querySelector("#errorDescription").classList.add("d-block")
            }
            else{
                document.querySelector("#errorDescription").classList.remove("d-block")
            }
            // if(!validar_seleccion("#material", "#mensje_error_material", 1)){
            //     document.querySelector("#errorMaterial").classList.add("d-block")
            //     validacion = false;
            // }
            // else{
            //     document.querySelector("#errorMaterial").classList.remove("d-block")
            // }
            // if(!validar_seleccion("#dim", "#mensje_error_dim", 1)){
            //     document.querySelector("#errorDim").classList.add("d-block")
            //     validacion = false;
            // }
            // else{
            //     document.querySelector("#errorDim").classList.remove("d-block")
            // }
            if(!validar_seleccion("#weight", "#mensje_error_weight", 0.0001)){
                document.querySelector("#errorWeight").classList.add("d-block")
                validacion = false;
            }
            else{
                document.querySelector("#errorWeight").classList.remove("d-block")
            }
            // if(!validar_seleccion("#pieces_per_assembly", "#mensje_error_pieces_per_assembly", 1)){
            //     document.querySelector("#errorPiecesPerAssembly").classList.add("d-block")
            //     validacion = false;
            // }
            // else{ 
            //     document.querySelector("#errorPiecesPerAssembly").classList.remove("d-block")
            // }
            if(validacion){
                return true;
            }
            else{
                return false;
            }
        }


        function validarCamposSecundarios(){
            let validacion = true;
            for(i = 0; i < contador; i++){

                console.log('interación'+ i);

                if( !validar_seleccion(`#row_materials${i}`,  "#mensje_error_posicion", 1)){
                    validacion = false;
                    document.querySelector(`#errorRowMaterials${i}`).classList.add("d-block")
                    console.log(i);
                }
                else{
                    document.querySelector(`#errorRowMaterials${i}`).classList.remove("d-block")
                }
                if( !validar_seleccion(`#posicion${i}`,  "#mensje_error_posicion", 1)){
                    validacion = false;
                    document.querySelector(`#errorPosicion${i}`).classList.add("d-block")
                }
                else{
                    document.querySelector(`#errorPosicion${i}`).classList.remove("d-block")
                }
                if( !validar_seleccion(`#material${i}`,  "#mensje_error_material", 1)){
                    validacion = false;
                    document.querySelector(`#errorMaterial${i}`).classList.add("d-block")
                }
                else{
                    document.querySelector(`#errorMaterial${i}`).classList.remove("d-block")
                }
                if( !validar_seleccion(`#peso${i}`,  "#mensje_error_peso", 1)){
                    validacion = false;
                    document.querySelector(`#errorPeso${i}`).classList.add("d-block")
                }
                else{
                    document.querySelector(`#errorPeso${i}`).classList.remove("d-block")
                }

                // if( !validar_seleccion(`#dim${i}`,  "#mensje_error_material", 1)){
                //     validacion = false;
                //     document.querySelector(`#errorDim${i}`).classList.add("d-block")
                // }
                // else{
                //     document.querySelector(`#errorDim${i}`).classList.remove("d-block")
                // }

                if( !validar_seleccion(`#pxe${i}`,  "#mensje_error_pxe", 1)){
                    validacion = false;
                    document.querySelector(`#errorPPE${i}`).classList.add("d-block")
                }
                else{
                    document.querySelector(`#errorPPE${i}`).classList.remove("d-block")
                }
                
                // if( !validar_seleccion(`#bl${i}`,  "#mensje_error_bl", 1)){
                //     validacion = false;
                //     document.querySelector(`#errorBl${i}`).classList.add("d-block")
                // }
                // else{
                //     document.querySelector(`#errorBl${i}`).classList.remove("d-block")
                // }

                // if( !validar_seleccion(`#done${i}`,  "#mensje_error_done", 1)){
                //     validacion = false;
                //     document.querySelector(`#errorDone${i}`).classList.add("d-block")
                // }
                // else{
                //     document.querySelector(`#errorDone${i}`).classList.remove("d-block")
                // }                
            }
            if(validacion){
                return true;
            }
            else{
                return false;
            }
            
        }
    
    </script>
@endpush