@extends('layouts.app')

@section('content')


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

            @include('includes.message')

            <h4 class="titulo">Control de estaciones cebaderas de <b>{{$servicio->planta->nombre}}</b></h4>


            
            <div class="btn-nuevo">
                <!--se muestra la vista para crear un nuevo sector-->
                <a href="{{ route('controlestacion.nuevo', 
                            [ 'servicio_id' => $servicio->id])}}" 
                   class="btn btn-outline-primary">
                    Nuevo Sector
                </a>
            </div>

            <!--volver al servicio-->
            <div class="btn-nuevo">
                <a href="{{ route('servicio.servicio', 
                            [ 'servicio' => $servicio->sf_id])}}" 
                   class="btn btn-outline-primary">
                    Volver
                </a>
            </div>

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

            <!--verifico que haya al menos un sector cargado-->
            @if(empty($servicio->controlEstacion[0]))
            <div class="card">
                <div class="card-header">
                    <div class="data-cliente">Aún no hay sectores cargados</div>
                </div>
            </div>

            @else

                        <!--boton oara generar el informe-->    
            <div class="btn-nuevo">
                <a href="{{ route('controlestacion.informe', 
                            [ 'servicio_id' => $servicio->id])}}" 
                   class="btn btn-outline-success">
                    Generar Informe
                </a>
            </div>            
            
            <!--se lista los sectores del servicio seleccionado-->
            <table class="table">
                <thead>
                    <tr>
                        <th>Sector</th>
                        <th>Estaciones</th>
                        <th>Total Cebaderos</th>
                        <th>Estaciones con veneno en Cebo</th>
                        <th>Estaciones con veneno en Liquido</th>
                        <th>Cebos con actividad</th>
                        <th>Liquidos con actividad</th>
                        <th>Cebos sin actividad</th>
                        <th>Liquidos sin actividad</th>
                        <th>Cebos faltantes/rotos</th>
                        <th>Liquidos faltantes/rotos</th>
                        <th>Roedores muertos</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($servicio->controlEstacion as $controlEstacion)
                    <tr>
                        <td>{{$controlEstacion->sector}} </td>
                        <td>{{$controlEstacion->estacion_d}} al {{$controlEstacion->estacion_h}}</td>
                        <td>{{$controlEstacion->cebo_actividad + $controlEstacion->cebo_sin_actividad
                            + $controlEstacion->cebo_roto + $controlEstacion->liquido_actividad + 
                            $controlEstacion->liquido_sin_actividad + $controlEstacion->liquido_roto}}</td>
                        <td>{{$controlEstacion->cebo_actividad + $controlEstacion->cebo_sin_actividad
                            + $controlEstacion->cebo_roto}}</td></td>
                        <td>{{$controlEstacion->liquido_actividad + 
                            $controlEstacion->liquido_sin_actividad + $controlEstacion->liquido_roto}}</td>
                        <td>{{$controlEstacion->cebo_actividad}}</td>
                        <td>{{$controlEstacion->liquido_actividad}}</td>
                        <td>{{$controlEstacion->cebo_sin_actividad}}</td>
                        <td>{{$controlEstacion->liquido_sin_actividad}}</td>
                        <td>{{$controlEstacion->cebo_roto}}</td>
                        <td>{{$controlEstacion->liquido_roto}}</td>
                        <td>{{$controlEstacion->muertos}}</td>

                        <!--botón para cer el detalle-->
                        <td>
                            <div class="btn-nuevo">
                                <a href="{{ route('controlestacion.sector', array(
                                        'sector' => $controlEstacion, 'edit' => 'disabled'))}}" 
                                   class="btn btn-outline-primary">
                                    ver
                                </a>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            @endif



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


@endsection

@section('script')
<!--script para el ordenamiento de la tabla--> 
<script language="javascript">

    $(document).ready(function (e) {

        $('th').click(function () {
            var table = $(this).parents('table').eq(0)
            var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
            this.asc = !this.asc
            if (!this.asc) {
                rows = rows.reverse()
            }
            for (var i = 0; i < rows.length; i++) {
                table.append(rows[i])
            }
            setIcon($(this), this.asc);
        })

        function comparer(index) {
            return function (a, b) {
                var valA = getCellValue(a, index),
                        valB = getCellValue(b, index)
                return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB)
            }
        }

        function getCellValue(row, index) {
            return $(row).children('td').eq(index).html()
        }

        function setIcon(element, asc) {
            $("th").each(function (index) {
                $(this).removeClass("sorting");
                $(this).removeClass("asc");
                $(this).removeClass("desc");
            });
            element.addClass("sorting");
            if (asc)
                element.addClass("asc");
            else
                element.addClass("desc");
        }

    });

</script> 
@endsection