{% extends 'index.html' %}
{% block titulo %}
    Formulario de Gestores
{% endblock %}
{% block contenido %}
    <div class="row">
        <div class="col-xl-12 col-md-12">
            <div class="card card-shadow mb-4">
                <div class="card-header border-0">
                    <div class="custom-title-wrap bar-warning">
                        <div class="custom-title">Formulario de Gestores</div>
                    </div>
                </div>
                <div class="card-body">
                    <form action="" method="post">
                        {% csrf_token %}
                        {% if gestor %}
                            <input type="hidden" name="id" value="{{ gestor.id }}">
                        {% endif %}
                        <div class="row">
                            <div class="col-4">
                                <div class="input-group input-group-sm mb-2">
                                    <div class="input-group-prepend">
                                    <span class="input-group-text" id="inputGroup-sizing-sm"><i
                                            class="fa fa-id-card"></i></span>
                                    </div>
                                    <input type="number" name="cedula" required="required"
                                           class="form-control" aria-label="Small"
                                            {% if gestor %}
                                                value="{{ gestor.cedula }}"
                                            {% endif %}
                                           placeholder="Ingrese Número de Cedula"
                                           aria-describedby="inputGroup-sizing-sm">
                                </div>
                            </div>
                            <div class="col-8">
                            </div>
                            <div class="col-6">

                                <div class="input-group input-group-sm mb-2">
                                    <div class="input-group-prepend">
                                    <span class="input-group-text" id="inputGroup-sizing-sm"><i
                                            class="fa fa-user"></i></span>
                                    </div>
                                    <input type="text" name="nombres" required="required"
                                           class="form-control" aria-label="Small"
                                           {% if gestor %}
                                                value="{{ gestor.nombres }}"
                                            {% endif %}
                                           placeholder="Ingrese Nombres"
                                           aria-describedby="inputGroup-sizing-sm">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="input-group input-group-sm mb-2">
                                    <div class="input-group-prepend">
                                    <span class="input-group-text" id="inputGroup-sizing-sm"><i
                                            class="fa fa-user"></i></span>
                                    </div>
                                    <input type="text" name="apellidos" required="required"
                                           class="form-control" aria-label="Small"
                                           placeholder="Ingrese Apellidos"
                                           {% if gestor %}
                                                value="{{ gestor.apellidos }}"
                                            {% endif %}
                                           aria-describedby="inputGroup-sizing-sm">
                                </div>

                            </div>
                            <div class="col-12">
                                <div class="input-group input-group-sm mb-2">
                                    <div class="input-group-prepend">
                                    <span class="input-group-text" id="inputGroup-sizing-sm"><i
                                            class="fa fa-user"></i></span>
                                    </div>
                                    <input type="text" name="concesionario" required="required"
                                           class="form-control" aria-label="Small"
                                           placeholder="Ingrese Nombre del Concesionario"
                                           {% if gestor %}
                                                value="{{ gestor.concesionario }}"
                                            {% endif %}
                                           aria-describedby="inputGroup-sizing-sm">
                                </div>

                            </div>
                            <div class="col-6">
                                <div class="input-group input-group-sm mb-2">
                                    <div class="input-group-prepend">
                                    <span class="input-group-text" id="inputGroup-sizing-sm"><i
                                            class="fa fa-id-card"></i></span>
                                    </div>
                                    <input type="number" name="ruc" required="required"
                                           class="form-control" aria-label="Small"
                                           placeholder="Ingrese RUC de la empresa"
                                           {% if gestor %}
                                                value="{{ gestor.ruc_empresa }}"
                                            {% endif %}
                                           aria-describedby="inputGroup-sizing-sm">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="input-group input-group-sm mb-2">
                                    <div class="input-group-prepend">
                                    <span class="input-group-text" id="inputGroup-sizing-sm"><i
                                            class="fa fa-map-pin"></i></span>
                                    </div>
                                    <input type="text" name="canton" required="required"
                                           class="form-control" aria-label="Small"
                                           placeholder="Ingrese Apellidos"
                                            {% if gestor %}
                                                value="{{ gestor.canton }}"
                                            {% else %}
                                                value="EL GUABO"
                                            {% endif %}

                                           aria-describedby="inputGroup-sizing-sm">
                                </div>
                            </div>
                            <div class="col-6">
                                <label for="" class="text-danger">Fecha de Emisión</label>
                                <div class="input-group input-group-sm mb-2">
                                    <div class="input-group-prepend">
                                    <span class="input-group-text" id="inputGroup-sizing-sm"><i
                                            class="fa fa-table"></i></span>
                                    </div>
                                    <input type="date" name="f1" required="required"
                                           class="form-control" aria-label="Small"
                                            {% if gestor %}
                                                value="{{ gestor.fecha_emision }}"
                                            {% endif %}
                                           aria-describedby="inputGroup-sizing-sm">
                                </div>

                            </div>
                            <div class="col-6">
                                <label for="" class="text-danger">Fecha de Caducidad</label>
                                <div class="input-group input-group-sm mb-2">
                                    <div class="input-group-prepend">
                                    <span class="input-group-text" id="inputGroup-sizing-sm"><i
                                            class="fa fa-table"></i></span>
                                    </div>
                                    <input type="date" name="f2" required="required"
                                           class="form-control" aria-label="Small"
                                            {% if gestor %}
                                                value="{{ gestor.fecha_caducidad }}"
                                            {% endif %}
                                           aria-describedby="inputGroup-sizing-sm">
                                </div>
                            </div>
                            <div class="col-6">
                                </div>
                            <div class="col-3">
                                {% if gestor %}
                                    <a href="{% url 'gestores' %}?id={{ gestor.id }}" target="_blank" class="btn btn-success" style="width: 100%; color: white"><i class="fa fa-print"></i> Imprimir</a>
                                {% endif %}
                            </div>
                            <div class="col-3">
                                <button class="btn btn-danger" style="width: 100%"><i class="fa fa-save"></i> Registrar Datos</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-12 col-md-12">
            <div class="card card-shadow mb-4">
                <div class="card-header border-0">
                    <div class="custom-title-wrap bar-warning">
                        <div class="custom-title">Registro de Gestores</div>
                    </div>
                </div>
                <div class="card-body">
                    <table id="tabla" class="table table-bordered table-striped">
                        <thead class="alert alert-dark">
                        <th>Id</th>
                        <th>Fecha Emisión</th>
                        <th>Fecha de Caducidad</th>
                        <th>Nombres</th>
                        </thead>
                        <tbody>
                            {% for gest in gestores %}
                             <tr>
                                <td>{{ gest.id }}</td>
                                <td>{{ gest.fecha_emision }}</td>
                                <td>{{ gest.fecha_caducidad }}</td>
                                <td>{{ gest.nombres }} {{ gest.apellidos }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block script %}
    <script>
    $("#tabla").DataTable()
    </script>
{% endblock %}