@extends ('main.layouts')
@section ('titulo')
 Planificador de pintado - Ceresita
@endsection
@section ('content')
    {{--*********************** header inicial **********************************--}}
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <a href="{{route('planificadors.ambientes',$ubicacionAmbiente)}}">
                    <img src="{{asset('images/btn-volver.png')}}" class="btn-volver">
                </a>
                                <img src="{{asset('images/logo.png')}}" class="img-logo-center">
            </div>
        </div>
        {{--***************************** fin header **********************************--}}
        {!! Form::open(['route'=>'planificadors.productos', 'method'=>'POST', 'id'=>'formMateriales']) !!}
        {{ csrf_field() }}
        <div class="row">
            <div class="col-md-12 wp-subtitulo">
                <p class="subtitulo">Selecciona los materiales a usar</p>
                <a href="javascript:" id="imgActionSubmit">
                    <img src="{{asset('images/btn-avanzar.png')}}" class="btn-avanzar">
                </a>
            </div>
        </div>
        <div class="text-center" id="errorMateriales">
        </div>
        <br>
        <div class=row wp-seleccion-dos">
        <div class="col-md-6 col-md-offset-6">
            @foreach($materialesGeneral as $general)
                <ul class="lista-ambientes">
                    @foreach ($general as $materiales)
                        <li id="li-{{$materiales->id}}">
                            <a style="text-decoration: none" class="click-select sin-estilo" href="javascript:">
                                <i class="fa fa-plus-circle" id="{{$materiales->id}}" aria-hidden="true" ></i>
                                <div id="{{$materiales->id}}">{{ $materiales->label }}</div>
                            </a>
                        </li>
                @endforeach
                </ul>
            @endforeach
        </div>
        <div id="addInput">
        </div>
        {!! Form::close() !!}
    </div>

 @include('elements.menufooter')

@endsection
@section('script')
    <script>
        $(document).ready(function() {
            $('#planificador-menu').addClass('seleccionado');
            var arrayMateriales = [];
            var selecCount = '0';
            var arrayMateriales = null;

            var i = 0;
            for (i=0; i < arrayMateriales.length; i++)
                {
                    $("#li-"+arrayMateriales[i]).css({
                        "background-color":"#78D3B4",
                        "border":"1px solid #78D3B4"
                    });
                    $("#li-"+arrayMateriales[i] + ' .click-select').children('i').removeClass('fa-plus-circle');
                    $("#li-"+arrayMateriales[i] + ' .click-select').children('i').addClass("fa-remove");
                    $('#addInput').html(
                        '<input type="hidden" name="inputArrMateriales[]" value="'+ arrayMateriales +'" />');
                }
//    ***************** vaiables Globales ***********************
            $('.click-select').click(function () {
                var materialId = $(this).children('div').attr('id');
                var classMaterial = $(this).children('i').attr('class');
                if($(this).children('i').hasClass('fa-plus-circle'))
                {
                    $(this).children('i').removeClass('fa-plus-circle');
                    $(this).children('i').addClass("fa-remove");

                    arrayMateriales.push(materialId);

                    $("#li-"+materialId).css({
                        "background-color":"#78D3B4",
                        "border":"1px solid #78D3B4"
                    });
                    $('#addInput').html(
                        '<input type="hidden" name="inputArrMateriales[]" value="'+ arrayMateriales +'" />');
                }
                else
                {
                    $(this).children('i').removeClass('fa-remove');
                    $(this).children('i').addClass("fa-plus-circle");
                    $("#li-"+materialId).css({
                        "background-color":"",
                        "border":""
                    });
                    removeItemFromArr( arrayMateriales, materialId );

                    $('#addInput').html(
                        '<input type="hidden" name="inputArrMateriales[]" value="'+ arrayMateriales +'" />');
                }
                console.info(arrayMateriales);
            });

            $( "#imgActionSubmit" ).click(function() {
                if(arrayMateriales.length == 0)
                {
                    $('#errorMateriales').html(
                        '<p style="color: yellow">Debe Seleccionar al menos un material para avanzar</p>'
                    );
                }
                else
                {
                    if(arrayMateriales.length >= 0) {
                        $( "#formMateriales" ).submit();
                    }
                }
            });
        });
        function removeItemFromArr ( arr, item ) {
            var i = arr.indexOf( item );
            console.log(i);
            if ( i !== -1 ) {
                arr.splice( i, 1 );
            }
        }
    </script>
@endsection