{% extends "modules/dashboard.html.twig" %}

{% block title %}Plantillas{% endblock %}

{% block stylesheets %}
    {{ parent() }}

    <link rel="stylesheet" href="/node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css">
    <link rel="stylesheet" href="/node_modules/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css">
{% endblock %}

{% block content %}
    <div class="content">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Plantillas Locales</h3>
            </div>

            <div class="card-body table-responsive">
                <table id="local-sales-template-table" class="table table-striped table-bordered table-hover w-100">
                    <thead>
                        <tr>
                            <th>Marca</th>
                            <th>Documento</th>
                            <th>Representante Comercial</th>
                            <th>Cliente</th>
                            <th>Fecha</th>
                            <th>Monto</th>
                            <th>Estado</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script src="/node_modules/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="/node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="/node_modules/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
    <script src="/node_modules/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js"></script>

    <script>
        $(function () {
            $('#local-sales-template-table').DataTable({
                processing: true,
                serverSide: true,
                responsive: true,
                autoWidth: false,
                lengthChange: false,
                pageLength: 10,
                searching: true,
                order: [[4, 'desc']],

                ajax: {
                    url: "{{ path('app_local_sales_template_api_index') }}",
                    type: "GET",
                    data: function (d) {
                        const columnMap = {
                            0: null,
                            1: 'id',
                            2: null,
                            3: null,
                            4: 'created',
                            5: 'amount',
                            6: null
                        };

                        const orderColumnIndex = d.order?.[0]?.column ?? 4;
                        const orderDir = d.order?.[0]?.dir ?? 'desc';

                        d.sort_by = columnMap[orderColumnIndex] ?? 'id';
                        d.sort_dir = orderDir;
                    }
                },

                columns: [
                    {
                        data: 'brand',
                        name: 'brand',
                        orderable: false,
                        searchable: true,
                        defaultContent: ''
                    },
                    {
                        data: 'code',
                        name: 'code',
                        orderable: true,
                        searchable: true,
                        defaultContent: ''
                    },
                    {
                        data: 'salerep_id',
                        name: 'salerep_id',
                        orderable: false,
                        searchable: true,
                        defaultContent: ''
                    },
                    {
                        data: 'client',
                        name: 'client',
                        orderable: false,
                        searchable: true,
                        defaultContent: ''
                    },
                    {
                        data: 'date',
                        name: 'date',
                        orderable: true,
                        searchable: false,
                        defaultContent: '',
                        render: function (data) {
                            if (!data || !data.date) return '';

                            const raw = data.date.substring(0, 10); // 2026-03-05
                            const parts = raw.split('-'); // [2026, 03, 05]

                            if (parts.length !== 3) return raw;

                            return parts[2] + '/' + parts[1] + '/' + parts[0];
                        }
                    },
                    {
                        data: 'amount',
                        name: 'amount',
                        orderable: true,
                        searchable: false,
                        className: 'text-right',
                        defaultContent: '',
                        render: function (data, type, row) {
                            const value = parseFloat(data || 0);

                            if (type === 'display' || type === 'filter') {
                                return value.toFixed(2);
                            }

                            return value;
                        }
                    },
                    {
                        data: 'status',
                        name: 'status',
                        orderable: false,
                        searchable: true,
                        defaultContent: '',
                        render: function (data, type, row) {
                            if (!data) return '';

                            let badge = 'secondary';

                            if (data === 'DR') badge = 'info';
                            else if (data === 'CO') badge = 'success';
                            else if (data === 'IP') badge = 'warning';

                            return '<span class="badge badge-' + badge + '">' + data + '</span>';
                        }
                    }
                ],

                language: {
                    emptyTable: "No hay datos disponibles en la tabla",
                    info: "Mostrando _START_ a _END_ de _TOTAL_ registros",
                    infoEmpty: "Mostrando 0 a 0 de 0 registros",
                    infoFiltered: "(filtrado de _MAX_ registros totales)",
                    lengthMenu: "Mostrar _MENU_ registros",
                    loadingRecords: "Cargando...",
                    processing: "Procesando...",
                    search: "Buscar:",
                    zeroRecords: "No se encontraron registros",
                    paginate: {
                        first: "Primero",
                        last: "Último",
                        next: "Siguiente",
                        previous: "Anterior"
                    }
                }
            });
        });
    </script>
{% endblock %}