{% extends 'familytouch/base.html' %}
{% block title %}Set Meal Preferences - FamilyTouch{% endblock %}

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

    .meal-header {
        background: linear-gradient(135deg, #ff9a56 0%, #ff6a88 100%);
        color: white;
        padding: 2rem;
        border-radius: 12px;
        margin-bottom: 2rem;
        box-shadow: 0 8px 24px rgba(255, 154, 86, 0.25);
    }

    .meal-header h1 {
        font-size: 2rem;
        margin-bottom: 0.5rem;
        font-weight: 700;
    }

    .meal-header p {
        opacity: 0.9;
        font-size: 1.1rem;
    }

    .meal-form-card {
        background: white;
        padding: 2rem;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

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

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

    .form-group select,
    .form-group input[type="text"] {
        width: 100%;
        padding: 0.75rem;
        border: 2px solid #e0e0e0;
        border-radius: 8px;
        font-size: 1rem;
        transition: all 0.3s ease;
    }

    .form-group select:focus,
    .form-group input[type="text"]:focus {
        outline: none;
        border-color: #ff9a56;
        box-shadow: 0 0 0 3px rgba(255, 154, 86, 0.1);
    }

    .meal-section {
        background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
        padding: 1.5rem;
        border-radius: 8px;
        margin-bottom: 1rem;
    }

    .meal-section h3 {
        margin: 0 0 1rem 0;
        color: #ff6a88;
        font-size: 1.3rem;
    }

    .btn-submit {
        background: linear-gradient(135deg, #ff9a56 0%, #ff6a88 100%);
        color: white;
        padding: 0.75rem 2rem;
        border: none;
        border-radius: 8px;
        font-size: 1.1rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        width: 100%;
    }

    .btn-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(255, 154, 86, 0.4);
    }

    .alert {
        padding: 1rem;
        border-radius: 8px;
        margin-bottom: 1rem;
    }

    .alert-success {
        background: #d4edda;
        color: #155724;
        border-left: 4px solid #28a745;
    }

    .alert-error {
        background: #f8d7da;
        color: #721c24;
        border-left: 4px solid #dc3545;
    }

    .no-patients {
        text-align: center;
        padding: 3rem;
        background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
        border-radius: 12px;
        border: 2px dashed #dee2e6;
    }

    .no-patients-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }
</style>
{% endblock %}

{% block content %}
<div class="meal-container">
    <div class="meal-header">
        <h1>🍽️ Set Meal Preferences</h1>
        <p>Choose meals for your loved ones</p>
    </div>

    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }}">
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}

    {% if connected_patients %}
        <div class="meal-form-card">
            <form method="post" id="meal-form">
                {% csrf_token %}
                
                <div class="form-group">
                    <label for="patient_select">👤 Select Patient</label>
                    <select id="patient_select" onchange="document.getElementById('patient_hidden').value = this.value" required>
                        <option value="">Choose a patient...</option>
                        {% for patient in connected_patients %}
                            <option value="{{ patient.username }}">
                                {{ patient.get_full_name|default:patient.username }}
                            </option>
                        {% endfor %}
                    </select>
                </div>

                <div class="meal-section">
                    <h3>🌞 Lunch</h3>
                    <div class="form-group">
                        <input type="text" id="id_lunch" name="lunch" placeholder="e.g., Grilled chicken salad, fruit">
                    </div>
                </div>

                <div class="meal-section">
                    <h3>🌙 Dinner</h3>
                    <div class="form-group">
                        <input type="text" id="id_dinner" name="dinner" placeholder="e.g., Baked salmon with vegetables">
                    </div>
                </div>

                <!-- Hidden input for patient from dropdown -->
                <input type="hidden" id="patient_hidden" name="patient" value="">

                <button type="submit" class="btn-submit">✅ Save Meal Preferences</button>
            </form>
        </div>
    {% else %}
        <div class="no-patients">
            <div class="no-patients-icon">🍽️</div>
            <h3>No Connected Patients</h3>
            <p>You need to be connected to a patient as a family member to set meal preferences.</p>
            <a href="{% url 'familytouch:connected_care' %}" style="display: inline-block; margin-top: 1rem; padding: 0.75rem 1.5rem; background: linear-gradient(135deg, #ff9a56 0%, #ff6a88 100%); color: white; text-decoration: none; border-radius: 8px; font-weight: 600;">
                🔗 Connect to a Patient
            </a>
        </div>
    {% endif %}

    <a href="{% url 'familytouch:dashboard' %}" style="display: inline-block; margin-top: 2rem; color: #666; text-decoration: none; font-weight: 600;">
        ← Back to Dashboard
    </a>
</div>
{% endblock %}