{% extends "base.html" %}

{% block title %}Gestionar Cita{% endblock %}

{% block content %}
<div class="row justify-content-center py-5">
    <div class="col-md-6">
        <div class="card p-5 shadow-lg border-0">
            <h2 class="fw-bold mb-4">Gestionar tu Cita</h2>
            <div class="bg-light p-4 rounded-3 mb-4">
                <h5 class="fw-bold mb-1">{{ appointment.appointment_type.name }}</h5>
                <p class="text-muted mb-3">con {{ appointment.user.get_full_name }}</p>
                <p class="mb-0"><strong>Fecha:</strong> {{ appointment.date|date:"d/m/Y" }}</p>
                <p class="mb-0"><strong>Hora:</strong> {{ appointment.start_time|time:"H:i" }}</p>
                <p class="mb-0"><strong>Estado:</strong> {{ appointment.get_status_display }}</p>
            </div>

            {% if appointment.status == 'confirmed' %}
            <div class="d-grid gap-3">
                <form method="post">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="cancel">
                    <button type="submit" class="btn btn-outline-danger btn-lg w-100"
                        onclick="return confirm('¿Estás seguro de que deseas cancelar esta cita?')">Cancelar
                        Cita</button>
                </form>
                <p class="text-muted small text-center mt-3">Para reprogramar, por ahora por favor cancela la actual y
                    reserva una nueva.</p>
            </div>
            {% else %}
            <div class="alert alert-warning text-center">
                Esta cita ya no puede ser modificada (Estado: {{ appointment.get_status_display }}).
            </div>
            {% endif %}

            <div class="mt-5 text-center">
                <a href="{% url 'business_landing' %}" class="text-muted text-decoration-none">← Ir al inicio</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}