@extends('base')
@section('extracss')
    <style>
        .money::after {
            float: left;
            content: "$ ";
        }

        .money {
            text-align: right;
            font-weight: bolder;
        }

    </style>
@endsection
@section('content')
    @include('RecursosHumanos.Modals.RegistrarVacacion')
    @include('sessions')
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('RecursosHumanos.VacacionesIndex') }}">Vacaciones</a></li>
            <li class="breadcrumb-item active" aria-current="page">Detalle de Vacacion de empleado</li>
        </ol>
    </nav>
    <button class="btn btn-primary mb-3" data-toggle="modal" data-target="#RegistrarVacacion">Registrar Vacacion</button>
    <table class="table table-bordered table-hover">
        <legend>Vacaciones Tomadas por {{ $empleado->nombre_empleado }}</legend>
        <br>
        <thead>
            <tr>
                <th>Periodo</th>
                <th>Estado</th>
                <th>Total Ingresos</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($vacaciones as $vacacion)

                <tr>
                    <td>{{ $vacacion->periodo }}</td>
                    <td>{{ $vacacion->estado ? 'Del Periodo Actual' : 'Periodo Pasado' }}</td>
                    <td class="money">{{ number_format($vacacion->ingreso_total, 2) }}</td>
                    <td><a href="{{ route('RecursosHumanos.DetalleVacacion') }}?id={{ $vacacion->id }}"
                            class="btn btn-primary">Ver Detalle</a></td>
                </tr>
            @endforeach
        </tbody>
    </table>
@endsection