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

{% trans_default_domain 'core' %}

{% block actionheader %}
{% endblock %}

{% block searchform_container %}
{% endblock %}

{% block body %}

<div class="container-fluid">

    <div class="row">
        <div class="col-md-12">

            <div class="panel panel-default">

                <div class="panel-heading clearfix">

                    <strong style="font-size: 18px;">
                        Compras
                    </strong>

                   <a href="{{ path('compras_nueva') }}" class="btn btn-primary">
    <span class="glyphicon glyphicon-plus"></span>
    Nueva compra
</a>

<button type="button"
        class="btn btn-success"
        data-toggle="modal"
        data-target="#modalImportarCompra">
    <span class="glyphicon glyphicon-import"></span>
    Importar Excel
</button>

                </div>

                <div class="panel-body">

                    {% for message in app.flashes('success') %}
                        <div class="alert alert-success">
                            {{ message }}
                        </div>
                    {% endfor %}

                    {% for message in app.flashes('danger') %}
                        <div class="alert alert-danger">
                            {{ message }}
                        </div>
                    {% endfor %}

                    {% for message in app.flashes('warning') %}
                        <div class="alert alert-warning">
                            {{ message }}
                        </div>
                    {% endfor %}

                    {% for message in app.flashes('info') %}
                        <div class="alert alert-info">
                            {{ message }}
                        </div>
                    {% endfor %}

                    {% if compras|length > 0 %}

                        <div class="table-responsive">

                            <table class="table table-bordered table-striped">

                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Fecha</th>
                                        <th>Proveedor</th>
                                        <th>Documento</th>
                                        <th class="text-right">Subtotal</th>
                                        <th class="text-right">IVA</th>
                                        <th class="text-right">Total</th>
                                        <th>Estado</th>
                                        <th>Acciones</th>
                                    </tr>
                                </thead>

                                <tbody>

                                    {% for compra in compras %}

                                        <tr>

                                            <td>
                                                {{ compra.id }}
                                            </td>

                                            <td>
                                                {{ compra.fecha ? compra.fecha|date('Y-m-d') : '' }}
                                            </td>

                                            <td>
                                                {{ compra.provider ? compra.provider.name : '' }}
                                            </td>

                                            <td>
                                                {{ compra.tipoDocumento|default('') }}
                                                {{ compra.serie|default('') }}
                                                {{ compra.numero|default('') }}
                                            </td>

                                            <td class="text-right">
                                                {{ compra.subtotal|default(0)|number_format(2, '.', ',') }}
                                            </td>

                                            <td class="text-right">
                                                {{ compra.iva|default(0)|number_format(2, '.', ',') }}
                                            </td>

                                            <td class="text-right">
                                                {{ compra.total|default(0)|number_format(2, '.', ',') }}
                                            </td>

                                            <td>
                                                {{ compra.estado|default('') }}
                                            </td>

                                            <td>

                                                <a href="{{ path('compras_ver', {'id': compra.id}) }}"
                                                   class="btn btn-info btn-sm"
                                                   title="Ver">

                                                    <span class="glyphicon glyphicon-eye-open"></span>

                                                </a>

                                                <a href="{{ path('compras_editar', {'id': compra.id}) }}"
                                                   class="btn btn-warning btn-sm"
                                                   title="Editar">

                                                    <span class="glyphicon glyphicon-pencil"></span>

                                                </a>

                                            </td>

                                        </tr>

                                    {% endfor %}

                                </tbody>

                            </table>

                        </div>

                    {% else %}

                        <div class="alert alert-info">
                            No existen compras registradas para esta empresa.
                        </div>

                    {% endif %}

                </div>

            </div>

        </div>
    </div>

</div>


<!-- ============================================================
     MODAL IMPORTAR COMPRA DESDE EXCEL
     ============================================================ -->

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

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

        <div class="modal-content">

            <form method="post"
                  action="{{ path('compras_importar') }}"
                  enctype="multipart/form-data"
                  id="formImportarExcel">

                <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="modalImportarCompraLabel">

                        <span class="glyphicon glyphicon-import"></span>
                        Importar compra desde Excel

                    </h4>

                </div>


                <div class="modal-body">

                    <!-- ==================================================
                         DATOS GENERALES DE LA COMPRA
                         ================================================== -->

                    <div class="alert alert-info">

                        <strong>Datos generales de la compra</strong>

                        <br>

                        Seleccione el proveedor e ingrese los datos
                        del comprobante. Estos datos se aplicarán
                        a toda la compra importada.

                    </div>


                    <div class="row">

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

    <div class="form-group">

        <label for="provider_id_importacion">
            Proveedor
        </label>

        <div class="input-group">

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

                <option value="">
                    Seleccione un proveedor
                </option>

                {% for provider in providers %}

                    <option value="{{ provider.id }}"
                            data-ruc="{{ provider.identification|default('') }}">

                        {{ provider.name }}

                        {% if provider.identification %}
                            - {{ provider.identification }}
                        {% endif %}

                    </option>

                {% endfor %}

            </select>

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

    <button type="button"
            class="btn btn-success"
            data-toggle="modal"
            data-target="#modalNuevoProveedor"
            title="Nuevo proveedor">

        <span class="glyphicon glyphicon-plus"></span>

    </button>

</span>

        </div>

    </div>

</div>


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

                            <div class="form-group">

                                <label for="ruc_proveedor">
                                    RUC / Identificación
                                </label>

                                <input type="text"
                                       name="ruc_proveedor"
                                       id="ruc_proveedor"
                                       class="form-control"
                                       readonly
                                       required>

                            </div>

                        </div>

                    </div>


                    <div class="row">

                        <!-- FECHA -->
                        <div class="col-md-3">

                            <div class="form-group">

                                <label for="fecha_importacion">
                                    Fecha
                                </label>

                                <input type="date"
                                       name="fecha"
                                       id="fecha_importacion"
                                       class="form-control"
                                       value="{{ 'now'|date('Y-m-d') }}"
                                       required>

                            </div>

                        </div>


                        <!-- TIPO -->
                        <div class="col-md-3">

                            <div class="form-group">

                                <label for="tipo_importacion">
                                    Tipo de documento
                                </label>

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

                                    <option value="">
                                        Seleccione
                                    </option>

                                    <option value="01">
                                        01 - Factura
                                    </option>

                                    <option value="03">
                                        03 - Liquidación de compra
                                    </option>

                                    <option value="04">
                                        04 - Nota de crédito
                                    </option>

                                    <option value="05">
                                        05 - Nota de débito
                                    </option>

                                </select>

                            </div>

                        </div>


                        <!-- SERIE -->
                        <div class="col-md-3">

                            <div class="form-group">

                                <label for="serie_importacion">
                                    Serie
                                </label>

                                <input type="text"
                                       name="serie"
                                       id="serie_importacion"
                                       class="form-control"
                                       placeholder="001-001"
                                       required>

                            </div>

                        </div>


                        <!-- NUMERO -->
                        <div class="col-md-3">

                            <div class="form-group">

                                <label for="numero_importacion">
                                    Número
                                </label>

                                <input type="text"
                                       name="numero"
                                       id="numero_importacion"
                                       class="form-control"
                                       placeholder="000000001"
                                       required>

                            </div>

                        </div>

                    </div>


                    <hr>


                    <!-- ==================================================
                         ARCHIVO EXCEL
                         ================================================== -->

                    <div class="alert alert-warning">

                        <strong>Archivo Excel</strong>

                        <br>

                        El Excel contiene únicamente los productos
                        de esta compra.

                        <br>

                        Los datos generales se ingresan en este formulario.

                    </div>


                    <div class="form-group">

                        <label for="archivo_importacion">
                            Archivo Excel
                        </label>

                        <input type="file"
                               name="archivo"
                               id="archivo_importacion"
                               class="form-control"
                               accept=".xlsx,.xls"
                               required>

                    </div>


                    <!-- ==================================================
                         ESTRUCTURA DEL EXCEL
                         ================================================== -->

                    <div class="well well-sm">

                        <strong>
                            El Excel debe tener exactamente estas columnas:
                        </strong>

                        <br><br>

                        <div class="table-responsive">

                            <table class="table table-bordered table-condensed">

                                <thead>

                                    <tr>

                                        <th>CODIGO</th>
                                        <th>NOMBRE</th>
                                        <th>CANTIDAD</th>
                                        <th>PRECIO</th>
                                        <th>PRECIO2</th>
                                        <th>IVA</th>
                                        <th>PERCHA</th>
                                        <th>LOTE</th>
                                        <th>FECHA CADUCA</th>

                                    </tr>

                                </thead>

                                <tbody>

                                    <tr>

                                        <td>PROD001</td>

                                        <td>
                                            Producto de ejemplo
                                        </td>

                                        <td>
                                            5
                                        </td>

                                        <td>
                                            10.00
                                        </td>

                                        <td>
                                            12.00
                                        </td>

                                        <td>
                                            15
                                        </td>

                                        <td>
                                            A-01
                                        </td>

                                        <td>
                                            LOTE001
                                        </td>

                                        <td>
                                            31/12/2027
                                        </td>

                                    </tr>

                                </tbody>

                            </table>

                        </div>


                        <p class="text-muted">

                            <strong>PRECIO</strong> y
                            <strong>PRECIO2</strong>
                            se ingresan sin IVA.

                            <br>

                            No se utiliza descuento.

                            <br>

                            Si el producto no existe,
                            será creado automáticamente.

                        </p>

                    </div>


                    <!-- ==================================================
                         CSRF
                         ================================================== -->

                    <input type="hidden"
                           name="_token"
                           value="{{ csrf_token('importar_compra_excel') }}">

                </div>


                <!-- ======================================================
                     FOOTER
                     ====================================================== -->

                <div class="modal-footer">

                    <a href="{{ path('compras_plantilla') }}"
                       class="btn btn-info">

                        <span class="glyphicon glyphicon-download-alt"></span>

                        Descargar plantilla

                    </a>


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

                        Cancelar

                    </button>


                    <button type="submit"
                            class="btn btn-success">

                        <span class="glyphicon glyphicon-import"></span>

                        Importar compra

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>


<!-- MODAL NUEVO PROVEEDOR -->
<!-- ========================================================= -->

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

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

        <div class="modal-content">


            <!-- HEADER -->
            <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="modalNuevoProveedorLabel">

                    <span class="glyphicon glyphicon-user"></span>

                    Nuevo proveedor

                </h4>

            </div>


            <!-- FORMULARIO -->
            <form id="formNuevoProveedor">

                <div class="modal-body">


                    <!-- NOMBRE -->
                    <div class="form-group">

                        <label>
                            Nombre / Razón social
                        </label>

                        <input type="text"
                               name="name"
                               id="nuevo_provider_name"
                               class="form-control"
                               required>

                    </div>


                    <div class="row">


                        <!-- IDENTIFICACION -->
                        <div class="col-md-6">

                            <div class="form-group">

                                <label>
                                    Identificación / RUC
                                </label>

                                <input type="text"
                                       name="identification"
                                       id="nuevo_provider_identification"
                                       class="form-control">

                            </div>

                        </div>


                        <!-- TIPO DOCUMENTO -->
                        <div class="col-md-6">

                            <div class="form-group">

                                <label>
                                    Tipo documento
                                </label>

                                <select name="tipo_documento"
                                        id="nuevo_provider_tipo_documento"
                                        class="form-control">

                                    <option value="">
                                        Seleccione
                                    </option>

                                    <option value="04">
                                        RUC
                                    </option>

                                    <option value="05">
                                        Cédula
                                    </option>

                                    <option value="06">
                                        Pasaporte
                                    </option>

                                    <option value="07">
                                        Consumidor final
                                    </option>

                                </select>

                            </div>

                        </div>

                    </div>


                    <div class="row">


                        <!-- EMAIL -->
                        <div class="col-md-6">

                            <div class="form-group">

                                <label>
                                    Email
                                </label>

                                <input type="email"
                                       name="email"
                                       id="nuevo_provider_email"
                                       class="form-control">

                            </div>

                        </div>


                        <!-- TELEFONO -->
                        <div class="col-md-6">

                            <div class="form-group">

                                <label>
                                    Teléfono
                                </label>

                                <input type="text"
                                       name="telefono"
                                       id="nuevo_provider_telefono"
                                       class="form-control">

                            </div>

                        </div>

                    </div>


                    <!-- DIRECCION -->
                    <div class="form-group">

                        <label>
                            Dirección
                        </label>

                        <input type="text"
                               name="address"
                               id="nuevo_provider_address"
                               class="form-control">

                    </div>


                    <!-- TIPO PROVEEDOR -->
                    <div class="form-group">

                        <label>
                            Tipo de proveedor
                        </label>

                        <select name="tipo_proveedor"
                                id="nuevo_provider_tipo_proveedor"
                                class="form-control">

                            <option value="">
                                Seleccione
                            </option>

                            <option value="01">
                                Bienes
                            </option>

                            <option value="02">
                                Servicios
                            </option>

                            <option value="03">
                                Bienes y servicios
                            </option>

                        </select>

                    </div>


                    <!-- MENSAJE -->
                    <div id="mensaje-nuevo-proveedor"
                         class="alert"
                         style="display:none;">
                    </div>

                </div>


                <!-- FOOTER -->
                <div class="modal-footer">

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

                        Cancelar

                    </button>

                    <button type="submit"
                            id="guardar-nuevo-proveedor"
                            class="btn btn-success">

                        <span class="glyphicon glyphicon-save"></span>

                        Guardar proveedor

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>


<!-- ============================================================
     JAVASCRIPT IMPORTAR COMPRA
     ============================================================ -->

<script>

$(document).ready(function () {

    /*
     * ============================================================
     * SELECCIONAR PROVEEDOR
     * ============================================================
     *
     * Al seleccionar un proveedor obtenemos automáticamente
     * su RUC / identificación.
     */

    $('#provider_id_importacion').on('change', function () {

        var optionSeleccionada = $(this).find('option:selected');

        var ruc = optionSeleccionada.attr('data-ruc') || '';

        $('#ruc_proveedor').val(ruc);

    });


    /*
     * ============================================================
     * NUEVO PROVEEDOR
     * ============================================================
     *
     * Guarda el proveedor mediante AJAX sin salir de la compra.
     */

    $('#formNuevoProveedor').on('submit', function (e) {

        e.preventDefault();

        var formulario = $(this);

        var boton = $('#guardar-nuevo-proveedor');

        var mensaje = $('#mensaje-nuevo-proveedor');


        mensaje.hide()
            .removeClass('alert-success alert-danger')
            .html('');


        boton.prop('disabled', true);

        boton.html(
            '<span class="glyphicon glyphicon-refresh"></span> Guardando...'
        );


        $.ajax({

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

            type: "POST",

            data: formulario.serialize(),

            dataType: "json",


            success: function (respuesta) {

                if (!respuesta.success) {

                    mensaje
                        .addClass('alert-danger')
                        .html(respuesta.message)
                        .show();


                    boton.prop('disabled', false);

                    boton.html(
                        '<span class="glyphicon glyphicon-save"></span> Guardar proveedor'
                    );

                    return;
                }


                var proveedor = respuesta.provider;


                /*
                 * ====================================================
                 * SELECTOR DE IMPORTACIÓN
                 * ====================================================
                 */

                $('#provider_id_importacion option[value="' + proveedor.id + '"]')
                    .remove();


                var optionImportacion =
                    $('<option></option>')
                        .attr('value', proveedor.id)
                        .attr(
                            'data-ruc',
                            proveedor.identification || ''
                        )
                        .text(
                            proveedor.name +
                            (
                                proveedor.identification
                                    ? ' - ' + proveedor.identification
                                    : ''
                            )
                        );


                $('#provider_id_importacion')
                    .append(optionImportacion)
                    .val(proveedor.id)
                    .trigger('change');


                /*
                 * ====================================================
                 * SELECTOR DE COMPRA NORMAL
                 * ====================================================
                 *
                 * Si este selector existe en la página,
                 * también lo actualizamos.
                 */

                if ($('#provider_id').length) {

                    $('#provider_id option[value="' + proveedor.id + '"]')
                        .remove();


                    var optionNormal =
                        $('<option></option>')
                            .attr('value', proveedor.id)
                            .attr(
                                'data-ruc',
                                proveedor.identification || ''
                            )
                            .text(
                                proveedor.name +
                                (
                                    proveedor.identification
                                        ? ' - ' + proveedor.identification
                                        : ''
                                )
                            );


                    $('#provider_id')
                        .append(optionNormal)
                        .val(proveedor.id)
                        .trigger('change');

                }


                /*
                 * ====================================================
                 * MENSAJE DE ÉXITO
                 * ====================================================
                 */

                mensaje
                    .removeClass('alert-danger')
                    .addClass('alert-success')
                    .html(respuesta.message)
                    .show();


                /*
                 * ====================================================
                 * CERRAR MODAL
                 * ====================================================
                 */

                setTimeout(function () {

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

                    formulario[0].reset();

                    mensaje.hide();

                }, 700);

            },


            error: function (xhr) {

                var respuesta = xhr.responseJSON;

                var texto =
                    (respuesta && respuesta.message)
                        ? respuesta.message
                        : 'No se pudo guardar el proveedor.';


                mensaje
                    .removeClass('alert-success')
                    .addClass('alert-danger')
                    .html(texto)
                    .show();

            },


            complete: function () {

                boton.prop('disabled', false);

                boton.html(
                    '<span class="glyphicon glyphicon-save"></span> Guardar proveedor'
                );

            }

        });

    });


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

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

        $('#formImportarExcel')[0].reset();

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

        $('#fecha_importacion').val(
            new Date().toISOString().split('T')[0]
        );

    });
    
    
    
    
    /*
 * ============================================================
 * NUEVO PROVEEDOR DESDE IMPORTAR COMPRA
 * ============================================================
 *
 * Bootstrap 3 no maneja correctamente dos modales abiertos
 * simultáneamente. Ocultamos temporalmente el modal de
 * importación y lo volvemos a mostrar al cerrar proveedor.
 */

var regresarAImportacion = false;


$('#modalImportarCompra').on(
    'show.bs.modal',
    function () {

        regresarAImportacion = false;

    }
);


$(document).on(
    'click',
    '#modalImportarCompra [data-target="#modalNuevoProveedor"]',
    function () {

        regresarAImportacion = true;

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

        setTimeout(function () {

            $('#modalNuevoProveedor').modal('show');

        }, 300);

    }
);


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

        if (!regresarAImportacion) {
            return;
        }

        setTimeout(function () {

            $('#modalImportarCompra').modal('show');

        }, 300);

    }
);


});

</script>


{% endblock %}