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

{% block content %}
<div class="container-fluid px-4">
    <h1 class="mt-4">{% if banner.affiliate_banners_id %}Editar Banner{% else %}Criar Novo Banner{% endif %}</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"><a href="/admin/affiliatesadmin/banners">Banners</a></li>
        <li class="breadcrumb-item active">{% if banner.affiliate_banners_id %}Editar{% else %}Novo{% endif %}</li>
    </ol>

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

    <div class="card mb-4">
        <div class="card-header">
            <i class="bi bi-image me-1"></i>
            Formulário de Banner
        </div>
        <div class="card-body">
            <form action="{% if banner.affiliate_banners_id %}/admin/affiliatesadmin/banners/{{ banner.affiliate_banners_id }}/update{% else %}/admin/affiliatesadmin/banners/store{% endif %}" method="POST" enctype="multipart/form-data">
                <div class="mb-3">
                    <label for="affiliate_banners_name" class="form-label">Nome:</label>
                    <input type="text" class="form-control" id="affiliate_banners_name" name="affiliate_banners_name" value="{{ banner.affiliate_banners_name ?? '' }}" required>
                </div>
                
                <div class="mb-3">
                    <label for="affiliate_banners_description" class="form-label">Descrição:</label>
                    <textarea class="form-control" id="affiliate_banners_description" name="affiliate_banners_description" rows="2">{{ banner.affiliate_banners_description ?? '' }}</textarea>
                </div>

                <div class="mb-3">
                    <label for="banner_file" class="form-label">Arquivo do Banner:</label>
                    <input type="file" class="form-control" id="banner_file" name="banner_file" {% if not banner.affiliate_banners_id %}required{% endif %}>
                    <div class="form-text text-muted">Selecione uma imagem para o banner (JPG, PNG, GIF).</div>
                    {% if banner.affiliate_banners_image_url %}
                        <div class="mt-2">
                            <p class="small mb-1">Banner Atual:</p>
                            <img src="/storage/uploads/affiliatesadmin/{{ banner.affiliate_banners_image_url }}" alt="Banner Atual" class="img-thumbnail" style="max-height: 150px;">
                        </div>
                    {% endif %}
                </div>

                <div class="mb-3">
                    <label for="affiliate_banners_target_url" class="form-label">URL de Destino:</label>
                    <input type="url" class="form-control" id="affiliate_banners_target_url" name="affiliate_banners_target_url" value="{{ banner.affiliate_banners_target_url ?? '' }}">
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="affiliate_banners_width" class="form-label">Largura (px):</label>
                        <input type="number" class="form-control" id="affiliate_banners_width" name="affiliate_banners_width" value="{{ banner.affiliate_banners_width ?? '' }}">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="affiliate_banners_height" class="form-label">Altura (px):</label>
                        <input type="number" class="form-control" id="affiliate_banners_height" name="affiliate_banners_height" value="{{ banner.affiliate_banners_height ?? '' }}">
                    </div>
                </div>

                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="affiliate_banners_is_active" name="affiliate_banners_is_active" value="1" {% if banner.affiliate_banners_is_active ?? true %}checked{% endif %}>
                    <label class="form-check-label" for="affiliate_banners_is_active">Banner Ativo</label>
                </div>

                <div class="mt-4">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-save"></i> Salvar
                    </button>
                    <a href="/admin/affiliatesadmin/banners" class="btn btn-secondary">
                        <i class="bi bi-arrow-left"></i> Cancelar
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}