{% extends "base.html" %}

{% block title %}{{ state.state_name }} - VacationWeb{% endblock %}

{% block extra_css %}
<style>
    body { background: #0c2461; color: white; }
    .state-banner {
        height: 40vh;
        background: linear-gradient(rgba(12, 36, 97, 0.6), rgba(12, 36, 97, 0.9)), url('https://images.unsplash.com/photo-1552084117-56a987666449?w=1200');
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .section-title {
        border-left: 5px solid #FFD700;
        padding-left: 15px;
        margin: 40px 0 25px;
        color: #FFD700;
    }
    .glass-list-item {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 15px;
        padding: 20px;
        margin-bottom: 15px;
        transition: 0.3s;
    }
    .glass-list-item:hover {
        background: rgba(255, 255, 255, 0.1);
    }
    .price-tag {
        color: #FFD700;
        font-weight: bold;
        font-size: 1.2rem;
    }
</style>
{% endblock %}

{% block content %}
<div class="state-banner">
    <div>
        <h1 class="display-2 fw-bold text-white">{{ state.state_name }}</h1>
        <p class="lead">Explore the best of what this state has to offer</p>
    </div>
</div>

<div class="container my-5">
    <div class="row">
        <div class="col-lg-6">
            <h2 class="section-title">Popular Destinations</h2>
            {% if destinations %}
                {% for dest in destinations %}
                <div class="glass-list-item d-flex align-items: center;">
                    <div class="flex-grow-1">
                        <h5 class="mb-1 text-white">{{ dest.destination_name }}</h5>
                        <p class="small text-white-50 mb-0"><i class="fas fa-map-marker-alt me-2"></i>Location within {{ state.state_name }}</p>
                    </div>
                    <i class="fas fa-chevron-right text-warning align-self-center"></i>
                </div>
                {% endfor %}
            {% else %}
                <p class="text-white-50">No specific destinations listed yet.</p>
            {% endif %}
        </div>

        <div class="col-lg-6">
            <h2 class="section-title">Available Vacation Packages</h2>
            {% if packages %}
                {% for pkg in packages %}
                <div class="glass-list-item">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h5 class="mb-0">{{ pkg.package_name }}</h5>
                        <span class="price-tag">RM {{ pkg.price }}</span>
                    </div>
                    <p class="small text-white-50">{{ pkg.duration_days }} Days / {{ pkg.duration_days - 1 }} Nights</p>
                    <a href="/package/{{ pkg.package_id }}" class="btn btn-sm btn-outline-warning">View Details</a>
                </div>
                {% endfor %}
            {% else %}
                <div class="alert alert-info bg-transparent border-secondary text-white">
                    Currently, there are no packages available for {{ state.state_name }}.
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}