{% extends 'base.html.twig' %}

{% block title %}Shop - {{ player.scumName }}{% endblock %}

{% block content %}
    <div class="container mt-4">
        <h1 class="mb-4 text-center">🛒 Shop für {{ player.scumName }}</h1>

        <div class="card mb-4 shadow-sm">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    Spieler: {{ player.scumName }}
                    <span class="badge bg-warning text-dark">Guthaben: {{ player.balance }} 💰</span>
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    {% for package in packages %}
                        <div class="col-md-4">
                            <div class="card mb-3 border-0 shadow-sm">
                                <div class="card-body">
                                    <h6 class="card-title">{{ package.name }}</h6>
                                    <p class="card-text">💲 Preis: <strong>{{ package.price }}</strong></p>

                                    <!-- Button zum Anzeigen der Paket-Details -->
                                    <button class="btn btn-info btn-sm w-100 mb-2" data-bs-toggle="collapse" data-bs-target="#packageDetails{{ package.id }}">
                                        📦 Details anzeigen
                                    </button>

                                    <!-- Versteckte Details zu den Paket-Inhalten -->
                                    <div class="collapse" id="packageDetails{{ package.id }}">
                                        <ul class="list-group mb-2">
                                            {% for packageItem in packageItemsMap[package.id] %}
                                                <li class="list-group-item">
                                                    <strong>{{ packageItem.item.name }}</strong> (x{{ packageItem.quantity }})

                                                </li>
                                            {% else %}
                                                <li class="list-group-item text-muted">Keine Items enthalten</li>
                                            {% endfor %}
                                        </ul>
                                    </div>

                                    <!-- Kaufen-Button -->
                                    <a href="{{ path('shop_buy', { playerId: player.id, packageId: package.id, redirect: 'shop_player', playerId: player.id }) }}" class="btn btn-success w-100">
                                        <i class="fas fa-shopping-cart"></i> Kaufen
                                    </a>
                                </div>
                            </div>
                        </div>
                    {% else %}
                        <p class="text-center text-muted">Keine Pakete verfügbar.</p>
                    {% endfor %}
                </div>
            </div>
        </div>

        {% for message in app.flashes('success') %}
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle"></i> {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        {% endfor %}
        {% for message in app.flashes('error') %}
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-triangle"></i> {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        {% endfor %}
    </div>
{% endblock %}