{% extends 'base.html.twig' %}

{% block title %}Fila index{% endblock %}

{% block body %}

    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark"><i class="fas fa-users"></i>&nbsp;Filas</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                <!--
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Starter Page</li>
                    </ol>-->
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>

    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="card card-warning" style="width:100%">
                    <div class="card-header">
                        <h3 class="card-title">Listado reservas</h3>
                        <button type="button" class="btn btn-success float-right" data-toggle="modal" data-target="#sobrecupoModal">
                            <i class="fas fa-plus"></i> Ingresar Sobrecupo
                        </button>
                    </div>
                    <div class="card-body">

                        <!-- Modal para Sobrecupo -->
<div class="modal fade" id="sobrecupoModal" tabindex="-1" role="dialog" aria-labelledby="sobrecupoModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="sobrecupoModalLabel">Ingresar Sobrecupo</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="post" action="{{ path('index-reservas', {'fila': fila.id}) }}" id="sobrecupoForm">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="rut">RUT (Ej: 12345678-5)</label>
                        <input type="text" class="form-control" id="rut" name="rut" 
                               pattern="^(\d{1,3}(?:\.?\d{3}){2}-[\dkK])$" 
                               title="Ingrese un RUT válido (Ej: 12345678-5)" required>
                        <small class="form-text text-muted">Formato: 12345678-5</small>
                    </div>
                    <div class="form-group">
                        <label for="nombre">Nombre</label>
                        <input type="text" class="form-control" id="nombre" name="nombre" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" class="form-control" id="email" name="email" 
                               pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$" 
                               title="Ingrese un email válido (Ej: usuario@dominio.cl)" required>
                    </div>
                    <div class="form-group">
                        <label for="hora_reserva">Hora Reserva</label>
                        <input type="datetime-local" class="form-control" id="hora_reserva" name="hora_reserva" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>

                        <form action="#" method="post">
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">Fecha desde</label>
                                <div class="col-sm-10">
                                    <input type="date" name="fecha_desde" value="{{ fecha_desde }}" id="fecha_desde">
                                </div>
                            </div>
                            <div class="form-group row">
                                <label class="col-sm-2 col-form-label">Fecha hasta</label>
                                <div class="col-sm-10">
                                    <input type="date" name="fecha_hasta" value="{{ fecha_hasta }}" id="fecha_hasta">
                                </div>
                            </div>

                            <div class="form-group row">
                                <div class="col-sm-2"></div>
                                <div class="col-sm-10">
                                    <button style="submit" class="btn btn-primary">Filtrar</button>
                                </div>
                            </div>
                        </form>

                        <table id="tbl_fila" class="table">
                            <thead>
                                <tr>
                                    <th>Hora<br>reserva</th>
                                    <th>Hora<br>creación</th>
                                    <th>Hora<br>cancelación</th>
                                    <th>Status</th>
                                    <th>Rut</th>
                                    <th>Nombre</th>
                                    <th>Apellido</th>
                                    <th>Email</th>
                                    <th>Celular</th>
                                    <th>Código</th>
                                    <th style="width:210px"> </th>
                                </tr>
                            </thead>
                            <tbody>
                            {% for reserva in reservas %}
                                <tr>
                                    <td><b>{{ reserva.horaReserva|date("d/M/Y H:i:s","America/Santiago") }}</b></td>
                                    <td>{{ reserva.horaCreacion|date("d/M/Y H:i:s","America/Santiago") }}</td>
                                    <td>
                                        {% if reserva.horaCancelacion is not null %}
                                            {{ reserva.horaCancelacion|date("d/M/Y H:i:s","America/Santiago") }}
                                        {%  endif  %}
                                    </td>
                                    <td  {% if reserva.horaCancelacion is not null %} style="color:#fe5235"{%  endif  %} >
                                        {% if reserva.horaCancelacion is not null %}
                                            Cancelada
                                        {%  else  %}
                                            {% if reserva.statusAtencion == 0 %}
                                                Ingresada
                                            {%  endif  %}
                                            {% if reserva.statusAtencion == 2 %}
                                                Atendida
                                            {%  endif  %}
                                        {%  endif  %}
                                    </td>
                                    <td>{{reserva.identificadorcliente}}</td>
                                    <td>{{reserva.nombres}}</td>
                                    <td>{{reserva.apellidos}}</td>
                                    <td>{{reserva.email}}</td>
                                    <td> {% if reserva.celular is defined %} {{reserva.celular}} {% endif %}</td>
                                    <td>{{reserva.codigo}}</td>
                                    <td>                 
                                        <form class="btn btn-danger" method="post" action="{{ path('reserva_delete', {'id': reserva.id}) }}" onsubmit="return confirm('¿Realmente desea eliminar este registro?');">
                                            <input type="hidden" name="_method" value="DELETE">
                                            <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ reserva.id) }}">
                                            <button class="btn {% if reserva.horaCancelacion is not null %} btn_secondary {% endif %}" {% if reserva.horaCancelacion is not null %} disabled {% endif %}>Cancelar</button>
                                        </form> 
                                    </td>
                                </tr>
                            {% else %}
                                <tr>
                                    <td colspan="8">no records found</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>

    $(document).ready(function() {
    // Validación personalizada para RUT chileno
    $('#rut').on('input', function() {
        var rut = $(this).val().trim();
        if(rut !== '') {
            if(!validarRUT(rut)) {
                this.setCustomValidity('RUT inválido. Formato: 12345678-5');
            } else {
                this.setCustomValidity('');
            }
        }
    });

    // Función para validar RUT chileno
    function validarRUT(rut) {
        // Patrón de validación básico
        if(!/^(\d{1,3}(?:\.?\d{3}){2}-[\dkK])$/.test(rut)) return false;
        
        // Limpiar RUT
        rut = rut.replace(/[.-]/g, '');
        var cuerpo = rut.slice(0, -1);
        var dv = rut.slice(-1).toUpperCase();
        
        // Calcular DV esperado
        var suma = 0;
        var multiplo = 2;
        
        for(var i=cuerpo.length-1; i>=0; i--) {
            suma += parseInt(cuerpo.charAt(i)) * multiplo;
            multiplo = multiplo === 7 ? 2 : multiplo + 1;
        }
        
        var dvEsperado = 11 - (suma % 11);
        dvEsperado = dvEsperado === 11 ? '0' : dvEsperado === 10 ? 'K' : dvEsperado.toString();
        
        return dv === dvEsperado;
    }

    // Validación del formulario antes de enviar
    $('#sobrecupoForm').on('submit', function(e) {
        // Validar RUT nuevamente por si acaso
        if(!validarRUT($('#rut').val())) {
            e.preventDefault();
            alert('Por favor ingrese un RUT válido');
            return false;
        }
        
        // La validación de email se hace automáticamente con type="email" y pattern
        return true;
    });
});

    $(function () {
        $("#tbl_fila").DataTable({
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ],
            initComplete: function () {
                this.api().columns().every( function (i) {
                    if(i==3){
                        var column = this;

                        var select = $('<select><option value=""></option></select>')
                            .appendTo( $(column.header()).empty() )
                            .on( 'change', function () {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );

                                column
                                    .search( val ? '^'+val+'$' : '', true, false )
                                    .draw();
                            } );

                        column.data().unique().sort().each( function ( d, j ) {
                            select.append( '<option value="'+d+'">'+d+'</option>' )
                        } );
                    }} );
            }
        });
    });
    </script>

{% endblock %}