{% extends "base.html" %}
{% block content %}
<div class="container py-4" style="max-width: 1200px;">
    <div class="card border-0 shadow-lg rounded-4 overflow-hidden">
        
        <!-- Header Row: Title + Photo -->
        <div class="row g-0 bg-white p-4 border-bottom align-items-center">
            <div class="col-lg-8">
                <h1 class="display-5 fw-bold text-dark mb-2">Spicy Parmesan Chicken Pasta</h1>
                <p class="text-muted mb-0 lead">A delicious weeknight dinner ready in 45 minutes with bold flavors</p>
            </div>
            <div class="col-lg-4 text-center d-flex align-items-center justify-content-center" style="min-height: 200px;">
                <img src="{{ url_for('static', filename='uploads/jdhdhdhdhu_1_photo_20260215_221639.png') }}" 
                     class="rounded-3 shadow" style="width: 100%; max-width: 350px; height: 200px; object-fit: cover;">
            </div>
        </div>
        
        <!-- Stats Cards Row -->
        <div class="bg-light pt-0 p-3 border-bottom">
            <div class="row g-2">
                <div class="col-6 col-md-3">
                    <div class="card border-0 shadow-sm text-center h-100">
                        <div class="card-body py-3">
                            <i class="fas fa-utensils fa-3x text-success mb-2"></i>
                            <div class="d-flex align-items-center justify-content-center">
                                <button class="btn btn-sm btn-outline-success" onclick="adjustServings(-1)">−</button>
                                <h5 class="fw-bold mb-0 mx-2" id="servings">4</h5>
                                <button class="btn btn-sm btn-outline-success" onclick="adjustServings(1)">+</button>
                            </div>
                            <small class="text-muted text-uppercase">Servings</small>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="card border-0 shadow-sm text-center h-100">
                        <div class="card-body py-3">
                            <i class="far fa-clock fa-3x text-success mb-2"></i>
                            <h5 class="fw-bold mb-0">30m</h5>
                            <small class="text-muted text-uppercase">Prep</small>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="card border-0 shadow-sm text-center h-100">
                        <div class="card-body py-3">
                            <i class="fas fa-fire fa-3x text-success mb-2"></i>
                            <h5 class="fw-bold mb-0">15m</h5>
                            <small class="text-muted text-uppercase">Cook</small>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-md-3">
                    <div class="card border-0 shadow-sm text-center h-100">
                        <div class="card-body py-3">
                            <i class="fas fa-globe fa-3x text-success mb-2"></i>
                            <h6 class="fw-bold mb-0">Italian</h6>
                            <small class="text-muted text-uppercase">Cuisine</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Content Row -->
        <div class="row g-0">
            <div class="col-lg-5 bg-light">
                <div class="bg-success text-white p-3">
                    <h5 class="mb-0"><i class="fas fa-list me-2"></i>Ingredients</h5>
                </div>
                <div class="p-4">
                    <div class="ingredient-item">
                        <span class="bg-success me-3" style="width: 8px; height: 8px; min-width: 8px; display: block; border-radius: 2px; flex-shrink: 0;"></span>
                        <div class="flex-grow-1">
                            <strong><span data-base-qty="1">1</span> can</strong> Tomato
                            <small class="d-block text-muted">(8 oz) • chopped, canned</small>
                        </div>
                    </div>
                    <div class="ingredient-item">
                        <span class="bg-success me-3" style="width: 8px; height: 8px; min-width: 8px; display: block; border-radius: 2px; flex-shrink: 0;"></span>
                        <div class="flex-grow-1"><strong><span data-base-qty="12">12</span> c</strong> Bone Broth</div>
                    </div>
                    <div class="d-flex align-items-start">
                        <span class="bg-success me-3" style="min-width: 8px; height: 8px; display: inline-block; border-radius: 2px;"></span>
                        <div><strong><span data-base-qty="5">5</span> tbsp</strong> Black Beans</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-7 bg-white">
                <div class="bg-success text-white p-3">
                    <h5 class="mb-0"><i class="fas fa-clipboard-list me-2"></i>Instructions</h5>
                </div>
                <div class="p-4">
                    <div class="d-flex mb-3">
                        <span class="badge bg-success me-3" style="min-width: 28px; height: 28px; line-height: 26px; font-size: 1.2rem; font-weight: 900; font-family: 'Arial Black', sans-serif;">1</span>
                        <p class="mb-0">In a medium bowl, combine <span data-base-qty="0.33">⅓</span> cup olive oil, <span data-base-qty="0.25">¼</span> cup Parmesan cheese, garlic, and seasonings.</p>
                    </div>
                    <div class="d-flex mb-3">
                        <span class="badge bg-success me-3" style="min-width: 28px; height: 28px; line-height: 26px; font-size: 1.2rem; font-weight: 900; font-family: 'Arial Black', sans-serif;">2</span>
                        <p class="mb-0">Cook pasta according to package directions. Reserve 1 cup pasta water.</p>
                    </div>
                    <div class="d-flex">
                        <span class="badge bg-success me-3" style="min-width: 28px; height: 28px; line-height: 26px; font-size: 1.2rem; font-weight: 900; font-family: 'Arial Black', sans-serif;">3</span>
                        <p class="mb-0">Heat large skillet over medium-high heat. Add chicken and cook until golden.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Photo Gallery Drawer -->
    <div class="card border-0 shadow-sm overflow-hidden" style="margin-top: -10px; border-radius: 0 0 20px 20px; position: relative; z-index: -1; padding-top: 10px;">
        <button class="btn btn-light w-100 text-start p-3 border-0 collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#photoGallery" aria-expanded="false" aria-controls="photoGallery" style="cursor: pointer;" onclick="$('#photoGallery').collapse('toggle')">
            <i class="fas fa-images me-2 text-success"></i>
            <strong>Photo Gallery</strong>
            <i class="fas fa-chevron-down float-end mt-1"></i>
        </button>
        <div class="collapse" id="photoGallery">
            <div class="p-3 bg-light">
                <div class="row g-2">
                    <div class="col-4"><img src="{{ url_for('static', filename='uploads/heiyegy_4_20260213_214555_2.png') }}" class="w-100 rounded"></div>
                    <div class="col-4"><img src="{{ url_for('static', filename='uploads/heiyegy_4_20260213_214655_4.jpeg') }}" class="w-100 rounded"></div>
                    <div class="col-4"><img src="{{ url_for('static', filename='uploads/heiyegy_4_20260213_214555_1.png') }}" class="w-100 rounded"></div>
                </div>
            </div>
            <hr class="m-0">
            <div class="p-3 bg-white">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <strong><i class="fas fa-file-pdf me-2 text-danger"></i>Original Recipe PDF</strong>
                    <a href="{{ url_for('static', filename='uploads/recipe_10e09f0dd22c.pdf') }}" target="_blank" class="btn btn-sm btn-outline-success">View PDF</a>
                </div>
                <div class="border rounded p-3 bg-light text-center" style="height: 400px;">
                    <i class="fas fa-file-pdf fa-5x text-muted mb-3"></i>
                    <p class="text-muted">PDF viewer placeholder</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
let baseServings = 4;
let currentServings = 4;

function toFraction(decimal) {
    const fractions = {
        0.125: '⅛', 0.25: '¼', 0.33: '⅓', 0.5: '½', 
        0.66: '⅔', 0.75: '¾', 0.875: '⅞'
    };
    for (let [dec, frac] of Object.entries(fractions)) {
        if (Math.abs(decimal - dec) < 0.02) return frac;
    }
    return decimal.toFixed(2).replace(/\.?0+$/, '');
}

function adjustServings(delta) {
    currentServings = Math.max(1, currentServings + delta);
    document.getElementById('servings').textContent = currentServings;
    
    const ratio = currentServings / baseServings;
    document.querySelectorAll('[data-base-qty]').forEach(el => {
        const base = parseFloat(el.dataset.baseQty);
        if (!isNaN(base)) {
            const newQty = base * ratio;
            const whole = Math.floor(newQty);
            const frac = toFraction(newQty - whole);
            el.textContent = (whole > 0 ? whole + ' ' : '') + (frac !== '0' ? frac : whole || '');
        }
    });
}
</script>
{% endblock %}