@extends('layouts.pedidos')

@section('estilo')
    <style>
        /* Custom default button */
        .btn-secondary,
        .btn-secondary:hover,
        .btn-secondary:focus {
        color: #333;
        text-shadow: none; /* Prevent inheritance from `body` */
        }
        /*
        * Base structure
        */
        body {
        text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
        box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
        }
        .cover-container {
        max-width: 42em;
        }
        /*
        * Header
        */
        .nav-masthead .nav-link {
        padding: .25rem 0;
        font-weight: 700;
        color: rgba(255, 255, 255, .5);
        background-color: transparent;
        border-bottom: .25rem solid transparent;
        }

        .nav-masthead .nav-link:hover,
        .nav-masthead .nav-link:focus {
        border-bottom-color: rgba(255, 255, 255, .25);
        }

        .nav-masthead .nav-link + .nav-link {
        margin-left: 1rem;
        }

        .nav-masthead .active {
        color: #fff;
        border-bottom-color: #fff;
        }
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
            font-size: 3.5rem;
            }
        }
    </style>
@endsection

@section('cuerpo')
<div class="container d-flex justify-content-center">
    <div class="col-md-10 p-3 bg-light bg-gradient rounded-3 text-dark my-auto">
        <form action="" class="needs-validation was-validated" method="get">
            <h2 class="text-center">Integrantes</h2>
            <hr class="my-1">
            <p class="form-label">Para ingresar un pedido es necesario estar registrado en la nómina oficial, de lo contrario solicite información a Coordinación Académica</p>
            <div class="row g-2 mt-1">
                <div class="col-md-11 mx-auto">
                    <div class="input-group mb-2">
                        <span class="input-group-text col-md-2">Encargado:</span>
                        <div class="col-md-3">
                            <input name="dni[]" type="text" class="form-control text-center fw-bold" placeholder="Nro. DNI" minlength="8" maxlength="8" readonly value="{{ $encargado[0]->dni }}">
                        </div>
                        <p class="col-md-7 my-auto text-start ps-3 fs-5">{{ $encargado[0]->nombres.' '.$encargado[0]->apellidos }}</p>
                    </div>
                    <div class="row g-1">
                        <div class="col-md-6">
                            <div class="input-group mb-2">
                                <span class="input-group-text col-md-4">Und. Didáctica:</span>
                                <div class="col-md-8">
                                    <select name="_tipo" type="text" class="form-control" required>
                                        <option selected disabled value="">Seleccionar...</option>
                                        @forelse ($curso as $item)
                                            <option value="{{ $item->id }}">{{ ucfirst($item->nombre) }}</option>
                                        @empty
                                            <option disabled>No hay "Tipos" registrados</option>
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="input-group mb-2">
                                <span class="input-group-text col-md-6">Semestre:</span>
                                <div class="col-md-6">
                                    <select name="_tipo" type="text" class="form-control" required>
                                        <option selected disabled value="">Seleccionar...</option>
                                        <option value="1">I - Primero</option>
                                        <option value="2">II - Segundo</option>
                                        <option value="3">III - Tercero</option>
                                        <option value="4">IV - Cuarto</option>
                                        <option value="5">V - Quinto</option>
                                        <option value="6">VI - Sexto</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="input-group mb-2">
                                <span class="input-group-text col-md-6">Turno:</span>
                                <div class="col-md-6">
                                    <select name="_tipo" type="text" class="form-control" required>
                                        <option selected disabled value="">Seleccionar...</option>
                                        <option value="1">Día</option>
                                        <option value="2">Noche</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row g-1">
                        <div class="col-md-6">
                            <div class="input-group mb-2">
                                <span class="input-group-text col-md-4">Fecha de Pedido:</span>
                                <div class="col-md-8">
                                    <input name="fecha" type="datetime" class="form-control text-center" readonly value="{{ now()->format('d/m/Y H:i a') }}">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group mb-6">
                                <span class="input-group-text col-md-6">Fecha y Hora de Devolución:</span>
                                <div class="col-md-6">
                                    <input name="fecha" type="datetime-local" class="form-control text-center" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row g-1">
                        <div class="col-md-8">
                            <div class="input-group mb-2">
                                <span class="input-group-text col-md-3">Docente:</span>
                                <div class="col-md-9">
                                    <select name="_tipo" type="text" class="form-control" required>
                                        <option selected disabled value="">Seleccionar...</option>
                                        @forelse ($docente as $item)
                                        <option value="{{ $item->id }}">{{ ucfirst($item->nombres.' '.$item->apellidos) }}</option>
                                        @empty
                                        <option disabled>No hay "Tipos" registrados</option>
                                        @endforelse
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <hr class="my-2">
            <div id="list_integrantes" class="col-md-10 mx-auto">
            @for ($i = 1; $i < $integrantes; $i++)
                <div class="row g-3 mt-1">
                    <div class="mx-auto">
                        <div class="input-group">
                            <span class="input-group-text col-md-2 ">DNI Integrante {{ $i }}:</span>
                            <div class="col-md-3">
                                <input id="{{ $i }}" name="dni[]" type="text" class="form-control text-center fw-bold" placeholder="Nro. DNI" minlength="8" maxlength="8" required>
                            </div>
                            <p id="nom{{ $i }}" class="col-md-7 my-auto text-start ps-3 fs-5">--</p>
                            @error('dni')<div class="invalid-feedback text-end text-nowrap">{{ $message }}</div>@enderror
                        </div>
                    </div>
                </div>
            @endfor
            </div>
            <hr class="my-4">
            <button class="w-50 btn btn-primary btn-lg" type="submit">Continuar</button>
        </form>
    </div>
</div>
@endsection
@section('js')
    <script>
        $("#list_integrantes :input").blur(function (e) {
            if($(this).val().length==8){
                $.get("{{ route('pedidos_buscar_persona') }}", {dni: $(this).val()}, function (response) {
                    if($.isArray(response)){
                        $("#nom"+e.target.id).empty();
                        $("#nom"+e.target.id).append(response[0]['nombres']+" "+response[0]['apellidos']);
                    }else{
                        $("#"+e.target.id).val('');
                        $("#nom"+e.target.id).empty();
                        $("#nom"+e.target.id).append(response);
                    }
                });
            };
        });
    </script>
@endsection