@extends('layouts.main')

@section('content')
<div class="container">
    <h3>Formulario de Ejemplo</h3>
    @if(session('success'))
        <div class="alert alert-success">{{ session('success') }}</div>
    @endif
    <form id="templateForm" method="POST" action="{{ route('template.store') }}">
        @csrf
        <div class="row">
            <div class="col-md-4">
                <label>Correlativo de segmento</label>
                <input type="text" class="form-control" name="correlativo_segmento" id="correlativo_segmento" required>
            </div>
            <div class="col-md-4">
                <label>Fecha de coordinación</label>
                <input type="date" class="form-control" name="fecha_coordinacion" id="fecha_coordinacion" required>
            </div>
            <div class="col-md-2">
                <label>Hora de inicio</label>
                <input type="time" class="form-control" name="hora_inicio" id="hora_inicio">
            </div>
            <div class="col-md-2">
                <label>Hora de finalización</label>
                <input type="time" class="form-control" name="hora_finalizacion" id="hora_finalizacion">
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-md-6">
                <label>Nombre de supervisor</label>
                <input type="text" class="form-control" name="nombre_supervisor" id="nombre_supervisor">
            </div>
            <div class="col-md-6">
                <label>Equipo de trabajo</label>
                <input type="text" class="form-control" name="equipo_trabajo" id="equipo_trabajo">
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-md-4">
                <label>Región de Salud</label>
                <input type="text" class="form-control" name="region_salud" id="region_salud">
            </div>
            <div class="col-md-4">
                <label>Departamento</label>
                <input type="text" class="form-control" name="departamento" id="departamento">
            </div>
            <div class="col-md-4">
                <label>Municipio</label>
                <input type="text" class="form-control" name="municipio" id="municipio">
            </div>
        </div>

        <div class="row mt-3">
            <div class="col-md-3">
                <label>Distrito</label>
                <input type="text" class="form-control" name="distrito" id="distrito">
            </div>
            <div class="col-md-3">
                <label>Área</label>
                <select class="form-control" name="area" id="area">
                    <option value="">Seleccione...</option>
                    <option value="Urbano">Urbano</option>
                    <option value="Rural">Rural</option>
                </select>
            </div>
            <div class="col-md-6">
                <label>Cantón</label>
                <input type="text" class="form-control" name="canton" id="canton">
            </div>
        </div>

        <div class="mt-4">
            <button type="submit" class="btn btn-primary">Guardar</button>
            <button type="button" id="clearForm" class="btn btn-danger">Borrar datos guardados</button>
        </div>
    </form>
    <hr>
    <h4>Formularios Guardados Offline</h4>
    <div id="offlineFormsContainer" class="mt-3"></div>
</div>
@endsection

@section('scripts')
    @vite(['resources/js/app.js'])
    <script src="{{ asset('js/offlineForms.js') }}"></script>
    <script>
    document.addEventListener('DOMContentLoaded', () => {
        const formElement = document.getElementById('templateForm');
	const formId = 'offlineFormTemplate'; // si usas ese hidden
        const containerId = 'offlineFormsContainer';

        // Llama a la función global expuesta por offlineForms.js
        initOfflineForm({
            formId: formId,
            formElement: formElement,
            containerId: containerId,
            maxForms: 5,
            onLoadCallback: (data) => {
                // Extra: ya se rellena dentro, esto es por si quieres hacer algo adicional
                console.log('Cargado desde offline:', data);
            },
            onDeleteCallback: (idx) => {
                console.log('Eliminado offline idx:', idx);
            }
        });
    });
    </script>
@endsection