@extends('adminlte::page')

@section('title', env('APP_NAME') . ' - Registrar descanso trabajado')

@section('content_header')
    <h4>Registrar descanso trabajado</h4>
@stop

@section('content')
    <div class="card">
        <div class="card-header bg-primary text-white">
            <h3 class="card-title">Nueva excepción de descanso</h3>
        </div>
        <div class="card-body">
            @include('partials.validaciones')

            <form action="{{ route('descansos-excepciones.store') }}" method="POST">
                @csrf

                <div class="form-group">
                    <label for="empleado_id">Colaborador</label>
                    <select name="empleado_id" id="empleado_id" class="form-control select2" style="width: 100%;" required>
                        <option value="">Seleccione un colaborador</option>
                        @foreach($empleados as $empleado)
                            <option value="{{ $empleado->id }}" {{ old('empleado_id') == $empleado->id ? 'selected' : '' }}>
                                {{ $empleado->nombre }} {{ $empleado->apellido }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="form-group">
                    <label for="fecha">Fecha del descanso trabajado</label>
                    <input type="date" name="fecha" id="fecha" class="form-control" value="{{ old('fecha') }}" required>
                    <small class="form-text text-muted">
                        Debe ser una fecha donde el colaborador tenga un descanso programado.
                    </small>
                </div>

                <div class="form-group">
                    <label for="observacion">Observación (opcional)</label>
                    <input type="text" name="observacion" id="observacion" class="form-control" value="{{ old('observacion') }}"
                           placeholder="Ej: Pagado como día normal, se dará descanso compensatorio, etc.">
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-success mr-2">
                        <i class="fas fa-save"></i> Registrar
                    </button>
                    <a href="{{ route('descansos-excepciones.index') }}" class="btn btn-warning">
                        <i class="fas fa-list"></i> Lista de Descansos Excepciones
                    </a>
                </div>
            </form>
        </div>
    </div>
@stop

@section('css')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .select2-container--default .select2-selection--single {
        background-color: #fff;
        border: 1px solid #aaa;
        border-radius: 4px;
        height: 35px !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 35px !important;
        padding-left: 12px;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 35px !important;
    }

</style>
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function () {
        $('#empleado_id').select2({});
    });
</script>
@stop