@extends('layouts.app')

@section('title', 'Inicio')

@section('content')
    <x-mainCard>
        <x-slot:title>Inicio</x-slot>

        <div class="row">
            <div class="col-12">
                <h4>Consultar datos del afiliado</h4>
            </div>
        </div>
    
        <form id="form-buscar-persona" action="" novalidate>
            @csrf
            <div class="row mb-4">
                <div class="col-12">
                    <div id="input-group-cedula" class="input-group">
                        <div class="form-floating">
                            <input id="cedula" type="text" class="form-control" name="cedula" required autocomplete="off" placeholder="Número de cédula" minlength="5" maxlength="8">
                            <label for="cedula">
                                Cédula de identidad
                                <b class="text-danger required-input-indicator">*</b>
                            </label>
                        </div>
                        <button id="boton_buscar_persona" type="submit" class="btn btn-primary" title="Buscar">
                            <span class="spinner-border spinner-border-sm me-2 d-none" role="status" aria-hidden="true"></span>
                            <i class="bi bi-search me-2"></i>
                            <span class="d-none d-sm-inline">Buscar persona afiliada</span>
                        </button>
                    </div>
                    <span id="cedula-invalid-feedback" class="invalid-feedback" role="alert">
                        <strong>Cédula no válida</strong>
                    </span>
                </div>
            </div>
        </form>
    
    </x-mainCard>

    @include('afiliados.modal_ver_afiliado')
    @vite([
        'resources/js/personas/consultar_datos_persona.js', 
    ])
    @include('layouts.includes.modal_test')
@endsection

@push('scripts')
   <script>
        document.querySelector('.h2').addEventListener('click', async function () {
            // Prueba de fetch con axios
            let response = null;
            try {
                response = await axios.get('/usuarios');
            } catch (error) {
                handleFetchError(error);
            }

            if ( response && response.status === 200 ) {
                // Manejar la respuesta exitosa
                console.log(response.data);
            }

            // Manejar algo adicional en la respuesta fallida, como un debug o algo


        });
   </script>
@endpush