@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.index')}}">
                    <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.materiales', 'method'=>'POST', 'id'=>'formAmbiente']) !!}
        {{ csrf_field() }}
        <div class="row">
            <div class="col-md-12 wp-subtitulo">
                <p class="subtitulo">Selecciona tus ambientes</p>
                <a href="javascript:" class="imgActionSubmit">
                    <img src="{{asset('images/btn-avanzar.png')}}" class="btn-avanzar oculto">
                </a>
            </div>
        </div>
        <div class="row wp-seleccion">
            <div class="col-xs-12 col-md-6 separadores">
                @foreach($ambienteGeneral as $general)
                    <ul class="lista-ambientes">
                        @foreach ($general as $ambiente)
                            <li>
                                <a class="click-mas sin-estilo" href="javascript:">
                                    <i class="fa fa-plus" id="{{$ambiente->id}}" aria-hidden="true" ></i>
                                    <div id="{{$ambiente->id}}">{{ $ambiente->label }}</div>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                @endforeach
            </div>
            <input type="hidden" name="ubicacionAmbiente" value="{{$tipo_ambiente}}">
            <div class="col-xs-12 col-md-6 separadores">
                <div class="container-ambientes" id="addDiv" style="display: block;">
                    @if($errors->has('dataAmbientes'))
                        <span style="color:yellow; display: block" id="errorAmbiente">
                        Debe tener al menos un ambiente para avanzar.
                    </span>
                        <br>
                    @endif
                  @if(isset($_SESSION['detalleAmbiente']))
                    <!-- Aqui iria el HTML -->
                  <!--ambienteName dormitorio fallada eso
                        ambienteID = ID INTERIORE o exterior
                    -->
                  <div class="wp-ambiente {{$ambienteNombre}}" id="del-{{$tipo_ambiente}}1" style="display: block;">
                    <div class="titulo-ambiente">
                      <p class="ambiente">
                        <i class="fa fa-sort-asc" onclick="toggle({{$tipo_ambiente}}1)" value="{{$tipo_ambiente}}-1"></i>
                        <span class="nombre">{{$ambienteNombre}} (1)<span class="numero"></span></span>
                        <i class="fa fa-times" onclick="removeClass({{$tipo_ambiente}}1)" aria-hidden="true" value="fa-{{$tipo_ambiente}}-1"></i>
                      </p>
                    </div>
                    <div class="contenido-ambiente " id="{{$tipo_ambiente}}1">
                      <div class="contenido-ambiente-left">
                        <label>
                          <span class="leyenda">Puertas</span>
                            <input type="hidden" name="dataAmbientes[{{$ambienteNombre}}][{{$ambienteNombre}} (1)][AmbienteName]" value="{{$ambienteNombre}} (1)">
                            <input type="hidden" name="dataAmbientes[{{$ambienteNombre}}][{{$ambienteNombre}} (1)][AmbienteGen]" value="{{$ambienteNombre}}">
                            <input type="hidden" name="dataAmbientes[{{$ambienteNombre}}][{{$ambienteNombre}} (1)][valorAmbiente]" value="1">
                            <input type="hidden" name="dataAmbientes[{{$ambienteNombre}}][{{$ambienteNombre}} (1)][AmbienteId]" value="{{$tipo_ambiente}}">
                            <input type="number" name="dataAmbientes[{{$ambienteNombre}}][{{$ambienteNombre}} (1)][puertas] " class="number" min="1" value="1" required>
                        </label>
                        <label>
                          <span class="leyenda">Ventanas</span>
                          <input type="number" name="dataAmbientes[{{$ambienteNombre}}][{{$ambienteNombre}} (1)][ventanas] " class="number" min="1" value="1" required>
                        </label>
                        <label>
                          <span class="leyenda">Ancho (m)</span>
                          <input type="number" name="dataAmbientes[{{$ambienteNombre}}][{{$ambienteNombre}} (1)][ancho]" class="number" min="1" value="1" required>
                        </label>
                        <label>
                          <span class="leyenda">Largo (m)</span>
                          <input type="number" name="dataAmbientes[{{$ambienteNombre}}][{{$ambienteNombre}} (1)][largo] " class="number" min="1" value="1" required>
                        </label>
                      </div>
                      <div class="contenido-ambiente-right">
                        <label>
                          <span class="leyenda">Alto (m)</span>
                          <input type="number" name="dataAmbientes[{{$ambienteNombre}}][{{$ambienteNombre}} (1)][alto] " class="number" min="1" value="1" required>
                        </label>
                        <label>
                          <span class="leyenda">Estado</span>
                          <select name="dataAmbientes[{{$ambienteNombre}}][{{$ambienteNombre}} (1)][estado] ">
                            @foreach ($estados as $estado)
                              <option value="{{ $estado->id }}">{{$estado->label}}</option>
                            @endforeach
                          </select>
                        </label>
                        <label>
                        </label>
                      </div>
                      <div style="clear:both"></div>
                    </div>
                  </div>
             
                  @endif
                    @if(isset($_SESSION['dataAmbientes']))
                        @foreach ($_SESSION['dataAmbientes'] as $ambientesSession)
                            @foreach($ambientesSession as $ambienteSession)
                                <div class="wp-ambiente {{$ambienteSession['AmbienteGen']}}" id="del-{{$ambienteSession['AmbienteId']}}{{$ambienteSession['valorAmbiente']}}" style="display: block;">
                                    <div class="titulo-ambiente">
                                        <p class="ambiente">
                                            <i class="fa fa-sort-asc" onclick="toggle({{$ambienteSession['AmbienteId']}}{{$ambienteSession['valorAmbiente']}})"
                                               value="{{$ambienteSession['AmbienteId']}}-{{$ambienteSession['valorAmbiente']}}"></i>
                                            <span class="nombre">{{$ambienteSession['AmbienteGen']}} ({{$ambienteSession['valorAmbiente']}})<span class="numero"></span></span>
                                            <i class="fa fa-times" onclick="removeClass({{$ambienteSession['AmbienteId']}}{{$ambienteSession['valorAmbiente']}})"  aria-hidden="true" value="fa-{{$ambienteSession['AmbienteId']}}-{{$ambienteSession['valorAmbiente']}}"></i>
                                        </p>
                                    </div>
                                    <div class="contenido-ambiente " id="{{$ambienteSession['AmbienteId']}}{{$ambienteSession['valorAmbiente']}}">
                                        <div class="contenido-ambiente-left">
                                            <label>
                                                <span class="leyenda">Puertas</span>
                                                <input type="hidden" name="dataAmbientes[{{$ambienteSession['AmbienteGen']}}][{{$ambienteSession['AmbienteGen']}} ({{$ambienteSession['valorAmbiente']}})][AmbienteName]" value="{{$ambienteSession['AmbienteGen']}} ({{$ambienteSession['valorAmbiente']}})">
                                                <input type="hidden" name="dataAmbientes[{{$ambienteSession['AmbienteGen']}}][{{$ambienteSession['AmbienteGen']}} ({{$ambienteSession['valorAmbiente']}})][AmbienteGen]" value="{{$ambienteSession['AmbienteGen']}}">
                                                <input type="hidden" name="dataAmbientes[{{$ambienteSession['AmbienteGen']}}][{{$ambienteSession['AmbienteGen']}} ({{$ambienteSession['valorAmbiente']}})][valorAmbiente]" value="{{$ambienteSession['valorAmbiente']}}">
                                                <input type="hidden" name="dataAmbientes[{{$ambienteSession['AmbienteGen']}}][{{$ambienteSession['AmbienteGen']}} ({{$ambienteSession['valorAmbiente']}})][AmbienteId]" value="{{$ambienteSession['AmbienteId']}}">
                                                <input type="number" name="dataAmbientes[{{$ambienteSession['AmbienteGen']}}][{{$ambienteSession['AmbienteGen']}} ({{$ambienteSession['valorAmbiente']}})][puertas] " class="number" min="1" value="{{$ambienteSession['puertas']}}" required>
                                            </label>
                                            <label>
                                                <span class="leyenda">Ventanas</span>
                                                <input type="number" name="dataAmbientes[{{$ambienteSession['AmbienteGen']}}][{{$ambienteSession['AmbienteGen']}} ({{$ambienteSession['valorAmbiente']}})][ventanas] " class="number" min="1" value="{{$ambienteSession['ventanas']}}" required>
                                            </label>
                                            <label>
                                                <span class="leyenda">Ancho (m)</span>
                                                <input type="number" name="dataAmbientes[{{$ambienteSession['AmbienteGen']}}][{{$ambienteSession['AmbienteGen']}} ({{$ambienteSession['valorAmbiente']}})][ancho] " class="number" min="1" value="{{$ambienteSession['ancho']}}" required>
                                            </label>
                                            <label>
                                                <span class="leyenda">Largo (m)</span>
                                                <input type="number" name="dataAmbientes[{{$ambienteSession['AmbienteGen']}}][{{$ambienteSession['AmbienteGen']}} ({{$ambienteSession['valorAmbiente']}})][largo] " class="number" min="1" value="{{$ambienteSession['largo']}}" required>
                                            </label>
                                        </div>
                                        <div class="contenido-ambiente-right">
                                            <label>
                                                <span class="leyenda">Alto (m)</span>
                                                <input type="number" name="dataAmbientes[{{$ambienteSession['AmbienteGen']}}][{{$ambienteSession['AmbienteGen']}} ({{$ambienteSession['valorAmbiente']}})][alto] " class="number" min="1" value="{{$ambienteSession['alto']}}" required>
                                            </label>
                                            <label>
                                                <span class="leyenda">Estado</span>
                                                <select name="dataAmbientes[{{$ambienteSession['AmbienteGen']}}][{{$ambienteSession['AmbienteGen']}} ({{$ambienteSession['valorAmbiente']}})][estado] ">
                                                    @foreach ($estados as $estado)
                                                        <option value="{{ $estado->id }}"
                                                        @if($estado->id == $ambienteSession['estado'] )
                                                             selected                                                                 @endif
                                                        >
                                                            {{$estado->label}}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </label>
                                            <label>
                                                <span class="leyenda">Superficie</span>
                                                <select name="dataAmbientes[{{$ambienteSession['AmbienteGen']}}][{{$ambienteSession['AmbienteGen']}} ({{$ambienteSession['valorAmbiente']}})][superficie] ">
                                                    @foreach ($superficies as $superficie)
                                                        <option value="{{ $superficie->id }}"
                                                        @if($superficie->id == $ambienteSession['superficie'] )
                                                             selected                                                                 @endif
                                                        >
                                                            {{ $superficie->label}}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </label>
                                            <label>
                                            </label>
                                        </div>
                                        <div style="clear:both"></div>
                                    </div>
                                </div>
                            @endforeach
                        @endforeach
                    @endif
                </div>
               <a href="javascript:" class="imgActionSubmit">
                    <img src="{{asset('images/btn-avanzar.png')}}" class="btn-avanzar-movil ">
                </a>
            </div>
        </div>
        {!! Form::close() !!}
    </div>
    @include('elements.menufooter')
@endsection
@section('script')
    <script type="text/javascript">
        $(document).ready(function() {
            $('#planificador-menu').addClass('seleccionado');
            $( ".click-mas" ).click(function() {
                var ambienteName = $(this).children('div').text();
                var ambienteId = $(this).children('div').attr('id');
                var ambientesClass = document.getElementsByClassName(ambienteName);
                var countAmbiente = ambientesClass.length;

                if(countAmbiente == 0)
                {
                    countAmbiente = 1;
                }
                else {
                    countAmbiente++;
                }

                $('#addDiv').append(
                    '<div class="wp-ambiente '+ ambienteName +'" id="del-'+ ambienteId + countAmbiente +'" style="display: block;">' +
                    '<div class="titulo-ambiente">' +
                    '<p class="ambiente">' +
                    '<i class="fa fa-sort-asc" ' + 'onclick="toggle('+ ambienteId + countAmbiente +')"' +
                    ' value="'+ ambienteId + '-' + countAmbiente +'"></i>' +
                    '<span class="nombre">'+ ambienteName + ' ('+ countAmbiente +')' + '<span class="numero"></span></span>' +
                    '<i class="fa fa-times" ' + 'onclick="removeClass('+ ambienteId + countAmbiente +')"' + '  aria-hidden="true" value="fa-'+ ambienteId + '-' + countAmbiente +'"></i>' +
                    '</p>' +
                    '</div>' +
                    '<div class="contenido-ambiente " id="'+ ambienteId + countAmbiente +'">' +
                    '<div class="contenido-ambiente-left">' +
                    '<label>' +
                    '<span class="leyenda">Puertas</span>' +
                    '<input type="hidden" name="dataAmbientes[' + ambienteName + '][' + ambienteName + ' (' + countAmbiente +  ')][AmbienteName]" value="' + ambienteName + ' ('+ countAmbiente +')' + '">' +
                    '<input type="hidden" name="dataAmbientes[' + ambienteName + '][' + ambienteName + ' (' + countAmbiente +  ')][AmbienteGen]" value="' + ambienteName + '">' +
                    '<input type="hidden" name="dataAmbientes[' + ambienteName + '][' + ambienteName + ' (' + countAmbiente +  ')][valorAmbiente]" value="' + countAmbiente + '">' +
                    '<input type="hidden" name="dataAmbientes[' + ambienteName + '][' + ambienteName + ' (' + countAmbiente +  ')][AmbienteId]" value="' + ambienteId + '">' +
                    '<input type="number" name="dataAmbientes[' + ambienteName + '][' + ambienteName + ' (' + countAmbiente +  ')][puertas] " class="number" min="1" value="1" required>' +
                    '</label>' +
                    '<label>' +
                    '<span class="leyenda">Ventanas</span>' +
                    '<input type="number" name="dataAmbientes[' + ambienteName + '][' + ambienteName + ' (' + countAmbiente +  ')][ventanas] " class="number" min="1" value="1" required>' +
                    '</label>' +
                    '<label>' +
                    '<span class="leyenda">Ancho (m)</span>' +
                    '<input type="number" name="dataAmbientes[' + ambienteName + '][' + ambienteName + ' (' + countAmbiente +  ')][ancho] " class="number" min="1" value="1" required>' +
                    '</label>' +
                    '<label>' +
                    '<span class="leyenda">Largo (m)</span>' +
                    '<input type="number" name="dataAmbientes[' + ambienteName + '][' + ambienteName + ' (' + countAmbiente +  ')][largo] " class="number" min="1" value="1" required>' +
                    '</label>' +
                    '</div>' +
                    '<div class="contenido-ambiente-right">' +
                    '<label>' +
                    '<span class="leyenda">Alto (m)</span>' +
                    '<input type="number" name="dataAmbientes[' + ambienteName + '][' + ambienteName + ' (' + countAmbiente +  ')][alto] " class="number" min="1" value="1" required>' +
                    '</label>' +
                    '<label>' +
                    '<span class="leyenda">Estado</span>' +
                    '<select name="dataAmbientes[' + ambienteName + '][' + ambienteName + ' (' + countAmbiente +  ')][estado] ">' +
                    '@foreach ($estados as $estado)' +
                    '<option value="{{ $estado->id }}">{{$estado->label}}</option>' +
                    '@endforeach' +
                    '</select>' +
                    '</label>' +
                    '<label>' +
                    '<span class="leyenda">Superficie</span>' +
                    '<select name="dataAmbientes[' + ambienteName + '][' + ambienteName + ' (' + countAmbiente +  ')][superficie] ">' +
                    '@foreach ($superficies as $superficie)' +
                    '<option value="{{ $superficie->id }}">{{ $superficie->label}}</option>' +
                    '@endforeach' +
                    '</select>' +
                    '</label>' +
                    '<label>' +
                    '</label>' +
                    '</div>' +
                    '<div style="clear:both"></div>' +
                    '</div>' +
                    '</div>');
              
              // console.log(panel);
                $('html, body').animate({scrollTop:$('.btn-avanzar-movil').position().top},'slow');

                $("#errorAmbiente").css({
                    "display":"none"
                });
            });

            $( ".imgActionSubmit" ).click(function() {

                $( "#formAmbiente" ).submit();
            });
        });

        function toggle(valor) {
            $("#" + valor).slideToggle();
            $(this).toggleClass('fa-sort-asc fa-sort-desc');
        }
        function removeClass(valor) {
            var setAmbiente = $('#addDiv').children('div').attr('class');
            $( "#del-"+valor).remove();
        }
    </script>
@endsection