@extends("admin.layout.layout")

@section("styles")
    @php
        $titulo = "Estudiante";
        $modulo = "Estudiantes";
        $vista="Registro";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo }} {{$vista}}</title>
@endsection

@section("contenido")
    <!--begin::Row-->
    <div class="row gx-5 gx-xl-10">
        <!--begin::Stepper-->
        <div class="stepper stepper-pills stepper-column d-flex flex-column flex-xl-row flex-row-fluid gap-10" id="kt_create_account_stepper">
            <!--begin::Aside-->
            <div class="card d-flex justify-content-center justify-content-xl-start flex-row-auto w-100 w-xl-300px w-xxl-400px">
                <!--begin::Wrapper-->
                <div class="card-body px-6 px-lg-10 px-xxl-15 py-20">
                    <!--begin::Nav-->
                    <div class="stepper-nav">
                        <!--begin::Step 1-->
                        <div class="stepper-item current" data-kt-stepper-element="nav">
                            <!--begin::Wrapper-->
                            <div class="stepper-wrapper">
                                <!--begin::Icon-->
                                <div class="stepper-icon w-40px h-40px">
                                    <i class="ki-outline ki-check fs-2 stepper-check"></i>
                                    <span class="stepper-number">1</span>
                                </div>
                                <!--end::Icon-->
                                <!--begin::Label-->
                                <div class="stepper-label">
                                    <h3 class="stepper-title">Datos personales</h3>
                                    <div class="stepper-desc fw-semibold">Identificación del estudiante</div>
                                </div>
                                <!--end::Label-->
                            </div>
                            <!--end::Wrapper-->
                            <!--begin::Line-->
                            <div class="stepper-line h-40px"></div>
                            <!--end::Line-->
                        </div>
                        <!--end::Step 1-->
                        <!--begin::Step 2-->
                        <div class="stepper-item" data-kt-stepper-element="nav">
                            <!--begin::Wrapper-->
                            <div class="stepper-wrapper">
                                <!--begin::Icon-->
                                <div class="stepper-icon w-40px h-40px">
                                    <i class="ki-outline ki-check fs-2 stepper-check"></i>
                                    <span class="stepper-number">2</span>
                                </div>
                                <!--end::Icon-->
                                <!--begin::Label-->
                                <div class="stepper-label">
                                    <h3 class="stepper-title">Datos de contacto</h3>
                                    <div class="stepper-desc fw-semibold">Dirección y comunicación</div>
                                </div>
                                <!--end::Label-->
                            </div>
                            <!--end::Wrapper-->
                            <!--begin::Line-->
                            <div class="stepper-line h-40px"></div>
                            <!--end::Line-->
                        </div>
                        <!--end::Step 2-->
                        <!--begin::Step 3-->
                        <div class="stepper-item" data-kt-stepper-element="nav">
                            <!--begin::Wrapper-->
                            <div class="stepper-wrapper">
                                <!--begin::Icon-->
                                <div class="stepper-icon w-40px h-40px">
                                    <i class="ki-outline ki-check fs-2 stepper-check"></i>
                                    <span class="stepper-number">3</span>
                                </div>
                                <!--end::Icon-->
                                <!--begin::Label-->
                                <div class="stepper-label">
                                    <h3 class="stepper-title">Encargado</h3>
                                    <div class="stepper-desc fw-semibold">Datos de encargado</div>
                                </div>
                                <!--end::Label-->
                            </div>
                            <!--end::Wrapper-->
                            <!--begin::Line-->
                            <div class="stepper-line h-40px"></div>
                            <!--end::Line-->
                        </div>
                        <!--end::Step 3-->
                        <!--begin::Step 4-->
                        <div class="stepper-item" data-kt-stepper-element="nav">
                            <!--begin::Wrapper-->
                            <div class="stepper-wrapper">
                                <!--begin::Icon-->
                                <div class="stepper-icon w-40px h-40px">
                                    <i class="ki-outline ki-check fs-2 stepper-check"></i>
                                    <span class="stepper-number">4</span>
                                </div>
                                <!--end::Icon-->
                                <!--begin::Label-->
                                <div class="stepper-label">
                                    <h3 class="stepper-title">Documentación</h3>
                                    <div class="stepper-desc fw-semibold">Multimedia para expediente</div>
                                </div>
                                <!--end::Label-->
                            </div>
                            <!--end::Wrapper-->
                            <!--begin::Line-->
                            <div class="stepper-line h-40px"></div>
                            <!--end::Line-->
                        </div>
                        <!--end::Step 4-->

                        <!--begin::Step 5-->
                        <div class="stepper-item" data-kt-stepper-element="nav">
                            <!--begin::Wrapper-->
                            <div class="stepper-wrapper">
                                <!--begin::Icon-->
                                <div class="stepper-icon w-40px h-40px">
                                    <i class="ki-outline ki-check fs-2 stepper-check"></i>
                                    <span class="stepper-number">5</span>
                                </div>
                                <!--end::Icon-->
                                <!--begin::Label-->
                                <div class="stepper-label">
                                    <h3 class="stepper-title">Revisión</h3>
                                    <div class="stepper-desc fw-semibold">Chequeo de información</div>
                                </div>
                                <!--end::Label-->
                            </div>
                            <!--end::Wrapper-->
                            <!--begin::Line-->
                            <div class="stepper-line h-40px"></div>
                            <!--end::Line-->
                        </div>
                        <!--end::Step 5-->
                        <!--begin::Step 6-->
                        <div class="stepper-item mark-completed" data-kt-stepper-element="nav">
                            <!--begin::Wrapper-->
                            <div class="stepper-wrapper">
                                <!--begin::Icon-->
                                <div class="stepper-icon w-40px h-40px">
                                    <i class="ki-outline ki-check fs-2 stepper-check"></i>
                                    <span class="stepper-number">6</span>
                                </div>
                                <!--end::Icon-->
                                <!--begin::Label-->
                                <div class="stepper-label">
                                    <h3 class="stepper-title">Completo</h3>
                                    <div class="stepper-desc fw-semibold">Resultado del registro</div>
                                </div>
                                <!--end::Label-->
                            </div>
                            <!--end::Wrapper-->
                        </div>
                        <!--end::Step 5-->
                    </div>
                    <!--end::Nav-->
                </div>
                <!--end::Wrapper-->
            </div>
            <!--begin::Aside-->
            <!--begin::Content-->
            <div class="card d-flex flex-row-fluid ">
                <!--begin::Form-->
                <form class="card-body  px-9" novalidate="novalidate" id="kt_create_account_form">
                    <!--begin::Step 1-->
                    <div class="current" data-kt-stepper-element="content">
                        <!--begin::Wrapper-->
                        <div class="w-100">
                            <h2 class="fw-bold text-primary">Datos estudiante</h2>
                            <div class="row mb-2">
                                <div class="col-md-4">
                                    <label class="form-label required" for="tipo_identificación_id">Tipo de identificación</label>
                                    <select name="tipo_identificacion_id" id="tipo_identificacion_id" class="form-select form-select-lg mt-1" data-control="select2" data-placeholder="Seleccione..." data-allow-clear="false" data-hide-search="true">
                                        @foreach($tiposIdentificaciones as $tipoIdentificacion)
                                            <option value="{{$tipoIdentificacion->id}}">{{$tipoIdentificacion->tipo_identificacion}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="identificacion" class="form-label mb-3 required">Numero de identificación</label>
                                    <input type="text" class="form-control form-control-lg" name="identificacion" id="identificacion" />
                                    <div id="loader_cedula" style="display: none;">
                                        <i class="fas fa-spinner fa-spin"></i> Cargando...
                                    </div>
                                    <div id="error_cedula" class="text-info" style="display: none;">
                                        <i class="fas fa-close text-info"></i> Cedula no encontrada...
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label required" for="tipo_nacionalidad_id">Sexo</label>
                                    <select name="tipo_nacionalidad_id" id="tipo_nacionalidad_id" class="form-select form-select-lg mt-1" data-control="select2" data-placeholder="Seleccione..." data-allow-clear="false" data-hide-search="true">
                                        <option value=""></option>
                                        @foreach($tiposSexos as $tipoSexo)
                                            <option value="{{$tipoSexo->id}}">{{$tipoSexo->tipo_sexo}}</option>
                                        @endforeach
                                    </select>
                                </div>

                            </div>
                            <div class="row mb-2">
                                <div class="col-md-4">
                                    <label for="nombre" class="form-label mb-3 required">Nombre(s)</label>
                                    <input type="text" class="form-control form-control-lg" name="nombre" id="nombre" />
                                </div>
                                <div class="col-md-4">
                                    <label for="primer_apellido" class="form-label mb-3 required">Primer apellido</label>
                                    <input type="text" class="form-control form-control-lg" name="primer_apellido" id="primer_apellido" />
                                </div>
                                <div class="col-md-4">
                                    <label for="segundo_apellido" class="form-label mb-3 ">Segundo apellido</label>
                                    <input type="text" class="form-control form-control-lg" name="segundo_apellido" id="segundo_apellido" />
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-md-4">
                                    <label class="form-label required" for="tipo_nacionalidad_id">Nacionalidad</label>
                                    <select name="tipo_nacionalidad_id" id="tipo_nacionalidad_id" class="form-select form-select-lg mt-1" data-control="select2" data-placeholder="Seleccione..." data-allow-clear="false" data-hide-search="true">
                                        <option value=""></option>
                                        @foreach($tiposNacionalidades as $tipoNacionalidad)
                                            <option value="{{$tipoNacionalidad->id}}">{{$tipoNacionalidad->tipo_nacionalidad}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="nacimiento" class="form-label mb-3 required">Fecha nacimiento</label>
                                    <input type="date" class="form-control form-control-lg" name="nacimiento" id="nacimiento" />
                                </div>
                                <div class="col-md-4">
                                    <label for="segundo_apellido" class="form-label mb-3 ">Edad</label>
                                    <input type="number" class="form-control form-control-lg" name="edad" id="edad" readonly />
                                </div>
                            </div>
                        </div>
                        <!--end::Wrapper-->
                    </div>
                    <!--end::Step 1-->
                    <!--begin::Step 2-->
                    <div data-kt-stepper-element="content">
                        <!--begin::Wrapper-->
                        <div class="w-100">
                            <!--begin::Heading-->
                            <div class="pb-10 pb-lg-15">
                                <h2 class="fw-bold text-primary">Datos de contacto del estudiante</h2>
                            </div>
                            <!--end::Heading-->
                            <div class="row mb-2">
                                <div class="col-md-4">
                                    <label for="celular" class="form-label mb-3 required">Celular</label>
                                    <input type="text" class="form-control form-control-lg" name="celular" id="celular" maxlength="8" />
                                </div>
                                <div class="col-md-4">
                                    <label for="telefono" class="form-label mb-3">Teléfono</label>
                                    <input type="text" class="form-control form-control-lg" name="telefono" id="telefono" maxlength="8" />
                                </div>
                                <div class="col-md-6">
                                    <label for="lugar_trabajo" class="form-label mb-3 required ">Correo</label>
                                    <input type="text" class="form-control form-control-lg" name="lugar_trabajo" id="lugar_trabajo" />
                                </div>
                            </div>

                            <div class="row mb-2">
                                <div class="col-md-12">
                                    <label for="direccion" class="form-label mb-3 required">Dirección</label>
                                    <textarea name="direccion" id="direccion" class="form-control form-control-lg" rows="3"></textarea>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-md-4">
                                    <label class="form-label required" for="tipo_nacionalidad_id_encargado">Ruta</label>
                                    <select name="tipo_nacionalidad_id_encargado" id="tipo_nacionalidad_id_encargado" class="form-select form-select-lg mt-1" data-control="select2" data-placeholder="Seleccione..." data-allow-clear="false" data-hide-search="true">
                                        <option value=""></option>
                                        @foreach($rutas as $ruta)
                                            <option value="{{$ruta->id}}">{{$ruta->ruta}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <!--end::Wrapper-->
                    </div>
                    <!--end::Step 2-->
                    <!--begin::Step 3-->
                    <div data-kt-stepper-element="content">
                        <!--begin::Wrapper-->
                        <div class="w-100">
                            <h2 class="fw-bold text-primary mt-10">Datos encargado</h2>
                            <div class="col-md-4">
                                <label for="identificacion_encargado" class="form-label mb-3 required">Numero de identificación</label>
                                <input type="text" class="form-control form-control-lg" name="identificacion_encargado" id="identificacion_encargado" />
                            </div>
                            <div class="row mb-2">
                                <div class="col-md-4">
                                    <label for="nombre" class="form-label mb-3 required">Nombre(s)</label>
                                    <input type="text" class="form-control form-control-lg" name="nombre_encargado" id="nombre_encargado" />
                                </div>
                                <div class="col-md-4">
                                    <label for="primer_apellido_encargado" class="form-label mb-3 required">Primer apellido</label>
                                    <input type="text" class="form-control form-control-lg" name="primer_apellido_encargado" id="primer_apellido_encargado" />
                                </div>
                                <div class="col-md-4">
                                    <label for="segundo_apellido_encargado" class="form-label mb-3 ">Segundo apellido</label>
                                    <input type="text" class="form-control form-control-lg" name="segundo_apellido_encargado" id="segundo_apellido_encargado" />
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-md-4">
                                    <label class="form-label required" for="tipo_nacionalidad_id_encargado">Nacionalidad</label>
                                    <select name="tipo_nacionalidad_id_encargado" id="tipo_nacionalidad_id_encargado" class="form-select form-select-lg mt-1" data-control="select2" data-placeholder="Seleccione..." data-allow-clear="false" data-hide-search="true">
                                        <option value=""></option>
                                        @foreach($tiposNacionalidades as $tipoNacionalidad)
                                            <option value="{{$tipoNacionalidad->id}}">{{$tipoNacionalidad->tipo_nacionalidad}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="ocupacion" class="form-label mb-3 required">Ocupación</label>
                                    <input type="text" class="form-control form-control-lg" name="ocupacion" id="ocupacion" />
                                </div>
                                <div class="col-md-4">
                                    <label for="lugar_trabajo" class="form-label mb-3 ">Lugar de trabajo</label>
                                    <input type="text" class="form-control form-control-lg" name="lugar_trabajo" id="lugar_trabajo" />
                                </div>
                            </div>
                        </div>
                        <!--end::Wrapper-->
                    </div>
                    <!--end::Step 3-->
                    <!--begin::Step 4-->
                    <div data-kt-stepper-element="content">
                        <!--begin::Wrapper-->
                        <div class="w-100">
                            <!--begin::Heading-->
                            <div class="pb-5 pb-lg-15">
                                <h2 class="fw-bold text-primary">Documentos adjuntos</h2>
                                <div class="text-muted fw-semibold fs-6">Documentación minima para registro</div>
                                <!--end::Notice-->
                            </div>
                            <!--end::Heading-->
                            <div class="row mb-2">
                                <div class="col-md-12">
                                    <label class="form-label required" for="tipo_nacionalidad_id_encargado">Foto perfil</label>
                                    <input type="file" class="form-control form-control-lg" name="archivo[fotoPerfil]" />

                                </div>
                                <div class="col-md-12">
                                    <label class="form-label required" for="tipo_nacionalidad_id_encargado">Cédula frente</label>
                                    <input type="file" class="form-control form-control-lg" name="archivo[cedulaFrente]" />

                                </div>
                                <div class="col-md-12">
                                    <label for="ocupacion" class="form-label mb-3 required">Cédula atras</label>
                                    <input type="file" class="form-control form-control-lg" name="archivo[cedulaAtras]" />
                                </div>
                            </div>
                            <h2 class="fw-bold text-primary my-5">Becas</h2>
                            <div class="row mb-2">
                                @foreach($tiposBecas as $tipoBeca)
                                    <div class="col-lg-4">
                                        <input type="checkbox" class="btn-check" name="beca" value="{{$tipoBeca->id}}"  id="beca_{{$tipoBeca->id}}" />
                                        <label class="btn btn-outline btn-outline-dashed btn-active-light-primary p-7 d-flex align-items-center mb-10" for="beca_{{$tipoBeca->id}}">
                                            <i class="ki-outline ki-badge fs-3x me-5"></i>
                                            <span class="d-block fw-semibold text-start">
                                            <span class="text-dark fw-bold d-block fs-4 mb-2">{{$tipoBeca->tipo_beca}}</span>
                                        </span>
                                        </label>
                                    </div>
                                @endforeach

                            </div>
                        </div>
                        <!--end::Wrapper-->
                    </div>
                    <!--end::Step 4-->

                    <!--begin::Step 5-->
                    <div data-kt-stepper-element="content">
                        <!--begin::Wrapper-->
                        <div class="w-100">
                            <div class="pb-5 pb-lg-15">
                                <h2 class="fw-bold text-primary">Revise todos los datos</h2>
                                <div class="text-muted fw-semibold fs-6">Revise cuidadosamente los datos ingresados</div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-md-12">Nombre completo:
                                    <span id="nombre_vista"></span>
                                </div>
                                <div class="col-md-12">Identificación:
                                    <span id="tipo_identificacion_vista"></span>:
                                    <span id="identificacion_vista"></span>
                                </div>
                                <div class="col-md-12">Sexo:
                                    <span id="sexo_vista"></span>
                                </div>
                                <div class="col-md-12">Nacionalidad:
                                    <span id="nacionalidad_vista"></span>
                                </div>
                                <div class="col-md-12">Fecha nacimiento:
                                    <span id="nacimiento_vista"></span>:
                                    <span id="edad_vista"></span>
                                </div>
                                <div class="col-md-12">Celular:
                                    <span id="celular_vista"></span>
                                </div>
                                <div class="col-md-12">Teléfono:
                                    <span id="telefono_vista"></span>
                                </div>
                                <div class="col-md-12">Correo:
                                    <span id="correo_vista"></span>
                                </div>
                                <div class="col-md-12">Fecha nacimiento:
                                    <span id="direccion_vista"></span>
                                    <span id="ruta_vista"></span>
                                </div>


                                <div class="col-md-12">Nombre completo encargado:
                                    <span id="nombre_encargado_vista"></span>
                                </div>
                                <div class="col-md-12">Identificación:
                                    <span id="identificacion_encargado_vista"></span>
                                </div>
                                <div class="col-md-12">Nacionalidad:
                                    <span id="nacionalidad_encargado_vista"></span>
                                </div>
                                <div class="col-md-12">Ocupación:
                                    <span id="ocupacion_vista"></span>
                                </div>
                                <div class="col-md-12">Lugar de trabajo:
                                    <span id="lugar_trabajo_vista"></span>
                                </div>
                                <div class="col-md-12">Becas:
                                    <span id=becas_vista"></span>
                                </div>

                            </div>

                        </div>
                        <!--end::Wrapper-->
                    </div>
                    <!--end::Step 5-->

                    <!--begin::Step 6-->
                    <div data-kt-stepper-element="content">
                        <!--begin::Wrapper-->
                        <div class="w-100">
                            <!--begin::Heading-->
                            <div class="pb-8 pb-lg-10">
                                <!--begin::Title-->
                                <h2 class="fw-bold text-success">¡Listo!</h2>
                                <!--end::Title-->
                                <!--begin::Notice-->
                                <div class="text-muted fw-semibold fs-6">Estudiante registrado</div>
                                <!--end::Notice-->
                            </div>
                            <!--end::Heading-->
                            <!--begin::Body-->
                            <div class="mb-0">
                                <!--begin::Text-->
                                <div class="fs-6 text-gray-600 mb-5">Se ha enviado un correo al estudiante con los datos de acceso a su cuenta.</div>
                                <!--end::Text-->
                                <!--begin::Alert-->
                                <!--begin::Notice-->
                                <div class="notice d-flex bg-light-warning rounded border-warning border border-dashed p-6">
                                    <!--begin::Icon-->
                                    <i class="ki-outline ki-information fs-2tx text-warning me-4"></i>
                                    <!--end::Icon-->
                                    <!--begin::Wrapper-->
                                    <div class="d-flex flex-stack flex-grow-1">
                                        <!--begin::Content-->
                                        <div class="fw-semibold">
                                            <h4 class="text-gray-900 fw-bold">Atención</h4>
                                            <div class="fs-6 text-gray-700">Este proceso no ha generado ninguna matricula solamente se ha registrado el estudiante.
                                                <a target="_blank" href="{{route("admin::matricula.nueva")}}" class="fw-bold">Para crear matrícula acceda aquí.</a></div>
                                        </div>
                                        <!--end::Content-->
                                    </div>
                                    <!--end::Wrapper-->
                                </div>
                                <!--end::Notice-->
                                <!--end::Alert-->
                            </div>
                            <!--end::Body-->
                        </div>
                        <!--end::Wrapper-->
                    </div>
                    <!--end::Step 6-->
                    <!--begin::Actions-->
                    <div class="d-flex flex-stack pt-10">
                        <!--begin::Wrapper-->
                        <div class="mr-2">
                            <button type="button" class="btn btn-lg btn-light-primary me-3"  id="previous" data-kt-stepper-action="previous">
                                <i class="ki-outline ki-arrow-left fs-4 me-1"></i>Atras
                            </button>
                        </div>
                        <div>
                            <button type="button" class="btn btn-lg btn-primary me-3" data-kt-stepper-action="submit">
                                <span class="indicator-label">Registrar
                                    <i class="ki-outline ki-arrow-right fs-3 ms-2 me-0"></i>
                                </span>
                                <span class="indicator-progress">Por favor espere...
                                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
                                </span>
                            </button>
                            <button type="button" class="btn btn-lg btn-primary" data-kt-stepper-action="next">Continuar
                                <i class="ki-outline ki-arrow-right fs-4 ms-1 me-0"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section("scripts")
    <script>
        $(document).ready(function() {
            $(document).on("blur", "#identificacion", function() {
                let identificacion = $(this).val();
                let campo = $(this);
                let tipo_identificacion_id = $("#tipo_identificacion_id").val();
                $('#error_cedula').hide();
                if(tipo_identificacion_id==1 && identificacion!=""){
                    campo.attr('disabled', true);
                    $('button').attr('disabled', true);
                    $('#loader_cedula').show();

                    let url = "{{ route('admin::estudiante.buscar.cedula',':cedula') }}";
                    url = url.replace(':cedula', identificacion);
                    let ajax=$.ajax({
                        type: "GET",
                        url: url,
                        dataType: "json",
                    })
                    ajax.done(function(response) {
                        $("#nombre").val(response.nombre);
                        $("#primer_apellido").val(response.primer_apellido);
                        $("#segundo_apellido").val(response.segundo_apellido);
                        $("#nacimiento").val(response.nacimiento);
                        $("#edad").val(response.edad);

                        $("#nombre_encargado").val(response.nombres_madre);
                        $("#primer_apellido_encargado").val(response.primer_apellido_madre);
                        $("#segundo_apellido_encargado").val(response.segundo_apellido_madre);

                        if (response.nacionalidad) {
                            $("#tipo_nacionalidad_id option").each(function() {
                                if ($(this).text().toLowerCase() === response.nacionalidad.toLowerCase()) {
                                    $(this).prop("selected", true).trigger("change");

                                }
                            });
                        }
                    });
                    ajax.fail(function(xhr, status, error) {
                        console.error(xhr, status, error);
                        $('#error_cedula').show();

                    });
                    ajax.always(function(xhr, status, error) {
                        campo.attr('disabled', false);
                        $('button').attr('disabled', false);
                        $('#loader_cedula').hide(); // Oculta el cargador
                    });

                }
            });
        });


        //form validatio y wizard
        "use strict";
        let KTCreateAccount = function() {
            let e, t, i, o, a, r, s = [];
            let finish=5;
            return {
                init: function() {
                    (e = document.querySelector("#kt_modal_create_account")) && new bootstrap.Modal(e),
                    (t = document.querySelector("#kt_create_account_stepper")) && (i = t.querySelector("#kt_create_account_form"),
                        o = t.querySelector('[data-kt-stepper-action="submit"]'), a = t.querySelector('[data-kt-stepper-action="next"]'),
                        (r = new KTStepper(t)).on("kt.stepper.changed", (function(e) {
                            finish === r.getCurrentStepIndex() ? (o.classList.remove("d-none"),
                                o.classList.add("d-inline-block"),
                                a.classList.add("d-none")) : finish+1=== r.getCurrentStepIndex() ? (o.classList.add("d-none"),
                                a.classList.add("d-none")) : (o.classList.remove("d-inline-block"), o.classList.remove("d-none"),
                                a.classList.remove("d-none"))
                        })), r.on("kt.stepper.next", (function(e) {
                        console.log("stepper.next");
                        var t = s[e.getCurrentStepIndex() - 1];
                        t ? t.validate().then((function(t) {
                            console.log("validated!"), "Valid" == t ? (e.goNext(), KTUtil.scrollTop()) : Swal.fire({
                                text: "Campos con error, el formulario presenta errores, por favor revise los campos",
                                icon: "error",
                                buttonsStyling: !1,
                                confirmButtonText: "Ok, revisar",
                                customClass: {
                                    confirmButton: "btn btn-light"
                                }
                            }).then((function() {
                                KTUtil.scrollTop()
                            }))
                        })) : (e.goNext(), KTUtil.scrollTop())

                        //atras
                    })), r.on("kt.stepper.previous", (function(e) {
                        console.log("stepper.previous"), e.goPrevious(), KTUtil.scrollTop()
                    })), r.on("kt.stepper.submit", (function(e) {
                        alert()

                        //validaciones
                    })), s.push(FormValidation.formValidation(i, {
                        fields: {


                        },
                        plugins: {
                            trigger: new FormValidation.plugins.Trigger,
                            bootstrap: new FormValidation.plugins.Bootstrap5({
                                rowSelector: ".fv-row",
                                eleInvalidClass: "",
                                eleValidClass: ""
                            })
                        }
                    })), s.push(FormValidation.formValidation(i, {
                        fields: {
                            account_team_size: {
                                validators: {
                                    notEmpty: {
                                        message: "Time size is required"
                                    }
                                }
                            },
                            account_name: {
                                validators: {
                                    notEmpty: {
                                        message: "Account name is required"
                                    }
                                }
                            },
                            account_plan: {
                                validators: {
                                    notEmpty: {
                                        message: "Account plan is required"
                                    }
                                }
                            }
                        },
                        plugins: {
                            trigger: new FormValidation.plugins.Trigger,
                            bootstrap: new FormValidation.plugins.Bootstrap5({
                                rowSelector: ".fv-row",
                                eleInvalidClass: "",
                                eleValidClass: ""
                            })
                        }
                    })), s.push(FormValidation.formValidation(i, {
                        fields: {
                            business_name: {
                                validators: {
                                    notEmpty: {
                                        message: "Busines name is required"
                                    }
                                }
                            },
                            business_descriptor: {
                                validators: {
                                    notEmpty: {
                                        message: "Busines descriptor is required"
                                    }
                                }
                            },
                            business_type: {
                                validators: {
                                    notEmpty: {
                                        message: "Busines type is required"
                                    }
                                }
                            },
                            business_email: {
                                validators: {
                                    notEmpty: {
                                        message: "Busines email is required"
                                    },
                                    emailAddress: {
                                        message: "The value is not a valid email address"
                                    }
                                }
                            }
                        },
                        plugins: {
                            trigger: new FormValidation.plugins.Trigger,
                            bootstrap: new FormValidation.plugins.Bootstrap5({
                                rowSelector: ".fv-row",
                                eleInvalidClass: "",
                                eleValidClass: ""
                            })
                        }
                    })), s.push(FormValidation.formValidation(i, {
                        fields: {
                            card_name: {
                                validators: {
                                    notEmpty: {
                                        message: "Name on card is required"
                                    }
                                }
                            },
                            card_number: {
                                validators: {
                                    notEmpty: {
                                        message: "Card member is required"
                                    },
                                    creditCard: {
                                        message: "Card number is not valid"
                                    }
                                }
                            },
                            card_expiry_month: {
                                validators: {
                                    notEmpty: {
                                        message: "Month is required"
                                    }
                                }
                            },
                            card_expiry_year: {
                                validators: {
                                    notEmpty: {
                                        message: "Year is required"
                                    }
                                }
                            },
                            card_cvv: {
                                validators: {
                                    notEmpty: {
                                        message: "CVV is required"
                                    },
                                    digits: {
                                        message: "CVV must contain only digits"
                                    },
                                    stringLength: {
                                        min: 3,
                                        max: 4,
                                        message: "CVV must contain 3 to 4 digits only"
                                    }
                                }
                            }
                        },
                        plugins: {
                            trigger: new FormValidation.plugins.Trigger,
                            bootstrap: new FormValidation.plugins.Bootstrap5({
                                rowSelector: ".fv-row",
                                eleInvalidClass: "",
                                eleValidClass: ""
                            })
                        }
                    })), o.addEventListener("click", (function(e) {
                        s[3].validate().then((function(t) {
                            console.log("validated!"),
                                "Valid" == t ? (e.preventDefault(),
                                    $("#previous").hide(),
                                    o.disabled = !0,
                                    o.setAttribute("data-kt-indicator", "on"),
                                    setTimeout((function() {
                                        o.removeAttribute("data-kt-indicator"), o.disabled = !1, r.goNext()
                                    }), 2e3)) : Swal.fire({
                                    text: "Campos con error, el formulario presenta errores, por favor revise los campos",
                                    icon: "error",
                                    buttonsStyling: !1,
                                    confirmButtonText: "Ok. revisar",
                                    customClass: {
                                        confirmButton: "btn btn-light"
                                    }
                                }).then((function() {
                                    KTUtil.scrollTop()
                                }))
                        }))

                        //revalidar al cambiar
                    })), $(i.querySelector('[name="card_expiry_month"]')).on("change", (function() {
                        s[3].revalidateField("card_expiry_month")
                    })));
                }
            }
        }();
        KTUtil.onDOMContentLoaded((function() {
            KTCreateAccount.init()
        }));
    </script>
@endsection