{% extends 'familytouch/base.html' %}

{% block title %}My Appointments - FamilyTouch{% endblock %}

{% block extra_css %}
<style>
    .appointments-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
    }

    .page-header {
        background: linear-gradient(135deg, #20c997 0%, #0d9488 100%);
        color: white;
        padding: 2rem;
        border-radius: 16px;
        margin-bottom: 2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .booking-card {
        background: white;
        border-radius: 16px;
        padding: 2rem;
        margin-bottom: 2rem;
        box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    }

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-group label {
        display: block;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: #333;
    }

    .form-control {
        width: 100%;
        padding: 0.75rem;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        font-size: 1rem;
        transition: border-color 0.3s;
    }

    .form-control:focus {
        outline: none;
        border-color: #20c997;
    }

    .btn-primary {
        background: linear-gradient(135deg, #20c997 0%, #0d9488 100%);
        color: white;
        border: none;
        padding: 0.875rem 2rem;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: transform 0.2s;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
    }

    .appointments-section {
        margin-top: 3rem;
    }

    .section-title {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        color: #333;
    }

    .appointment-card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 1rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        border-left: 4px solid #20c997;
    }

    .appointment-card.requested {
        border-left-color: #ffa500;
        background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
    }

    .appointment-card.cancelled {
        border-left-color: #dc3545;
        background: linear-gradient(135deg, #ffe6e6 0%, #ffcccc 100%);
    }

    .appointment-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1rem;
    }

    .doctor-info {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .doctor-icon {
        font-size: 2.5rem;
    }

    .status-badge {
        padding: 0.4rem 0.75rem;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
    }

    .status-badge.scheduled {
        background: #20c997;
        color: white;
    }

    .status-badge.requested {
        background: #ffa500;
        color: white;
    }

    .status-badge.cancelled {
        background: #dc3545;
        color: white;
    }

    .appointment-details {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(0,0,0,0.1);
    }

    .detail-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
        font-size: 0.95rem;
    }

    .btn-cancel {
        background: #dc3545;
        color: white;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.875rem;
        margin-top: 1rem;
    }

    .btn-cancel:hover {
        background: #c82333;
    }

    .empty-state {
        text-align: center;
        padding: 3rem;
        background: #f8f9fa;
        border-radius: 12px;
    }

    .empty-state-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    .info-banner {
        background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
        padding: 1rem 1.5rem;
        border-radius: 8px;
        margin-bottom: 1.5rem;
        border-left: 4px solid #2196f3;
    }
</style>
{% endblock %}

{% block content %}
<div class="appointments-container">
    <div class="page-header">
        <div>
            <h1>📅 My Appointments</h1>
            <p style="opacity: 0.9; margin-top: 0.5rem;">Book and manage appointments with your healthcare providers</p>
        </div>
    </div>

    {% if messages %}
        {% for message in messages %}
            <div style="padding: 1rem; margin-bottom: 1rem; border-radius: 8px; background: {% if message.tags == 'success' %}#d4edda{% elif message.tags == 'error' %}#f8d7da{% else %}#d1ecf1{% endif %}; color: {% if message.tags == 'success' %}#155724{% elif message.tags == 'error' %}#721c24{% else %}#0c5460{% endif %};">
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}

    <!-- Book New Appointment -->
    <div class="booking-card">
        <h2 style="margin-bottom: 1.5rem; color: #20c997;">📝 Book New Appointment</h2>
        
        {% if providers %}
            <form method="post">
                {% csrf_token %}
                <input type="hidden" name="action" value="book_appointment">
                
                <div class="form-group">
                    <label for="provider_id">Select Doctor *</label>
                    <select name="provider_id" id="provider_id" class="form-control" required>
                        <option value="">Choose a doctor...</option>
                        {% for provider in providers %}
                            <option value="{{ provider.id }}">
                                Dr. {{ provider.get_full_name|default:provider.username }} (@{{ provider.username }})
                            </option>
                        {% endfor %}
                    </select>
                </div>
                
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div class="form-group">
                        <label for="date">Date *</label>
                        <input type="date" name="date" id="date" class="form-control" required min="{{ today }}">
                    </div>
                    
                    <div class="form-group">
                        <label for="time">Time *</label>
                        <input type="time" name="time" id="time" class="form-control" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="reason">Reason for Visit</label>
                    <textarea name="reason" id="reason" class="form-control" rows="3" placeholder="Describe the reason for your appointment..."></textarea>
                </div>
                
                <div class="info-banner">
                    <strong>ℹ️ Note:</strong> Your appointment request will be sent to the doctor for confirmation. You will be notified once the appointment is confirmed.
                </div>
                
                <button type="submit" class="btn-primary">📅 Request Appointment</button>
            </form>
        {% else %}
            <div class="empty-state">
                <div class="empty-state-icon">👨‍⚕️</div>
                <p style="color: #666; font-size: 1.1rem;">You don't have any connected healthcare providers yet.</p>
                <p style="color: #999; margin-top: 0.5rem;">Connect with doctors to book appointments.</p>
            </div>
        {% endif %}
    </div>

    <!-- Upcoming Appointments -->
    <div class="appointments-section">
        <h2 class="section-title">📋 Upcoming Appointments</h2>
        
        {% if upcoming_appointments %}
            {% for appointment in upcoming_appointments %}
                <div class="appointment-card {% if appointment.status == 'requested' %}requested{% endif %}">
                    <div class="appointment-header">
                        <div class="doctor-info">
                            <div class="doctor-icon">👨‍⚕️</div>
                            <div>
                                <h3 style="margin: 0; font-size: 1.2rem;">Dr. {{ appointment.provider.get_full_name|default:appointment.provider.username }}</h3>
                                <p style="margin: 0.25rem 0 0 0; color: #666;">@{{ appointment.provider.username }}</p>
                            </div>
                        </div>
                        <span class="status-badge {{ appointment.status }}">
                            {% if appointment.status == 'requested' %}⏳ Pending Confirmation
                            {% elif appointment.status == 'scheduled' %}✓ Confirmed
                            {% endif %}
                        </span>
                    </div>
                    
                    <div class="appointment-details">
                        <div class="detail-item">
                            <span>📅</span>
                            <strong>{{ appointment.start|date:"l, F d, Y" }}</strong>
                        </div>
                        <div class="detail-item">
                            <span>🕐</span>
                            <strong>{{ appointment.start|date:"g:i A" }} - {{ appointment.end|date:"g:i A" }}</strong>
                        </div>
                        {% if appointment.reason %}
                        <div class="detail-item">
                            <span>📝</span>
                            {{ appointment.reason }}
                        </div>
                        {% endif %}
                    </div>
                    
                    <form method="post" style="display: inline;">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="cancel_appointment">
                        <input type="hidden" name="appointment_id" value="{{ appointment.id }}">
                        <button type="submit" class="btn-cancel" onclick="return confirm('Are you sure you want to cancel this appointment?')">
                            ✕ Cancel Appointment
                        </button>
                    </form>
                </div>
            {% endfor %}
        {% else %}
            <div class="empty-state">
                <div class="empty-state-icon">📅</div>
                <p style="color: #666;">No upcoming appointments</p>
            </div>
        {% endif %}
    </div>

    <!-- Past Appointments -->
    {% if past_appointments %}
    <div class="appointments-section">
        <h2 class="section-title">📚 Past Appointments</h2>
        
        {% for appointment in past_appointments %}
            <div class="appointment-card {% if appointment.status == 'cancelled' %}cancelled{% endif %}">
                <div class="appointment-header">
                    <div class="doctor-info">
                        <div class="doctor-icon">👨‍⚕️</div>
                        <div>
                            <h3 style="margin: 0; font-size: 1.1rem;">Dr. {{ appointment.provider.get_full_name|default:appointment.provider.username }}</h3>
                        </div>
                    </div>
                    <span class="status-badge {{ appointment.status }}">
                        {{ appointment.get_status_display }}
                    </span>
                </div>
                
                <div class="appointment-details">
                    <div class="detail-item">
                        <span>📅</span>
                        {{ appointment.start|date:"F d, Y" }} at {{ appointment.start|date:"g:i A" }}
                    </div>
                    {% if appointment.reason %}
                    <div class="detail-item">
                        <span>📝</span>
                        {{ appointment.reason }}
                    </div>
                    {% endif %}
                </div>
            </div>
        {% endfor %}
    </div>
    {% endif %}
</div>

<script>
    // Set minimum date to today
    document.getElementById('date').min = new Date().toISOString().split('T')[0];
</script>
{% endblock %}