{% extends 'base.html' %}
{% load static %}

{% block title %}Marketing Collaboration Platform{% endblock %}

{% block head %}
<style>
    .hero {
        background: linear-gradient(to right, #4F46E5, #A55EEA);
        color: white;
        padding: 6rem 1rem;
    }
    .client-card {
        background-color: var(--secondary-color);
    }
</style>
{% endblock %}

{% block content %}
<div class="hero text-center">
    <h1 class="display-4">Marketing Collaboration, Simplified.</h1>
    <p class="lead">The central hub for your clients, brands, campaigns, and creative assets.</p>
    <button class="btn btn-light btn-lg" data-bs-toggle="modal" data-bs-target="#addClientModal">Add New Client</button>
</div>

<div class="container mt-5">
    <h2>Clients</h2>
    <div class="row">
        {% for client in clients %}
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{ client.name }}</h5>
                    <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addBrandModal-{{ client.id }}">Add Brand</button>
                </div>
                <ul class="list-group list-group-flush">
                    {% for brand in client.brands.all %}
                    <li class="list-group-item">{{ brand.name }}</li>
                    {% empty %}
                    <li class="list-group-item text-muted">No brands yet.</li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        <!-- Add Brand Modal -->
        <div class="modal fade" id="addBrandModal-{{ client.id }}" tabindex="-1" aria-labelledby="addBrandModalLabel-{{ client.id }}" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="addBrandModalLabel-{{ client.id }}">Add Brand to {{ client.name }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form method="post" action="{% url 'index' %}">
                        {% csrf_token %}
                        <div class="modal-body">
                            <input type="hidden" name="client_id" value="{{ client.id }}">
                            <div class="mb-3">
                                <label for="brand_name-{{ client.id }}" class="form-label">Brand Name</label>
                                <input type="text" class="form-control" id="brand_name-{{ client.id }}" name="brand_name" required>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Save Brand</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<!-- Add Client Modal -->
<div class="modal fade" id="addClientModal" tabindex="-1" aria-labelledby="addClientModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addClientModalLabel">Add New Client</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" action="{% url 'index' %}">
                {% csrf_token %}
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="client_name" class="form-label">Client Name</label>
                        <input type="text" class="form-control" id="client_name" name="client_name" required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save Client</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}
