@extends('layouts.app')

@section('content')


<div class="row justify-content-center">
    <div class="col-md-10">

        @include('includes.message')
        <div class="card">
            <form method="POST" action="{{route('controlestacion.update', ['sector'=> '' ])}}" 
                  enctype="multipart/form-data" 
                  aria-label="{{ __('Sector') }}" id="crear_sector"
                  onsubmit="return comprobar_estaciones()">
                @csrf



                <!--encabezado-->
                <div class="card-header">
                    <div class="form-group row">
                        <div class="col-md-10">
                            Nuevo Sector
                        </div>

                    </div>
                </div>


                <div class="card-body">

                    <input type='hidden' name='servicio_id' 
                           value="{{$servicio_id ? $servicio_id : ''}}">


                    <div class="form-group row">


                        <label for="sector" class="col-md-4 col-form-label text-md-right">
                            {{ __('Nombre del sector') }}
                        </label>

                        <div class="col-md-6">
                            <input id="sector" type="text" 
                                   class="form-control{{ $errors->has('sector') ? ' is-invalid' : '' }}" name="sector" 
                                   value="" required autofocus>

                            @if ($errors->has('sector'))
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $errors->first('sector') }}</strong>
                            </span>
                            @endif
                            <br>
                        </div>

                        <label for="estaciond" class="col-md-4 col-form-label text-md-right">
                            {{ __('Estaciones desde') }}
                        </label>

                        <div class="col-md-1">
                            <input id="estaciond" type="number" 
                                   class="form-control{{ $errors->has('estaciond') ? ' is-invalid' : '' }}" name="estaciond" 
                                   value="1" min="1" required onchange="sumar_estaciones();
                                           estaciones_faltantes();">

                            @if ($errors->has('estaciond'))
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $errors->first('estaciond') }}</strong>
                            </span>
                            @endif
                            <br>
                        </div>

                        <label for="estacionh" class="col-md-1 col-form-label text-md-right">
                            {{ __('hasta') }}
                        </label>

                        <div class="col-md-1">
                            <input id="estacionh" type="number" 
                                   class="form-control{{ $errors->has('estacionh') ? ' is-invalid' : '' }}" name="estacionh" 
                                   value="1" min="1" required onchange="sumar_estaciones();
                                           estaciones_faltantes();">

                            @if ($errors->has('estacionh'))
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $errors->first('estacionh') }}</strong>
                            </span>
                            @endif
                            <br>
                        </div>

                        <div class="col-md-3">
                            <span>(Cantidad de estaciones:  </span> <span id="estaciones"></span><span>)</span>
                        </div>

                    </div>



                    <div class="card">

                        <div class="card-header">
                            <div class="form-group row">
                                <div class="col-md-12 text-md-center">
                                    Venenos con o sin actividad de roedores
                                </div>

                            </div>
                        </div>


                        <div class="card-body">

                            <table class="table borderless">
                                <thead>
                                    <tr><td scope="col" style="color: black;" class="text-md-center">Cebos con actividad</td> 
                                        <td scope="col" style="color: black;" class="text-md-center">Cebos sin actividad</td> 
                                        <td scope="col" style="color: black;" class="text-md-center">Cebos faltantes/rotos</td>  
                                    </tr>
                                </thead> 
                                <tbody>
                                    <tr>
                                        <td scope='col' >
                                            <input id="ceboa" type="number" 
                                                   class="form-control{{ $errors->has('ceboa') ? ' is-invalid' : '' }}" name="ceboa" 
                                                   value="0" min="0" onchange="estaciones_faltantes();">

                                            @if ($errors->has('ceboa'))
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $errors->first('ceboa') }}</strong>
                                            </span>
                                            @endif

                                        </td>    
                                        <td scope='col' >
                                            <input id="cebos" type="number" 
                                                   class="form-control{{ $errors->has('cebos') ? ' is-invalid' : '' }}" name="cebos" 
                                                   value="0" min="0" onchange="estaciones_faltantes();">

                                            @if ($errors->has('cebos'))
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $errors->first('cebos') }}</strong>
                                            </span>
                                            @endif
                                        </td>  
                                        <td scope='col' >
                                            <input id="cebor" type="number" 
                                                   class="form-control{{ $errors->has('cebor') ? ' is-invalid' : '' }}" name="cebor" 
                                                   value="0" min="0" onchange="estaciones_faltantes();">

                                            @if ($errors->has('cebor'))
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $errors->first('cebor') }}</strong>
                                            </span>
                                            @endif
                                        </td>  


                                    </tr>
                                </tbody>
                            </table>


                            <table class="table borderless">
                                <thead>
                                    <tr> 
                                        <td scope="col" style="color: black;" class="text-md-center">Liquidos con actividad</td> 
                                        <td scope="col" style="color: black;" class="text-md-center">Liquidos sin actividad</td> 
                                        <td scope="col" style="color: black;" class="text-md-center">Liquidos faltantes/rotos</td>
                                    </tr>
                                </thead> 
                                <tbody>
                                    <tr>
                                        <td scope='col' >
                                            <input id="liquidoa" type="number" 
                                                   class="form-control{{ $errors->has('liquidoa') ? ' is-invalid' : '' }}" name="liquidoa" 
                                                   value="0" min="0" onchange="estaciones_faltantes();">

                                            @if ($errors->has('liquidoa'))
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $errors->first('liquidoa') }}</strong>
                                            </span>
                                            @endif

                                        </td>    
                                        <td scope='col' >
                                            <input id="liquidos" type="number" 
                                                   class="form-control{{ $errors->has('liquidos') ? ' is-invalid' : '' }}" name="liquidos" 
                                                   value="0" min="0" onchange="estaciones_faltantes();">

                                            @if ($errors->has('liquidos'))
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $errors->first('liquidos') }}</strong>
                                            </span>
                                            @endif
                                        </td>  
                                        <td scope='col' >
                                            <input id="liquidor" type="number" 
                                                   class="form-control{{ $errors->has('liquidor') ? ' is-invalid' : '' }}" name="liquidor" 
                                                   value="0" min="0" onchange="estaciones_faltantes();">

                                            @if ($errors->has('liquidor'))
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $errors->first('liquidor') }}</strong>
                                            </span>
                                            @endif
                                        </td>  

                                    </tr>
                                </tbody>
                            </table>

                        </div>

                        <div class="col-md-12">
                            <span>(Cantidad de estaciones faltantes:  </span> 
                            <span id="estaciones_faltantes"></span><span>)</span>
                        </div><br/>
                    </div>
                    <br/>

                    <div class="form-group row">


                        <label for="muertos" class="col-md-4 col-form-label text-md-right">
                            {{ __('Roedores muertos encontrados en el lugar') }}
                        </label>

                        <div class="col-md-2">
                            <input id="muertos" type="number" 
                                   class="form-control{{ $errors->has('muertos') ? ' is-invalid' : '' }}" name="muertos" 
                                   value="0" min="0">

                            @if ($errors->has('muertos'))
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $errors->first('muertos') }}</strong>
                            </span>
                            @endif
                            <br>
                        </div>

                    </div>



                    <div class="card">
                        <div class="data-cliente text-center">
                            <div class="card-header">Fotos tomadas</div>
                        </div>

                        <div class="card-body">



                            <div class="form-group row">
                                <div class="col-md-1">
                                    @if(isset($sector->foto1))
                                    <img src = "{{ route('controlestacion.fotos', ['filename'=>$sector->foto1]) }}" alt="" class = "avatar"/>
                                    @endif
                                </div>
                                <div class="col-md-5">
                                    <input id="image_path01" type="file" 
                                           class="form-control{{ $errors->has('image_path01') ? ' is-invalid' : '' }}" 
                                           name="image_path01">
                                    @if ($errors->has('image_path01'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('image_path01') }}</strong>
                                    </span>
                                    @endif
                                </div>


                                <div class="col-md-1">
                                    @if(isset($sector->foto2))
                                    <img src = "{{ route('controlestacion.fotos', ['filename'=>$sector->foto2]) }}" alt="" class = "avatar"/>
                                    @endif
                                </div>
                                <div class="col-md-5">
                                    <input id="image_path02" type="file" 
                                           class="form-control{{ $errors->has('image_path02') ? ' is-invalid' : '' }}" 
                                           name="image_path02">
                                    @if ($errors->has('image_path02'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('image_path02') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group row">
                                <div class="col-md-1">
                                    @if(isset($sector->foto3))
                                    <img src = "{{ route('controlestacion.fotos', ['filename'=>$sector->foto3]) }}" alt="" class = "avatar"/>
                                    @endif
                                </div>
                                <div class="col-md-5">
                                    <input id="image_path03" type="file" 
                                           class="form-control{{ $errors->has('image_path03') ? ' is-invalid' : '' }}" 
                                           name="image_path03">
                                    @if ($errors->has('image_path03'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('image_path03') }}</strong>
                                    </span>
                                    @endif
                                </div>


                                <div class="col-md-1">
                                    @if(isset($sector->foto4))
                                    <img src = "{{ route('controlestacion.fotos', ['filename'=>$sector->foto4]) }}" alt="" class = "avatar"/>
                                    @endif
                                </div>
                                <div class="col-md-5">
                                    <input id="image_path04" type="file" 
                                           class="form-control{{ $errors->has('image_path04') ? ' is-invalid' : '' }}" 
                                           name="image_path04">
                                    @if ($errors->has('image_path04'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('image_path04') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group row">
                                <div class="col-md-1">
                                    @if(isset($sector->foto5))
                                    <img src = "{{ route('controlestacion.fotos', ['filename'=>$sector->foto5]) }}" alt="" class = "avatar"/>
                                    @endif
                                </div>
                                <div class="col-md-5">
                                    <input id="image_path05" type="file" 
                                           class="form-control{{ $errors->has('image_path05') ? ' is-invalid' : '' }}" 
                                           name="image_path05">
                                    @if ($errors->has('image_path05'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('image_path05') }}</strong>
                                    </span>
                                    @endif
                                </div>


                                <div class="col-md-1">
                                    @if(isset($sector->foto6))
                                    <img src = "{{ route('controlestacion.fotos', ['filename'=>$sector->foto6]) }}" alt="" class = "avatar"/>
                                    @endif
                                </div>
                                <div class="col-md-5">
                                    <input id="image_path06" type="file" 
                                           class="form-control{{ $errors->has('image_path06') ? ' is-invalid' : '' }}" 
                                           name="image_path06">
                                    @if ($errors->has('image_path06'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('image_path06') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group row">
                                <div class="col-md-1">
                                    @if(isset($sector->foto7))
                                    <img src = "{{ route('controlestacion.fotos', ['filename'=>$sector->foto7]) }}" alt="" class = "avatar"/>
                                    @endif
                                </div>
                                <div class="col-md-5">
                                    <input id="image_path07" type="file" 
                                           class="form-control{{ $errors->has('image_path07') ? ' is-invalid' : '' }}" 
                                           name="image_path07">
                                    @if ($errors->has('image_path07'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('image_path07') }}</strong>
                                    </span>
                                    @endif
                                </div>


                                <div class="col-md-1">
                                    @if(isset($sector->foto8))
                                    <img src = "{{ route('controlestacion.fotos', ['filename'=>$sector->foto8]) }}" alt="" class = "avatar"/>
                                    @endif
                                </div>
                                <div class="col-md-5">
                                    <input id="image_path08" type="file" 
                                           class="form-control{{ $errors->has('image_path08') ? ' is-invalid' : '' }}" 
                                           name="image_path08">
                                    @if ($errors->has('image_path08'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('image_path08') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group row">
                                <div class="col-md-1">
                                    @if(isset($sector->foto9))
                                    <img src = "{{ route('controlestacion.fotos', ['filename'=>$sector->foto9]) }}" alt="" class = "avatar"/>
                                    @endif
                                </div>
                                <div class="col-md-5">
                                    <input id="image_path09" type="file" 
                                           class="form-control{{ $errors->has('image_path09') ? ' is-invalid' : '' }}" 
                                           name="image_path09">
                                    @if ($errors->has('image_path09'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('image_path09') }}</strong>
                                    </span>
                                    @endif
                                </div>


                                <div class="col-md-1">
                                    @if(isset($sector->foto10))
                                    <img src = "{{ route('controlestacion.fotos', ['filename'=>$sector->foto10]) }}" alt="" class = "avatar"/>
                                    @endif
                                </div>
                                <div class="col-md-5">
                                    <input id="image_path10" type="file" 
                                           class="form-control{{ $errors->has('image_path10') ? ' is-invalid' : '' }}" 
                                           name="image_path10">
                                    @if ($errors->has('image_path10'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('image_path10') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>

                        </div>
                    </div>




                    <div class="form-group row">
                        <label for="observaciones" class="col-md-2 col-form-label text-md-right">
                            {{ __('Observaciones') }}</label>
                        <div class="col-md-8 text-area">
                            <textarea class="form-control" name="observaciones" rows="4" ></textarea>
                        </div>
                    </div>


                </div>


            </form>

            <div class="clearfix"></div>


            <div class="col-md-4 offset-md-4">
                <button type="submit" class="btn btn-outline-primary" name="b-modificar"
                        form="crear_sector">
                    Grabar
                </button>

                <div class="btn-nuevo">
                    <!--vuelve a la pantalla de control de estación del servicio-->
                    <a href="{{ route('controlestacion', ['servicio'=>$servicio_id])}}" 
                       class="btn btn-outline-primary">
                        Cancelar
                    </a>
                </div>

            </div>

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



@endsection


@section('script')
<script src="{{ asset('js/funciones.js') }}"></script>
<script language="javascript">

                                                       function estaciones_faltantes() {

                                                           var total = parseInt(document.getElementById('estaciones').innerHTML);
                                                           var valor1 = parseInt(document.getElementById('ceboa').value);
                                                           var valor2 = parseInt(document.getElementById('cebos').value);
                                                           var valor3 = parseInt(document.getElementById('cebor').value);
                                                           var valor4 = parseInt(document.getElementById('liquidoa').value);
                                                           var valor5 = parseInt(document.getElementById('liquidos').value);
                                                           var valor6 = parseInt(document.getElementById('liquidor').value);
                                                           console.log(total, valor1, valor2, valor3, valor4, valor5, valor6);
                                                           if (!valor1) {
                                                               valor1 = 0;
                                                           }
                                                           if (!valor2) {
                                                               valor2 = 0;
                                                           }
                                                           if (!valor3) {
                                                               valor3 = 0;
                                                           }
                                                           if (!valor4) {
                                                               valor4 = 0;
                                                           }
                                                           if (!valor5) {
                                                               valor5 = 0;
                                                           }
                                                           if (!valor6) {
                                                               valor6 = 0;
                                                           }

                                                           total = total - valor2 - valor1 - valor3 - valor4 - valor5 - valor6;

                                                           document.getElementById('estaciones_faltantes').innerHTML = total;
                                                           if (total == 0) {
                                                               document.getElementById("estaciones_faltantes").style.color = "black";
                                                           } else {
                                                               document.getElementById("estaciones_faltantes").style.color = "red";
                                                           }
                                                       }

                                                       $(document).ready(function (e) {
                                                           sumar_estaciones();
                                                           estaciones_faltantes();
                                                       });


</script> 
@endsection