{% extends "base.html" %}

{% block content %}
<div class="container py-3">

    <div class="card shadow-sm border-0">
        <div class="card-body p-4">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2 class="fw-bold mb-0">Edit Recipe</h2>
                <div class="d-flex gap-2 align-items-center">
                    {% if current_user.role in ('admin', 'moderator') %}
                    <button type="button" class="btn btn-outline-danger btn-sm" onclick="confirmDeleteRecipe()">
                        <i class="fas fa-trash-alt me-1"></i>Delete
                    </button>
                    {% endif %}
                    <a href="{{ url_for('admin.flagged') if request.args.get('return_to') == 'flagged' else url_for('view_recipe', recipe_id=recipe.id) }}" class="btn btn-outline-secondary btn-sm">
                        <i class="fas fa-arrow-left me-1"></i>{{ 'Back to Flagged' if request.args.get('return_to') == 'flagged' else 'Back to Recipe' }}
                    </a>
                </div>
            </div>

            {# ═══ FLAGGED RECIPE PANEL ═══ #}
            {% if recipe.is_flagged %}
            {% if flag_data and flag_data.get('unmatched_ingredients') %}
            <div class="alert border-0 mb-4" style="border-radius: 12px; background: linear-gradient(135deg, #fff3cd, #ffeeba);">
                <div class="d-flex align-items-start">
                    <i class="fas fa-exclamation-triangle text-warning me-3 mt-1 fa-lg"></i>
                    <div class="flex-grow-1">
                        <strong class="d-block mb-1">Flagged: {{ flag_data.get('unmatched_ingredients', [])|length }} Unmatched Ingredient(s)</strong>
                        <p class="mb-2 small text-dark">{{ flag_data.get('message', '') }}</p>
                        <div class="table-responsive">
                            <table class="table table-sm table-bordered mb-2 bg-white" style="font-size: 0.85rem; border-radius: 8px; overflow: hidden;">
                                <thead class="table-warning">
                                    <tr><th>AI-Extracted Name</th><th>Qty</th><th>Unit</th><th>Modifiers</th><th>Pkg Size</th><th>Status</th><th class="text-center">Action</th></tr>
                                </thead>
                                <tbody>
                                    {% for item in flag_data.get('unmatched_ingredients', []) %}
                                    <tr id="flagged-row-{{ loop.index0 }}">
                                        <td><strong class="text-danger">{{ item.raw_name }}</strong></td>
                                        <td>{{ item.quantity or '—' }}</td>
                                        <td>{{ item.raw_unit or '—' }}{% if item.matched_unit and item.matched_unit != item.raw_unit %}<br><small class="text-success">→ {{ item.matched_unit }}</small>{% endif %}</td>
                                        <td>{{ item.modifiers or '—' }}</td>
                                        <td>{{ item.package_size or '—' }}</td>
                                        <td>{% if item.pending_ingredient_id %}<span class="badge bg-info">Pending #{{ item.pending_ingredient_id }}</span>{% else %}<span class="badge bg-danger">No Match</span>{% endif %}</td>
                                        <td class="text-center">
                                            <button type="button" class="btn btn-sm btn-outline-success py-0 px-2" onclick="handleAddFlagged(this)" data-flagged='{{ item | tojson }}' data-row-idx="{{ loop.index0 }}" title="Add as ingredient row"><i class="fas fa-plus me-1"></i>Add</button>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        {% if flag_data.get('unit_warnings') %}
                        <div class="small text-muted mb-2"><i class="fas fa-info-circle me-1"></i>Unit warnings: {{ flag_data.unit_warnings | join('; ') }}</div>
                        {% endif %}
                        {% if current_user.role in ('admin', 'moderator') %}
                        <div class="form-check mt-2 p-2 bg-white rounded border">
                            <input class="form-check-input" type="checkbox" id="resolveFlag" name="resolve_flag" value="1" form="recipe-edit-form">
                            <label class="form-check-label small" for="resolveFlag"><i class="fas fa-check-circle text-success me-1"></i><strong>Mark all issues resolved</strong></label>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% elif flag_data and flag_data.get('message') %}
            <div class="alert alert-warning border small mb-4">
                <i class="fas fa-flag me-1"></i> <strong>Flagged:</strong> {{ flag_data.get('message', '') }}
                {% if current_user.role in ('admin', 'moderator') %}
                <div class="form-check mt-2"><input class="form-check-input" type="checkbox" id="resolveFlag" name="resolve_flag" value="1" form="recipe-edit-form"><label class="form-check-label small" for="resolveFlag"><i class="fas fa-check-circle text-success me-1"></i>Clear flag on save</label></div>
                {% endif %}
            </div>
            {% else %}
            <div class="alert alert-warning border small mb-4">
                <i class="fas fa-flag me-1"></i> <strong>Flagged:</strong> {{ recipe.flag_notes or 'This recipe has been flagged for review.' }}
                {% if current_user.role in ('admin', 'moderator') %}
                <div class="form-check mt-2"><input class="form-check-input" type="checkbox" id="resolveFlag" name="resolve_flag" value="1" form="recipe-edit-form"><label class="form-check-label small" for="resolveFlag"><i class="fas fa-check-circle text-success me-1"></i>Clear flag on save</label></div>
                {% endif %}
            </div>
            {% endif %}
            {% endif %}

            <form method="POST" enctype="multipart/form-data" id="recipe-edit-form">
                <div class="alert alert-light border small text-muted mb-4"><i class="fas fa-info-circle me-1"></i> Edit your recipe details below. All changes save when you click Update.</div>

                <div class="mb-3">
                    <label class="form-label small fw-bold text-muted">TITLE <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" name="title" required value="{{ recipe.title or '' }}">
                </div>
                <div class="mb-3">
                    <label class="form-label small fw-bold text-muted">DESCRIPTION</label>
                    <textarea class="form-control border-bottom" name="description" rows="2">{{ recipe.description or '' }}</textarea>
                </div>

                <div class="row g-2 mb-3 pt-3 border-top">
                    <div class="col-6 col-md-3"><label class="form-label small fw-bold text-muted">SERVINGS <span class="text-danger">*</span></label><input type="number" class="form-control" name="servings" value="{{ recipe.servings or 0 }}"></div>
                    <div class="col-6 col-md-3"><label class="form-label small fw-bold text-muted">PREP (M) <span class="text-danger">*</span></label><input type="number" class="form-control" name="prep_time" value="{{ recipe.prep_time or 0 }}"></div>
                    <div class="col-6 col-md-3"><label class="form-label small fw-bold text-muted">COOK (M) <span class="text-danger">*</span></label><input type="number" class="form-control" name="cook_time" value="{{ recipe.cook_time or 0 }}"></div>
                    <div class="col-6 col-md-3">
                        <label class="form-label small fw-bold text-muted">CUISINE <span class="text-danger">*</span></label>
                        <select class="form-select" name="cuisine_type" id="cuisine-select">
                            <option value="">Select cuisine</option>
                            {% for region, region_cuisines in cuisines|groupby('region') %}
                            <optgroup label="{{ region }}">{% for c in region_cuisines %}<option value="{{ c.name }}" {% if recipe.cuisine == c.name %}selected{% endif %}>{{ c.name }}</option>{% endfor %}</optgroup>
                            {% endfor %}
                        </select>

                    <div class="col-6 col-md-3">
                        <label class="form-label small fw-bold text-muted">CULINARY TYPE</label>
                        <select class="form-select" name="culinary_type">
                            <option value="">Select type</option>
                            {% for ct in culinary_types %}
                            <option value="{{ ct.name }}" {{ 'selected' if recipe.culinary_type == ct.name }}>{{ ct.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    </div>
                </div>

                
                <div class="mb-3 mt-2">
                  <label class="form-label small fw-bold text-muted">DIETARY FLAGS</label>
                  <div class="d-flex flex-wrap gap-3">
                    <div class="form-check"><input class="form-check-input" type="checkbox" name="is_vegan" id="e_vegan" {% if recipe.is_vegan %}checked{% endif %}><label class="form-check-label small" for="e_vegan">Vegan</label></div>
                    <div class="form-check"><input class="form-check-input" type="checkbox" name="is_vegetarian" id="e_veg" {% if recipe.is_vegetarian %}checked{% endif %}><label class="form-check-label small" for="e_veg">Vegetarian</label></div>
                    <div class="form-check"><input class="form-check-input" type="checkbox" name="is_gluten_free" id="e_gf" {% if recipe.is_gluten_free %}checked{% endif %}><label class="form-check-label small" for="e_gf">Gluten-Free</label></div>
                    <div class="form-check"><input class="form-check-input" type="checkbox" name="is_dairy_free" id="e_df" {% if recipe.is_dairy_free %}checked{% endif %}><label class="form-check-label small" for="e_df">Dairy-Free</label></div>
                    <div class="form-check"><input class="form-check-input" type="checkbox" name="is_nut_free" id="e_nf" {% if recipe.is_nut_free %}checked{% endif %}><label class="form-check-label small" for="e_nf">Nut-Free</label></div>
                    <div class="form-check"><input class="form-check-input" type="checkbox" name="is_halal" id="e_hl" {% if recipe.is_halal %}checked{% endif %}><label class="form-check-label small" for="e_hl">Halal</label></div>
                  </div>
                </div>
                <h6 class="fw-bold text-success border-top pt-4 mb-3">Ingredients</h6>

                <div class="d-none d-md-flex row g-2 mb-1 small text-muted fw-bold ingredient-header-row">
                    <div class="col-md-1">Qty <span class="text-danger">*</span></div>
                    <div class="col-md-2">Unit</div>
                    <div class="col-md-1 package-header" style="display: none;">Pkg Qty</div>
                    <div class="col-md-2 package-header" style="display: none;">Pkg Unit</div>
                    <div class="col-md">Ingredient <span class="text-danger">*</span></div>
                    <div class="col-md-3 modifier-header" style="display: none;">Modifiers</div>
                    <div class="col-md-1"></div>
                </div>

                <div id="ingredients-container">
                    {% if ingredients %}
                    {% set ns = namespace(current_group=none) %}
                    {% for ing in ingredients %}
                    {% if ing.group_label and ing.group_label != ns.current_group %}
                    {% set ns.current_group = ing.group_label %}
                    <div class="group-header-row d-flex align-items-center gap-2 mt-3 mb-1 px-1" data-group="{{ ing.group_label }}">
                        <i class="fas fa-grip-vertical text-muted" style="font-size:.75rem;cursor:grab"></i>
                        <input type="text" class="group-label-text form-control form-control-sm fw-bold text-success border-0 border-bottom border-success ps-0"
                               style="max-width:220px;font-size:.8rem;background:transparent"
                               value="{{ ing.group_label }}"
                               placeholder="Group name..."
                               onchange="renameGroup(this.dataset.orig||this.defaultValue,this.value);this.dataset.orig=this.value;">
                        <span class="text-muted" style="font-size:.7rem">section</span>
                        <button type="button" class="btn btn-link text-danger p-0 ms-auto" style="font-size:.75rem"
                                onclick="removeGroup(this.closest('.group-header-row').querySelector('.group-label-text').value)">
                            <i class="fas fa-times"></i> remove group
                        </button>
                    </div>
                    {% endif %}
                    {% set pkg_parts = (ing.package_size or '').split(' ', 1) %}
                    {% set pkg_qty_val = pkg_parts[0] if pkg_parts|length > 1 else '' %}
                    {% set pkg_unit_val = pkg_parts[1] if pkg_parts|length > 1 else '' %}
                    {# Build modifier IDs and names from junction table #}
                    {% set _mod_ids = [] %}
                    {% set _mod_names = [] %}
                    {% for ml in ing.modifier_links %}
                        {% if ml.modifier %}
                            {% if _mod_ids.append(ml.modifier_id|string) %}{% endif %}
                            {% if _mod_names.append(ml.modifier.name) %}{% endif %}
                        {% endif %}
                    {% endfor %}
                    {% set mod_ids_csv = _mod_ids|join(',') %}
                    {% set mod_names_display = _mod_names|join(', ') %}
                    {% set has_mods = ing.ingredient_id in ingredients_with_modifiers or _mod_ids|length > 0 %}
                    <div class="ingredient-row ingredient-card mb-2">
                        <div class="row g-2 align-items-end">
                            <div class="col-4 col-md-1 field-qty">
                                <label class="d-md-none form-label small text-muted mb-0">Qty <span class="text-danger">*</span></label>
                                <input type="text" class="form-control form-control-sm" name="ingredient_amount[]" value="{{ ing.quantity or '' }}" placeholder="1">
                            </div>
                            <div class="col-8 col-md-2 field-unit">
                                <label class="d-md-none form-label small text-muted mb-0">Unit</label>
                                <select class="form-select form-select-sm unit-select" name="ingredient_unit[]">
                                    <option value="">-</option>
                                    {% for grp_label, lo, hi in [('Common Cooking',1,10),('Metric',10,20),('Volume',20,30),('Package Types',30,40),('Pieces & Portions',40,60),('Other',100,9999)] %}
                                    <optgroup label="{{ grp_label }}">
                                        {% for u in units|sort(attribute='sort_order') %}
                                        {% if u.sort_order >= lo and u.sort_order < hi %}
                                        {% set uv = u.abbreviation or u.name %}
                                        <option value="{{ uv }}" {% if ing.unit == uv %}selected{% endif %}>{{ u.name }}</option>
                                        {% endif %}
                                        {% endfor %}
                                    </optgroup>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-4 col-md-1 field-pkg-qty package-field" style="display: none;">
                                <label class="d-md-none form-label small text-muted mb-0">Pkg Qty</label>
                                <input type="text" class="form-control form-control-sm" name="ingredient_package_qty[]" value="{{ pkg_qty_val }}" placeholder="8">
                            </div>
                            <div class="col-8 col-md-2 field-pkg-unit package-field" style="display: none;">
                                <label class="d-md-none form-label small text-muted mb-0">Pkg Unit</label>
                                <select class="form-select form-select-sm package-unit-select" name="ingredient_package_unit[]">
                                    <option value="">-</option>
                                    {% set grocery_units = ['oz','lb','g','kg','mg','fl oz','ml','L','gal','qt','pt'] %}
                                    {% for u in units %}{% if (u.abbreviation in grocery_units) or (u.name in grocery_units) %}{% set puv = u.abbreviation or u.name %}<option value="{{ puv }}" {% if pkg_unit_val == puv %}selected{% endif %}>{{ u.name }}</option>{% endif %}{% endfor %}
                                </select>
                            </div>
                            <div class="col-12 col-md field-ingredient">
                                <label class="d-md-none form-label small text-muted mb-0">Ingredient <span class="text-danger">*</span></label>
                                <select class="form-select form-select-sm ingredient-select" name="ingredient_id[]">
                                    <option value="">Search ingredient...</option>
                                    {% for category, cat_ingredients in all_ingredients|groupby('category') %}
                                    <optgroup label="{{ category }}">
                                        {% for ai in cat_ingredients %}
                                        <option value="{{ ai.id }}" data-has-modifiers="{{ 'true' if ai.id in ingredients_with_modifiers else 'false' }}" {% if ing.ingredient_id == ai.id %}selected{% endif %}>{{ ai.name }}</option>
                                        {% endfor %}
                                    </optgroup>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-10 col-md-3 field-modifier modifier-column" style="display: {{ 'block' if has_mods else 'none' }};">
                                <label class="d-md-none form-label small text-muted mb-0">Modifiers</label>
                                <button type="button" class="btn btn-sm {{ 'btn-success' if _mod_names else 'btn-outline-secondary' }} w-100 modifier-btn" style="font-size: 0.75rem;" onclick="openModifierModal(this)">
                                    <i class="fas fa-tags me-1"></i><span class="mod-text">{{ mod_names_display if mod_names_display else 'None' }}</span>
                                </button>
                                <input type="hidden" class="modifier-ids-data" name="ingredient_modifier_ids[]" value="{{ mod_ids_csv }}">
                            </div>
                            <input type="hidden" name="ingredient_group_label[]" class="group-label-input" value="{{ ing.group_label or '' }}">
                            <div class="col-2 col-md-1 field-remove d-flex align-items-center justify-content-center">
                                <button type="button" class="btn btn-link text-danger p-0 remove-row-btn" onclick="removeIngredientRow(this)" title="Remove"><i class="fas fa-times fa-lg"></i></button>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                    {% else %}
                    <div class="ingredient-row ingredient-card mb-2">
                        <div class="row g-2 align-items-end">
                            <div class="col-4 col-md-1 field-qty"><label class="d-md-none form-label small text-muted mb-0">Qty <span class="text-danger">*</span></label><input type="text" class="form-control form-control-sm" name="ingredient_amount[]" placeholder="1"></div>
                            <div class="col-8 col-md-2 field-unit"><label class="d-md-none form-label small text-muted mb-0">Unit</label>
                                <select class="form-select form-select-sm unit-select" name="ingredient_unit[]"><option value="">-</option>
                                    {% for grp_label, lo, hi in [('Common Cooking',1,10),('Metric',10,20),('Volume',20,30),('Package Types',30,40),('Pieces & Portions',40,60),('Other',100,9999)] %}
                                    <optgroup label="{{ grp_label }}">{% for u in units|sort(attribute='sort_order') %}{% if u.sort_order >= lo and u.sort_order < hi %}<option value="{{ u.abbreviation or u.name }}">{{ u.name }}</option>{% endif %}{% endfor %}</optgroup>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-4 col-md-1 field-pkg-qty package-field" style="display: none;"><label class="d-md-none form-label small text-muted mb-0">Pkg Qty</label><input type="text" class="form-control form-control-sm" name="ingredient_package_qty[]" placeholder="8"></div>
                            <div class="col-8 col-md-2 field-pkg-unit package-field" style="display: none;"><label class="d-md-none form-label small text-muted mb-0">Pkg Unit</label>
                                <select class="form-select form-select-sm package-unit-select" name="ingredient_package_unit[]"><option value="">-</option>{% set grocery_units = ['oz','lb','g','kg','mg','fl oz','ml','L','gal','qt','pt'] %}{% for u in units %}{% if (u.abbreviation in grocery_units) or (u.name in grocery_units) %}<option value="{{ u.abbreviation or u.name }}">{{ u.name }}</option>{% endif %}{% endfor %}</select>
                            </div>
                            <div class="col-12 col-md field-ingredient"><label class="d-md-none form-label small text-muted mb-0">Ingredient <span class="text-danger">*</span></label>
                                <select class="form-select form-select-sm ingredient-select" name="ingredient_id[]"><option value="">Search ingredient...</option>
                                    {% for category, cat_ingredients in all_ingredients|groupby('category') %}<optgroup label="{{ category }}">{% for ai in cat_ingredients %}<option value="{{ ai.id }}" data-has-modifiers="{{ 'true' if ai.id in ingredients_with_modifiers else 'false' }}">{{ ai.name }}</option>{% endfor %}</optgroup>{% endfor %}
                                </select>
                            </div>
                            <div class="col-10 col-md-3 field-modifier modifier-column" style="display: none;"><label class="d-md-none form-label small text-muted mb-0">Modifiers</label>
                                <button type="button" class="btn btn-sm btn-outline-secondary w-100 modifier-btn" style="font-size: 0.75rem;" onclick="openModifierModal(this)"><i class="fas fa-tags me-1"></i><span class="mod-text">None</span></button>
                                <input type="hidden" class="modifier-ids-data" name="ingredient_modifier_ids[]" value="">
                            </div>
                            <input type="hidden" name="ingredient_group_label[]" class="group-label-input" value="">
                            <div class="col-2 col-md-1 field-remove d-flex align-items-center justify-content-center"><button type="button" class="btn btn-link text-danger p-0 remove-row-btn" onclick="removeIngredientRow(this)" title="Remove"><i class="fas fa-times fa-lg"></i></button></div>
                        </div>
                    </div>
                    {% endif %}
                </div>

                <button type="button" id="add-row-btn" class="btn btn-sm btn-outline-success rounded-pill mt-2 mb-4"><i class="fas fa-plus"></i> Ingredient</button>
                <button type="button" id="add-group-btn" class="btn btn-sm btn-outline-secondary rounded-pill mt-2 mb-4 ms-2"><i class="fas fa-layer-group me-1"></i> Add Group</button>

                <h6 class="fw-bold text-success border-top pt-4 mb-3">Instructions</h6>
                <textarea class="form-control" name="instructions" rows="10" placeholder="Enter cooking instructions...">{{ recipe.instructions or '' }}</textarea>

                <div class="text-end mt-4">
                    <a href="{{ url_for('admin.flagged') if request.args.get('return_to') == 'flagged' else url_for('view_recipe', recipe_id=recipe.id) }}" class="btn btn-secondary btn-lg me-2 px-4">Cancel</a>
                    <button type="submit" class="btn btn-success btn-lg shadow px-5">Update Recipe</button>
                </div>
            </form>

            {# ═══ MEDIA DRAWER ═══ #}

            <details class="media-drawer" open>
                <summary>Media &amp; Attachments <span class="chevron"><i class="fas fa-chevron-right"></i></span></summary>
                <div class="drawer-body">
                    <div class="drawer-section">
                        <h3><i class="fas fa-camera text-success me-1"></i> Photos</h3>
                        <div class="photo-grid" id="photoGrid">
                            {% for p in photos %}
                            <div class="photo-card {% if recipe.image_filename == p.filename %}is-cover{% endif %}" id="photo-{{ p.id }}" data-id="{{ p.id }}" data-filename="{{ p.filename }}">
                                <img src="{{ url_for('static', filename=media_path(p.filename)) }}" alt="Recipe photo" loading="lazy">
                                {% if recipe.image_filename == p.filename %}<span class="photo-badge">Cover</span>{% endif %}
                                <div class="photo-actions">
                                    {% if current_user.role in ('admin','moderator') and recipe.image_filename != p.filename %}<button class="photo-btn cover" onclick="setCover({{ recipe.id }},{{ p.id }})" title="Set as cover"><i class="fas fa-star me-1"></i>Cover</button>{% endif %}
                                    <button class="photo-btn delete" onclick="deletePhoto({{ recipe.id }},{{ p.id }})" title="Delete"><i class="fas fa-trash-alt"></i></button>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        {% if not photos %}<div class="empty-photos-state" id="noPhotosMsg">No photos yet — upload some below.</div>{% endif %}
                        <div class="upload-drop-zone" id="photoDropZone"><div class="upload-drop-zone-icon">🖼️</div><div class="upload-drop-zone-text"><strong>Drop photos here</strong> or click to browse<br><small>JPG, PNG, WEBP, GIF — max {{ max_upload_mb|default(16) }} MB each</small></div><input type="file" id="photoFileInput" accept="image/jpeg,image/png,image/gif,image/webp" multiple></div>
                        <div class="upload-progress" id="photoProgress"><div class="progress-bar-track"><div class="progress-bar-fill" id="photoProgressBar"></div></div><div class="upload-status" id="photoStatus">Uploading…</div></div>
                    </div>
                    <div class="drawer-divider"></div>
                    <div class="drawer-section">
                        <h3><i class="fas fa-file-pdf text-danger me-1"></i> PDF Attachment</h3>
                        <div id="pdfCurrentWrap">
                            {% if recipe.pdf_filename %}
                            <div class="pdf-current" id="pdfCurrent"><span class="pdf-icon"><i class="fas fa-file-pdf text-danger"></i></span><span class="pdf-name">{{ recipe.pdf_filename }}</span><div class="pdf-actions"><a href="{{ url_for('static', filename='uploads/' + recipe.pdf_filename) }}" target="_blank" class="pdf-action-btn view"><i class="fas fa-eye"></i> View</a><button class="pdf-action-btn remove" onclick="removePdf({{ recipe.id }})"><i class="fas fa-times"></i> Remove</button></div></div>
                            {% else %}<div class="empty-photos-state" id="noPdfMsg">No PDF attached.</div>{% endif %}
                        </div>
                        <div style="margin-top:.75rem;display:flex;align-items:center;gap:.5rem"><input type="file" id="pdfFileInput" accept=".pdf" style="display:none"><button type="button" class="pdf-action-btn upload" onclick="document.getElementById('pdfFileInput').click()"><i class="fas fa-paperclip"></i> {{ 'Replace' if recipe.pdf_filename else 'Upload' }} PDF</button><span id="pdfUploadStatus" style="font-size:.8rem;color:#64748b"></span></div>
                    </div>
                </div>
            </details>
            
        </div>
    </div>
</div>

{# ═══ DELETE RECIPE MODAL ═══ #}
{% if current_user.role in ('admin', 'moderator') %}
<div class="modal fade" id="deleteRecipeModal" tabindex="-1"><div class="modal-dialog modal-dialog-centered"><div class="modal-content border-danger"><div class="modal-header bg-danger text-white"><h5 class="modal-title"><i class="fas fa-exclamation-triangle me-2"></i>Delete Recipe</h5><button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button></div><div class="modal-body"><p class="mb-2">Are you sure you want to <strong>permanently delete</strong> this recipe?</p><div class="bg-light border rounded p-3 mb-3"><strong>{{ recipe.title }}</strong><br><small class="text-muted">ID: {{ recipe.id }} · {{ (ingredients|length) }} ingredients · {{ (photos|length) }} photos</small></div><p class="text-danger small mb-0"><i class="fas fa-exclamation-circle me-1"></i>This action cannot be undone.</p></div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button><button type="button" class="btn btn-danger" id="confirmDeleteBtn" onclick="executeDeleteRecipe()"><i class="fas fa-trash-alt me-1"></i>Delete Forever</button></div></div></div></div>
{% endif %}

{# ═══ MODIFIER MODAL — dynamic body ═══ #}
<div class="modal fade" id="modifierModal" tabindex="-1"><div class="modal-dialog modal-dialog-scrollable"><div class="modal-content"><div class="modal-header"><h5 class="modal-title"><i class="fas fa-tags me-2 text-success"></i>Select Modifiers</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body" id="modifierModalBody"><div class="text-center text-muted py-4"><i class="fas fa-spinner fa-spin me-2"></i>Loading modifiers…</div></div><div class="modal-footer"><button type="button" class="btn btn-outline-danger btn-sm" onclick="clearModifiers()">Clear All</button><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button><button type="button" class="btn btn-success" onclick="saveModifiers()">Apply Modifiers</button></div></div></div></div>

<!-- Select2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
var RETURN_TO = new URLSearchParams(window.location.search).get('return_to') || '';
var MODIFIER_CACHE = {};
var currentModifierButton = null;

// ═══════════════════════════════════════════════
// FETCH MODIFIERS FROM API (with cache)
// ═══════════════════════════════════════════════
function fetchModifiers(ingredientId, callback) {
    if (!ingredientId) { callback(null); return; }
    var key = String(ingredientId);
    if (MODIFIER_CACHE[key]) { callback(MODIFIER_CACHE[key]); return; }
    fetch('/api/ingredient/' + ingredientId + '/modifiers')
        .then(function(r) { return r.json(); })
        .then(function(data) { MODIFIER_CACHE[key] = data; callback(data); })
        .catch(function(err) { console.warn('Modifier fetch failed:', err); callback(null); });
}

// ═══════════════════════════════════════════════
// BUILD MODAL — supports checkbox (multi) + radio (single) per category
// ═══════════════════════════════════════════════
function buildModifierModalContent(data, currentIds) {
    var body = document.getElementById('modifierModalBody');
    body.innerHTML = '';
    var groups = data.modifier_groups || {};
    var groupKeys = Object.keys(groups);
    if (!groupKeys.length) {
        body.innerHTML = '<div class="text-center text-muted py-4"><i class="fas fa-info-circle fa-2x mb-2 d-block"></i>No modifiers available for this ingredient.</div>';
        return;
    }
    var accordion = document.createElement('div');
    accordion.className = 'accordion';
    accordion.id = 'modifierAccordion';

    groupKeys.forEach(function(catKey, idx) {
        var group = groups[catKey];
        var mods = group.modifiers;
        if (!mods || !mods.length) return;

        var selMode = group.selection_mode || 'single';
        var maxSel = group.max_selections || 1;
        var inputType = (selMode === 'multi') ? 'checkbox' : 'radio';
        var inputName = (inputType === 'radio') ? 'mod_' + catKey : 'modm_' + catKey + '[]';

        var collapseId = 'collapse-dyn-' + catKey.replace(/[^a-z0-9]/gi, '');

        var modHtml = mods.map(function(mod) {
            var isChecked = currentIds.indexOf(mod.id) !== -1;
            var badge = mod.is_default ? ' <span class="badge bg-success-subtle text-success ms-1" style="font-size:.6rem">suggested</span>' : '';
            return '<div class="form-check py-1">' +
                '<input class="form-check-input modifier-input" type="' + inputType + '" ' +
                'name="' + inputName + '" value="' + mod.name + '" data-mod-id="' + mod.id + '" ' +
                'data-cat="' + catKey + '" data-max="' + maxSel + '" data-mode="' + selMode + '" ' +
                'id="dyn-mod-' + mod.id + '"' + (isChecked ? ' checked' : '') + '>' +
                '<label class="form-check-label small" for="dyn-mod-' + mod.id + '">' + mod.name + badge + '</label></div>';
        }).join('');

        var hasChecked = mods.some(function(mod) { return currentIds.indexOf(mod.id) !== -1; });
        var selNote = '';
        if (selMode === 'multi') {
            selNote = maxSel > 0 ? ' <small class="text-muted">(up to ' + maxSel + ')</small>' : ' <small class="text-muted">(multiple)</small>';
        }

        var item = document.createElement('div');
        item.className = 'accordion-item';
        item.innerHTML =
            '<h2 class="accordion-header"><button class="accordion-button' + (idx > 0 && !hasChecked ? ' collapsed' : '') + '" type="button" data-bs-toggle="collapse" data-bs-target="#' + collapseId + '">' +
            group.display_name + selNote +
            ' <span class="badge bg-secondary ms-2" style="font-size:.65rem">' + mods.length + '</span>' +
            (hasChecked ? ' <i class="fas fa-check-circle text-success ms-1" style="font-size:.7rem"></i>' : '') +
            '</button></h2>' +
            '<div id="' + collapseId + '" class="accordion-collapse collapse' + (idx === 0 || hasChecked ? ' show' : '') + '" data-bs-parent="#modifierAccordion">' +
            '<div class="accordion-body p-2" data-cat="' + catKey + '" data-mode="' + selMode + '" data-max="' + maxSel + '">' + modHtml + '</div></div>';
        accordion.appendChild(item);
    });

    body.appendChild(accordion);

    // Radio deselect on click
    body.querySelectorAll('input[type="radio"]').forEach(function(radio) {
        radio.addEventListener('mousedown', function() { this._prevChecked = this.checked; });
        radio.addEventListener('click', function() { if (this._prevChecked) this.checked = false; });
    });

    // Checkbox max enforcement
    body.querySelectorAll('input[type="checkbox"]').forEach(function(cb) {
        cb.addEventListener('change', function() {
            var container = this.closest('.accordion-body');
            var max = parseInt(container.getAttribute('data-max')) || 0;
            if (max <= 0) return;
            var checked = container.querySelectorAll('input[type="checkbox"]:checked').length;
            container.querySelectorAll('input[type="checkbox"]:not(:checked)').forEach(function(other) { other.disabled = checked >= max; });
        });
    });

    // Enforce initial state for pre-checked checkboxes
    body.querySelectorAll('.accordion-body[data-mode="multi"]').forEach(function(container) {
        var max = parseInt(container.getAttribute('data-max')) || 0;
        if (max <= 0) return;
        var checked = container.querySelectorAll('input[type="checkbox"]:checked').length;
        container.querySelectorAll('input[type="checkbox"]:not(:checked)').forEach(function(cb) { cb.disabled = checked >= max; });
    });
}

// ═══════════════════════════════════════════════
// INGREDIENT CHANGED — show/hide modifier column based on data attribute
// ═══════════════════════════════════════════════
function onIngredientChanged(selectEl) {
    var row = selectEl.closest('.ingredient-row');
    var modCol = row.querySelector('.modifier-column');
    var idsField = row.querySelector('.modifier-ids-data');
    var modBtn = row.querySelector('.modifier-btn');
    var modText = row.querySelector('.mod-text');
    var selectedOpt = selectEl.options[selectEl.selectedIndex];
    var hasModifiers = selectedOpt && selectedOpt.getAttribute('data-has-modifiers') === 'true';
    var hasExistingMods = idsField && idsField.value && idsField.value.trim();

    if (selectEl.value && (hasModifiers || hasExistingMods)) {
        modCol.style.display = 'block';
        document.querySelector('.modifier-header').style.display = 'block';
        if (hasModifiers) fetchModifiers(selectEl.value, function() {});
    } else {
        modCol.style.display = 'none';
        if (idsField) idsField.value = '';
        if (modBtn) { modBtn.classList.remove('btn-success'); modBtn.classList.add('btn-outline-secondary'); }
        if (modText) modText.textContent = 'None';
        var anyVisible = Array.from(document.querySelectorAll('.modifier-column')).some(function(c) { return c.style.display !== 'none'; });
        if (!anyVisible) { var mh = document.querySelector('.modifier-header'); if (mh) mh.style.display = 'none'; }
    }
}

// ═══════════════════════════════════════════════
// OPEN / SAVE / CLEAR MODIFIER MODAL
// ═══════════════════════════════════════════════
function openModifierModal(button) {
    currentModifierButton = button;
    var row = button.closest('.ingredient-row');
    var idsField = row.querySelector('.modifier-ids-data');
    var currentIds = (idsField.value || '').split(',').filter(Boolean).map(Number);
    var ingredientSelect = row.querySelector('.ingredient-select');
    var ingredientId = ingredientSelect ? ingredientSelect.value : '';

    var body = document.getElementById('modifierModalBody');
    body.innerHTML = '<div class="text-center text-muted py-4"><i class="fas fa-spinner fa-spin me-2"></i>Loading modifiers…</div>';
    var modal = new bootstrap.Modal(document.getElementById('modifierModal'));
    modal.show();

    if (ingredientId) {
        fetchModifiers(ingredientId, function(data) {
            if (data && data.has_modifiers) {
                buildModifierModalContent(data, currentIds);
            } else {
                body.innerHTML = '<div class="text-center text-muted py-4"><i class="fas fa-info-circle fa-2x mb-2 d-block"></i>No modifiers mapped for this ingredient.</div>';
            }
        });
    } else {
        body.innerHTML = '<div class="text-center text-muted py-4"><i class="fas fa-info-circle fa-2x mb-2 d-block"></i>Select an ingredient first.</div>';
    }
}

function clearModifiers() {
    document.querySelectorAll('#modifierModalBody .modifier-input').forEach(function(r) { r.checked = false; r.disabled = false; });
}

function saveModifiers() {
    var selectedIds = [];
    var selectedNames = [];
    document.querySelectorAll('#modifierModalBody .modifier-input:checked').forEach(function(input) {
        selectedIds.push(input.getAttribute('data-mod-id'));
        selectedNames.push(input.value);
    });
    if (currentModifierButton) {
        var row = currentModifierButton.closest('.ingredient-row');
        row.querySelector('.modifier-ids-data').value = selectedIds.join(',');
        if (selectedNames.length > 0) {
            currentModifierButton.classList.remove('btn-outline-secondary');
            currentModifierButton.classList.add('btn-success');
        } else {
            currentModifierButton.classList.remove('btn-success');
            currentModifierButton.classList.add('btn-outline-secondary');
        }
        updateModifierButtonDisplay(currentModifierButton, selectedNames);
    }
    bootstrap.Modal.getInstance(document.getElementById('modifierModal')).hide();
    setTimeout(function() { initIngredientSelects(); initPackageUnitSelects(); initUnitSelects(); }, 300);
}

function updateModifierButtonDisplay(button, selected) {
    var span = button.querySelector('.mod-text');
    if (!span) return;
    if (selected.length > 0) {
        var trimmed = selected.map(function(s) { return s.trim(); });
        span.textContent = trimmed.slice(0, 2).join(', ') + (trimmed.length > 2 ? ' +' + (trimmed.length - 2) : '');
    } else { span.textContent = 'None'; }
}

// ═══════════════════════════════════════════════
// TOGGLE PACKAGE FIELDS / REMOVE ROW
// ═══════════════════════════════════════════════
function togglePackageField(selectEl) {
    var selectedText = selectEl.options[selectEl.selectedIndex].text;
    var row = selectEl.closest('.ingredient-row');
    var packageUnits = ['can','jar','box','bag','bottle','package','container','pkg','btl','cont'];
    var shouldShow = packageUnits.some(function(u) { return selectedText.toLowerCase().includes(u); });
    row.querySelectorAll('.package-field').forEach(function(f) { f.style.display = shouldShow ? 'block' : 'none'; });
    var anyPkgVisible = Array.from(document.querySelectorAll('.package-field')).some(function(f) { return f.style.display === 'block'; });
    document.querySelectorAll('.package-header').forEach(function(h) { h.style.display = anyPkgVisible ? 'block' : 'none'; });
}

function removeIngredientRow(button) {
    var container = document.getElementById('ingredients-container');
    if (container.children.length > 1) {
        button.closest('.ingredient-row').remove();
        var anyVisible = Array.from(document.querySelectorAll('.modifier-column')).some(function(c) { return c.style.display !== 'none'; });
        if (!anyVisible) { var mh = document.querySelector('.modifier-header'); if (mh) mh.style.display = 'none'; }
    }
}

// ═══════════════════════════════════════════════
// FLAGGED INGREDIENT ADD
// ═══════════════════════════════════════════════
function handleAddFlagged(btn) {
    try { addFlaggedIngredient(JSON.parse(btn.getAttribute('data-flagged')), parseInt(btn.getAttribute('data-row-idx'), 10)); }
    catch (e) { console.error('Failed to parse flagged item:', e); }
}
function addFlaggedIngredient(item, rowIndex) {
    document.getElementById('add-row-btn').click();
    setTimeout(function() {
        var rows = document.querySelectorAll('.ingredient-row');
        var newRow = rows[rows.length - 1];
        var qtyInput = newRow.querySelector('input[name="ingredient_amount[]"]');
        if (qtyInput && item.quantity) qtyInput.value = item.quantity;
        var unitVal = item.matched_unit || item.raw_unit || '';
        if (unitVal) { var $u = $(newRow).find('select[name="ingredient_unit[]"]'); if ($u.find('option[value="' + unitVal + '"]').length) $u.val(unitVal).trigger('change'); }
        newRow.classList.add('flagged-highlight');
        var $ing = $(newRow).find('select[name="ingredient_id[]"]');
        if ($ing.length) {
            newRow.querySelector('.modifier-column').style.display = 'block';
            $ing.select2('open');
            setTimeout(function() { var sf = document.querySelector('.select2-search__field'); if (sf && item.raw_name) { sf.value = item.raw_name; sf.dispatchEvent(new Event('input')); } }, 100);
        }
        var flagRow = document.getElementById('flagged-row-' + rowIndex);
        if (flagRow) { flagRow.style.opacity = '0.4'; flagRow.style.textDecoration = 'line-through'; var ab = flagRow.querySelector('button'); if (ab) { ab.disabled = true; ab.innerHTML = '<i class="fas fa-check me-1"></i>Added'; ab.classList.remove('btn-outline-success'); ab.classList.add('btn-success'); } }
        newRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }, 200);
}

// ═══════════════════════════════════════════════
// DELETE RECIPE
// ═══════════════════════════════════════════════
function confirmDeleteRecipe() { new bootstrap.Modal(document.getElementById('deleteRecipeModal')).show(); }
function executeDeleteRecipe() {
    var btn = document.getElementById('confirmDeleteBtn');
    btn.disabled = true; btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Deleting…';
    fetch('/recipe/{{ recipe.id }}/delete', { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest' } })
    .then(function(r) { return r.json(); })
    .then(function(d) { if (d.success) { window.location.href = RETURN_TO === 'flagged' ? '/admin/flagged' : (d.redirect || '/recipes'); } else { btn.disabled = false; btn.innerHTML = '<i class="fas fa-trash-alt me-1"></i>Delete Forever'; mediaToast(d.error || 'Delete failed', 'error'); } })
    .catch(function() { btn.disabled = false; btn.innerHTML = '<i class="fas fa-trash-alt me-1"></i>Delete Forever'; mediaToast('Network error', 'error'); });
}

// ═══════════════════════════════════════════════
// SELECT2 INIT
// ═══════════════════════════════════════════════
function initUnitSelects() {
    $('select[name="ingredient_unit[]"]').not('.select2-hidden-accessible').select2({
        theme: 'bootstrap-5', placeholder: 'Unit', allowClear: true, width: '100%', minimumResultsForSearch: 0
    }).on('change', function() { togglePackageField(this); });
}
function initPackageUnitSelects() {
    $('.package-unit-select').not('.select2-hidden-accessible').select2({ theme: 'bootstrap-5', placeholder: 'Unit', allowClear: true, width: '100%' });
}
function initIngredientSelects() {
    $('select[name="ingredient_id[]"]').not('.select2-hidden-accessible').select2({
        theme: 'bootstrap-5', placeholder: 'Search ingredient...', allowClear: true, width: '100%', minimumResultsForSearch: 0
    }).on('change', function() { onIngredientChanged(this); }).on('select2:open', function() { setTimeout(function() { var sf = document.querySelector('.select2-search__field'); if (sf) { sf.focus(); sf.click(); } }, 50); });
}

// ═══════════════════════════════════════════════
// ADD INGREDIENT ROW
// ═══════════════════════════════════════════════
document.getElementById('add-row-btn').addEventListener('click', function() {
    var container = document.getElementById('ingredients-container');
    var firstRow = document.querySelector('.ingredient-row');
    var newRow = firstRow.cloneNode(true);
    newRow.querySelectorAll('input[type="text"], input[type="hidden"]').forEach(function(i) { i.value = ''; });
    newRow.querySelectorAll('select').forEach(function(s) { s.selectedIndex = 0; s.classList.remove('select2-hidden-accessible'); s.removeAttribute('data-select2-id'); s.removeAttribute('aria-hidden'); s.removeAttribute('tabindex'); });
    newRow.querySelectorAll('.select2-container').forEach(function(el) { el.remove(); });
    newRow.classList.remove('flagged-highlight');
    var mb = newRow.querySelector('.modifier-btn'); var mt = newRow.querySelector('.mod-text');
    if (mb) { mb.classList.remove('btn-success', 'loading'); mb.classList.add('btn-outline-secondary'); }
    if (mt) mt.textContent = 'None';
    newRow.querySelectorAll('.package-field').forEach(function(f) { f.style.display = 'none'; });
    var mc = newRow.querySelector('.modifier-column'); if (mc) mc.style.display = 'none';
    container.appendChild(newRow);
    setTimeout(function() {
        $('select[name="ingredient_unit[]"]').each(function() { if ($(this).hasClass('select2-hidden-accessible')) $(this).select2('destroy'); });
        $('select[name="ingredient_id[]"]').each(function() { if ($(this).hasClass('select2-hidden-accessible')) $(this).select2('destroy'); });
        initUnitSelects(); initIngredientSelects(); initPackageUnitSelects();
    }, 50);
});

// ═══════════════════════════════════════════════
// MEDIA DRAWER (photos + PDF AJAX)
// ═══════════════════════════════════════════════
(function(){
    var RECIPE_ID = {{ recipe.id }};
    var IS_MOD = {{ 'true' if current_user.role in ('admin','moderator') else 'false' }};
    // mediaToast -> kcToast (global alias in base.html)
    var dropZone = document.getElementById('photoDropZone'), fileInput = document.getElementById('photoFileInput'), progress = document.getElementById('photoProgress'), progressBar = document.getElementById('photoProgressBar'), statusEl = document.getElementById('photoStatus');
    dropZone.addEventListener('click', function(){ fileInput.click(); });
    dropZone.addEventListener('dragover', function(e){ e.preventDefault(); dropZone.classList.add('dragover'); });
    dropZone.addEventListener('dragleave', function(){ dropZone.classList.remove('dragover'); });
    dropZone.addEventListener('drop', function(e){ e.preventDefault(); dropZone.classList.remove('dragover'); if(e.dataTransfer.files.length) uploadPhotos(e.dataTransfer.files); });
    fileInput.addEventListener('change', function(){ if(fileInput.files.length) uploadPhotos(fileInput.files); fileInput.value = ''; });
    function uploadPhotos(files){ var fd = new FormData(); for(var i=0;i<files.length;i++) fd.append('photos',files[i]); progress.classList.add('active'); progressBar.style.width='30%'; statusEl.textContent='Uploading '+files.length+' file(s)…'; var xhr=new XMLHttpRequest(); xhr.open('POST','/recipe/'+RECIPE_ID+'/photos/upload'); xhr.setRequestHeader('X-Requested-With','XMLHttpRequest'); xhr.upload.addEventListener('progress',function(e){if(e.lengthComputable) progressBar.style.width=Math.round(e.loaded/e.total*100)+'%';}); xhr.onload=function(){progressBar.style.width='100%';try{var r=JSON.parse(xhr.responseText);if(r.success&&r.photos){var nm=document.getElementById('noPhotosMsg');if(nm)nm.remove();r.photos.forEach(function(p){addPhotoCard(p);});mediaToast(r.photos.length+' photo(s) uploaded!','success');statusEl.textContent='Done!';}else{mediaToast(r.error||'Upload failed','error');statusEl.textContent=r.error||'Failed';}}catch(e){mediaToast('Upload error','error');statusEl.textContent='Error';}setTimeout(function(){progress.classList.remove('active');},2000);}; xhr.onerror=function(){mediaToast('Network error','error');progress.classList.remove('active');}; xhr.send(fd); }
    function addPhotoCard(p){ var grid=document.getElementById('photoGrid');var card=document.createElement('div');card.className='photo-card'+(p.is_cover?' is-cover':'');card.id='photo-'+p.id;card.dataset.id=p.id;card.dataset.filename=p.filename;var badge=p.is_cover?'<span class="photo-badge">Cover</span>':'';var coverBtn='';if(IS_MOD&&!p.is_cover)coverBtn='<button class="photo-btn cover" onclick="setCover('+RECIPE_ID+','+p.id+')"><i class="fas fa-star me-1"></i>Cover</button>';card.innerHTML='<img src="'+p.url+'" alt="Recipe photo" loading="lazy">'+badge+'<div class="photo-actions">'+coverBtn+'<button class="photo-btn delete" onclick="deletePhoto('+RECIPE_ID+','+p.id+')"><i class="fas fa-trash-alt"></i></button></div>';grid.appendChild(card); }
    window.deletePhoto=function(rid,pid){kcConfirm('Delete this photo?', function() {fetch('/recipe/'+rid+'/photo/'+pid+'/delete',{method:'POST',headers:{'X-Requested-With':'XMLHttpRequest'}}).then(function(r){return r.json();}).then(function(r){if(r.success){var card=document.getElementById('photo-'+pid);if(card)card.remove();if(r.new_cover!==undefined)updateCoverBadges(r.new_cover);mediaToast('Photo deleted','success');if(!document.querySelectorAll('.photo-card').length){document.getElementById('photoGrid').insertAdjacentHTML('afterend','<div class="empty-photos-state" id="noPhotosMsg">No photos yet.</div>');}}else mediaToast(r.error||'Delete failed','error');}).catch(function(){mediaToast('Network error','error');}); }, 'Delete Photo'); };
    window.setCover=function(rid,pid){fetch('/recipe/'+rid+'/photo/'+pid+'/set-cover',{method:'POST',headers:{'X-Requested-With':'XMLHttpRequest'}}).then(function(r){return r.json();}).then(function(r){if(r.success){updateCoverBadges(r.cover);mediaToast('Cover photo updated!','success');}else mediaToast(r.error||'Failed','error');}).catch(function(){mediaToast('Network error','error');}); };
    function updateCoverBadges(coverFilename){document.querySelectorAll('.photo-card').forEach(function(card){var fn=card.dataset.filename;var isCover=fn===coverFilename;card.classList.toggle('is-cover',isCover);var badge=card.querySelector('.photo-badge');if(isCover&&!badge)card.insertAdjacentHTML('afterbegin','<span class="photo-badge">Cover</span>');else if(!isCover&&badge)badge.remove();var actions=card.querySelector('.photo-actions');if(!actions)return;var cb=actions.querySelector('.photo-btn.cover');if(IS_MOD){if(isCover&&cb)cb.remove();if(!isCover&&!cb){var pid=card.dataset.id;actions.insertAdjacentHTML('afterbegin','<button class="photo-btn cover" onclick="setCover('+RECIPE_ID+','+pid+')"><i class="fas fa-star me-1"></i>Cover</button>');}}});}
    var pdfInput=document.getElementById('pdfFileInput');
    pdfInput.addEventListener('change',function(){if(!pdfInput.files.length)return;var file=pdfInput.files[0];var ss=document.getElementById('pdfUploadStatus');ss.textContent='Uploading…';var fd=new FormData();fd.append('pdf',file);fetch('/recipe/'+RECIPE_ID+'/pdf/upload',{method:'POST',headers:{'X-Requested-With':'XMLHttpRequest'},body:fd}).then(function(r){return r.json();}).then(function(r){if(r.success){document.getElementById('pdfCurrentWrap').innerHTML='<div class="pdf-current"><span class="pdf-icon"><i class="fas fa-file-pdf text-danger"></i></span><span class="pdf-name">'+r.filename+'</span><div class="pdf-actions"><a href="'+r.url+'" target="_blank" class="pdf-action-btn view"><i class="fas fa-eye"></i> View</a><button class="pdf-action-btn remove" onclick="removePdf('+RECIPE_ID+')"><i class="fas fa-times"></i> Remove</button></div></div>';mediaToast('PDF uploaded!','success');ss.textContent='';}else{mediaToast(r.error||'Upload failed','error');ss.textContent=r.error||'Failed';}}).catch(function(){mediaToast('Network error','error');ss.textContent='Error';});pdfInput.value='';});
    window.removePdf=function(rid){kcConfirm('Remove PDF?', function() {fetch('/recipe/'+rid+'/pdf/remove',{method:'POST',headers:{'X-Requested-With':'XMLHttpRequest'}}).then(function(r){return r.json();}).then(function(r){if(r.success){document.getElementById('pdfCurrentWrap').innerHTML='<div class="empty-photos-state">No PDF attached.</div>';mediaToast('PDF removed','success');}else mediaToast(r.error||'Failed','error');}).catch(function(){mediaToast('Network error','error');}); }, 'Remove PDF'); };
})();

// ═══════════════════════════════════════════════
// DOM READY
// ═══════════════════════════════════════════════
$(document).ready(function() {
    $('#cuisine-select').select2({ theme: 'bootstrap-5', placeholder: 'Select cuisine', allowClear: true, width: '100%' });
    initUnitSelects(); initIngredientSelects(); initPackageUnitSelects();

    // Restore package field visibility
    document.querySelectorAll('.unit-select').forEach(function(sel) { togglePackageField(sel); });

    // Restore modifier column visibility for existing ingredients
    var anyModVisible = false;
    document.querySelectorAll('.ingredient-select').forEach(function(sel) {
        if (sel.value) {
            var row = sel.closest('.ingredient-row');
            var opt = sel.options[sel.selectedIndex];
            var hasMods = opt && opt.getAttribute('data-has-modifiers') === 'true';
            var hasExisting = row.querySelector('.modifier-ids-data') && row.querySelector('.modifier-ids-data').value;
            if (hasMods || hasExisting) {
                anyModVisible = true;
                row.querySelector('.modifier-column').style.display = 'block';
                if (hasMods) fetchModifiers(sel.value, function() {});
            }
        }
    });
    if (anyModVisible) { var mh = document.querySelector('.modifier-header'); if (mh) mh.style.display = 'block'; }
});
</script>
<script src="{{ url_for('static', filename='js/culinary_qty.js') }}"></script>
<script>
// ── GROUP NAME MODAL ──
function showGroupNameModal(callback) {
    var modal = document.getElementById('groupNameModal');
    if (!modal) {
        modal = document.createElement('div');
        modal.id = 'groupNameModal';
        modal.style.cssText = 'display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999;align-items:center;justify-content:center;';
        modal.innerHTML = '<div style="background:#fff;border-radius:12px;padding:1.5rem;max-width:400px;width:90%;box-shadow:0 4px 24px rgba(0,0,0,.15)">' +
            '<h6 class="fw-bold mb-3"><i class="fas fa-layer-group me-2 text-success"></i>Add Ingredient Group</h6>' +
            '<input id="groupNameInput" type="text" class="form-control mb-3" placeholder="e.g. For the Sauce, Topping, Marinade">' +
            '<div class="d-flex gap-2 justify-content-end">' +
            '<button type="button" class="btn btn-secondary btn-sm" id="groupNameCancel">Cancel</button>' +
            '<button type="button" class="btn btn-success btn-sm" id="groupNameConfirm">Add Group</button>' +
            '</div></div>';
        document.body.appendChild(modal);
    }
    var input = document.getElementById('groupNameInput');
    input.value = '';
    modal.style.display = 'flex';
    setTimeout(function() { input.focus(); }, 100);

    function confirm() {
        modal.style.display = 'none';
        callback(input.value);
    }
    function cancel() {
        modal.style.display = 'none';
        callback('');
    }
    document.getElementById('groupNameConfirm').onclick = confirm;
    document.getElementById('groupNameCancel').onclick = cancel;
    input.onkeydown = function(e) { if (e.key === 'Enter') confirm(); if (e.key === 'Escape') cancel(); };
    modal.onclick = function(e) { if (e.target === modal) cancel(); };
}

// ── GROUP MANAGEMENT ──
function renameGroup(oldName, newName) {
    if (!newName.trim() || oldName === newName) return;
    document.querySelectorAll('.group-label-input').forEach(function(inp) {
        if (inp.value === oldName) inp.value = newName;
    });
}

function removeGroup(groupName) {
    if (!groupName) return;
    kcConfirm('Remove group "' + groupName + '"? Ingredients will become ungrouped.', function() {
    // Clear group label from all rows in this group
    document.querySelectorAll('.group-label-input').forEach(function(inp) {
        if (inp.value === groupName) inp.value = '';
    });
    // Remove the header row
    document.querySelectorAll('.group-header-row').forEach(function(row) {
        var txt = row.querySelector('.group-label-text');
        if (txt && (txt.value === groupName || txt.defaultValue === groupName)) {
            row.remove();
        }
    });
}, 'Remove Group');
}

document.getElementById('add-group-btn').addEventListener('click', function() {
    showGroupNameModal(function(name) {
        if (!name || !name.trim()) return;
        name = name.trim();
    
    // Create group header row
    var header = document.createElement('div');
    header.className = 'group-header-row d-flex align-items-center gap-2 mt-3 mb-1 px-1';
    header.dataset.group = name;
    header.innerHTML = '<i class="fas fa-grip-vertical text-muted" style="font-size:.75rem;cursor:grab"></i>' +
        '<input type="text" class="group-label-text form-control form-control-sm fw-bold text-success border-0 border-bottom border-success ps-0"' +
        ' style="max-width:220px;font-size:.8rem;background:transparent" value="' + name.replace(/"/g,'&quot;') + '" placeholder="Group name..."' +
        ' onchange="renameGroup(this.dataset.orig||this.defaultValue,this.value);this.dataset.orig=this.value;">' +
        '<span class="text-muted" style="font-size:.7rem">section</span>' +
        '<button type="button" class="btn btn-link text-danger p-0 ms-auto" style="font-size:.75rem"' +
        ' onclick="removeGroup(this.closest(\'.group-header-row\').querySelector(\'.group-label-text\').value)">' +
        '<i class="fas fa-times"></i> remove group</button>';
    
    // Add a new ingredient row tagged with this group
    var container = document.getElementById('ingredients-container');
    container.appendChild(header);
    
    // Add blank ingredient row for this group
    document.getElementById('add-row-btn').click();
    // Tag the newly added row with this group
    setTimeout(function() {
        var rows = container.querySelectorAll('.ingredient-row');
        var lastRow = rows[rows.length - 1];
        if (lastRow) {
            var glInput = lastRow.querySelector('.group-label-input');
            if (!glInput) {
                glInput = document.createElement('input');
                glInput.type = 'hidden';
                glInput.name = 'ingredient_group_label[]';
                glInput.className = 'group-label-input';
                lastRow.appendChild(glInput);
            }
            glInput.value = name;
        }
    }, 50);
    }); // end modal callback
}); // end add-group-btn
</script>
{% endblock %}