{% extends 'service_partner_app/base_service_partner.html' %}
{% load static %}
{% block title %}Service Partner Dashboard | Hired in Sri Lanka{% endblock %}

{% block content %}

<style>
    /* =========================================================
       DASHBOARD HERO
    ========================================================= */
    .service-dashboard-hero {
        position: relative;
        padding: 78px 0 70px;
        background:
            linear-gradient(
                110deg,
                rgba(7, 22, 31, 0.98) 0%,
                rgba(10, 45, 53, 0.94) 48%,
                rgba(13, 148, 136, 0.80) 100%
            );
        overflow: hidden;
    }

    .service-dashboard-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 12% 16%, rgba(255, 193, 7, 0.22), transparent 28%),
            radial-gradient(circle at 88% 76%, rgba(255, 255, 255, 0.11), transparent 28%);
        pointer-events: none;
    }

    .service-dashboard-hero::after {
        content: "";
        position: absolute;
        top: -120px;
        right: -100px;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.055);
        pointer-events: none;
    }

    .service-dashboard-inner {
        position: relative;
        z-index: 2;
    }

    .dashboard-page-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 18px;
        border-radius: 999px;
        background: rgba(255, 193, 7, 0.18);
        border: 1px solid rgba(255, 193, 7, 0.36);
        color: #ffd453;
        font-weight: 800;
        font-size: 0.85rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .service-dashboard-title {
        color: #fff;
        font-size: clamp(2.35rem, 4vw, 3.65rem);
        line-height: 1.12;
        font-weight: 900;
    }

    .service-dashboard-lead {
        color: rgba(255, 255, 255, 0.88);
        font-size: 1.12rem;
        line-height: 1.8;
        max-width: 760px;
    }

    .dashboard-welcome-card-premium {
        min-height: 100%;
        padding: 36px;
        border-radius: 34px;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.16);
        backdrop-filter: blur(12px);
        box-shadow: 0 30px 72px rgba(0, 0, 0, 0.22);
    }

    .dashboard-welcome-mini-grid {
        margin-top: 28px;
    }

    .dashboard-mini-feature {
        height: 100%;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 16px 17px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.14);
        color: #fff;
    }

    .dashboard-mini-feature i {
        color: #ffc107;
        margin-top: 2px;
        font-size: 1.18rem;
    }


    /* =========================================================
       PROFILE STATUS CARD
    ========================================================= */
    .dashboard-status-card-premium {
        position: relative;
        height: 100%;
        padding: 32px;
        border-radius: 34px;
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 35px 82px rgba(0, 0, 0, 0.28);
        border: 1px solid rgba(255, 255, 255, 0.64);
        overflow: hidden;
    }

    .dashboard-status-card-premium::before {
        content: "";
        position: absolute;
        right: -55px;
        top: -55px;
        width: 170px;
        height: 170px;
        border-radius: 50%;
        background: rgba(13, 148, 136, 0.11);
        pointer-events: none;
    }

    .dashboard-status-content {
        position: relative;
        z-index: 2;
    }

    .status-card-label {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        background: #eafff7;
        color: #0d9488;
        font-size: 0.82rem;
        font-weight: 800;
        margin-bottom: 18px;
    }

    .dashboard-status-card-premium h5 {
        font-weight: 900;
        color: #0d1f2a;
        margin-bottom: 20px;
    }

    .dashboard-status-row {
        padding: 15px 0;
        border-bottom: 1px solid #edf2f3;
    }

    .dashboard-status-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .dashboard-status-key {
        display: block;
        color: #64748b;
        font-weight: 700;
        font-size: 0.88rem;
        margin-bottom: 4px;
    }

    .dashboard-status-value {
        color: #0d1f2a;
        font-weight: 800;
        line-height: 1.5;
    }

    .status-pill {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        border-radius: 999px;
        padding: 7px 13px;
        font-weight: 800;
        font-size: 0.86rem;
    }

    .status-approved {
        color: #087f5b;
        background: #e6fcf5;
    }

    .status-pending {
        color: #b7791f;
        background: #fff7e6;
    }

    .status-rejected {
        color: #c92a2a;
        background: #fff0f0;
    }

    .status-muted {
        color: #475569;
        background: #f1f5f9;
    }


    /* =========================================================
       JUST SIGNED UP ALERT
    ========================================================= */
    .signup-success-premium {
        border: none;
        border-radius: 30px;
        padding: 30px;
        background:
            linear-gradient(135deg, #ebfff7 0%, #f8fffc 100%);
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.13);
        border: 1px solid rgba(16, 185, 129, 0.18);
    }

    .signup-success-icon {
        width: 64px;
        height: 64px;
        border-radius: 22px;
        background: #dffaf0;
        color: #0d9488;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        flex-shrink: 0;
    }

    .signup-detail-box {
        background: #fff;
        border: 1px solid #e5eeee;
        border-radius: 24px;
        padding: 22px;
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
    }

    .signup-detail-row {
        padding: 8px 0;
        border-bottom: 1px dashed #e4ecee;
    }

    .signup-detail-row:last-child {
        border-bottom: none;
    }

    .signup-security-note {
        padding-top: 18px;
        border-top: 1px solid #edf2f3;
        color: #64748b;
    }


    /* =========================================================
       DASHBOARD ACTION AREA
    ========================================================= */
    .dashboard-actions-section {
        background:
            linear-gradient(180deg, #f5faf9 0%, #eef6f5 100%);
        padding-top: 58px;
        padding-bottom: 76px;
    }

    .dashboard-section-heading {
        margin-bottom: 34px;
    }

    .dashboard-section-heading h2 {
        font-weight: 900;
        color: #0d1f2a;
    }

    .dashboard-section-heading p {
        max-width: 760px;
        color: #64748b;
    }

    .dashboard-action-card {
        position: relative;
        height: 100%;
        background: #fff;
        border-radius: 30px;
        padding: 30px 26px;
        box-shadow: 0 20px 52px rgba(15, 23, 42, 0.09);
        border: 1px solid #edf2f3;
        transition: all 0.28s ease;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .dashboard-action-card::before {
        content: "";
        position: absolute;
        right: -50px;
        top: -50px;
        width: 135px;
        height: 135px;
        border-radius: 50%;
        background: rgba(13, 148, 136, 0.08);
        transition: 0.28s ease;
    }

    .dashboard-action-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 32px 72px rgba(15, 23, 42, 0.15);
    }

    .dashboard-action-card:hover::before {
        transform: scale(1.12);
    }

    .dashboard-action-content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .dashboard-card-icon {
        width: 68px;
        height: 68px;
        border-radius: 22px;
        background: #eafff7;
        color: #0d9488;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.85rem;
        margin-bottom: 20px;
        box-shadow: 0 12px 28px rgba(13, 148, 136, 0.12);
    }

    .dashboard-profile-image-wrap {
        width: 78px;
        height: 78px;
        border-radius: 24px;
        padding: 4px;
        background: linear-gradient(135deg, #0d9488 0%, #ffc107 100%);
        margin-bottom: 18px;
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
    }

    .dashboard-profile-icon-premium {
        width: 100%;
        height: 100%;
        border-radius: 20px;
        object-fit: cover;
        background: #fff;
        display: block;
    }

    .dashboard-action-card h5 {
        font-weight: 900;
        color: #0d1f2a;
        margin-bottom: 12px;
    }

    .dashboard-action-card p {
        color: #64748b;
        line-height: 1.75;
        margin-bottom: 24px;
    }

    .dashboard-card-btn {
        margin-top: auto;
        border-radius: 999px;
        min-height: 48px;
        padding-left: 1.2rem;
        padding-right: 1.2rem;
        font-weight: 800;
    }

    .dashboard-card-highlight {
        border-color: rgba(255, 193, 7, 0.26);
        background:
            linear-gradient(180deg, #ffffff 0%, #fffdf7 100%);
    }

    .dashboard-card-highlight .dashboard-card-icon {
        background: #fff4cc;
        color: #b7791f;
    }


    /* =========================================================
       RESPONSIVE
    ========================================================= */
    @media (max-width: 991.98px) {
        .service-dashboard-hero {
            padding: 64px 0 64px;
        }

        .dashboard-welcome-card-premium,
        .dashboard-status-card-premium,
        .signup-success-premium {
            padding: 24px;
        }

        .dashboard-action-card {
            padding: 26px 22px;
        }
    }
</style>


<!-- =========================================================
     DASHBOARD HERO
========================================================= -->
<section class="service-dashboard-hero">
    <div class="container service-dashboard-inner">

        {% if just_signed_up %}
        <div class="row justify-content-center mb-5">
            <div class="col-12 col-lg-11">
                <div class="signup-success-premium">
                    <div class="d-flex flex-column flex-md-row align-items-start gap-4">
                        <div class="signup-success-icon">
                            <i class="bi bi-check-circle-fill"></i>
                        </div>

                        <div class="w-100">
                            <h4 class="fw-bold mb-2 text-dark">
                                Welcome! Your service partner account has been created successfully.
                            </h4>

                            <p class="mb-4 text-muted">
                                You are now signed in to your service partner dashboard.
                                Your profile has been submitted and is pending review.
                            </p>

                            {% if account_role or new_account_email or username or password %}
                            <div class="signup-detail-box">
                                <div class="row g-2">

                                    {% if account_role %}
                                    <div class="col-12 signup-detail-row">
                                        <div class="d-flex flex-column flex-sm-row">
                                            <strong class="me-sm-2 text-dark" style="min-width: 165px;">Account Type:</strong>
                                            <span class="text-break">{{ account_role }}</span>
                                        </div>
                                    </div>
                                    {% endif %}

                                    {% if new_account_email %}
                                    <div class="col-12 signup-detail-row">
                                        <div class="d-flex flex-column flex-sm-row">
                                            <strong class="me-sm-2 text-dark" style="min-width: 165px;">Email:</strong>
                                            <span class="text-break">{{ new_account_email }}</span>
                                        </div>
                                    </div>
                                    {% endif %}

                                    {% if username %}
                                    <div class="col-12 signup-detail-row">
                                        <div class="d-flex flex-column flex-sm-row">
                                            <strong class="me-sm-2 text-dark" style="min-width: 165px;">Username:</strong>
                                            <span class="text-break">{{ username }}</span>
                                        </div>
                                    </div>
                                    {% endif %}

                                    {% if password %}
                                    <div class="col-12 signup-detail-row">
                                        <div class="d-flex flex-column flex-sm-row">
                                            <strong class="me-sm-2 text-dark" style="min-width: 165px;">Temporary Password:</strong>
                                            <span class="text-break">{{ password }}</span>
                                        </div>
                                    </div>
                                    {% endif %}

                                </div>

                                <p class="mb-0 small signup-security-note">
                                    Your initial username and password have been sent to your email address.
                                    For better security, please change your password after your first login.
                                </p>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}


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

            <!-- WELCOME -->
            <div class="col-lg-8">
                <div class="dashboard-welcome-card-premium">
                    <span class="dashboard-page-badge mb-4">
                        <i class="bi bi-speedometer2"></i>
                        Service Partner Dashboard
                    </span>

                    <h1 class="service-dashboard-title mb-3">
                        Welcome, {{ partner.display_name|default:partner.full_name }}
                    </h1>

                    <p class="service-dashboard-lead mb-0">
                        Manage your professional service partner profile, monitor review status,
                        handle visibility-related payments, and follow new interest requests from
                        international Guests through your dedicated partner dashboard.
                    </p>

                    <div class="row g-3 dashboard-welcome-mini-grid">
                        <div class="col-md-6">
                            <div class="dashboard-mini-feature">
                                <i class="bi bi-person-vcard-fill"></i>
                                <span>Keep your profile strong, current, and professionally presented.</span>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="dashboard-mini-feature">
                                <i class="bi bi-stars"></i>
                                <span>Explore payment-center options to improve visibility where available.</span>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="dashboard-mini-feature">
                                <i class="bi bi-people-fill"></i>
                                <span>Review Guests who have expressed interest in your service profile.</span>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="dashboard-mini-feature">
                                <i class="bi bi-chat-square-dots-fill"></i>
                                <span>Reach Ensolanka support whenever you need clarification or assistance.</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- STATUS -->
            <div class="col-lg-4">
                <div class="dashboard-status-card-premium">
                    <div class="dashboard-status-content">
                        <span class="status-card-label">
                            <i class="bi bi-clipboard-check-fill"></i>
                            Account Snapshot
                        </span>

                        <h5>Profile Status</h5>

                        <div class="dashboard-status-row">
                            <span class="dashboard-status-key">Service Type</span>
                            <span class="dashboard-status-value">
                                {{ partner.get_service_type_display }}
                            </span>
                        </div>

                        <div class="dashboard-status-row">
                            <span class="dashboard-status-key">Review Status</span>

                            {% if partner.status == 'approved' %}
                                <span class="status-pill status-approved">
                                    <i class="bi bi-check-circle-fill"></i>
                                    Approved
                                </span>
                            {% elif partner.status == 'pending' %}
                                <span class="status-pill status-pending">
                                    <i class="bi bi-hourglass-split"></i>
                                    Pending Review
                                </span>
                            {% elif partner.status == 'rejected' %}
                                <span class="status-pill status-rejected">
                                    <i class="bi bi-x-circle-fill"></i>
                                    Rejected
                                </span>
                            {% else %}
                                <span class="status-pill status-muted">
                                    <i class="bi bi-info-circle-fill"></i>
                                    {{ partner.get_status_display }}
                                </span>
                            {% endif %}
                        </div>

                        <div class="dashboard-status-row">
                            <span class="dashboard-status-key">Profile Code</span>
                            <span class="dashboard-status-value">
                                {{ partner.profile_code }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

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


<!-- =========================================================
     DASHBOARD ACTION CARDS
========================================================= -->
<section class="dashboard-actions-section">
    <div class="container">

        <div class="dashboard-section-heading text-center">
            <span class="section-mini-title">Your Partner Tools</span>
            <h2 class="mt-2 mb-3">Manage Everything from One Place</h2>
            <p class="mx-auto mb-0">
                Use these dashboard shortcuts to manage your profile,
                improve visibility, view interested Guests, and receive support when needed.
            </p>
        </div>

        <div class="row g-4">

            <!-- MY PROFILE -->
            <div class="col-md-6 col-xl-3">
                <div class="dashboard-action-card">
                    <div class="dashboard-action-content text-center">
                        <div class="dashboard-profile-image-wrap mx-auto">
                            <img
                                src="{% if partner.profile_photo %}{{ partner.profile_photo.url }}{% else %}{% static default_profile_image %}{% endif %}"
                                alt="Profile Image"
                                class="dashboard-profile-icon-premium"
                            >
                        </div>

                        <h5>My Profile</h5>
                        <p>
                            View and manage your service profile details, contact information,
                            availability, and professional presentation.
                        </p>

                        <a href="{% url 'service_partner_app:service_partner_profile_page' %}"
                           class="btn btn-outline-dark dashboard-card-btn">
                            Open Profile
                        </a>
                    </div>
                </div>
            </div>


            <!-- PAYMENT CENTER -->
            <div class="col-md-6 col-xl-3">
                <div class="dashboard-action-card dashboard-card-highlight">
                    <div class="dashboard-action-content">
                        <div class="dashboard-card-icon">
                            <i class="bi bi-credit-card-2-front-fill"></i>
                        </div>

                        <h5>Payment Center</h5>
                        <p>
                            Manage your featured profile payment, view payment records,
                            and improve profile visibility for greater exposure and opportunity.
                        </p>

                        <a href="{% url 'service_partner_app:service_partner_payment_center' %}"
                           class="btn btn-dark dashboard-card-btn">
                            Open Payment Center
                        </a>
                    </div>
                </div>
            </div>


            <!-- INTEREST REQUESTS -->
            <div class="col-md-6 col-xl-3">
                <div class="dashboard-action-card">
                    <div class="dashboard-action-content">
                        <div class="dashboard-card-icon">
                            <i class="bi bi-people-fill"></i>
                        </div>

                        <h5>Interest Requests</h5>
                        <p>
                            View international Guests who have expressed interest
                            in your service partner profile.
                        </p>

                        <a href="{% url 'service_partner_app:interested_foreigners_list' %}"
                           class="btn btn-outline-dark dashboard-card-btn">
                            View Requests
                        </a>
                    </div>
                </div>
            </div>


            <!-- SUPPORT -->
            <div class="col-md-6 col-xl-3">
                <div class="dashboard-action-card">
                    <div class="dashboard-action-content">
                        <div class="dashboard-card-icon">
                            <i class="bi bi-chat-dots-fill"></i>
                        </div>

                        <h5>Support</h5>
                        <p>
                            Contact Ensolanka for clarification, profile assistance,
                            payment questions, or general partner support.
                        </p>

                        <a href="{% url 'service_partner_app:contact_page' %}"
                           class="btn btn-outline-dark dashboard-card-btn">
                            Contact Support
                        </a>
                    </div>
                </div>
            </div>

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

{% endblock %}