@extends('layouts.dashboard_layout')

@section('title', 'Requerimientos')

@section('body-class', 'acta-reunion')

@section('content')
    <div class="container-fluid p-3 table-acta">
        <label class="text-align mb-3">Actas de Verificación de Requerimientos Funcionales</label>
        <form action="{{ route('verificacion.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <div class="col-md-6 col-sm-12">
                    <label class="form-label mb-3">Fecha de verificación</label>
                    <input type="date" class="form-control mb-3" value="{{ old('fecha_verificacion') }}"
                        name="fecha_verificacion" required>
                </div>
                <div class="col-md-6 col-sm-12">
                    <label class="form-label mb-3">Cliente</label>
                    <input type="text" name="nombre_empresa" class="form-control mb-3" placeholder="Nombre de empresa"
                        readonly>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <label class="form-label mb-3">Proyecto</label>
                        <select class="form-select mb-4 select2-global" name="id_proyecto" required>
                            <option value=""></option>
                            @foreach ($proyectos as $proyecto)
                                <option value="{{ $proyecto->id }}"
                                    data-nombre-empresa="{{ $proyecto->cliente->nombre_empresa }}">{{ $proyecto->nombre }}
                                </option>
                            @endforeach
                        </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label mt-md-0 mt-3 mb-3">Miembros del Equipo K2</label>
                    <input type="text" class="form-control mb-2" placeholder="Nombre"
                        value="{{ old('representantes_k2.0') }}" name="representantes_k2[]" required>
                    <input type="text" class="form-control mb-2" placeholder="Nombre"
                        value="{{ old('representantes_k2.1') }}" name="representantes_k2[]">
                    <div id="miembrosK2" class="input-group">
                        <input type="text" class="form-control mb-2" placeholder="Nombre"
                            value="{{ old('representantes_k2.2') }}" name="representantes_k2[]">
                    </div>
                </div>
            </div>
            <label class="form-label fw-bolder">Objetivo</label>
            <label class="form-label mb-4 text-align2 w-100">Este documento tiene como objetivo verificar y validar que los
                requerimientos funcionales acordados con el cliente se han cumplido de manera satisfactoria.</label>

            <label class="form-label fw-bolder">Requerimientos Funcionales:</label><br>
            <label class="form-label mb-4 text-align2 w-100">A continuación se registra los requerimientos funcionales acordados
                con el cliente.</label>

            <div id="requerimientosContainer" class="row">
                <div class="requerimientoRow col-md-6 col-sm-12">
                    <div class="form-group">
                        <label class="form-label">Requerimiento</label>
                        <input type="text" class="form-control mb-2" name="reqs[nombre][0]"
                            placeholder="Requerimiento 1">
                        <input type="text" class="form-control mb-2" name="reqs[nombre][1]"
                            placeholder="Requerimiento 2">
                        <input type="text" class="form-control mb-2" name="reqs[nombre][2]"
                            placeholder="Requerimiento 3">
                        <input type="text" class="form-control mb-2" name="reqs[nombre][3]"
                            placeholder="Requerimiento 4">
                    </div>
                </div>
                <div class="requerimientoRow col-md-6 col-sm-12">
                    <div class="form-group">
                        <label class="form-label">Descripción</label>
                        <input type="text" class="form-control mb-2" name="reqs[descripcion][0]"
                            placeholder="Descripcion">
                        <input type="text" class="form-control mb-2" name="reqs[descripcion][1]"
                            placeholder="Descripcion">
                        <input type="text" class="form-control mb-2" name="reqs[descripcion][2]"
                            placeholder="Descripcion">
                        <input type="text" class="form-control mb-2" name="reqs[descripcion][3]"
                            placeholder="Descripcion">
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-start">
                <button class="btnNext mb-4 mt-2" id="btnAddRequerimiento" type="button">
                    <i class="fa-solid fa-plus"></i> Añadir Requerimiento
                </button>
            </div>

            <label class="form-label fw-bolder w-100">Comentarios y Aprobación</label>
            <label class="form-label mb-4 text-align2 w-100">Espacio para que el cliente incluya cualquier comentario, observación
                o solicitud de modificaciones relacionadas con los requerimientos funcionales.</label>

            <textarea class="form-control mb-3" value="{{ old('comentarios') }}" placeholder="Comentarios" name="comentarios"></textarea>

            <label class="form-label text-align">Casos de Uso</label>
            <div id="previews1"></div>
            <div class="col-md-6">
            <input type="file" id="imageUpload1" name="imagenes[]"
                class="form-control mb-4 mt-3" accept=".jpeg,.png,.jpg" onchange="previewImages(1)"
                multiple>
            </div>
            <label class="form-label mb-3 fw-bolder">Firma de Aprobación del Cliente</label>
            <div class="row">
                <div class="col-md-6">
                    <label class="form-label mb-3">Fecha firma</label>
                    <input type="date" class="form-control mb-3" value="{{ old('fecha_aprobacion') }}"
                        name="fecha_aprobacion">
                </div>
            </div>

            <label class="form-label mb-3 fw-bolder">Firma de Aprobación de K2 Digital</label>
            <div class="row">
                <div class="col-md-6 col-sm-12">
                    <label class="form-label mb-3">Fecha firma</label>
                    <input type="date" class="form-control" value="{{ old('fecha_firma') }}" name="fecha_firma">
                </div>
                <div class="col-md-6 col-sm-12">
                    <label class="form-label mt-md-0 mt-3 mb-3">Firma de Aprobación de K2 Digital</label>
                    <input type="file" class="form-control mb-3"
                        name="firma_k2" accept=".jpeg,.png,.jpg">
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <label class="form-label mb-3">Elaborado por</label>
                    <select name="elaborado" class="form-select" required>
                        <option hidden selected value="">Seleccione un elaborado</option>
                        @foreach ($empleados as $empleado)
                            <option value="{{ $empleado->id }}">{{ $empleado->usuario->nombre }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <br>
            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <button class="btnNext" type="submit">Guardar</button>
            </div>
        </form>
    </div>
@endsection

@section('scripts')
    @parent
    <script src="{{ asset('js/constants/select2.js') }}"></script>
    <script src="{{ asset('js/constants/proyecto-cliente.js') }}"></script>
    <script src="{{ asset('js/verificacion/btn-plus.js') }}"></script>
    <script src="{{ asset('js/verificacion/btn-reqs.js') }}"></script>
    <script src="{{ asset('js/verificacion/img.js') }}"></script>
@endsection