@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('/boms'); }}">Listado Boms</a></li>
                <li class="breadcrumb-item active" aria-current="page">Editar 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>Editar 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::model($bom, ['route' => ['boms.update', $bom->id], 'method' => 'patch', "id" => "editar-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>

                @php
                    $contador = 0 
                @endphp

                @foreach ($components as $component)
                    
                    <div class="row campo" id="componente{{ $contador }}">
                        @include('components.fields_edit')
                    </div>
                    @php
                        $contador++;    
                    @endphp
                @endforeach
                
                <div class="row" 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>
</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/row_materials/create.js"></script>
    
    <script>
        
        let componentesExistentes = {{ $components->count() > 0? true : false  }};
        let contador = {{ $components->count() }};

        @if ( $components->count() > 0)
            let aplicarValSecundaria = true;    
        @else
            let aplicarValSecundaria = false;
        @endif
        

        var countries = [];
        var materiras_primas = {!! $materia_prima !!};
        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");
        
        $(document).ready(function(){

            "use strict";

            $('#editar-bom-form').submit(function(event){
                event.preventDefault();
                if(validarCampos()){
                   if(aplicarValSecundaria){
                       if(validarComponentesExistentes()){
                            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--;
                 if(contador >= 0){
                    aplicarValSecundaria = false; 
                 }
            });

        });


        function add_component(){
            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++;
            });
        }

        function removeActive(x) {
            /*a function to remove the "active" class from all autocomplete items:*/
            for (var i = 0; i < x.length; i++) {
            x[i].classList.remove("autocomplete-active");
            }
        }

        function closeAllLists(elmnt) {
            /*close all autocomplete lists in the document,
            except the one passed as an argument:*/
            var x = document.getElementsByClassName("autocomplete-items");
            for (var i = 0; i < x.length; i++) {
                if (elmnt != x[i] && elmnt != inp) {
                    x[i].parentNode.removeChild(x[i]);
                }
            }
        }

        /*execute a function when someone clicks in the document:*/
        document.addEventListener("click", function (e) {
                closeAllLists(e.target);
        });
        
        function validarCampos(){
            let validacion = true;
            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", 1)){
                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(document.querySelectorAll(".campo").length > 0){
            //     componentesExistentes = true;
            // }

            if(validacion){
                return true;
            }
            else{
                return false;
            }
            
        }

        function validarComponentesExistentes(){
            let validacion = true;
            const elementosAValidar = document.querySelectorAll(".campo");
            console.log(elementosAValidar.length);
            for(let i = 0; i< contador; i++){
                // const rowMaterialEnTurno = document.querySelector(`#row_materials${i}`);
                // const posicionEnTurno = document.querySelector(`#pos${i}`);
                // const materialEnTurno = document.querySelector(`#material${i}`);
                // const pesoEnTurno = document.querySelector(`#peso${i}`);
                // const pxeEnTurno = document.querySelector(`#pxe${i}`);

                // const dimEnTurno = document.querySelector(`#dim${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_posicion", 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(validacion){
                return true;
                }
                else{
                return false;
                }
            }


            console.log(validacion);
        }

    </script>
@endpush