@extends ('main.layouts')
@section ('titulo')
 Planificador de pintado - Ceresita
@endsection
@section ('content')

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <a href="{{route('planificadors.ambientes',$ubicacionAmbiemte)}}"><img src="{{asset('images/btn-volver.png')}}" class="btn-volver"></a>
                                <img src="{{asset('images/logo.png')}}" class="img-logo-center">
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 wp-subtitulo">
                <p class="subtitulo-yellow"><b>Planificación</b></p>
                <p class="subtitulo"><b>Sugerencias Técnicas</b></p>
                <!--<p class="subtitulo"><a href="{{route('planificadors.create')}}">Descargar Resultado</a></p>-->
                <a href="{{route('planificadors.index')}}">
                    <img src="{{asset('images/btn-volver-inicio.png')}}" class="btn-avanzar-max">
                </a>
            </div>
        </div>

        @foreach($dataAmbienteFinal as $dataFinal)
        <div class="row">
            <div class="col-md-12 wp-subtitulo">
                <p class="parrafo">{{$dataFinal['recomendacion']}}</p>
            </div>
        </div>


        <div class="row">
            <div class="col-xs-12 col-md-6 col-2">
                <div class="row contenedor-producto">
                    <div class="col-md-4" >
                        <img src="{{asset('images/resultado')}}/{{$dataFinal['urlProducto']}}" class="tarro">
                    </div>
                    <div class="col-md-4 signo-igual gothan-font">
                        =
                    </div>
                    <div class="col-md-4 valor-galon gothan-font">
                        {{$dataFinal['superficieGalonesFinal']}} <div class="tx-galon gothan-font">Galón</div>
                    </div>
                    <div style="margin-top: 10px !important" class="col-md-12">
                        Para <b>{{$dataFinal['superficieAmbiente']}} m2</b> necesitas <b>{{$dataFinal['superficieGalonesFinal']}} galones</b> de pintura.
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-2">
                <div class="titulo-ambiente">
                    <p class="ambiente"><span class="nombre">{{$dataFinal['AmbienteName']}}</span></p>
                </div>

                <div class="contenido-ambiente">
                    <div class="contenido-ambiente-left">
                        <label>
                            <span class="leyenda">Puertas</span>
                            <input type="number" name="puertas" class="number" min=1 value={{$dataFinal['AmbientePuertas']}} readonly>
                        </label>

                        <label>
                            <span class="leyenda">Ventanas</span>
                            <input type="number" name="puertas" class="number" min=1 value={{$dataFinal['AmbienteVentanas']}} readonly>
                        </label>

                        <label>
                            <span class="leyenda">Ancho (m)</span>
                            <input type="number" name="puertas" class="number" min=1 value={{$dataFinal['AmbienteAncho']}} readonly>
                        </label>

                        <label>
                            <span class="leyenda">Largo (m)</span>
                            <input type="number" name="puertas" class="number" min=1 value={{$dataFinal['AmbienteLargo']}} readonly>
                        </label>

                    </div>

                    <div class="contenido-ambiente-right">
                        <label>
                            <span class="leyenda">Alto (m)</span>
                            <input type="number" name="puertas" class="number" min=1 value={{$dataFinal['AmbienteAlto']}} readonly>
                        </label>

                        <label>
                            <span class="leyenda">Superficie</span>
                            <input type="text" name="superficie" class="number" value={{$dataFinal['AmbienteSuperficieName']}} readonly>
                        </label>

                        <label>

                            <span class="leyenda">Estado</span>
                            <input type="text" name="estado" class="number" value={{$dataFinal['AmbienteEstadoName']}} readonly>
                        </label>
                    </div>

                    <div style="clear:both"></div>
                </div>
            </div>
        </div>
        @endforeach

        <div class="row">
            <div class="col-md-12 table-responsive">
              <p class="subtitulo"><b>Tiempos de tu proyecto</b></p>
                <p class="parrafo">Antes de comenzar, recuerda limpiar la zona que será pintada. Protege tu cuerpo y vestimenta con un overol. También es importante resguardar los muebles u objetos que no puedas retirar de la habitación, así evitarás manchas indeseadas.</p>
                <table>
                    <tr>
                        <td>Preparación del ambiente</td><td>{{$SumaPreparacionAmbientes}}</td>
                    </tr>
                    <tr>
                        <td>Preparación de la superficie</td><td>{{$SumaPreparacionSuperficie}}</td>
                    </tr>
                    <tr>
                        <td>Aplicación de la pintura</td><td>{{$SumaAplicacionPintura}}</td>
                    </tr>
                    <tr>
                        <td>Tiempo de secado para segunda mano</td><td>{{$tiempoSecado}} h.</td>
                    </tr>
                    <tr>
                        <td>Aplicación de la pintura (Segunda mano)</td><td>{{$SumaAplicacionPinturaSegunda}}</td>
                    </tr>
                    <tr>
                        <td class="border-none"><b><span class="total">Total</span></b></td><td>{{$totalProyecto}}</td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <p class="subtitulo"><b>Materiales</b></p>
                <p class="subtitulo-yellow"><b>Estos son los materiales con los que ya cuentas:</b></p>
            </div>
        </div>
        <div class="col-md-12">
            <ul class="lista-materiales">
            @foreach($materiales as $material)
                <li id="li-{{$material->id}}">
                    <i class="fa fa-check" id="{{$material->id}}" aria-hidden="true" ></i>
                    <div id="{{$material->id}}">{{ $material->label }}</div>
                </li>
            @endforeach
                <div style="clear:both"></div>
            </ul>
        </div>

        <div class="row">
            <div class="col-md-12">
                <p class="subtitulo"><b>Material sugerido faltante</b></p>
            </div>
        </div>
        <div class="col-md-12">
            <ul class="lista-materiales">
                @foreach($materialesAll as $materialAll)
                    <li id="li-{{$materialAll->id}}">
                        <i style="color: red !important; border: 1px solid red !important;" class="fa fa-close" id="{{$materialAll->id}}" aria-hidden="true" ></i>
                        <div id="{{$materialAll->id}}">{{ $materialAll->label }}</div>
                    </li>
                   
                @endforeach
                <div style="clear:both"></div>
            </ul>
        </div>

        <div class="row">
            <div class="col-md-12">
              <p class="subtitulo"><b>Recomendaciones</b></p>
              <p class="subtitulo-yellow"><b>¡Recuerda!</b></p>
              <p class="parrafo">Antes de comenzar, cubre todas las zonas que no quieras pintar con cinta de pintor o masking tape. Protege el piso con trapos de algodón o papel, pues el plástico podría provocar caídas peligrosas por lo que se recomienda utilizar solo para cubrir muebles y/o objetos que no pueden ser retirados de la habitación a intervenir.</p>
              <p class="parrafo">Pinta con luz natural, así comprobarás si el trabajo está bien realizado. Mientras que la luz artificial, es recomendada solo en caso de ser necesaria, ya que podría distorsionar el resultado final de la pintura.</p>
              <p class="parrafo">Pinta de arriba hacia abajo formando las letras W o M y, cuando el rodillo se sienta 'pegajoso', humedécelo nuevamente con pintura.</p>
              <p class="parrafo">Deja secar la primera capa de pintura el tiempo indicado, luego aplica una segunda capa de pintura para que el acabado sea perfecto. Recuerda utilizar poca pintura, de lo contrario provocarás un secado lento y burbujeante que estropeará el resultado final.</p>
              <p class="parrafo">El tiempo de secado final para tu proyecto puede variar entre 14 y 21 horas.</p>
              
              <div class="wp-centro">
                <a href="{{route('planificadors.create')}}" class="btn-descargar">Descargar PDF</a>
                <a href="{{route('planificadors.index')}}" class="btn-volver-planificar">Volver a planificar</a>
                <div style="clear:both"></div>
              </div>
                              
              <img src="{{asset('images/wp7.jpg')}}" class="img-seccion">

            </div>
        </div>

    </div>

@endsection