{% extends 'backoffice/layout.html.twig' %}

{% block page_title %}Newsletter - Listas{% endblock %}
{% block main %}
    <div class="container-xxl flex-grow-1 container-p-y">
        <!-- Advanced Search -->
        <div class="card">
            <h5 class="card-header">Newsletter - Listas</h5>
            <!--Search Form -->
            <div class="card-body">
                <div class="row mb-5">
                    <div class="col-12 text-end">
                        <button
                                type="button"
                                class="btn btn-primary"
                                data-bs-toggle="modal"
                                data-bs-target="#newsletter-create">
                            Crear
                        </button>
                    </div>
                </div>
                <form class="dt_adv_search" method="GET">
                    <div class="row">
                        <div class="col-12">
                            <div class="row g-3">
                                <div class="col-12 col-sm-6 col-lg-4">
                                    <label class="form-label">ID:</label>
                                    <input
                                            type="text"
                                            class="form-control dt-input dt-full-name"
                                            data-column="1"
                                            placeholder="ID"
                                            data-column-index="1" />
                                </div>
                                <div class="col-12 col-sm-6 col-lg-4">
                                    <label class="form-label">Nombre:</label>
                                    <input
                                            type="text"
                                            class="form-control dt-input dt-full-name"
                                            data-column="2"
                                            placeholder="Nombre"
                                            data-column-index="2" />
                                </div>

                                <div class="col-12 col-sm-6 col-lg-4">
                                    <label class="form-label">Fecha Creación:</label>
                                    <div class="mb-0">
                                        <input
                                                type="text"
                                                class="form-control dt-date flatpickr-range dt-input"
                                                data-column="2"
                                                placeholder="StartDate to EndDate"
                                                data-column-index="2"
                                                name="dt_date" />
                                        <input
                                                type="hidden"
                                                class="form-control dt-date start_date dt-input"
                                                data-column="2"
                                                data-column-index="2"
                                                name="value_from_start_date" />
                                        <input
                                                type="hidden"
                                                class="form-control dt-date end_date dt-input"
                                                name="value_from_end_date"
                                                data-column="2"
                                                data-column-index="2" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-datatable table-responsive">
                <table class="dt-advanced-search table">
                    <thead>
                        <tr>
                            <th></th>
                            <th>ID</th>
                            <th>Nombre</th>
                            <th>F. Creación</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
        <!--/ Advanced Search -->
    </div>
    {{ include('backoffice/partials/newsletter/lists/create.html.twig') }}
{% endblock %}
{% block js_custom %}
    <script src="/backoffice/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js"></script>
    <script src="/backoffice/assets/js/newsletter/datatable-lists.js"></script>
    <script src="/backoffice/assets/vendor/libs/moment/moment.js"></script>
    <script src="/backoffice/assets/vendor/libs/flatpickr/flatpickr.js"></script>
    <script src="/backoffice/assets/vendor/libs/@form-validation/popular.js"></script>
    <script src="/backoffice/assets/vendor/libs/@form-validation/bootstrap5.js"></script>
    <script src="/backoffice/assets/vendor/libs/@form-validation/auto-focus.js"></script>
    <script>
        $(document).ready(function () {
            $("#newsletter-create-action").submit(function () {
                let data = $(this).serialize();
                $.ajax({
                    url: "/admin/newsletter/backend/klaviyo/lists",
                    type: "POST",
                    data: data,
                    success: function (response) {
                        if (response.success) {
                            window.location.reload();
                        }
                    }
                });
            });
        });
        const formCreateList = document.querySelector("#newsletter-create-action");
        const fv = FormValidation.formValidation(formCreateList, {
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: 'Indique el nombre de la lista'
                        },
                        stringLength: {
                            min: 5,
                            message: 'La lista no puede tener menos de 5 caracteres'
                        }
                    }
                },
            },
            plugins: {
                trigger: new FormValidation.plugins.Trigger(),
                bootstrap5: new FormValidation.plugins.Bootstrap5({
                    eleValidClass: '',
                    rowSelector: '.g-6'
                }),
                submitButton: new FormValidation.plugins.SubmitButton(),
                defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
                autoFocus: new FormValidation.plugins.AutoFocus()
            },
            init: instance => {
                instance.on('plugins.message.placed', function (e) {
                    if (e.element.parentElement.classList.contains('input-group-validation')) {
                        e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
                    }
                });
            }
        });
    </script>
{% endblock %}
{% block css_custom %}
    <link rel="stylesheet" href="/backoffice/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css" />
    <link rel="stylesheet" href="/backoffice/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css" />
    <link rel="stylesheet" href="/backoffice/assets/vendor/libs/datatables-checkboxes-jquery/datatables.checkboxes.css" />
    <link rel="stylesheet" href="/backoffice/assets/vendor/libs/flatpickr/flatpickr.css" />
    <link rel="stylesheet" href="/backoffice/assets/vendor/libs/@form-validation/form-validation.css" />
{% endblock %}