@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('solicitud-permiso.solicitudes.index')}}">Solicitudes de Permisos</a></li>
    <li class="breadcrumb-item active" aria-current="page">Detalle de Tiempo Compensatorio</li>
  </ol>
</nav>
@stop

@section('content')
    <div class="bgc-white p-20 bd">
        <h3>Tiempo Compensatorio </h3>
        <h6>{{$user->full_name }}</h6>
        <div class="row mb-3">
            <div class="col-12 col-md-4">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <tbody>
                                <tr>
                                    <td>Horas disponibles</td>
                                   
                                    <td>{{ $user->horasDisponibles() }}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <b-card title="Horas Asignadas" class="mb-3">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>Fecha</th>
                            <th>Referencia</th>
                            <th>Horas Asignadas</th>
                            <th>Horas Restantes</th>
                            <th>Fecha Expiración</th>
                            <th>Expirada</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($horas as $hora)
                            <tr>
                                <td>{{ fechaFormato($hora->decreto->fecha,'d/m/Y')}}</td>
                                <td>{{ $hora->decreto->nombre}}</td>
                                <td>{{ $hora->pivot->horas}}</td>
                                <td>{{ $hora->pivot->horas_restantes}}</td>
                                @if($user->tipo_contrato=='CONTRATA' || $user->tipo_contrato=='PLANTA')
                                    <td>{{ $expirada = Carbon\Carbon::parse($hora->decreto->fecha)->addYears(2)->format('d/m/Y') }}  </td>
                                    <td>{{ (Carbon\Carbon::now()->gt( Carbon\Carbon::parse($hora->decreto->fecha)->addYears(2) ) )?'SI':'NO'  }}</td>
                                @else
                                    <td>31/12/{{fechaFormato($hora->decreto->fecha,'Y')}}</td>
                                    <td>{{(Carbon\Carbon::now()->gt(Carbon\Carbon::createFromFormat('d/m/Y','31/12/'.fechaFormato($hora->decreto->fecha,'Y'))))?'SI':'NO'  }}</td>
                                @endif
                               

                              </tr>
                        @endforeach
                        </tbody>
                    </table>



            <!-- <b-table striped :items="table.items" :current-page="table.page" :fields="table.fields"></b-table>
            <b-pagination v-show="table.items.length > 20" align="center" v-model="table.page"
                          :total-rows="table.items.length" :per-page="20"></b-pagination> -->
        </b-card>

        

        <div class="card">
            <div class="card-body">
                <h4>Horas Pedidas</h4>

                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>Solicitud</th>
                            <th>Fecha Solicitud</th>
                            <th>Solicitud</th>
                            <th>Horas Solicitadas</th>
                            <th>Decretos Usados</th>
                        </tr>
                        </thead>
                        <tbody>
                       
                        @foreach($solicitudes as $solicitud)
                            <tr>
                            <td><a href="{{ route('solicitud-permiso.solicitudes.show', ['id' => $solicitud->id]) }}">{{ $solicitud->id }}</a></td>
                                <td>{{ fechaFormato($solicitud->created_at, 'd/m/Y') }}</td>
                                <td>fecha inicial: {{fechaFormato($solicitud->fecha_desde,'d/m/Y H:i')}}</td>
                                <td>{{ $solicitud->horas }}</td>
                                <td>
                                @foreach($solicitud->compensaciones as $decreto)
                                    {{$decreto->decreto }} : {{ ($decreto->horas_solicitadas +$decreto->horas_restantes) }}H - {{ ($decreto->horas_solicitadas) }}H = {{$decreto->horas_restantes}}H <br/>
                                @endforeach
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('pre-scripts')
    <script>
    console.log(@json($horas));
        // window.pageMix.push({
        //     data: () => ({
        //         table: {
        //             items: @json($horas),
        //             page: 1,
        //             fields: {
        //                 fecha: {
        //                     formatter: (value, name, item) => {
        //                         return moment(item.decreto.fecha).format('DD/MM/YYYY')
        //                     }
        //                 },

        //                 'decreto.nombre': {
        //                     label: 'Referencia',
        //                     /**
        //                      * formatter(value) {
        //                     const fecha = moment(value)

        //                     return `${value.id}/${fecha.format('DD.MM.YYYY')}`
        //                 }
        //                      */
        //                 },

        //                 'pivot.horas': {
        //                     label: 'Horas Asignadas'
        //                 },

        //                 'pivot.horas_restantes': {
        //                     label: 'Horas Restantes',
        //                     formatter: value => {
        //                         console.log(value)
        //                         return value === null ? '0' : value
        //                     }
        //                 },

        //                 'decreto.fecha': {
        //                     label: '¿Expirado?',
        //                     formatter: value => {
        //                         const esAntes = moment(value).isBefore(moment());
        //                         const pasadosDos = moment().diff(moment(value).add(1, 'days'), 'years') >= 2

        //                         return esAntes && pasadosDos ? 'Si' : 'No'
        //                     }
        //                 },

        //                 'decreto': {
        //                     label: 'Fecha Vencimiento',

        //                     formatter: value => {
        //                         const date = moment(value.fecha).add(2, 'years')

        //                         return date.format('DD/MM/YYYY')
        //                     }
        //                 }
        //             }
        //         }
        //     })
        // })
    </script>
@endpush