@extends('layouts.app')

@section('content')

<div id="main_content" class="container card p-5 rounded-4 border-0">
    <div class="d-flex justify-content-center justify-content-sm-between flex-wrap flex-md-row flex-column align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Personas Afiliadas</h1>
        <div class="btn-toolbar mb-2 mb-md-0 gap-2 justify-content-center">
            <button type="button" id="crear-afiliado-button" class="btn btn-primary" data-bs-toggle="modal" href="#modalCrearAfiliado" role="button">
                <i class="bi bi-person-fill-add fs-5 me-2"></i> 
                Registrar Afiliación
            </button>
        </div>
    </div>

    <div class="row">
        <div class="col">
            <div class="table-responsive">
                <table id="afiliados_table" class="table display">
                    <thead>
                        <tr>
                            <th># afiliación</th>
                            <th>Cédula</th>
                            <th>Nombre</th>
                            <th>Apellido</th>
                            <th>Fecha de Ingreso</th>
                            <th>Estatus</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>--</td>
                            <td>--</td>
                            <td>--</td>
                            <td>--</td>
                            <td>--</td>
                            <td>--</td>
                            <td>--</td>
                        </tr>
                        <tr>
                            <td>--</td>
                            <td>--</td>
                            <td>--</td>
                            <td>--</td>
                            <td>--</td>
                            <td>--</td>
                            <td>--</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>


@include('afiliados.modal_ver_afiliado')
@include('afiliados.modal_crear_afiliado')

@vite([
    'resources/js/personas/registrar_persona.js',
])


<x-alertPlaceholder></x-alertPlaceholder>

<x-spinner></x-spinner>

@endsection