{% extends "layouts/dashboard.twig" %}

{% block content %}
<div class="container-fluid px-4">
    <h1 class="mt-4">Gerenciamento de Banners</h1>
    <ol class="breadcrumb mb-4">
        <li class="breadcrumb-item"><a href="/admin/dashboard">Dashboard</a></li>
        <li class="breadcrumb-item"><a href="/admin/affiliatesadmin/affiliates">Afiliados</a></li>
        <li class="breadcrumb-item active">Banners</li>
    </ol>

    {% include '@affiliatesadmin/nav.twig' %}

    <div class="card mb-4">
        <div class="card-header d-flex align-items-center justify-content-between">
            <div>
                <i class="bi bi-image me-1"></i>
                Lista de Banners
            </div>
            <a href="/admin/affiliatesadmin/banners/create" class="btn btn-primary btn-sm">
                <i class="bi bi-plus-lg"></i> Novo Banner
            </a>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-striped" id="dataTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Nome</th>
                            <th>Imagem</th>
                            <th>URL de Destino</th>
                            <th>Ativo</th>
                            <th>Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for banner in banners %}
                        <tr>
                            <td>{{ banner.affiliate_banners_id }}</td>
                            <td>{{ banner.affiliate_banners_name }}</td>
                            <td>
                                <a href="/storage/uploads/affiliatesadmin/{{ banner.affiliate_banners_image_url }}" data-lightbox="banner-{{ banner.affiliate_banners_id }}">
                                    <img src="/storage/uploads/affiliatesadmin/{{ banner.affiliate_banners_image_url }}" alt="{{ banner.affiliate_banners_name }}" class="img-thumbnail" style="max-width: 80px;">
                                </a>
                            </td>
                            <td>
                                <a href="{{ banner.affiliate_banners_target_url }}" target="_blank" class="text-truncate d-inline-block" style="max-width: 200px;">
                                    {{ banner.affiliate_banners_target_url }}
                                </a>
                            </td>
                            <td>
                                <span class="badge bg-{{ banner.affiliate_banners_is_active ? 'success' : 'secondary' }}">
                                    {{ banner.affiliate_banners_is_active ? 'Sim' : 'Não' }}
                                </span>
                            </td>
                            <td>
                                <div class="btn-group" role="group">
                                    <a href="/admin/affiliatesadmin/banners/{{ banner.affiliate_banners_id }}/edit" class="btn btn-info btn-sm" title="Editar">
                                        <i class="bi bi-pencil"></i>
                                    </a>
                                    <form action="/admin/affiliatesadmin/banners/{{ banner.affiliate_banners_id }}/delete" method="POST" onsubmit="return confirm('Tem certeza que deseja excluir este banner?')">
                                        <button type="submit" class="btn btn-danger btn-sm" title="Excluir">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    $(document).ready(function() {
        $('#dataTable').DataTable({
            language: {
                url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/pt-BR.json'
            },
            order: [[0, 'desc']]
        });
    });
</script>
{% endblock %}