{% extends 'dating_app/base_dating.html' %}
{% load static %}
{% block title %}Register as a Local Dating Partner{% endblock %}

{% block content %}
<style>
    .partner-signup-hero {
        --dating-deep: #2a0d1f;
        --dating-deeper: #1b0714;
        --dating-pink: #c2185b;
        --dating-pink-mid: #ff4d88;
        --dating-pink-soft: #fff1f6;
        --dating-gold: #ffc107;
        --dating-muted: #756a77;
        --dating-border: rgba(194, 24, 91, 0.12);
        --dating-shadow: 0 18px 45px rgba(42, 13, 31, 0.10);
        --dating-shadow-strong: 0 30px 80px rgba(0, 0, 0, 0.28);

        position: relative;
        min-height: 100vh;
        padding: 6rem 0;
        background:
            linear-gradient(
                90deg,
                rgba(36, 9, 27, 0.92) 0%,
                rgba(36, 9, 27, 0.76) 46%,
                rgba(194, 24, 91, 0.50) 100%
            ),
            url("{% static 'expat_life/images/dating_partner_hero.webp' %}") center/cover no-repeat;
        color: #fff;
        overflow: hidden;
    }

    .partner-signup-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.18), transparent 34%),
            radial-gradient(circle at bottom right, rgba(255, 77, 136, 0.22), transparent 35%),
            linear-gradient(135deg, rgba(42, 13, 31, 0.25), rgba(194, 24, 91, 0.16));
        pointer-events: none;
        z-index: 0;
    }

    .partner-signup-hero::after {
        content: "";
        position: absolute;
        right: -150px;
        bottom: -190px;
        width: 480px;
        height: 480px;
        background: rgba(255, 193, 7, 0.12);
        border-radius: 50%;
        filter: blur(8px);
        pointer-events: none;
        z-index: 0;
    }

    .partner-signup-hero .container {
        position: relative;
        z-index: 2;
    }

    .partner-intro-card {
        max-width: 920px;
        margin: 0 auto 2rem;
        text-align: center;
    }

    .partner-signup-hero .section-mini-title {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .45rem .95rem;
        border-radius: 999px;
        background: rgba(255, 193, 7, 0.18);
        border: 1px solid rgba(255, 193, 7, 0.36);
        color: var(--dating-gold);
        font-size: .8rem;
        font-weight: 900;
        letter-spacing: .075em;
        text-transform: uppercase;
        margin-bottom: 1rem;
        backdrop-filter: blur(10px);
    }

    .partner-signup-hero .section-mini-title::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--dating-gold);
        box-shadow: 0 0 0 5px rgba(255, 193, 7, 0.14);
    }

    .partner-signup-hero h1 {
        font-size: clamp(2.25rem, 4vw, 4rem);
        font-weight: 900;
        letter-spacing: -.045em;
        line-height: 1.08;
        color: #fff;
        text-shadow: 0 14px 36px rgba(0, 0, 0, 0.26);
    }

    .partner-signup-hero .partner-lead {
        color: rgba(255, 255, 255, 0.86);
        font-size: 1.12rem;
        line-height: 1.8;
        max-width: 760px;
        margin: 0 auto;
    }

    /* Trust Row */
    .partner-trust-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: .9rem;
        margin-top: 1.7rem;
    }

    .partner-trust-item {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .65rem;
        padding: .9rem 1rem;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.11);
        border: 1px solid rgba(255, 255, 255, 0.18);
        backdrop-filter: blur(10px);
        color: rgba(255, 255, 255, 0.94);
        font-weight: 700;
        text-align: left;
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
    }

    .partner-trust-item i {
        color: var(--dating-gold);
        font-size: 1.16rem;
        flex: 0 0 auto;
    }

    /* Form Card */
    .partner-form-card {
        position: relative;
        border-radius: 34px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.97);
        border: 1px solid rgba(255, 255, 255, 0.35);
        box-shadow: var(--dating-shadow-strong);
        backdrop-filter: blur(14px);
    }

    .partner-form-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 6px;
        background: linear-gradient(90deg, var(--dating-gold), var(--dating-pink-mid), var(--dating-pink));
        z-index: 3;
    }

    .partner-form-header {
        padding: 2.1rem 2rem 1.25rem;
        background:
            radial-gradient(circle at 92% 14%, rgba(255, 193, 7, 0.13), transparent 34%),
            linear-gradient(135deg, #ffffff 0%, #fff1f6 100%);
        border-bottom: 1px solid rgba(194, 24, 91, 0.10);
    }

    .partner-form-header h3 {
        color: var(--dating-deep);
        letter-spacing: -.025em;
        font-weight: 900;
    }

    .partner-form-header p {
        color: var(--dating-muted);
        line-height: 1.7;
    }

    .partner-form-body {
        padding: 2rem;
        background: linear-gradient(180deg, #ffffff 0%, #fffafd 100%);
    }

    .partner-form-body .form-label {
        color: var(--dating-deep);
        font-weight: 800;
        font-size: .92rem;
        margin-bottom: .45rem;
    }

    .partner-form-body input,
    .partner-form-body select,
    .partner-form-body textarea {
        border-radius: 16px !important;
        border: 1px solid rgba(42, 13, 31, 0.14) !important;
        padding: .74rem .95rem !important;
        color: var(--dating-deep) !important;
        background-color: #fff !important;
        box-shadow: 0 8px 18px rgba(42, 13, 31, 0.035) !important;
    }

    .partner-form-body input[type="file"] {
        padding: .65rem .9rem !important;
    }

    .partner-form-body textarea {
        min-height: 120px;
    }

    .partner-form-body input:focus,
    .partner-form-body select:focus,
    .partner-form-body textarea:focus {
        border-color: rgba(194, 24, 91, 0.55) !important;
        box-shadow: 0 0 0 .22rem rgba(194, 24, 91, 0.12) !important;
    }

    .partner-form-body .form-text {
        color: var(--dating-muted);
        font-size: .82rem;
        margin-top: .35rem;
    }

    /* Checkbox reset */
    .partner-form-body input[type="checkbox"] {
        width: 1.1rem !important;
        height: 1.1rem !important;
        min-width: 1.1rem !important;
        padding: 0 !important;
        margin-top: 0.2rem !important;
        border-radius: 0.28rem !important;
        border: 1px solid rgba(42, 13, 31, 0.30) !important;
        background-color: #fff !important;
        box-shadow: none !important;
        appearance: auto !important;
        -webkit-appearance: checkbox !important;
        accent-color: var(--dating-pink);
        cursor: pointer;
    }

    /* Normal Checkbox Cards */
    .partner-check-card {
        height: 100%;
        padding: 1rem 1rem;
        background:
            radial-gradient(circle at 90% 12%, rgba(255, 193, 7, 0.10), transparent 32%),
            linear-gradient(135deg, #fff9fc 0%, #ffffff 100%);
        border: 1px solid rgba(194, 24, 91, 0.12);
        border-radius: 20px;
        box-shadow: 0 12px 28px rgba(42, 13, 31, 0.045);
    }

    .partner-check-card .form-check {
        display: flex;
        align-items: flex-start;
        gap: 0.65rem;
        padding-left: 0;
    }

    .partner-check-card .form-check-input {
        float: none;
        margin-left: 0;
    }

    .partner-check-card .form-check-label {
        color: var(--dating-deep);
        font-weight: 800;
        line-height: 1.45;
        cursor: pointer;
    }

    .partner-check-help {
        color: var(--dating-muted);
        font-size: 0.82rem;
        line-height: 1.6;
        margin-top: 0.5rem;
        padding-left: 1.75rem;
    }

    /* Required Terms Agreement Box */
    .terms-agreement-box {
        background:
            radial-gradient(circle at 92% 14%, rgba(255, 193, 7, 0.14), transparent 34%),
            linear-gradient(135deg, #fff9e8 0%, #fff1f6 100%);
        border: 1px solid rgba(255, 193, 7, 0.42);
        border-left: 5px solid var(--dating-gold);
        border-radius: 22px;
        padding: 1.2rem 1.25rem;
        box-shadow: 0 14px 30px rgba(120, 80, 10, 0.10);
    }

    .terms-agreement-box .form-check {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding-left: 0;
    }

    .terms-agreement-box .form-check-input {
        float: none;
        margin-left: 0;
    }

    .terms-agreement-box input[type="checkbox"] {
        width: 1.25rem !important;
        height: 1.25rem !important;
        min-width: 1.25rem !important;
        margin-top: 0.15rem !important;
        border: 2px solid #b87900 !important;
        accent-color: var(--dating-gold);
    }

    .terms-agreement-box .form-check-label {
        color: #5d3c03;
        font-size: 1rem;
        font-weight: 900;
        line-height: 1.45;
        cursor: pointer;
    }

    .terms-required {
        color: var(--dating-pink);
        font-weight: 900;
        margin-left: 0.2rem;
    }

    .terms-agreement-text {
        color: #76520a;
        font-size: 0.9rem;
        line-height: 1.65;
        margin-top: 0.65rem;
        padding-left: 2rem;
    }

    /* Actions */
    .partner-actions {
        margin-top: 1.7rem;
        padding-top: 1.5rem;
        border-top: 1px solid rgba(194, 24, 91, 0.10);
        display: flex;
        flex-wrap: wrap;
        gap: .75rem;
    }

    .partner-actions .btn-primary {
        background: linear-gradient(135deg, var(--dating-pink-mid), var(--dating-pink));
        border: none;
        border-radius: 999px;
        padding: .85rem 1.5rem;
        font-weight: 900;
        color: #fff;
        box-shadow: 0 18px 34px rgba(194, 24, 91, 0.24);
        transition: all .22s ease;
    }

    .partner-actions .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 22px 42px rgba(194, 24, 91, 0.32);
        background: linear-gradient(135deg, #ff6b9d, #a4144c);
        color: #fff;
    }

    .partner-actions .btn-outline-secondary {
        border-radius: 999px;
        padding: .85rem 1.5rem;
        font-weight: 900;
        border: 2px solid rgba(42, 13, 31, 0.18);
        color: var(--dating-deep);
        background: #fff;
        transition: all .22s ease;
    }

    .partner-actions .btn-outline-secondary:hover {
        transform: translateY(-2px);
        background: var(--dating-deep);
        color: #fff;
        border-color: var(--dating-deep);
        box-shadow: 0 14px 28px rgba(42, 13, 31, 0.16);
    }

    /* Review Alert */
    .partner-review-alert {
        display: flex;
        gap: .85rem;
        padding: 1.1rem 1.15rem;
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 193, 7, 0.28);
        color: rgba(255, 255, 255, 0.92);
        line-height: 1.65;
        margin-top: 1.25rem;
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.14);
        backdrop-filter: blur(10px);
    }

    .partner-review-alert i {
        color: var(--dating-gold);
        font-size: 1.25rem;
        margin-top: .15rem;
        flex: 0 0 auto;
    }

    .partner-review-alert strong {
        color: #fff;
    }

    .partner-form-body .alert-danger {
        border: 1px solid rgba(220, 53, 69, 0.20);
        background: #fff5f5;
        color: #842029;
    }

    @media (max-width: 991.98px) {
        .partner-signup-hero {
            padding: 4.5rem 0;
        }

        .partner-form-card {
            border-radius: 28px;
        }

        .partner-form-header,
        .partner-form-body {
            padding: 1.5rem;
        }
    }

    @media (max-width: 575.98px) {
        .partner-signup-hero {
            padding: 3.5rem 0;
        }

        .partner-actions {
            display: grid;
        }

        .partner-actions .btn {
            width: 100%;
        }

        .partner-trust-item,
        .partner-review-alert {
            border-radius: 18px;
        }

        .partner-signup-hero h1 {
            font-size: 2.1rem;
        }
    }
</style>

<section class="partner-signup-hero">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">

                <div class="partner-intro-card">
                    <span class="section-mini-title">Local Partner Registration</span>

                    <h1 class="fw-bold mb-3">Register as a Local Partner</h1>

                    <p class="partner-lead">
                        Submit your profile for review if you are looking for marriage or a serious
                        long-term relationship with an international Guest through a respectful,
                        reviewed, and privacy-conscious process.
                    </p>

                    <div class="partner-trust-row">
                        <div class="partner-trust-item">
                            <i class="bi bi-shield-check"></i>
                            <span>Admin-reviewed profiles</span>
                        </div>

                        <div class="partner-trust-item">
                            <i class="bi bi-heart-fill"></i>
                            <span>Serious relationship focus</span>
                        </div>

                        <div class="partner-trust-item">
                            <i class="bi bi-eye-slash-fill"></i>
                            <span>Private details protected</span>
                        </div>
                    </div>
                </div>

                <div class="partner-form-card">
                    <div class="partner-form-header">
                        <h3 class="fw-bold mb-2">Submit Your Profile Details</h3>
                        <p class="mb-0">
                            Please provide honest and complete information. Your profile will be reviewed
                            before it becomes visible on the platform.
                        </p>
                    </div>

                    <div class="partner-form-body">
                        <form method="post" enctype="multipart/form-data">
                            {% csrf_token %}

                            {% if form.non_field_errors %}
                                <div class="alert alert-danger rounded-4 mb-3">
                                    {% for error in form.non_field_errors %}
                                        <div>{{ error }}</div>
                                    {% endfor %}
                                </div>
                            {% endif %}

                            <div class="row g-3">
                                {% for field in form %}

                                    {% if field.name == 'passport_ready' or field.name == 'willing_to_relocate' or field.name == 'willing_video_call' or field.name == 'is_public' %}
                                        <div class="col-md-6">
                                            <div class="partner-check-card">
                                                <div class="form-check mb-0">
                                                    {{ field }}
                                                    <label class="form-check-label" for="{{ field.id_for_label }}">
                                                        {{ field.label }}
                                                    </label>
                                                </div>

                                                {% if field.help_text %}
                                                    <div class="partner-check-help">
                                                        {{ field.help_text }}
                                                    </div>
                                                {% endif %}

                                                {% for error in field.errors %}
                                                    <div class="text-danger small mt-2">{{ error }}</div>
                                                {% endfor %}
                                            </div>
                                        </div>

                                    {% elif field.name == 'agreed_to_terms' %}
                                        <div class="col-12">
                                            <div class="terms-agreement-box">
                                                <div class="form-check mb-0">
                                                    {{ field }}
                                                    <label class="form-check-label" for="{{ field.id_for_label }}">
                                                        {{ field.label }}
                                                        <span class="terms-required">*</span>
                                                    </label>
                                                </div>

                                                <div class="terms-agreement-text">
                                                    This field is required before submitting your profile. By checking this box,
                                                    you confirm that you agree to Ensolanka’s Terms & Conditions, Privacy Policy,
                                                    and profile review rules.
                                                </div>

                                                {% if field.help_text %}
                                                    <div class="form-text mt-2">{{ field.help_text }}</div>
                                                {% endif %}

                                                {% for error in field.errors %}
                                                    <div class="text-danger small mt-2">{{ error }}</div>
                                                {% endfor %}
                                            </div>
                                        </div>

                                    {% else %}
                                        <div class="{% if field.name == 'about_me' or field.name == 'hobbies' or field.name == 'expectations' or field.name == 'short_intro' %}col-12{% else %}col-md-6{% endif %}">
                                            <label class="form-label">{{ field.label }}</label>

                                            {{ field }}

                                            {% if field.help_text %}
                                                <div class="form-text">{{ field.help_text }}</div>
                                            {% endif %}

                                            {% for error in field.errors %}
                                                <div class="text-danger small mt-1">{{ error }}</div>
                                            {% endfor %}
                                        </div>
                                    {% endif %}

                                {% endfor %}
                            </div>

                            <div class="partner-actions">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    Submit Profile
                                    <i class="bi bi-arrow-right ms-1"></i>
                                </button>

                                <a href="{% url 'dating_app:home_dating' %}" class="btn btn-outline-secondary btn-lg">
                                    Cancel
                                </a>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="partner-review-alert">
                    <i class="bi bi-exclamation-triangle-fill"></i>
                    <div>
                        <strong>Important:</strong>
                        Public display happens only after admin review and approval. Ensolanka may reject,
                        hide, or request changes to any profile that does not match the platform’s safety,
                        sincerity, and respectful relationship standards.
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>
{% endblock %}