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

{% block title %}{{ translations.demands_title | default('Espace Demandes') }}{% endblock %}

{% block head %}
    {{ parent() }}
    <style>
        .demand-tab-btn{
            border-radius:999px;
            padding:.35rem 1.1rem;
            font-weight:600;
            font-size:.88rem;
            border:1px solid rgba(0,0,0,.12);
            background:#fff;
            color:#444;
            transition:all .15s ease;
        }
        .demand-tab-btn.active{
            background:#0d6efd;
            color:#fff;
            border-color:#0d6efd;
        }
        .demand-tab-btn:hover:not(.active){
            background:#f0f4ff;
        }
        .demand-sub-tab{
            font-size:.85rem;
            font-weight:600;
            border-bottom:2px solid transparent;
            padding:.35rem .75rem;
            cursor:pointer;
            color:#6c757d;
            transition:all .12s;
        }
        .demand-sub-tab.active{
            color:#0d6efd;
            border-bottom-color:#0d6efd;
        }
        .status-chip{
            cursor:pointer;
            border-radius:999px;
            padding:.22rem .7rem;
            font-size:.78rem;
            font-weight:600;
            border:1px solid rgba(0,0,0,.1);
            background:#f5f5f5;
            color:#555;
            transition:all .12s;
        }
        .status-chip.active{ background:#0d6efd; color:#fff; border-color:#0d6efd; }
        .badge-new         { background:#6ea8fe22; color:#0d6efd; }
        .badge-in_progress { background:#ffc10722; color:#b07800; }
        .badge-in_review   { background:#6f42c122; color:#6f42c1; }
        .badge-approved    { background:#19875422; color:#198754; }
        .badge-published   { background:#0dcaf022; color:#087990; }
        .badge-rejected    { background:#dc354522; color:#dc3545; }
        .kpi-card{ border-radius:16px; background:#fff; border:1px solid rgba(0,0,0,.07); }
        .upload-preview-item{
            display:flex; align-items:center; gap:.5rem; font-size:.82rem;
            border:1px solid #e0e0e0; border-radius:8px; padding:.3rem .6rem;
            background:#fafafa;
        }
    </style>
{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.demands_title | default('Espace Demandes') }}</h3>
        <p class="text-subtitle text-muted">{{ translations.demands_subtitle | default('Gérez vos demandes et suivez leur avancement.') }}</p>
    </div>
{% endblock %}

{% block content %}

<div class="row mb-3">
    <div class="col-12">
        <div class="d-flex gap-2 flex-wrap">
            <button class="demand-tab-btn active" data-tab="social-media">
                <i class="bi bi-megaphone me-1"></i>
                {{ translations.tab_social_media | default('Social Media') }}
            </button>
            <button class="demand-tab-btn" data-tab="special">
                <i class="bi bi-lightbulb me-1"></i>
                {{ translations.tab_special | default('Demandes spécifiques') }}
            </button>
            <button class="demand-tab-btn" data-tab="crm">
                <i class="bi bi-table me-1"></i>
                {{ translations.tab_crm | default('Suivi des demandes') }}
            </button>
        </div>
    </div>
</div>

{# ─── Tab: Social Media ─────────────────────────────────────────────── #}
<div id="tab-social-media" class="demand-tab-pane">
    {% include 'demands/partials/_tab_social_media.twig' %}
</div>

{# ─── Tab: Demandes spécifiques ───────────────────────────────────── #}
<div id="tab-special" class="demand-tab-pane d-none">
    {% include 'demands/partials/_tab_special.twig' %}
</div>

{# ─── Tab: CRM ────────────────────────────────────────────────────── #}
<div id="tab-crm" class="demand-tab-pane d-none">
    {% include 'demands/partials/_tab_crm.twig' %}
</div>

{% endblock %}

{% block scripts %}
<script src="{{ root }}/assets/js/pages/demands.js" type="module"></script>
<script>
    window.demandsConfig = {
        root:     '{{ root }}',
        isAdmin:  {{ isAdmin ? 'true' : 'false' }},
        statuses: {{ statuses | json_encode | raw }},
        typeLabels: {
            'SOCIAL_MEDIA': '{{ translations.type_social_media | default("Publication RS") | e('js') }}',
            'NEW_PRODUCT':  '{{ translations.type_new_product  | default("Nouveau produit") | e('js') }}',
            'SAAS_DEV':     '{{ translations.type_saas_dev     | default("Développement SaaS") | e('js') }}',
        },
        statusLabels: {
            'NEW':         '{{ translations.status_new         | default("Nowe") | e('js') }}',
            'IN_PROGRESS': '{{ translations.status_in_progress | default("W toku") | e('js') }}',
            'IN_REVIEW':   '{{ translations.status_in_review   | default("W weryfikacji") | e('js') }}',
            'APPROVED':    '{{ translations.status_approved    | default("Zatwierdzone") | e('js') }}',
            'PUBLISHED':   '{{ translations.status_published   | default("Opublikowane") | e('js') }}',
            'REJECTED':    '{{ translations.status_rejected    | default("Odrzucone") | e('js') }}',
        },
        messages: {
            maxFilesExceeded:    '{{ translations.max_files_exceeded | default("Maximum 10 files allowed.") | e('js') }}',
            errorLoadingDemands: '{{ translations.error_loading_demands | default("Error loading demands.") | e('js') }}',
            noDemands:           '{{ translations.no_demands | default("No requests found.") | e('js') }}',
            statusUpdated:       '{{ translations.status_updated | default("Status updated successfully.") | e('js') }}',
            errorStatusUpdate:   '{{ translations.error_status_update | default("Error updating status.") | e('js') }}',
            commentAdded:        '{{ translations.comment_added | default("Comment added.") | e('js') }}',
            errorComment:        '{{ translations.error_comment | default("Error adding comment.") | e('js') }}',
        },
    };
</script>
{% endblock %}