{% extends "pos/base.html" %}
{% load static %}

{% block title %}{{ page_title }}{% endblock %}
{% block heading %}{{ page_title }}{% endblock %}

{% block stylesheets %}
<style>
    .guest-app-dash {
        --gap: 20px;
        --card-bg: rgba(255,255,255,0.82);
        --card-border: rgba(255,255,255,0.45);
        --dark: #0f172a;
        --muted: #64748b;
        --primary: #2563eb;
        --primary-2: #1d4ed8;
        --accent: #7c3aed;
        --success: #059669;
        --shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
    }

    .guest-app-dash .hero-wrap {
        position: relative;
        overflow: hidden;
        border-radius: 24px;
        min-height: 360px;
        margin-bottom: 24px;
        background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 45%, #7c3aed 100%);
        box-shadow: var(--shadow);
    }

    .guest-app-dash .hero-bg {
        position: absolute;
        inset: 0;
        overflow: hidden;
    }

    .guest-app-dash .hero-bg img {
        position: absolute;
        border-radius: 22px;
        object-fit: cover;
        opacity: 0.16;
        filter: saturate(1.05);
        animation: floatCard 8s ease-in-out infinite;
        box-shadow: 0 20px 40px rgba(0,0,0,.18);
    }

    .guest-app-dash .hero-bg img:nth-child(1) {
        width: 280px;
        height: 180px;
        top: 24px;
        right: 30px;
        animation-delay: 0s;
    }

    .guest-app-dash .hero-bg img:nth-child(2) {
        width: 220px;
        height: 150px;
        bottom: 30px;
        right: 170px;
        animation-delay: 1.8s;
    }

    .guest-app-dash .hero-bg img:nth-child(3) {
        width: 240px;
        height: 165px;
        bottom: 48px;
        right: -10px;
        animation-delay: 3s;
    }

    .guest-app-dash .hero-content {
        position: relative;
        z-index: 2;
        padding: 42px 36px;
        color: #fff;
        max-width: 760px;
    }

    .guest-app-dash .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(255,255,255,.14);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,.22);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        margin-bottom: 16px;
    }

    .guest-app-dash .hero-title {
        font-size: 42px;
        line-height: 1.12;
        font-weight: 800;
        margin: 0 0 12px;
        color: #fff;
    }

    .guest-app-dash .hero-text {
        font-size: 16px;
        line-height: 1.7;
        max-width: 620px;
        color: rgba(255,255,255,.9);
        margin-bottom: 22px;
    }

    .guest-app-dash .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .guest-app-dash .hero-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 18px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none !important;
        transition: all .25s ease;
    }

    .guest-app-dash .hero-btn-primary {
        background: #fff;
        color: #0f172a;
    }

    .guest-app-dash .hero-btn-primary:hover {
        transform: translateY(-2px);
        color: #0f172a;
        box-shadow: 0 10px 25px rgba(255,255,255,.20);
    }

    .guest-app-dash .hero-btn-light {
        background: rgba(255,255,255,.12);
        color: #fff;
        border: 1px solid rgba(255,255,255,.22);
    }

    .guest-app-dash .hero-btn-light:hover {
        color: #fff;
        transform: translateY(-2px);
        background: rgba(255,255,255,.18);
    }

    .guest-app-dash .grid-cards {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: var(--gap);
        margin-bottom: 26px;
    }

    .guest-app-dash .menu-card {
        grid-column: span 6;
        position: relative;
        overflow: hidden;
        border-radius: 22px;
        background: var(--card-bg);
        backdrop-filter: blur(12px);
        border: 1px solid var(--card-border);
        box-shadow: var(--shadow);
        transition: transform .28s ease, box-shadow .28s ease;
    }

    .guest-app-dash .menu-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 26px 50px rgba(15, 23, 42, 0.18);
    }

    .guest-app-dash .menu-card::before {
        content: "";
        position: absolute;
        inset: auto auto 0 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, var(--primary), var(--accent));
    }

    .guest-app-dash .menu-body {
        padding: 24px;
        position: relative;
        z-index: 2;
    }

    .guest-app-dash .menu-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
    }

    .guest-app-dash .menu-icon {
        width: 58px;
        height: 58px;
        border-radius: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        color: #fff;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        box-shadow: 0 14px 30px rgba(37, 99, 235, 0.28);
    }

    .guest-app-dash .menu-tag {
        display: inline-block;
        padding: 6px 10px;
        border-radius: 999px;
        background: #eff6ff;
        color: var(--primary-2);
        font-size: 12px;
        font-weight: 700;
    }

    .guest-app-dash .menu-title {
        font-size: 22px;
        font-weight: 800;
        color: var(--dark);
        margin: 0 0 8px;
    }

    .guest-app-dash .menu-subtitle {
        color: var(--muted);
        font-size: 14px;
        line-height: 1.7;
        min-height: 72px;
        margin-bottom: 18px;
    }

    .guest-app-dash .menu-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 11px 16px;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--primary), var(--primary-2));
        color: #fff !important;
        text-decoration: none !important;
        font-size: 14px;
        font-weight: 700;
        transition: all .25s ease;
    }

    .guest-app-dash .menu-link:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px rgba(37,99,235,.26);
    }

    .guest-app-dash .section-card {
        border-radius: 24px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        border: 1px solid #e5eefc;
        box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
        padding: 24px;
        margin-bottom: 24px;
    }

    .guest-app-dash .section-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 18px;
    }

    .guest-app-dash .section-title {
        margin: 0;
        font-size: 26px;
        font-weight: 800;
        color: var(--dark);
    }

    .guest-app-dash .section-subtitle {
        margin: 6px 0 0;
        color: var(--muted);
        font-size: 14px;
    }

    .guest-app-dash .preview-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    .guest-app-dash .preview-card {
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
        border: 1px solid #e8eef7;
        box-shadow: 0 16px 35px rgba(15, 23, 42, .08);
        transform: translateY(0);
        transition: transform .28s ease, box-shadow .28s ease;
    }

    .guest-app-dash .preview-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 40px rgba(15, 23, 42, .14);
    }

    .guest-app-dash .preview-card img {
        width: 100%;
        height: 230px;
        object-fit: cover;
        display: block;
    }

    .guest-app-dash .preview-info {
        padding: 16px;
    }

    .guest-app-dash .preview-info h4 {
        margin: 0 0 6px;
        font-size: 17px;
        font-weight: 700;
        color: var(--dark);
    }

    .guest-app-dash .preview-info p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.6;
    }

    .guest-app-dash .mini-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        margin-top: 18px;
    }

    .guest-app-dash .mini-stat {
        background: rgba(255,255,255,.75);
        border: 1px solid rgba(255,255,255,.45);
        border-radius: 18px;
        padding: 18px;
        backdrop-filter: blur(10px);
        box-shadow: 0 10px 24px rgba(15,23,42,.08);
    }

    .guest-app-dash .mini-stat .num {
        font-size: 28px;
        font-weight: 800;
        color: var(--dark);
        line-height: 1;
        margin-bottom: 6px;
    }

    .guest-app-dash .mini-stat .lbl {
        font-size: 13px;
        color: var(--muted);
        font-weight: 600;
    }

    @keyframes floatCard {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
    }

    @media (max-width: 1199.98px) {
        .guest-app-dash .preview-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        .guest-app-dash .mini-stats {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 991.98px) {
        .guest-app-dash .hero-title {
            font-size: 34px;
        }
        .guest-app-dash .menu-card {
            grid-column: span 12;
        }
    }

    @media (max-width: 767.98px) {
        .guest-app-dash .hero-content {
            padding: 28px 20px;
        }
        .guest-app-dash .hero-title {
            font-size: 28px;
        }
        .guest-app-dash .preview-grid,
        .guest-app-dash .mini-stats {
            grid-template-columns: 1fr;
        }
        .guest-app-dash .hero-bg img:nth-child(2),
        .guest-app-dash .hero-bg img:nth-child(3) {
            display: none;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="guest-app-dash">

    <div class="hero-wrap">
        <div class="hero-bg">
            {% for image in hero_images %}
                <img src="{{ image }}" alt="Guest App Hero {{ forloop.counter }}">
            {% endfor %}
        </div>

        <div class="hero-content">
            <div class="eyebrow">
                <i class="fas fa-mobile-alt"></i>
                Guest App Module
            </div>

            <h2 class="hero-title">Guest App Dashboard for hotel control, preview and setup</h2>
            <p class="hero-text">
                Manage guest app settings, open demo previews, test portal screens and control the guest-side hotel experience from one clean dashboard.
            </p>

            <div class="hero-actions">
                <a href="{% url 'hotel:guest:app_config' %}" class="hero-btn hero-btn-primary">
                    <i class="fas fa-cog"></i> Open App Configuration
                </a>
                <a href="{% url 'hotel:guest:login' %}" class="hero-btn hero-btn-light">
                    <i class="fas fa-sign-in-alt"></i> Test Guest Login
                </a>
            </div>

            <div class="mini-stats">
                <div class="mini-stat">
                    <div class="num">04</div>
                    <div class="lbl">Quick Menus</div>
                </div>
                <div class="mini-stat">
                    <div class="num">03</div>
                    <div class="lbl">Preview Shots</div>
                </div>
                <div class="mini-stat">
                    <div class="num">01</div>
                    <div class="lbl">Demo Entry</div>
                </div>
                <div class="mini-stat">
                    <div class="num">24/7</div>
                    <div class="lbl">Guest Access Vision</div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid-cards">
        {% for item in menu_cards %}
            <div class="menu-card">
                <div class="menu-body">
                    <div class="menu-top">
                        <div class="menu-icon">
                            <i class="{{ item.icon }}"></i>
                        </div>
                        <div class="menu-tag">{{ item.tag }}</div>
                    </div>

                    <h3 class="menu-title">{{ item.title }}</h3>
                    <div class="menu-subtitle">{{ item.subtitle }}</div>

                    {% if item.is_external %}
                        <a href="{{ item.url }}" target="_blank" rel="noopener" class="menu-link">
                            {{ item.button }} <i class="fas fa-arrow-up-right-from-square"></i>
                        </a>
                    {% else %}
                        <a href="{% url item.url %}" class="menu-link">
                            {{ item.button }} <i class="fas fa-arrow-right"></i>
                        </a>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>

    <div class="section-card">
        <div class="section-head">
            <div>
                <h3 class="section-title">Dummy Guest App Preview</h3>
                <p class="section-subtitle">
                    For now these are online dummy mobile preview images. Later you can replace them with your real guest app screenshots from backend.
                </p>
            </div>
        </div>

        <div class="preview-grid">
            {% for shot in preview_shots %}
                <div class="preview-card">
                    <img src="{{ shot.image }}" alt="{{ shot.title }}">
                    <div class="preview-info">
                        <h4>{{ shot.title }}</h4>
                        <p>
                            Dummy visual preview for the guest app module. You can later attach real app screen images here.
                        </p>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

</div>
{% endblock %}