@extends('layouts.app')

@section('content')
<div class="page-header">
    <h3 class="page-title text-uppercase">
        <span class="page-title-icon bg-gradient-primary_local text-white mr-2">
            <i class="mdi mdi-human-greeting menu-icon"></i>
        </span> colaboradores </h3>

    <nav aria-label="breadcrumb">
        <ul class="breadcrumb text-uppercase">
            <li class="breadcrumb-item active" aria-current="page">
                <a href="{!! URL('/empleados')!!}"><span>vista general</span></a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
                <span>detalle colaborador</span><i class="mdi mdi-alert-circle-outline icon-sm text-primary_local align-middle"></i>
            </li>
        </ul>
    </nav>
</div>

<div class="row">
    <div class="col-12 grid-margin">
        <div class="card">
            <div class="card-body">
                <div class="clearfix">
                    <h4 class="card-title float-left text-uppercase">detalle de colaborador</h4>
                </div>
                <div class="espacio_vertical"></div>

                <div>
                    @include('empleados.show_fields')
                </div>

                <div class="espacio_vertical"></div>
                

                <div class="clearfix">
                    <h4 class="card-title float-left text-uppercase">Horarios</h4>
                </div>
                <div class="col-12 grid-margin">    
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>día</th>
                                <th>entrada</th>
                                <th>salida</th>
                                <th>comida salida</th>
                                <th>comida entrada</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($empleado->horarios as $horario)
                            <tr>
                                <th>{!! $horario->dia !!}</th>
                                <td>{!! $horario->hora_entrada !!}</td>
                                <td>{!! $horario->hora_salida !!}</td>
                                <td>{!! $horario->hora_comida_entrada !!}</td>
                                <td>{!! $horario->hora_comida_final !!}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="espacio_vertical"></div>

                <div class="clearfix">
                    <h4 class="card-title float-left text-uppercase">Servicios</h4>
                </div>
                <div class="col-12 grid-margin">

                    @foreach($empleado->servicios as $servicio)
                    <div class="badge badge-outline-primary badge-pill" style="border-color: #00c88b; color: #00c88b">{!! $servicio->nombre !!}</div>
                    @endforeach
                </div>

                <div class="espacio_vertical"></div>

                <div>
                    <a href="{!! route('empleados.index') !!}" class="btn btn-secondary">Regresar</a>
                </div>
            </div>
        </div>
    </div>


    @endsection