{% extends 'service_partner_app/base_service_partner.html' %}
{% load static %}
{% block title %}Register as Service Partner{% endblock %}

{% block content %}
<style>
    .service-signup-hero {
        position: relative;
        min-height: 100vh;
        padding: 6rem 0;
        background:
            radial-gradient(circle at top left, rgba(20, 184, 166, 0.18), transparent 34%),
            radial-gradient(circle at bottom right, rgba(14, 165, 233, 0.16), transparent 32%),
            linear-gradient(135deg, rgba(5, 46, 37, 0.90), rgba(15, 118, 110, 0.80)),
            url("{% static 'expat_life/images/service_partner_hero.webp' %}") center/cover no-repeat;
        color: #fff;
        overflow: hidden;
    }

    .service-signup-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 35%),
            radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.10), transparent 28%);
        pointer-events: none;
    }

    .service-signup-hero::after {
        content: "";
        position: absolute;
        right: -160px;
        bottom: -180px;
        width: 480px;
        height: 480px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        pointer-events: none;
    }

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

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

    .section-mini-title {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .45rem .9rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.16);
        border: 1px solid rgba(255, 255, 255, 0.24);
        color: #ccfbf1;
        font-size: .82rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        margin-bottom: 1rem;
    }

    .section-mini-title::before {
        content: "\F4CF";
        font-family: "bootstrap-icons";
        font-size: .95rem;
        color: #ccfbf1;
    }

    .service-signup-hero h1 {
        font-size: clamp(2.25rem, 4vw, 4rem);
        font-weight: 900;
        letter-spacing: -.045em;
        line-height: 1.08;
        color: #fff;
    }

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

    .service-trust-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: .9rem;
        margin-top: 1.7rem;
    }

    .service-trust-item {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .65rem;
        padding: .85rem 1rem;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.20);
        backdrop-filter: blur(8px);
        color: rgba(255, 255, 255, 0.92);
        font-weight: 600;
        text-align: left;
    }

    .service-trust-item i {
        color: #99f6e4;
        font-size: 1.12rem;
        flex: 0 0 auto;
    }

    .service-form-card {
        border-radius: 32px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(255, 255, 255, 0.35);
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(14px);
    }

    .service-form-header {
        padding: 2rem 2rem 1.2rem;
        background: linear-gradient(135deg, #ffffff, #f0fdfa);
        border-bottom: 1px solid #e2e8f0;
    }

    .service-form-header h3 {
        color: #0f172a;
        letter-spacing: -.025em;
    }

    .service-form-header p {
        color: #64748b;
        line-height: 1.7;
    }

    .service-form-body {
        padding: 2rem;
    }

    .service-form-body .form-label {
        color: #0f172a;
        font-weight: 700;
        font-size: .92rem;
        margin-bottom: .45rem;
    }

    .service-form-body input,
    .service-form-body select,
    .service-form-body textarea {
        border-radius: 15px !important;
        border: 1px solid #cbd5e1 !important;
        padding: .72rem .95rem !important;
        color: #0f172a !important;
        background-color: #fff !important;
        box-shadow: none !important;
    }

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

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

    .service-form-body input:focus,
    .service-form-body select:focus,
    .service-form-body textarea:focus {
        border-color: #0f766e !important;
        box-shadow: 0 0 0 .22rem rgba(15, 118, 110, 0.13) !important;
    }

    .service-form-body .form-text {
        color: #64748b;
        font-size: .82rem;
        margin-top: .35rem;
    }

    /* Checkbox reset: prevents normal input styling from hiding the check mark */
    .service-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 #94a3b8 !important;
        background-color: #fff !important;
        box-shadow: none !important;
        appearance: auto !important;
        -webkit-appearance: checkbox !important;
        accent-color: #0f766e;
        cursor: pointer;
    }

    /* Normal service checkbox cards */
    .service-check-card {
        height: 100%;
        padding: 1rem 1rem;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
    }

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

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

    .service-check-card .form-check-label {
        color: #0f172a;
        font-weight: 700;
        line-height: 1.45;
        cursor: pointer;
    }

    .service-check-help {
        color: #64748b;
        font-size: 0.82rem;
        line-height: 1.6;
        margin-top: 0.5rem;
        padding-left: 1.75rem;
    }

    /* Required terms agreement box */
    .service-terms-agreement-box {
        background: #fff7ed;
        border: 2px solid #fb923c;
        border-radius: 20px;
        padding: 1.15rem 1.25rem;
        box-shadow: 0 14px 30px rgba(251, 146, 60, 0.12);
    }

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

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

    .service-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 #ea580c !important;
        accent-color: #ea580c;
    }

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

    .service-terms-required {
        color: #dc2626;
        font-weight: 900;
        margin-left: 0.2rem;
    }

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



    .service-actions {
        margin-top: 1.7rem;
        padding-top: 1.5rem;
        border-top: 1px solid #e2e8f0;
        display: flex;
        flex-wrap: wrap;
        gap: .75rem;
    }

    .service-actions .btn-primary {
        background: linear-gradient(135deg, #0f766e, #064e3b);
        border: none;
        border-radius: 999px;
        padding: .85rem 1.5rem;
        font-weight: 800;
        box-shadow: 0 18px 34px rgba(15, 118, 110, 0.24);
        transition: all .2s ease;
    }

    .service-actions .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 22px 42px rgba(15, 118, 110, 0.32);
        background: linear-gradient(135deg, #0d9488, #065f46);
    }

    .service-actions .btn-outline-secondary {
        border-radius: 999px;
        padding: .85rem 1.5rem;
        font-weight: 800;
        border-color: #cbd5e1;
        color: #475569;
    }

    .service-actions .btn-outline-secondary:hover {
        background: #f8fafc;
        color: #0f172a;
        border-color: #94a3b8;
    }

    .service-review-alert {
        display: flex;
        gap: .85rem;
        padding: 1rem 1.1rem;
        border-radius: 20px;
        background: rgba(255, 251, 235, 0.95);
        border: 1px solid #fde68a;
        color: #78350f;
        line-height: 1.65;
        margin-top: 1.25rem;
    }

    .service-review-alert i {
        color: #d97706;
        font-size: 1.25rem;
        margin-top: .15rem;
        flex: 0 0 auto;
    }

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

        .service-form-card {
            border-radius: 26px;
        }

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

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

        .service-actions {
            display: grid;
        }

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

        .service-trust-item,
        .service-review-alert {
            border-radius: 16px;
        }
    }
</style>

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

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

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

                    <p class="service-lead">
                        Register as a driver, housekeeper, helper, translator, cleaner, security guard,
                        or local assistant and become part of Ensolanka’s trusted support network for
                        international Guests living in Sri Lanka.
                    </p>

                    <div class="service-trust-row">
                        <div class="service-trust-item">
                            <i class="bi bi-shield-check"></i>
                            <span>Reviewed before approval</span>
                        </div>

                        <div class="service-trust-item">
                            <i class="bi bi-briefcase-fill"></i>
                            <span>Real service opportunities</span>
                        </div>

                        <div class="service-trust-item">
                            <i class="bi bi-people-fill"></i>
                            <span>Support long-stay Guests</span>
                        </div>
                    </div>
                </div>

                <div class="service-form-card">
                    <div class="service-form-header">
                        <h3 class="fw-bold mb-2">Submit Your Service Profile</h3>
                        <p class="mb-0">
                            Please provide accurate details about your experience, skills, availability,
                            and the type of service you can offer to international Guests.
                        </p>
                    </div>

                    <div class="service-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 == 'has_license' or field.name == 'passport_ready' or field.name == 'willing_to_relocate' or field.name == 'live_in_available' or field.name == 'part_time_available' or field.name == 'full_time_available' %}
                                        <div class="col-md-6">
                                            <div class="service-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="service-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="service-terms-agreement-box">
                                                <div class="form-check mb-0">
                                                    {{ field }}
                                                    <label class="form-check-label" for="{{ field.id_for_label }}">
                                                        {{ field.label }}
                                                        <span class="service-terms-required">*</span>
                                                    </label>
                                                </div>

                                                <div class="service-terms-agreement-text">
                                                    This field is required before submitting your service partner profile.
                                                    By checking this box, you confirm that you agree to Ensolanka’s Terms & Conditions,
                                                    Privacy Policy, service partner rules, and profile review process.
                                                </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 == 'experience' or field.name == 'skills' or field.name == 'education' or field.name == 'short_intro' or field.name == 'languages_spoken' %}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="service-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 'service_partner_app:home_service_partner' %}" class="btn btn-outline-secondary btn-lg">
                                    Cancel
                                </a>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="service-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,
                        trust, service quality, or guest-support standards.
                    </div>
                </div>

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