{% extends 'affiliates_app/base_affiliate.html' %}
{% load static %}

{% block title %}Affiliate Partner Signup | Ensolanka{% endblock %}

{% block content %}

<style>
    .affiliate-register-hero {
        position: relative;
        background:
            linear-gradient(135deg, rgba(5, 46, 37, 0.94), rgba(15, 118, 110, 0.82)),
            url("{% static 'expat_life/images/affiliates_hero.webp' %}") center center / cover no-repeat;
        padding: 90px 0;
        color: #fff;
    }

    .affiliate-register-card {
        background: #fff;
        border-radius: 28px;
        padding: 34px;
        box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16);
    }

    .affiliate-register-info {
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 26px;
        padding: 30px;
        backdrop-filter: blur(10px);
    }

    .affiliate-register-info-item {
        display: flex;
        gap: 14px;
        margin-bottom: 20px;
    }

    .affiliate-register-info-item:last-child {
        margin-bottom: 0;
    }

    .affiliate-register-info-icon {
        width: 46px;
        height: 46px;
        min-width: 46px;
        border-radius: 15px;
        background: rgba(255, 193, 7, 0.18);
        color: #ffc107;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.35rem;
    }

    .form-section-title {
        font-weight: 800;
        margin-bottom: 14px;
        padding-bottom: 10px;
        border-bottom: 1px solid #edf0f2;
    }

    .form-text-muted {
        color: #64748b;
        font-size: 0.92rem;
    }

    .affiliate-form-note {
        background: #ecfdf5;
        border: 1px solid #bbf7d0;
        color: #065f46;
        border-radius: 18px;
        padding: 16px;
    }

    .required-star {
        color: #dc3545;
    }

    @media (max-width: 767px) {
        .affiliate-register-hero {
            padding: 60px 0;
        }

        .affiliate-register-card {
            padding: 22px;
        }
    }
</style>


<section class="affiliate-register-hero">
    <div class="container">
        <div class="row align-items-center g-5">
            <div class="col-lg-5">
                <span class="section-mini-title section-mini-title-light">Affiliate Partner Signup</span>

                <h1 class="fw-bold display-5 mb-3">
                    Start Promoting Sri Lanka and Earning Referral Income
                </h1>

                <p class="lead mb-4">
                    Create your affiliate account, receive your unique tracking link, and start introducing
                    international guests to the Sri Lanka lifestyle opportunity.
                </p>

                <div class="affiliate-register-info">
                    <div class="affiliate-register-info-item">
                        <div class="affiliate-register-info-icon">
                            <i class="bi bi-link-45deg"></i>
                        </div>
                        <div>
                            <h6 class="fw-bold mb-1">Unique Affiliate Link</h6>
                            <p class="mb-0 small">
                                Your dashboard will show your tracking link and affiliate code.
                            </p>
                        </div>
                    </div>

                    <div class="affiliate-register-info-item">
                        <div class="affiliate-register-info-icon">
                            <i class="bi bi-people-fill"></i>
                        </div>
                        <div>
                            <h6 class="fw-bold mb-1">Track Referred Guests</h6>
                            <p class="mb-0 small">
                                View guests who signed up through your affiliate link.
                            </p>
                        </div>
                    </div>

                    <div class="affiliate-register-info-item">
                        <div class="affiliate-register-info-icon">
                            <i class="bi bi-wallet2"></i>
                        </div>
                        <div>
                            <h6 class="fw-bold mb-1">Earn and Request Payouts</h6>
                            <p class="mb-0 small">
                                Monitor commissions and submit payout requests from your wallet.
                            </p>
                        </div>
                    </div>

                    <div class="affiliate-register-info-item">
                        <div class="affiliate-register-info-icon">
                            <i class="bi bi-megaphone-fill"></i>
                        </div>
                        <div>
                            <h6 class="fw-bold mb-1">Use Marketing Materials</h6>
                            <p class="mb-0 small">
                                Download PDFs, videos, QR cards, and business card designs later.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-7">
                <div class="affiliate-register-card text-dark">
                    <div class="mb-4">
                        <h3 class="fw-bold mb-2">Create Affiliate Account</h3>
                        <p class="form-text-muted mb-0">
                            Fill your basic details. Your login details will be created automatically after signup.
                        </p>
                    </div>

                    {% if form.non_field_errors %}
                        <div class="alert alert-danger rounded-4">
                            {{ form.non_field_errors }}
                        </div>
                    {% endif %}

                    <form method="post" novalidate>
                        {% csrf_token %}

                        <h5 class="form-section-title">Basic Details</h5>

                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label class="form-label">
                                    Full Name <span class="required-star">*</span>
                                </label>
                                {{ form.full_name }}
                                {% if form.full_name.errors %}
                                    <div class="text-danger small mt-1">{{ form.full_name.errors.0 }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">
                                    Email Address <span class="required-star">*</span>
                                </label>
                                {{ form.email }}
                                {% if form.email.errors %}
                                    <div class="text-danger small mt-1">{{ form.email.errors.0 }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Phone Number</label>
                                {{ form.phone }}
                                {% if form.phone.errors %}
                                    <div class="text-danger small mt-1">{{ form.phone.errors.0 }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">WhatsApp Number</label>
                                {{ form.whatsapp }}
                                {% if form.whatsapp.errors %}
                                    <div class="text-danger small mt-1">{{ form.whatsapp.errors.0 }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-12">
                                <label class="form-label">Country</label>
                                {{ form.country }}
                                {% if form.country.errors %}
                                    <div class="text-danger small mt-1">{{ form.country.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>


                        <h5 class="form-section-title">Payout Details</h5>

                        <p class="form-text-muted">
                            You can add payout details now or update them later from your affiliate profile.
                        </p>

                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label class="form-label">Bank Name</label>
                                {{ form.bank_name }}
                                {% if form.bank_name.errors %}
                                    <div class="text-danger small mt-1">{{ form.bank_name.errors.0 }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Bank Account Name</label>
                                {{ form.bank_account_name }}
                                {% if form.bank_account_name.errors %}
                                    <div class="text-danger small mt-1">{{ form.bank_account_name.errors.0 }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Bank Account Number</label>
                                {{ form.bank_account_number }}
                                {% if form.bank_account_number.errors %}
                                    <div class="text-danger small mt-1">{{ form.bank_account_number.errors.0 }}</div>
                                {% endif %}
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Bank Branch</label>
                                {{ form.bank_branch }}
                                {% if form.bank_branch.errors %}
                                    <div class="text-danger small mt-1">{{ form.bank_branch.errors.0 }}</div>
                                {% endif %}
                            </div>

                            <div class="col-12">
                                <label class="form-label">Payout Notes</label>
                                {{ form.payout_notes }}
                                {% if form.payout_notes.errors %}
                                    <div class="text-danger small mt-1">{{ form.payout_notes.errors.0 }}</div>
                                {% endif %}
                            </div>
                        </div>

                        <div class="affiliate-form-note mb-4">
                            <strong>Note:</strong>
                            After signup, the system will create your username and temporary password automatically.
                            Please save them carefully when shown on your dashboard.
                        </div>

                        <button type="submit" class="btn btn-success btn-lg w-100">
                            Create My Affiliate Account
                        </button>

                        <div class="text-center mt-3">
                            <a href="{% url 'affiliates_app:home_affiliates' %}" class="text-muted">
                                Back to Affiliate Program
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock %}