@extends('layouts.index', ['subHeader' => 'Nuevo Personal'])

@section('header')
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard</a>
    <a href="{{ route('personal.index') }}" class="text-decoration-none text-dark"> / Personal</a>
    <span> / Nuevo registro</span>
@endsection

@section('content')
    <div class="">
        <div class=" d-flex justify-content-end">
            <div class="btn-group" role="group" aria-label="">
                <a href="{{ route('personal.index') }}" type="button" class="btn btn-back btn-lg ">
                    <i class="bi bi-arrow-left-circle-fill"></i> Atrás
                </a>
            </div>
        </div>
        <br>
    </div>
    <br>
    <div class="container-fluid shadow-s p-4">
        <form class="row g-3" action="{{ route('personal.store') }}" method="POST">
            @csrf
            <h1 class="fs-3 fw-bolder">Nuevo registro de Personal</h1>
            <!-- aprobacion de registro -->
            @hasanyrole('admin|Super Admin')
                <span class="fs-5">Aprobación de registro</span>

                <div class="mt-2 d-flex flex-wrap">
                    <div class="d-flex flex-wrap">
                        <div class="form-check m-2">
                            <input class="form-check-input" type="radio" name="aprobacion" id="aprobacion1" value="1">
                            <div>
                                <img src="{{ asset('img/exitoso.png') }}" width="15px" alt="">
                                <label class="fs-6" for="aprobacion1">
                                    Aprobado
                                </label>
                            </div>
                        </div>
                        <div class="form-check m-2">
                            <input class="form-check-input" type="radio" name="aprobacion" id="aprobacion2" value="0"
                                checked>
                            <div>
                                <img src="{{ asset('img/error.png') }}" width="15px" alt="">
                                <label class="fs-6" for="aprobacion2">
                                    Rechazado
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                @error('aprobacion')
                    <div class="text-danger">@lang($message)</div>
                @enderror
                <hr>
            @endhasanyrole

            <!-- fin aprobacion de registro -->

            <div class="col-md-4">
                <label for="tiempo" class="form-label fw-bolder">Tiempo</label>
                <input type="datetime-local" class="form-control fromcss form-control-lg" id="tiempo" name="tiempo"
                    value="{{ old('tiempo') }}" required>

                <div id="error-message" style="color: red;"></div>
                @error('tiempo')
                    <div class="text-danger" style="color: red;">@lang($message)</div>
                @enderror
            </div>
            <div class="col-md-4">
                <label for="" class="form-label fw-bolder ">Área</label>
                <select name="area_id" id="area_id" class="form-select form-select-lg fromcss" data-control="select2"
                    data-placeholder="Seleccione el Área..." required>
                    <option></option>
                    @foreach ($areas as $area)
                        <option value={{ $area->id }}>{{ $area->nombre }}</option>
                    @endforeach
                </select>
                @error('area_id')
                    <div class="text-danger" style="color: red;">@lang($message)</div>
                @enderror
            </div>
            <div class="col-md-4">
                <label for="" class="form-label fw-bolder ">Dispositivo</label>
                <input type="text" class="form-control fromcss form-control-lg" name="dispositivo" id="dispositivo"
                    value="{{ old('dispositivo') }}" placeholder="Dispositivo" required>
                @error('dispositivo')
                    <div class="text-danger" style="color: red;">@lang($message)</div>
                @enderror
            </div>
            <div class="col-md-4">
                <label for="" class="form-label fw-bolder ">Lugar del evento</label>
                <input type="text" class="form-control fromcss form-control-lg" name="lugar_evento" id="lugar_evento"
                    value="{{ old('lugar_evento') }}" placeholder="Lugar" required>
                @error('lugar_evento')
                    <div class="text-danger" style="color: red;">@lang($message)</div>
                @enderror
            </div>
            <div class="col-md-4">
                <label for="" class="form-label fw-bolder">Número de tarjeta interno</label>
                <input type="text" class="form-control form-control-lg fromcss" name="numero_tarjeta_interno"
                    value="{{ old('numero_tarjeta_interno') }}" id="numero_tarjeta_interno" placeholder="No. tarjeta"
                    required>
                @error('numero_tarjeta_interno')
                    <div class="text-danger" style="color: red;">@lang($message)</div>
                @enderror
            </div>

            <div class="col-md-4">
                <label for="" class="form-label fw-bolder">ID</label>
                <input type="text" class="form-control form-control-lg fromcss" name="id_personal" id="id_personal"
                    value="{{ old('id_personal') }}" placeholder="No. ID" required>
                @error('id_personal')
                    <div class="text-danger" style="color: red;">@lang($message)</div>
                @enderror
            </div>
            <div class="col-md-4">
                <label for="" class="form-label fw-bolder">Nombre personal</label>
                <input type="text" class="form-control form-control-lg fromcss" name="nombre_personal"
                    value="{{ old('nombre_personal') }}" id="nombre_personal" placeholder="Nombre" required>
                @error('nombre_personal')
                    <div class="text-danger" style="color: red;">@lang($message)</div>
                @enderror
            </div>
            <div class="col-md-4">
                <label for="departamento_id" class="form-label fw-bolder">Departamento</label>
                <select name="departamento_id" id="departamento_id" class="form-select form-select-lg fromcss"
                    data-control="select2" data-placeholder="Seleccione Departamento..." required>
                    <option></option>
                    @foreach ($departamento_oficinas as $departamento)
                        <option value={{ $departamento->id }}>{{ $departamento->nombre }}</option>
                    @endforeach
                </select>
                @error('departamento_id')
                    <div class="text-danger" style="color: red;">@lang($message)</div>
                @enderror
            </div>

            <div class="col-md-4">
                <label for="estado_id" class="form-label fw-bolder">Estado</label>
                <select name="estado_id" id="estado_id" class="form-select form-select-lg fromcss"
                    data-control="select2" data-placeholder="Seleccione Estado..." required>
                    <option></option>
                    @foreach (App\Models\Personal::NOMBRE_ESTADOS as $key => $estado)
                        <option value="{{ $key }}">{{ $estado }}</option>
                    @endforeach
                </select>
                @error('estado_id')
                    <div class="text-danger" style="color: red;">@lang($message)</div>
                @enderror
            </div>

            <br>
            <div class="col-12 d-flex justify-content-end mt-5">
                <div class="flex-row g-4 w-100 justify-content-end">
                    <a href="{{ route('personal.index') }}" class=" btn btn-lg mb-3 btn-cancelar">Cancelar</a>
                    <button class=" btn btn-lg mb-3 btn-enviar" type="submit">Guardar</button>
                </div>
            </div>
        </form>
    </div>
@endsection