@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 Permisos con goce de remuneraciones (Administrativos)</li>
  </ol>
</nav>
@stop
@section('content')
    <div class="bgc-white p-20 bd">
    <h3>Permisos con goce de remuneraciones (Administrativos)</h3>

    <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>Total días</td>
                                <td>{{ $user->totalDiasAdministrativos() }}</td>
                            </tr>
                            <tr>
                                <td>Días disponibles</td>
                                <td>{{ $user->diasRemuneradosDisponibles() }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <b-card title="Permisos Asignados" class="mb-3">
        <!-- <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> -->
        <table class="table table-striped">
            <thead>
            <tr>
                <th>Fecha</th>
                <th>Decreto</th>
                <th>Días Asignados</th>
          
                <th>Fecha Expiración</th>
                <th>Expirada</th>
            </tr>
            </thead>
            <tbody>
            @foreach($permisos as $dia)
                <tr>
                    <td>{{ fechaFormato($dia->fecha,'d/m/Y')}}</td>
                    <td>{{ $dia->decreto}}</td>
                    <td>{{ $dia->pivot->dias}}</td>
                    <td>31/12/{{fechaFormato($dia->fecha,'Y')}}</td>
                    <td>{{(Carbon\Carbon::now()->gt(Carbon\Carbon::createFromFormat('d/m/Y','31/12/'.fechaFormato($dia->fecha,'Y'))))?'SI':'NO'  }}</td>
                </tr>
            @endforeach
            </tbody>
        </table>



    </b-card>

    <div class="card">
        <div class="card-body">
            <h4>Días Pedidos</h4>

            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>Solicitud</th>
                        <th>Fecha Solicitud</th>
                        <th>Tipo Solicitud</th>
                        <th>Solicita</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>Permiso con goce.</td>
                            <td>{{$solicitud->dias}} Días (fecha inicial: {{fechaFormato($solicitud->fecha_desde,'d/m/Y')}})</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    </div>
@endsection

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

    //                 decreto: {
    //                     label: 'Referencia'
    //                 },

    //                 'pivot.dias': {
    //                     label: 'Dias Asignados'
    //                 }
    //             }
    //         }
    //     })
    // })
    </script>
@endpush