{% extends 'hosting_app/base_hosting.html' %}
{% load static %}

{% block title %}Banking Details | Host in Sri Lanka{% endblock %}

{% block content %}

<style>
    /* =========================================================
       HOST BANKING DETAILS — PREMIUM DASHBOARD STYLE
    ========================================================= */

    .hosting-banking-page {
        min-height: 100vh;
        padding: 4rem 0 5rem;
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.12), transparent 28%),
            radial-gradient(circle at top right, rgba(116, 49, 41, 0.10), transparent 32%),
            linear-gradient(180deg, #fffaf5 0%, #fff4e8 42%, #ffffff 100%);
    }

    .hosting-banking-hero {
        position: relative;
        overflow: hidden;
        border-radius: 38px;
        padding: 2.6rem 2.4rem;
        margin-bottom: 2rem;
        color: #ffffff;
        background:
            radial-gradient(circle at top right, rgba(255, 211, 107, 0.22), transparent 32%),
            linear-gradient(135deg, #2d1716 0%, #743129 56%, #a7601b 100%);
        box-shadow: 0 30px 68px rgba(58, 30, 24, 0.20);
    }

    .hosting-banking-hero::before {
        content: "";
        position: absolute;
        top: -110px;
        right: -85px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.07);
        pointer-events: none;
    }

    .hosting-banking-hero::after {
        content: "";
        position: absolute;
        bottom: -150px;
        left: -110px;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        background: rgba(255, 193, 7, 0.10);
        pointer-events: none;
    }

    .hosting-banking-hero-inner {
        position: relative;
        z-index: 2;
    }

    .hosting-banking-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.52rem 1rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: #ffe7aa;
        font-size: 0.84rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 1rem;
    }

    .hosting-banking-hero h1 {
        font-size: clamp(2.15rem, 4vw, 3.45rem);
        font-weight: 950;
        line-height: 1.1;
        letter-spacing: -0.045em;
        margin-bottom: 0.75rem;
    }

    .hosting-banking-hero p {
        max-width: 850px;
        margin-bottom: 0;
        color: rgba(255, 255, 255, 0.88);
        font-size: 1.03rem;
        line-height: 1.8;
    }

    .hosting-banking-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
        margin-top: 1.6rem;
    }

    .hosting-banking-hero-actions .btn {
        border-radius: 999px;
        font-weight: 850;
        padding: 0.82rem 1.35rem;
        min-height: 48px;
    }

    .hosting-btn-gold {
        background: #ffc107;
        color: #2d1716;
        border: none;
    }

    .hosting-btn-gold:hover {
        background: #ffe082;
        color: #2d1716;
        transform: translateY(-1px);
    }

    .hosting-btn-light-outline {
        background: rgba(255, 255, 255, 0.10);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.42);
    }

    .hosting-btn-light-outline:hover {
        background: #ffffff;
        color: #2d1716;
    }

    .hosting-banking-card {
        border-radius: 34px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(239, 226, 211, 0.95);
        box-shadow: 0 24px 56px rgba(58, 30, 24, 0.10);
        overflow: hidden;
    }

    .hosting-banking-card-header {
        padding: 1.7rem 1.8rem 1.25rem;
        border-bottom: 1px solid #efe2d3;
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.08), transparent 28%),
            linear-gradient(180deg, #ffffff 0%, #fffaf5 100%);
    }

    .hosting-banking-card-header h2 {
        color: #2d1716;
        font-weight: 950;
        margin-bottom: 0.4rem;
    }

    .hosting-banking-card-header p {
        color: #7a655d;
        line-height: 1.7;
        margin-bottom: 0;
    }

    .hosting-banking-card-body {
        padding: 2rem;
    }

    .hosting-form-section {
        padding: 1.6rem;
        border: 1px solid #efe2d3;
        border-radius: 28px;
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.05), transparent 30%),
            #ffffff;
        margin-bottom: 1.4rem;
    }

    .hosting-form-section-title {
        display: flex;
        align-items: flex-start;
        gap: 0.8rem;
        margin-bottom: 1.25rem;
    }

    .hosting-form-section-icon {
        width: 46px;
        height: 46px;
        border-radius: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #fff4e4;
        color: #a7601b;
        font-size: 1.2rem;
        flex-shrink: 0;
    }

    .hosting-form-section-title h3 {
        color: #2d1716;
        font-weight: 950;
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
    }

    .hosting-form-section-title p {
        color: #7a655d;
        line-height: 1.65;
        margin-bottom: 0;
        font-size: 0.95rem;
    }

    .hosting-form-group {
        margin-bottom: 1.25rem;
    }

    .hosting-form-group label {
        color: #2d1716;
        font-weight: 850;
        margin-bottom: 0.45rem;
        display: block;
    }

    .hosting-form-group input,
    .hosting-form-group select,
    .hosting-form-group textarea {
        border-radius: 16px;
        border: 1px solid #eadbc9;
        background-color: #fffaf5;
        color: #2d1716;
        min-height: 48px;
        transition: all 0.2s ease;
    }

    .hosting-form-group textarea {
        min-height: 120px;
    }

    .hosting-form-group input:focus,
    .hosting-form-group select:focus,
    .hosting-form-group textarea:focus {
        border-color: #a7601b;
        background-color: #ffffff;
        box-shadow: 0 0 0 0.22rem rgba(167, 96, 27, 0.13);
    }

    .hosting-help-text {
        display: block;
        color: #7a655d;
        font-size: 0.85rem;
        line-height: 1.55;
        margin-top: 0.42rem;
    }

    .hosting-field-error {
        color: #dc2626;
        font-size: 0.86rem;
        margin-top: 0.4rem;
        font-weight: 750;
    }

    .hosting-form-note {
        border-radius: 24px;
        padding: 1rem 1.1rem;
        background: #fff4e4;
        border: 1px solid #efd7ae;
        color: #7a4c18;
        line-height: 1.7;
        margin-top: 1.2rem;
    }

    .hosting-form-note strong {
        color: #2d1716;
    }

    .hosting-form-submit-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
        padding: 1.3rem 1.8rem;
        border-top: 1px solid #efe2d3;
        background: #fffaf5;
    }

    .hosting-form-submit-bar .btn {
        border-radius: 999px;
        font-weight: 850;
        min-height: 50px;
        padding: 0.82rem 1.4rem;
    }

    .hosting-submit-btn {
        background: linear-gradient(135deg, #321816, #a7601b);
        color: #ffffff;
        border: none;
        box-shadow: 0 14px 28px rgba(167, 96, 27, 0.20);
    }

    .hosting-submit-btn:hover {
        color: #2d1716;
        background: linear-gradient(135deg, #ffc107, #ffe082);
        transform: translateY(-2px);
    }

    .hosting-side-card {
        border-radius: 34px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(239, 226, 211, 0.95);
        box-shadow: 0 24px 56px rgba(58, 30, 24, 0.09);
        overflow: hidden;
        margin-bottom: 1.5rem;
        position: sticky;
        top: 1rem;
    }

    .hosting-side-card-header {
        padding: 1.5rem 1.6rem 1rem;
        border-bottom: 1px solid #efe2d3;
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.08), transparent 28%),
            linear-gradient(180deg, #ffffff 0%, #fffaf5 100%);
    }

    .hosting-side-card-header h3 {
        color: #2d1716;
        font-weight: 950;
        margin-bottom: 0.35rem;
    }

    .hosting-side-card-header p {
        color: #7a655d;
        line-height: 1.65;
        margin-bottom: 0;
    }

    .hosting-side-card-body {
        padding: 1.5rem;
    }

    .hosting-status-box {
        border-radius: 24px;
        padding: 1.15rem;
        border: 1px solid #efe2d3;
        background: #fffaf5;
        margin-bottom: 1rem;
    }

    .hosting-status-box span {
        display: block;
        color: #7a655d;
        font-size: 0.76rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.35rem;
    }

    .hosting-status-box strong {
        color: #2d1716;
        font-weight: 950;
    }

    .hosting-verified-pill,
    .hosting-pending-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.42rem;
        border-radius: 999px;
        padding: 0.52rem 0.85rem;
        font-weight: 900;
        font-size: 0.82rem;
    }

    .hosting-verified-pill {
        background: #ecfdf5;
        color: #047857;
        border: 1px solid #a7f3d0;
    }

    .hosting-pending-pill {
        background: #fffbeb;
        color: #92400e;
        border: 1px solid #fde68a;
    }

    .hosting-tip-list {
        display: grid;
        gap: 0.95rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .hosting-tip-list li {
        display: flex;
        align-items: flex-start;
        gap: 0.7rem;
        color: #6f5b53;
        line-height: 1.65;
    }

    .hosting-tip-list i {
        color: #a7601b;
        font-size: 1.05rem;
        margin-top: 0.2rem;
        flex-shrink: 0;
    }

    .hosting-admin-note {
        border-radius: 24px;
        padding: 1rem 1.1rem;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        color: #475569;
        line-height: 1.7;
        white-space: pre-line;
    }

    @media (max-width: 991.98px) {
        .hosting-banking-page {
            padding-top: 2.8rem;
        }

        .hosting-banking-hero {
            padding: 2rem 1.45rem;
            border-radius: 30px;
        }

        .hosting-side-card {
            position: static;
        }
    }

    @media (max-width: 767.98px) {
        .hosting-banking-card-body {
            padding: 1.15rem;
        }

        .hosting-form-section {
            padding: 1.2rem;
            border-radius: 24px;
        }

        .hosting-form-submit-bar {
            flex-direction: column;
            align-items: stretch;
            padding: 1.15rem;
        }

        .hosting-form-submit-bar .btn {
            width: 100%;
        }

        .hosting-banking-hero-actions {
            flex-direction: column;
            align-items: stretch;
        }

        .hosting-banking-hero-actions .btn {
            width: 100%;
        }
    }
</style>


<section class="hosting-banking-page">
    <div class="container">

        <!-- HERO -->
        <div class="hosting-banking-hero">
            <div class="hosting-banking-hero-inner">

                <span class="hosting-banking-kicker">
                    <i class="bi bi-bank2"></i>
                    Hosting Partner Payout Setup
                </span>

                <h1>Banking Details</h1>

                <p>
                    Add or update your bank details so Ensolanka can prepare payout records
                    for confirmed, delivered, and payable host event arrangements. These details
                    are used only for payout and internal verification purposes.
                </p>

                <div class="hosting-banking-hero-actions">
                    <a href="{% url 'hosting_app:host_profile_page' %}"
                       class="btn hosting-btn-light-outline">
                        <i class="bi bi-person-vcard-fill me-2"></i>
                        My Profile
                    </a>

                    <a href="{% url 'hosting_app:host_dashboard' %}"
                       class="btn hosting-btn-light-outline">
                        <i class="bi bi-speedometer2 me-2"></i>
                        Dashboard
                    </a>
                </div>

            </div>
        </div>


        <div class="row g-4 align-items-start">

            <!-- MAIN FORM -->
            <div class="col-lg-8">
                <div class="hosting-banking-card">

                    <div class="hosting-banking-card-header">
                        <h2>Bank Account Information</h2>
                        <p>
                            Please keep your banking information accurate. Ensolanka may verify details
                            before processing payout requests or manual transfers.
                        </p>
                    </div>

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

                        <div class="hosting-banking-card-body">

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

                            <!-- ACCOUNT DETAILS -->
                            <div class="hosting-form-section">
                                <div class="hosting-form-section-title">
                                    <div class="hosting-form-section-icon">
                                        <i class="bi bi-person-badge-fill"></i>
                                    </div>
                                    <div>
                                        <h3>Account Holder Details</h3>
                                        <p>
                                            Enter the exact name and bank account details for payout processing.
                                        </p>
                                    </div>
                                </div>

                                <div class="row g-3">

                                    <div class="col-md-12">
                                        <div class="hosting-form-group">
                                            <label for="{{ form.account_holder_name.id_for_label }}">
                                                Account Holder Name
                                            </label>
                                            {{ form.account_holder_name }}

                                            {% for error in form.account_holder_name.errors %}
                                                <div class="hosting-field-error">{{ error }}</div>
                                            {% endfor %}
                                        </div>
                                    </div>

                                    <div class="col-md-8">
                                        <div class="hosting-form-group">
                                            <label for="{{ form.bank_name.id_for_label }}">
                                                Bank Name
                                            </label>
                                            {{ form.bank_name }}

                                            {% for error in form.bank_name.errors %}
                                                <div class="hosting-field-error">{{ error }}</div>
                                            {% endfor %}
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <div class="hosting-form-group">
                                            <label for="{{ form.branch_name.id_for_label }}">
                                                Branch Name
                                            </label>
                                            {{ form.branch_name }}

                                            {% for error in form.branch_name.errors %}
                                                <div class="hosting-field-error">{{ error }}</div>
                                            {% endfor %}
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="hosting-form-group">
                                            <label for="{{ form.account_number.id_for_label }}">
                                                Account Number
                                            </label>
                                            {{ form.account_number }}

                                            {% for error in form.account_number.errors %}
                                                <div class="hosting-field-error">{{ error }}</div>
                                            {% endfor %}
                                        </div>
                                    </div>

                                </div>
                            </div>


                            <!-- INTERNATIONAL DETAILS -->
                            <div class="hosting-form-section">
                                <div class="hosting-form-section-title">
                                    <div class="hosting-form-section-icon">
                                        <i class="bi bi-globe2"></i>
                                    </div>
                                    <div>
                                        <h3>International / Transfer Details</h3>
                                        <p>
                                            These fields are optional, but useful if international transfer details are required.
                                        </p>
                                    </div>
                                </div>

                                <div class="row g-3">

                                    <div class="col-md-6">
                                        <div class="hosting-form-group">
                                            <label for="{{ form.iban.id_for_label }}">
                                                IBAN
                                            </label>
                                            {{ form.iban }}

                                            {% for error in form.iban.errors %}
                                                <div class="hosting-field-error">{{ error }}</div>
                                            {% endfor %}
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="hosting-form-group">
                                            <label for="{{ form.swift_code.id_for_label }}">
                                                SWIFT / BIC Code
                                            </label>
                                            {{ form.swift_code }}

                                            {% for error in form.swift_code.errors %}
                                                <div class="hosting-field-error">{{ error }}</div>
                                            {% endfor %}
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="hosting-form-group">
                                            <label for="{{ form.bank_country.id_for_label }}">
                                                Bank Country
                                            </label>
                                            {{ form.bank_country }}

                                            {% for error in form.bank_country.errors %}
                                                <div class="hosting-field-error">{{ error }}</div>
                                            {% endfor %}
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="hosting-form-group">
                                            <label for="{{ form.bank_address.id_for_label }}">
                                                Bank Address
                                            </label>
                                            {{ form.bank_address }}

                                            {% for error in form.bank_address.errors %}
                                                <div class="hosting-field-error">{{ error }}</div>
                                            {% endfor %}
                                        </div>
                                    </div>

                                </div>
                            </div>


                            <!-- PAYMENT NOTES -->
                            <div class="hosting-form-section">
                                <div class="hosting-form-section-title">
                                    <div class="hosting-form-section-icon">
                                        <i class="bi bi-journal-text"></i>
                                    </div>
                                    <div>
                                        <h3>Payout Notes</h3>
                                        <p>
                                            Add optional payout instructions or notes for the Ensolanka team.
                                        </p>
                                    </div>
                                </div>

                                <div class="hosting-form-group">
                                    <label for="{{ form.payment_notes.id_for_label }}">
                                        Payment Notes
                                    </label>
                                    {{ form.payment_notes }}

                                    {% if form.payment_notes.help_text %}
                                        <small class="hosting-help-text">
                                            {{ form.payment_notes.help_text }}
                                        </small>
                                    {% endif %}

                                    {% for error in form.payment_notes.errors %}
                                        <div class="hosting-field-error">{{ error }}</div>
                                    {% endfor %}
                                </div>

                                <div class="hosting-form-note">
                                    <strong>Security note:</strong>
                                    Please ensure that the account details belong to the correct hosting partner
                                    or authorized business. Ensolanka may request additional verification before payout.
                                </div>
                            </div>

                        </div>


                        <!-- SUBMIT BAR -->
                        <div class="hosting-form-submit-bar">
                            <a href="{% url 'hosting_app:host_profile_page' %}"
                               class="btn btn-outline-secondary">
                                <i class="bi bi-arrow-left-circle me-2"></i>
                                Back to Profile
                            </a>

                            <button type="submit" class="btn hosting-submit-btn">
                                <i class="bi bi-check-circle-fill me-2"></i>
                                Save Banking Details
                            </button>
                        </div>

                    </form>

                </div>
            </div>


            <!-- SIDE INFO -->
            <div class="col-lg-4">

                <!-- STATUS -->
                <div class="hosting-side-card">
                    <div class="hosting-side-card-header">
                        <h3>Verification Status</h3>
                        <p>
                            Banking verification is handled by the Ensolanka admin team.
                        </p>
                    </div>

                    <div class="hosting-side-card-body">

                        <div class="hosting-status-box">
                            <span>Current Status</span>

                            {% if banking_details.is_verified %}
                                <div class="hosting-verified-pill">
                                    <i class="bi bi-patch-check-fill"></i>
                                    Verified
                                </div>
                            {% else %}
                                <div class="hosting-pending-pill">
                                    <i class="bi bi-hourglass-split"></i>
                                    Pending Verification
                                </div>
                            {% endif %}
                        </div>

                        <div class="hosting-status-box">
                            <span>Hosting Partner</span>
                            <strong>{{ host_profile.business_name }}</strong>
                        </div>

                        <div class="hosting-status-box">
                            <span>Last Updated</span>
                            <strong>{{ banking_details.updated_at|date:"M d, Y" }}</strong>
                        </div>

                        {% if banking_details.admin_review_note %}
                            <div class="hosting-admin-note">
                                <strong>Admin Note:</strong><br>
                                {{ banking_details.admin_review_note }}
                            </div>
                        {% endif %}

                    </div>
                </div>


                <!-- GUIDANCE -->
                <div class="hosting-side-card">
                    <div class="hosting-side-card-header">
                        <h3>Payout Readiness Tips</h3>
                        <p>
                            Accurate details reduce delays when events are completed and payouts are prepared.
                        </p>
                    </div>

                    <div class="hosting-side-card-body">

                        <ul class="hosting-tip-list">
                            <li>
                                <i class="bi bi-check-circle-fill"></i>
                                <span>
                                    Use the exact account holder name registered with your bank.
                                </span>
                            </li>

                            <li>
                                <i class="bi bi-check-circle-fill"></i>
                                <span>
                                    Double-check account number, branch name, and bank name before saving.
                                </span>
                            </li>

                            <li>
                                <i class="bi bi-check-circle-fill"></i>
                                <span>
                                    Add SWIFT or IBAN details only if they are required for your payout method.
                                </span>
                            </li>

                            <li>
                                <i class="bi bi-check-circle-fill"></i>
                                <span>
                                    If your payout should be made to a business account, mention relevant notes clearly.
                                </span>
                            </li>

                            <li>
                                <i class="bi bi-check-circle-fill"></i>
                                <span>
                                    Ensolanka may verify payout details before transferring funds.
                                </span>
                            </li>
                        </ul>

                        <div class="hosting-form-note">
                            <strong>Important:</strong>
                            This banking page is for host payout readiness. Guests do not see your banking details.
                        </div>

                    </div>
                </div>


                <!-- QUICK LINKS -->
                <div class="hosting-side-card">
                    <div class="hosting-side-card-header">
                        <h3>Quick Links</h3>
                        <p>
                            Continue managing your hosting account.
                        </p>
                    </div>

                    <div class="hosting-side-card-body">
                        <div class="d-grid gap-2">

                            <a href="{% url 'hosting_app:host_dashboard' %}"
                               class="btn btn-dark rounded-pill fw-bold">
                                <i class="bi bi-speedometer2 me-2"></i>
                                My Dashboard
                            </a>

                            <a href="{% url 'hosting_app:host_profile_page' %}"
                               class="btn btn-outline-dark rounded-pill fw-bold">
                                <i class="bi bi-person-vcard-fill me-2"></i>
                                My Profile
                            </a>

                            <a href="{% url 'hosting_app:host_venue_list' %}"
                               class="btn btn-outline-dark rounded-pill fw-bold">
                                <i class="bi bi-buildings-fill me-2"></i>
                                My Venues
                            </a>

                        </div>
                    </div>
                </div>

            </div>

        </div>

    </div>
</section>

{% endblock %}