@extends('layouts.app')

@section('breadcrumb')
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{{ route('home') }}">Inicio</a></li>
    <li class="breadcrumb-item"><a href="{{ route('compensacion-horas.permisos-aprobados.index')}}">Recursos Humanos</a></li> 
    <li class="breadcrumb-item active" aria-current="page">Resumen de Tiempo Disponible</li>
  </ol>
</nav>
@stop
@section('content')
    <div class="bgc-white p-20 bd">
        <h3>Resumen</h3>

        <div class="card">
            <div class="card-body">
                @component('components.form-group', ['titulo' => 'Filtro', 'nombre' => 'buscar'])
                    <input @input="Buscar($event)" type="text" id="buscar" class="form-control" name="buscar" value="{{ \Request::get('filtro')  }}">
                @endcomponent

                @component('components.form-group', ['titulo' => 'Tipo Contrato', 'nombre' => 'tipo_contrato'])
                    
                    <select name="tipo_contrato" id="tipo_contrato" class="form-control">
                        <option :id="tcontrato.id" :value="tcontrato.id" :selected="tipo_contrato == tcontrato.id" v-for="tcontrato in tipos_contrato">
                            @{{ tcontrato.tipo }}
                        </option>
                    </select>
                @endcomponent
            </div>

            <div class="card-footer">
                <div class="d-flex justify-content-end">
                    <button @click="Filtrar()" :disabled="disabled" type="submit" class="btn btn-primary">Filtrar</button>
                </div>
            </div>
        </div>
  
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered">
                        <thead>
                        <tr>
                            <th colspan="2"></th>
                            <th colspan="2" class="text-center">Feriado Legal</th>
                            <th colspan="2" class="text-center bg-dark text-white">Administrativos</th>
                            <th class="text-center">Compensación de Horas</th>
                        </tr>
                        <tr>
                            <th class="text-center">Nombre</th>
                            <th class="text-center">Tipo Contrato</th>
                            <th class="text-center">Total días</th>
                            <th class="text-center">Días disponibles</th>
                            <th class="text-center bg-dark text-white">Total días</th>
                            <th class="text-center bg-dark text-white">Días disponibles</th>
                            <th class="text-center">Horas Disponibles</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($usuarios as $usuario)
                            <tr>
                                <td>{{ $usuario->full_name }}</td>
                                <td class="text-center"  style="border-right:1px solid black">{{ $usuario->tipo_contrato }}</td>
                                <td class="text-center">{{ $usuario->total_feriados }}</td>
                                <td class="text-center" style="border-right:1px solid black">{{ $usuario->feriados_disponibles }}</td>
                                <td class="text-center">{{ $usuario->total_dias_administrativos }}</td>
                                <td class="text-center"  style="border-right:1px solid black">{{ $usuario->dias_remunerados_disponibles }}</td>
                                @if($usuario->tipo_contrato =="PLANTA" || $usuario->tipo_contrato =="CONTRATA")
                                <td class="text-center">{{ $usuario->horas_disponibles_planta }}</td>
                                @else
                                <td class="text-center">{{ $usuario->horas_disponibles_honorarios }}</td>
                                @endif
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('pre-scripts')
<script>
        window.pageMix.push({
            data: () => ({
                buscar: "",
                tipo_contrato: "{{ \Request::get('tipocontrato')  }}",
                disabled: false,
                tipos_contrato: [
                    {
                        id: "",
                        tipo: "Seleccione",
                        selected: true
                    },
                    {
                        id: "HONORARIOS",
                        tipo: "HONORARIOS",
                        selected: false
                    },
                    {
                        id: "CONTRATA",
                        tipo: "CONTRATA",
                        selected: false
                    },
                    {
                        id: "PLANTA",
                        tipo: "PLANTA",
                        selected: false
                    },
                    {
                        id: "HONORARIO A SUMA ALZADA",
                        tipo: "HONORARIO A SUMA ALZADA",
                        selected: false
                    }
                ]
            }),

            created() {
                this.buscar = "{{ \Request::get('filtro')  }}";
               // this.buscar = "{{ \Request::get('filtro')  }}";
              //  $("#tipo_contrato option[value='{{ \Request::get('tipocontrato')  }}']").attr('selected','selected').change();

            },

            methods: {
                Filtrar() {


                    window.location = "{{ \Request::url() }}?filtro="+this.buscar+"&tipocontrato="+$("#tipo_contrato option:selected").val();//   this.tipo_contrato;
                    
                    // if (this.buscar !== "") {
                    //    // window.location = "/compensacion-horas/resumen/" + this.buscar + "/" + this.tipo_contrato + "/filtrado";
                    // } else {
                    //    // window.location = "/compensacion-horas/resumen/0/" + this.tipo_contrato + "/filtrado";
                    // }
                    
                },

                Buscar(event) {
                    this.buscar = event.target.value;
                    console.log(this.buscar)
                    if (this.buscar !== "" || this.tipo_contrato !== "") {
                        this.disabled = false;
                    }

                    
                },
                
                SelectTContrato($event) {
                    //this.tipo_contrato = event.target.value;
                    console.log(this.tipo_contrato)

                  
                }
            }
        })
    </script>
@endpush