@extends('new_header')
@section('main')

<style>
    #drop_zone {
        border: 5px solid blue;
        width: 200px;
        height: 100px;
    }

</style>
<main class="container my-5">
    <!-- <div class="row justify-content-center pt-5">
        <div class="col-12 col-md-5 my-2">
            <h4 class="text-center">New Order</h4>
        </div>
    </div> -->
    <input type="hidden" id="cliente_id" value="{{$usuario->cliente['client_id']}}">
    <!-- FORMULARIO DE DATOS DEL CANDIDATO -->
    <form id="frmNuevaOrden">
        <!-- -->
        <input type="hidden" id="token" name="_token" value="{{csrf_token()}}">
        <input type="hidden" id="user_email" name="user_email">
        <input type="hidden" id="cliente_nombre" name="cliente_nombre">
        <input type="hidden" name="id_padron" id="id_padron">
        <input type="hidden" name="id_padron_fidelitas" id="id_padron_fidelitas">
        <input type="hidden" name="country_code">
        <input type="hidden" name="familia">
        <input type="hidden" name="tipo_informe">
        <input type="hidden" name="identificacion">
        <input type="hidden" name="identificador">
        <input type="hidden" name="nombre_persona_aux" id="nombre_persona_aux">
        <input type="hidden" name="apellidos_aux" id="apellidos_aux">
        <input type="hidden" name="nombres_aux" id="nombres_aux">
        <input type="hidden" name="name_nombre_1" id="name_nombre_1">
        <input type="hidden" name="name_nombre_2" id="name_nombre_2">
        <input type="hidden" name="name_apellido_1" id="name_apellido_1">
        <input type="hidden" name="name_apellido_2" id="name_apellido_2">
        <input type="hidden" name="menorDeEdad" id="menorDeEdad">
        <!-- -->
        <div class="row justify-content-start pt-5" id="seccion_pais">
            <div class="col-12 col-lg-7">
                <h4 class="text-start pt-3">New Order</h4>
            </div>
            <div class="col-12 col-lg-4">
                <div class="form-floating">
                    <select id="pais" name="pais" class="form-select" id="floatingSelect" aria-label="Country of origin">                        
                        <option value="" selected>Select country</option>
                        @foreach ($paises as $k => $pa)
                            <option value="{{$pa->familias[0]}}" data-cod-pais="{{$k}}">{{$pa->name}}</option>
                        @endforeach
                    </select>
                    <label for="floatingSelect">Candidate's Application Country <span class="text-danger">*</span></label>
                </div>
            </div>
            <!-- -->
            <div class="col-1 mt-3 text-end align-self-end pb-2" id="btn_paises">
                <button type="button" class="btn btn-fidelitas" id="siguiente_paises">Next</button>
            </div>
        </div>
        <div class="row mt-3 d-none" id="seccion_tipo_informe">
            <hr>
            <div class="col-12 col-lg-6" id ="tipos_informes">
                <!-- Tipos de informes -->
            </div>
            <div class="col-12 col-lg-6">
            <h5 class="text-fidelitas"><b>Reference</b></h5>
                <div class="form-floating">
                    <input type="text" name="referencia" id="referencia" class="form-control form-control-sm" placeholder="Reference id number">
                    <label class="form-label" for="referencia">Reference id number <span class="text-danger">*</span></label>
                </div>
                <small class="text-danger" id="referencia_error"></small>
            </div>
            <div class="col mt-3 text-end align-self-end pb-2" id="btn_tipo_informe">
                <button type="button" class="btn btn-fidelitas" id="atras_tipo_informe">Back</button>
                <button type="button" class="btn btn-fidelitas" id="siguiente_tipo_informe">Next</button>
            </div>
        </div>
        <div class="d-flex justify-content-center my-5 d-none text-fidelitas" id="loading_form">
            <div class="spinner-border" role="status">
            </div>
        </div>
        <div class="row mt-3 d-none" id="seccion_cand_id">
            <hr>
            <div class="row mt-3">
                <h6 class="text-fidelitas">Candidate Id Data</h6>
                <div class="col-12 col-lg-6">
                    <div class="form-floating">
                        <select class="form-select campo-selector obligatorio" name="tipo_id" id="tipo_id" aria-label="Floating label select example">
                            <option value="" >Select type or ID</option>
                            <option value="0" >Personal ID</option>
                            <option value="1" >Tax ID</option>
                        </select>
                        <label for="tipo_id">Select type of ID <span class="text-danger">*</span></label>
                    </div>
                    <small class="text-danger" id="tipo_id_error"></small>
                </div>
                <div class="col-12 col-lg-6">
                    <div class="form-floating">
                        <input type="text" name="numero_id" id="numero_id" class="form-control campo-numerico obligatorio form-control-sm" placeholder="ID number">
                        <label class="form-label" for="numero_id">ID number <span class="text-danger">*</span></label>
                    </div>
                    <small class="text-danger d-none" id="numero_id_error">Enter a valid Id number (alphanumeric, no punctuation, spaces and symbols)</small>
                </div>
            </div>
        </div>
        <!-- -->
        <div class="row mt-3 d-none" id="seccion_form_doc">
        </div>
        <!-- -->
        <div class="d-flex justify-content-center my-4 d-none" id="loading_upload">
            <div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
            </div>
        </div>
        <!-- -->
        <div id="mensaje_upload" class="row justify-content-center text-center d-none"></div>
    </form>
    <!-- -->
    <div class="row justify-content-end mb-3 d-none" id="seccion_finalizar">
        <div class="col-2 text-end">
            <button type="button" class="btn btn-secondary" id="atras_finalizar" href="#">Back</button>
            <button type="button" class="btn btn-fidelitas" id="cargar-pedido"><i class="bi bi-save"></i> New Order</button>
        </div>
    </div>
    <!-- -->
    <div class="row justify-content-center my-5 d-none" id="seccion_alerta">
        <div class="alert alert-danger text-center" role="alert" id="alerta_error">
            One or more required field(s) are missing or invalid <br>
            Please provide the information in the field(s) shown in red
        </div>
    </div>
    <!-- -->
</main>
<!-- MODAL DE CARGA -->
<div class="modal fade" id="modalCargaPedido" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div class="spinner-border text-danger" role="status"></div>
                <h5>Loading order, wait a moment please </h5>                              
    	    </div>
        </div>
    </div>
</div>
<!--  MODAL MENOR DE EDAD  -->
<div class="modal fade" id="modalMenorEdad" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header text-danger">
                <h3>Warning</h3>
            </div>
            <div class="modal-body">
                <p>The candidate you are about to upload is <span class="text-fidelitas" id="edadPersona"></span> years old. Are you sure you want to proceed?</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
              <button type="button" class="btn btn-success" id="confirmarMenorEdad" name="confirmarMenorEdad" value="1">Confirm</button>
            </div>
        </div>
    </div>
</div>

@endsection
@section('funcionesJS')
<script src="{{ asset('/Libreria_CA/Js/iv/iv_nueva_busqueda.js') }}?v={{rand()}}"></script>
<script src="{{ asset('/Libreria_CA/Js/iv/form_dependencia.js') }}?v={{rand()}}"></script>
<!-- -->
<script>
    $(document).ready(function(){
        index();
    });
</script>
@endsection