{% extends 'property_manager_app/base_property_manager.html' %}
{% load static %}
{% load expat_extras %}

{% block title %}Property Care Information Center | Ensolanka{% endblock %}

{% block content %}

<style>
    /* =========================================================
       PROPERTY CARE INFORMATION CENTER — PROPERTY MANAGER STYLE
    ========================================================= */

    .pm-info-page {
        min-height: 100vh;
        background: #f6fffc;
        padding-bottom: 5rem;
    }

    .pm-info-hero {
        background:
            linear-gradient(
                90deg,
                rgba(5, 28, 24, 0.94) 0%,
                rgba(5, 36, 31, 0.86) 42%,
                rgba(15, 118, 110, 0.68) 100%
            ),
            url("{% static 'expat_life/images/property_manager_hero.webp' %}") center center / cover no-repeat;
        color: #fff;
        padding: 5rem 0 4rem;
        position: relative;
        overflow: hidden;
    }

    .pm-info-hero::after {
        content: "";
        position: absolute;
        right: -90px;
        top: -90px;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: rgba(251, 191, 36, 0.16);
        pointer-events: none;
    }

    .pm-info-hero .container {
        position: relative;
        z-index: 2;
    }

    .pm-info-hero .section-mini-title {
        color: #fbbf24;
        font-size: .78rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .1em;
    }

    .pm-info-hero h1 {
        font-weight: 900;
        letter-spacing: -0.04em;
        line-height: 1.08;
    }

    .pm-info-hero p {
        color: rgba(255, 255, 255, 0.86);
        line-height: 1.8;
        max-width: 850px;
    }

    .pm-info-hero-card {
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.22);
        backdrop-filter: blur(14px);
        border-radius: 28px;
        padding: 2rem;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
    }

    .pm-info-hero-card span {
        font-size: 0.78rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: rgba(255, 255, 255, 0.72);
        font-weight: 800;
    }

    .pm-info-hero-card h3 {
        color: #fbbf24;
        font-weight: 900;
        margin-top: 0.55rem;
        margin-bottom: 0.7rem;
    }

    .pm-info-hero-card p {
        font-size: 0.94rem;
        margin-bottom: 0;
    }

    .pm-info-wrapper {
        margin-top: -2.2rem;
        position: relative;
        z-index: 5;
    }

    .pm-back-row {
        margin-bottom: 1rem;
    }

    .pm-back-row .btn {
        border-radius: 999px;
        font-weight: 800;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    }

    .pm-guidance-card {
        border-radius: 24px;
        overflow: hidden;
        background: #ffffff;
        border: none;
        box-shadow: 0 16px 45px rgba(15, 118, 110, 0.13);
    }

    .pm-guidance-header {
        background:
            linear-gradient(135deg, rgba(5, 46, 37, 0.98), rgba(15, 118, 110, 0.94));
        color: #fff;
        padding: 1.5rem 1.75rem;
        border-bottom: none;
    }

    .pm-guidance-header .section-mini-title {
        color: #fbbf24;
        font-size: .76rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .1em;
    }

    .pm-guidance-header h3 {
        font-weight: 850;
    }

    .pm-guidance-header p {
        color: rgba(255, 255, 255, .84);
        max-width: 850px;
    }

    .pm-info-note {
        border-radius: 20px;
        background: #ecfdf5;
        border: 1px solid #99f6e4;
        color: #0f766e;
        padding: 1rem 1.1rem;
        line-height: 1.65;
        margin-bottom: 1.3rem;
    }

    .pm-info-note strong {
        color: #052e25;
    }

    .pm-language-panel {
        display: none;
    }

    .pm-language-panel.active {
        display: block;
    }

    .pm-language-image-buttons {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .65rem;
    }

    .pm-language-image-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        border-radius: 999px;
        opacity: 0.72;
        transition: all .22s ease;
        border: 2px solid transparent;
    }

    .pm-language-image-btn img {
        width: 150px;
        max-width: 100%;
        height: auto;
        display: block;
    }

    .pm-language-image-btn:hover {
        opacity: 1;
        transform: translateY(-2px);
        filter: drop-shadow(0 10px 18px rgba(15, 118, 110, 0.22));
    }

    .pm-language-image-btn.active {
        opacity: 1;
        transform: translateY(-2px);
        filter: drop-shadow(0 12px 22px rgba(15, 118, 110, 0.30));
    }

    .pm-guide-box,
    .pm-media-box {
        background: #f6fffc;
        border: 1px solid #ccfbf1;
        border-radius: 20px;
        padding: 1.35rem;
    }

    .pm-guide-icon {
        width: 52px;
        height: 52px;
        border-radius: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #052e25;
        color: #fbbf24;
        font-size: 1.45rem;
        flex-shrink: 0;
    }

    .pm-guidance-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .pm-guidance-list li {
        display: flex;
        gap: .65rem;
        margin-bottom: .75rem;
        color: #475569;
        line-height: 1.58;
    }

    .pm-guidance-list li i {
        color: #16a34a;
        margin-top: .18rem;
        flex-shrink: 0;
    }

    .pm-video-wrapper {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
        border-radius: 16px;
        overflow: hidden;
        background: #052e25;
    }

    .pm-video-wrapper iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    .pm-media-box audio {
        height: 40px;
    }

    .pm-empty-box {
        text-align: center;
        padding: 3rem 1.5rem;
        background: #f6fffc;
        border: 1px solid #ccfbf1;
        border-radius: 22px;
    }

    .pm-empty-box i {
        font-size: 2.2rem;
        color: #0f766e;
    }

    .pm-empty-box h5 {
        color: #052e25;
        font-weight: 850;
        margin-top: 1rem;
    }

    .pm-empty-box p {
        color: #475569;
        max-width: 620px;
        margin-left: auto;
        margin-right: auto;
    }

    .pm-btn-primary {
        background: linear-gradient(135deg, #052e25, #0f766e);
        border: none;
        color: #fff;
    }

    .pm-btn-primary:hover {
        color: #fff;
        background: linear-gradient(135deg, #0f766e, #052e25);
    }

    @media (max-width: 991.98px) {
        .pm-info-hero {
            padding: 4rem 0 3.25rem;
        }

        .pm-info-hero-card {
            padding: 1.4rem;
        }

        .pm-language-image-buttons {
            justify-content: flex-start;
        }

        .pm-language-image-btn img {
            width: 135px;
        }
    }

    @media (max-width: 767.98px) {
        .pm-info-hero {
            text-align: center;
        }

        .pm-info-wrapper {
            margin-top: -1.5rem;
        }

        .pm-guidance-header,
        .card-body.p-4 {
            padding-left: 1.1rem !important;
            padding-right: 1.1rem !important;
        }

        .pm-language-image-buttons {
            justify-content: center;
        }

        .pm-language-image-btn img {
            width: 120px;
        }
    }

    @media (max-width: 420px) {
        .pm-language-image-btn img {
            width: 100px;
        }
    }
</style>


<section class="pm-info-page">

    <!-- HERO -->
    <div class="pm-info-hero">
        <div class="container">
            <div class="row align-items-center g-4">
                <div class="col-lg-8">
                    <span class="section-mini-title d-block mb-2">
                        Property Care Guidance Resources
                    </span>

                    <h1 class="display-4 mb-3">
                        Multilingual Information Center
                    </h1>

                    <p class="lead mb-0">
                        Access the Ensolanka Remote Property Care Guidance Playbook,
                        summary overview, audio guide, and video guidance in English,
                        Sinhala, or Tamil.
                    </p>
                </div>

                <div class="col-lg-4">
                    <div class="pm-info-hero-card">
                        <span>Current Resource Center</span>
                        <h3>Remote Property Care Guidance</h3>
                        <p>
                            Learn how to register your property, select care services,
                            understand maintenance plans, and work with Ensolanka for
                            safer remote property management.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- CONTENT -->
    <div class="container pm-info-wrapper">

        <div class="pm-back-row d-flex flex-wrap gap-2 justify-content-between align-items-center">
            <a href="{% url 'property_manager_app:home_property_manager' %}"
               class="btn btn-light">
                <i class="bi bi-arrow-left-circle me-1"></i>
                Back to Property Care Home
            </a>

            {% if request.user.is_authenticated %}
                <a href="{% url 'property_manager_app:property_manager_dashboard' %}"
                   class="btn pm-btn-primary">
                    <i class="bi bi-speedometer2 me-1"></i>
                    Property Care Dashboard
                </a>
            {% endif %}
        </div>


        <!-- Section: Property Care Guidance -->
        <div id="property-care-guidance" class="card border-0 shadow-sm pm-guidance-card">
            <div class="card-header pm-guidance-header">
                <div>
                    <span class="section-mini-title d-block mb-1">
                        Property Care Guidance
                    </span>

                    <h3 class="mb-1">
                        Playbook, Maintenance Guidance &amp; Remote Owner Support
                    </h3>

                    <p class="mb-0">
                        Understand how to prepare your property details, select care services,
                        review monthly estimates, handle quoted tasks, and follow the guided
                        remote property care process.
                    </p>
                </div>
            </div>

            <div class="card-body p-4">

                {% if guidance_resources %}

                    <div class="pm-info-note">
                        <strong>Select a language below.</strong>
                        The guidance playbook, downloadable documents, audio guide, and video guidance
                        will change according to your selected language.
                    </div>

                    <!-- Language Image Buttons -->
                    <div class="pm-language-image-buttons mb-3">

                        <a href="?lang=si"
                           class="pm-language-image-btn {% if selected_language == 'si' %}active{% endif %}"
                           data-guidance-lang="si"
                           aria-label="Open Sinhala resources">
                            <img src="{% static 'expat_life/images/sinhala.png' %}"
                                 alt="Sinhala">
                        </a>

                        <a href="?lang=ta"
                           class="pm-language-image-btn {% if selected_language == 'ta' %}active{% endif %}"
                           data-guidance-lang="ta"
                           aria-label="Open Tamil resources">
                            <img src="{% static 'expat_life/images/tamil.png' %}"
                                 alt="Tamil">
                        </a>

                        <a href="?lang=en"
                           class="pm-language-image-btn {% if selected_language == 'en' %}active{% endif %}"
                           data-guidance-lang="en"
                           aria-label="Open English resources">
                            <img src="{% static 'expat_life/images/english.png' %}"
                                 alt="English">
                        </a>

                    </div>


                    <!-- Guidance Content Panels -->
                    {% for resource in guidance_resources %}
                        <div class="pm-language-panel {% if resource.language == selected_language %}active{% endif %}"
                             data-guidance-panel="{{ resource.language }}">

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

                                <!-- Left: Guidance Details -->
                                <div class="col-lg-7">
                                    <div class="pm-guide-box h-100">

                                        <div class="d-flex align-items-start gap-3 mb-3">
                                            <div class="pm-guide-icon">
                                                <i class="bi bi-house-gear-fill"></i>
                                            </div>

                                            <div>
                                                <span class="badge rounded-pill bg-warning text-dark mb-2">
                                                    {{ resource.get_language_display }}
                                                </span>

                                                <h4 class="fw-bold mb-1">
                                                    {{ resource.title }}
                                                </h4>

                                                {% if resource.description %}
                                                    <p class="text-muted mb-0">
                                                        {{ resource.description|linebreaksbr }}
                                                    </p>
                                                {% else %}
                                                    <p class="text-muted mb-0">
                                                        Complete guidance materials to help property owners understand
                                                        remote care access, inspection support, maintenance planning,
                                                        repair coordination, reports, and the guided property care process.
                                                    </p>
                                                {% endif %}
                                            </div>
                                        </div>

                                        <div class="playbook-summary mt-4">
                                            <h5 class="fw-bold mb-3">
                                                Guidance Materials
                                            </h5>

                                            <ul class="pm-guidance-list">
                                                <li>
                                                    <i class="bi bi-check-circle-fill"></i>
                                                    Read the complete remote property care guidance playbook for this language.
                                                </li>
                                                <li>
                                                    <i class="bi bi-check-circle-fill"></i>
                                                    Download the summary overview for quick reference.
                                                </li>
                                                <li>
                                                    <i class="bi bi-check-circle-fill"></i>
                                                    Listen to the audio guide to understand the property care process clearly.
                                                </li>
                                                <li>
                                                    <i class="bi bi-check-circle-fill"></i>
                                                    Watch the video guidance before registering or managing your property care plan.
                                                </li>
                                            </ul>
                                        </div>

                                        <div class="d-flex flex-column flex-md-row flex-wrap gap-2 mt-4">

                                            {% if resource.full_playbook_pdf %}
                                                <a href="{{ resource.full_playbook_pdf.url }}"
                                                   class="btn pm-btn-primary rounded-pill px-4"
                                                   target="_blank">
                                                    <i class="bi bi-file-earmark-pdf me-1"></i>
                                                    View Full Playbook
                                                </a>

                                                <a href="{{ resource.full_playbook_pdf.url }}"
                                                   class="btn btn-outline-dark rounded-pill px-4"
                                                   download>
                                                    <i class="bi bi-download me-1"></i>
                                                    Download Full Playbook
                                                </a>
                                            {% endif %}

                                            {% if resource.summary_overview_pdf %}
                                                <a href="{{ resource.summary_overview_pdf.url }}"
                                                   class="btn btn-outline-primary rounded-pill px-4"
                                                   download>
                                                    <i class="bi bi-file-earmark-text me-1"></i>
                                                    Download Summary Overview
                                                </a>
                                            {% endif %}

                                        </div>

                                        {% if not resource.full_playbook_pdf and not resource.summary_overview_pdf %}
                                            <p class="text-muted small mt-4 mb-0">
                                                Document files for this language will be available soon.
                                            </p>
                                        {% endif %}

                                    </div>
                                </div>


                                <!-- Right: Audio + Video -->
                                <div class="col-lg-5">

                                    <!-- Audio Guidance -->
                                    <div class="pm-media-box mb-4">
                                        <h5 class="fw-bold mb-2">
                                            <i class="bi bi-headphones me-1"></i>
                                            Audio Guidance
                                        </h5>

                                        {% if resource.audio_guide_file %}
                                            <audio controls preload="metadata" class="w-100 mb-3">
                                                <source src="{{ resource.audio_guide_file.url }}" type="audio/mpeg">
                                                Your browser does not support the audio element.
                                            </audio>

                                            <a href="{{ resource.audio_guide_file.url }}"
                                               class="btn btn-outline-secondary btn-sm rounded-pill"
                                               download>
                                                <i class="bi bi-download me-1"></i>
                                                Download Audio File
                                            </a>
                                        {% else %}
                                            <p class="text-muted small mb-0">
                                                Audio guidance for this language will be available soon.
                                            </p>
                                        {% endif %}
                                    </div>


                                    <!-- Video Guidance -->
                                    <div class="pm-media-box">
                                        <h5 class="fw-bold mb-2">
                                            <i class="bi bi-play-circle-fill me-1"></i>
                                            Video Guidance
                                        </h5>

                                        {% if resource.youtube_video_link %}
                                            {% with resource.youtube_video_link|video_embed_url as embed_url %}
                                                {% if embed_url %}
                                                    <div class="pm-video-wrapper">
                                                        <iframe
                                                            src="{{ embed_url }}"
                                                            title="{{ resource.title }} Video Guidance"
                                                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                                            referrerpolicy="strict-origin-when-cross-origin"
                                                            allowfullscreen
                                                            loading="lazy">
                                                        </iframe>
                                                    </div>
                                                {% else %}
                                                    <p class="text-muted small mb-0">
                                                        Video link is available, but it could not be embedded.
                                                    </p>
                                                {% endif %}
                                            {% endwith %}
                                        {% else %}
                                            <p class="text-muted small mb-0">
                                                Video guidance for this language will be available soon.
                                            </p>
                                        {% endif %}
                                    </div>

                                </div>

                            </div>

                        </div>
                    {% endfor %}

                {% else %}

                    <div class="pm-empty-box">
                        <i class="bi bi-journal-x"></i>

                        <h5>
                            Guidance resources are not available yet
                        </h5>

                        <p class="mb-0">
                            The Ensolanka Remote Property Care Guidance Playbook, summary, audio guide,
                            and video guidance will appear here once published.
                        </p>
                    </div>

                {% endif %}

            </div>
        </div>

    </div>
</section>


<script>
    document.addEventListener('DOMContentLoaded', function () {
        const buttons = document.querySelectorAll('[data-guidance-lang]');
        const panels = document.querySelectorAll('.pm-language-panel');

        function activateLanguage(selectedLang, updateUrl = true) {
            buttons.forEach(function (btn) {
                if (btn.getAttribute('data-guidance-lang') === selectedLang) {
                    btn.classList.add('active');
                } else {
                    btn.classList.remove('active');
                }
            });

            panels.forEach(function (panel) {
                if (panel.getAttribute('data-guidance-panel') === selectedLang) {
                    panel.classList.add('active');
                } else {
                    panel.classList.remove('active');
                }
            });

            if (updateUrl) {
                const newUrl = new URL(window.location.href);
                newUrl.searchParams.set('lang', selectedLang);
                window.history.pushState({}, '', newUrl);
            }
        }

        buttons.forEach(function (button) {
            button.addEventListener('click', function (event) {
                event.preventDefault();

                const selectedLang = this.getAttribute('data-guidance-lang');
                activateLanguage(selectedLang, true);
            });
        });

        const urlParams = new URLSearchParams(window.location.search);
        const initialLang = urlParams.get('lang') || '{{ selected_language|default:"en" }}';

        if (initialLang) {
            activateLanguage(initialLang, false);
        }
    });
</script>

{% endblock %}