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

{% block searchform_container %}{% endblock %}

{% if gasto %}
    {% set titulo = 'Editar gasto' %}
    {% set accion = path('gastos_editar', {'id': gasto.id}) %}
{% else %}
    {% set titulo = 'Nuevo gasto' %}
    {% set accion = path('gastos_nuevo') %}
{% endif %}

{% block title %}
    {{ titulo }}
{% endblock %}

{% block body %}

<div class="box box-primary">

    <div class="box-header with-border">

        <h3 class="box-title">
            <i class="fa fa-money"></i>
            {{ titulo }}
        </h3>

    </div>

    <form method="post" action="{{ accion }}">

        <div class="box-body">

            {% for message in app.flashes('error') %}

                <div class="alert alert-danger">

                    <button
                        type="button"
                        class="close"
                        data-dismiss="alert"
                    >
                        &times;
                    </button>

                    <i class="fa fa-warning"></i>

                    {{ message }}

                </div>

            {% endfor %}

            <div class="row">

                <div class="col-md-4">

                    <div class="form-group">

                        <label for="fecha">
                            Fecha
                            <span class="text-red">*</span>
                        </label>

                        <input
                            type="date"
                            name="fecha"
                            id="fecha"
                            class="form-control"
                            required
                            value="{% if gasto %}{{ gasto.fecha|date('Y-m-d') }}{% else %}{{ 'now'|date('Y-m-d') }}{% endif %}"
                        >

                    </div>

                </div>

                <div class="col-md-8">

                    <div class="form-group">

                        <label for="categoria_id">
                            Categoría
                            <span class="text-red">*</span>
                        </label>

                        <div class="input-group">

                            <select
                                name="categoria_id"
                                id="categoria_id"
                                class="form-control"
                                required
                            >

                                <option value="">
                                    Seleccione una categoría
                                </option>

                                {% for categoria in categorias %}

                                    <option
                                        value="{{ categoria.id }}"
                                        {% if gasto and gasto.categoria and gasto.categoria.id == categoria.id %}
                                            selected
                                        {% endif %}
                                    >
                                        {{ categoria.nombre }}
                                    </option>

                                {% endfor %}

                            </select>

                            <span class="input-group-btn">

                                <button
                                    type="button"
                                    class="btn btn-success"
                                    data-toggle="modal"
                                    data-target="#modalNuevaCategoria"
                                    title="Crear nueva categoría"
                                >
                                    <i class="fa fa-plus"></i>
                                </button>

                            </span>

                        </div>

                    </div>

                </div>

            </div>

            <div class="form-group">

                <label for="descripcion">
                    Descripción
                    <span class="text-red">*</span>
                </label>

                <input
                    type="text"
                    name="descripcion"
                    id="descripcion"
                    class="form-control"
                    maxlength="255"
                    required
                    value="{{ gasto ? gasto.descripcion : '' }}"
                    placeholder="Ejemplo: Pago de arriendo del local"
                >

            </div>

            <div class="row">

                <div class="col-md-4">

                    <div class="form-group">

                        <label for="valor">
                            Valor
                            <span class="text-red">*</span>
                        </label>

                        <div class="input-group">

                            <span class="input-group-addon">
                                $
                            </span>

                            <input
                                type="number"
                                name="valor"
                                id="valor"
                                class="form-control"
                                min="0"
                                step="0.01"
                                required
                                value="{{ gasto ? gasto.valor : '' }}"
                                placeholder="0.00"
                            >

                        </div>

                    </div>

                </div>

            </div>

            <div class="form-group">

                <label for="observacion">
                    Observación
                </label>

                <textarea
                    name="observacion"
                    id="observacion"
                    class="form-control"
                    rows="4"
                    placeholder="Observación opcional"
                >{{ gasto ? gasto.observacion : '' }}</textarea>

            </div>

        </div>

        <div class="box-footer">

            <a
                href="{{ path('gastos_index') }}"
                class="btn btn-default"
            >
                <i class="fa fa-arrow-left"></i>
                Cancelar
            </a>

            <button
                type="submit"
                class="btn btn-primary"
            >
                <i class="fa fa-save"></i>
                Guardar
            </button>

        </div>

    </form>

</div>


<!-- ========================================================= -->
<!-- MODAL NUEVA CATEGORÍA -->
<!-- ========================================================= -->

<div
    class="modal fade"
    id="modalNuevaCategoria"
    tabindex="-1"
    role="dialog"
    aria-labelledby="modalNuevaCategoriaLabel"
>

    <div class="modal-dialog" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <button
                    type="button"
                    class="close"
                    data-dismiss="modal"
                    aria-label="Cerrar"
                >
                    <span aria-hidden="true">
                        &times;
                    </span>
                </button>

                <h4
                    class="modal-title"
                    id="modalNuevaCategoriaLabel"
                >
                    <i class="fa fa-folder"></i>
                    Nueva categoría
                </h4>

            </div>

            <div class="modal-body">

                <div
                    id="errorNuevaCategoria"
                    class="alert alert-danger"
                    style="display:none;"
                >
                </div>

                <div class="form-group">

                    <label for="nombreNuevaCategoria">
                        Nombre de la categoría
                        <span class="text-red">*</span>
                    </label>

                    <input
                        type="text"
                        id="nombreNuevaCategoria"
                        class="form-control"
                        maxlength="100"
                        placeholder="Ejemplo: Arriendo"
                        autocomplete="off"
                    >

                </div>

            </div>

            <div class="modal-footer">

                <button
                    type="button"
                    class="btn btn-default"
                    data-dismiss="modal"
                >
                    Cancelar
                </button>

                <button
                    type="button"
                    class="btn btn-success"
                    id="btnGuardarCategoria"
                >
                    <i class="fa fa-save"></i>
                    Guardar categoría
                </button>

            </div>

        </div>

    </div>

</div>


<script>

$(document).ready(function () {


    /*
     * =========================================================
     * ABRIR MODAL
     * =========================================================
     */

    $('#modalNuevaCategoria').on('shown.bs.modal', function () {

        $('#nombreNuevaCategoria').focus();

    });


    /*
     * =========================================================
     * LIMPIAR MODAL AL CERRAR
     * =========================================================
     */

    $('#modalNuevaCategoria').on('hidden.bs.modal', function () {

        $('#nombreNuevaCategoria').val('');

        $('#errorNuevaCategoria')
            .hide()
            .html('');

        $('#btnGuardarCategoria')
            .prop('disabled', false)
            .html(
                '<i class="fa fa-save"></i> Guardar categoría'
            );

    });


    /*
     * =========================================================
     * GUARDAR CATEGORÍA
     * =========================================================
     */

    $('#btnGuardarCategoria').on('click', function () {

        var boton = $(this);

        var nombre = $.trim(
            $('#nombreNuevaCategoria').val()
        );


        /*
         * Validar nombre
         */

        if (nombre === '') {

            $('#errorNuevaCategoria')
                .html(
                    '<i class="fa fa-warning"></i> ' +
                    'Ingrese el nombre de la categoría.'
                )
                .show();

            $('#nombreNuevaCategoria').focus();

            return;
        }


        /*
         * Deshabilitar botón mientras se guarda
         */

        boton
            .prop('disabled', true)
            .html(
                '<i class="fa fa-spinner fa-spin"></i> Guardando...'
            );


        $('#errorNuevaCategoria')
            .hide()
            .html('');


        /*
         * AJAX
         */

        $.ajax({

            url: '{{ path("gastos_categoria_nueva_ajax") }}',

            type: 'POST',

            dataType: 'json',

            data: {
                nombre: nombre
            },


            /*
             * =================================================
             * RESPUESTA CORRECTA
             * =================================================
             */

            success: function (respuesta) {

                if (respuesta.success) {


                    /*
                     * Crear la nueva opción
                     * y dejarla seleccionada.
                     */

                    var option = new Option(
                        respuesta.nombre,
                        respuesta.id,
                        true,
                        true
                    );


                    $('#categoria_id').append(option);


                    $('#categoria_id')
                        .val(respuesta.id)
                        .trigger('change');


                    /*
                     * Cerrar modal
                     */

                    $('#modalNuevaCategoria').modal('hide');


                } else {


                    /*
                     * Mostrar error
                     */

                    $('#errorNuevaCategoria')
                        .html(
                            '<i class="fa fa-warning"></i> ' +
                            respuesta.message
                        )
                        .show();


                    boton
                        .prop('disabled', false)
                        .html(
                            '<i class="fa fa-save"></i> ' +
                            'Guardar categoría'
                        );

                }

            },


            /*
             * =================================================
             * ERROR AJAX
             * =================================================
             */

           error: function (xhr) {

    var mensaje =
        'No se pudo crear la categoría.';

    if (
        xhr.responseJSON &&
        xhr.responseJSON.message
    ) {

        mensaje = xhr.responseJSON.message;

    } else if (xhr.responseText) {

        mensaje = xhr.responseText;

    }

    $('#errorNuevaCategoria')
        .html(
            '<i class="fa fa-warning"></i> ' +
            mensaje
        )
        .show();

    boton
        .prop('disabled', false)
        .html(
            '<i class="fa fa-save"></i> ' +
            'Guardar categoría'
        );

}

        });

    });


    /*
     * =========================================================
     * ENTER PARA GUARDAR
     * =========================================================
     */

    $('#nombreNuevaCategoria').on('keypress', function (e) {

        if (e.which === 13) {

            e.preventDefault();

            $('#btnGuardarCategoria').click();

        }

    });

});

</script>

{% endblock %}