{% extends "base.html" %}
{% block content %}
<div class="container py-4">

    {# ═══ HEADER ═══ #}
    <div class="d-flex justify-content-between align-items-start flex-wrap gap-2 mb-4">
        <div>
            <h1 class="fw-bold text-success mb-1"><i class="fas fa-box-open me-2"></i>My Pantry</h1>
            <p class="text-muted mb-0">Track what you have on hand.
                <span class="fw-semibold">{{ total_count }} item{{ 's' if total_count != 1 else '' }}</span>
            </p>
        </div>
        <div class="d-flex gap-2 flex-shrink-0">
            <a href="{{ url_for('recipes', pantry_mode='on') }}"
               class="btn btn-outline-success btn-sm d-none d-md-inline-flex align-items-center">
                <i class="fas fa-utensils me-1"></i>Find Recipes
            </a>
            <button class="btn btn-success shadow-sm" data-bs-toggle="modal" data-bs-target="#addModal">
                <i class="fas fa-plus me-1"></i>Add Item
            </button>
        </div>
    </div>

    {# ═══ EXPIRATION ALERTS ═══ #}
    {% if expired_items %}
    <div class="alert alert-danger border-0 shadow-sm mb-2 py-2" role="alert">
        <div class="d-flex align-items-center">
            <i class="fas fa-exclamation-circle fs-5 me-3 flex-shrink-0"></i>
            <div class="flex-grow-1">
                <strong>{{ expired_items|length }} expired item{{ 's' if expired_items|length != 1 else '' }}</strong> — consider removing or replacing
            </div>
            <button class="btn btn-sm btn-outline-danger border-0 flex-shrink-0" type="button"
                    data-bs-toggle="collapse" data-bs-target="#expiredList">
                <i class="fas fa-chevron-down me-1"></i>View
            </button>
        </div>
    </div>
    <div class="collapse mb-3" id="expiredList">
        <div class="card border-danger border-opacity-25 shadow-sm">
            <div class="list-group list-group-flush">
                {% for item in expired_items %}
                <div class="list-group-item d-flex justify-content-between align-items-center py-2">
                    <div>
                        <span class="fw-semibold text-danger">{{ item.ingredient.name }}</span>
                        {% if item.brand %}<span class="text-muted small ms-1">({{ item.brand }})</span>{% endif %}
                        <span class="badge bg-danger ms-2" style="font-size:.65rem">
                            Expired {{ item.expiration_date.strftime('%b %d') }}
                        </span>
                    </div>
                    <div class="d-flex gap-1">
                        <button class="btn btn-outline-primary btn-sm py-0 px-2" onclick="openEdit({{ item.id }})">Edit</button>
                        <form method="POST" action="{{ url_for('pantry_delete', item_id=item.id) }}" class="confirm-form"
                              data-confirm="Remove {{ item.ingredient.name }}?">
                            <button class="btn btn-outline-danger btn-sm py-0 px-2">Remove</button>
                        </form>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}

    {% if expiring_soon %}
    <div class="alert alert-warning border-0 shadow-sm mb-2 py-2" role="alert">
        <div class="d-flex align-items-center">
            <i class="fas fa-clock fs-5 me-3 flex-shrink-0 text-warning"></i>
            <div class="flex-grow-1">
                <strong>{{ expiring_soon|length }} item{{ 's' if expiring_soon|length != 1 else '' }}</strong> expiring within 7 days
            </div>
            <button class="btn btn-sm btn-outline-warning border-0 flex-shrink-0" type="button"
                    data-bs-toggle="collapse" data-bs-target="#expiringList">
                <i class="fas fa-chevron-down me-1"></i>View
            </button>
        </div>
    </div>
    <div class="collapse mb-3" id="expiringList">
        <div class="card border-warning border-opacity-25 shadow-sm">
            <div class="list-group list-group-flush">
                {% for item in expiring_soon %}
                {% set days_left = (item.expiration_date - today).days %}
                <div class="list-group-item d-flex justify-content-between align-items-center py-2">
                    <div>
                        <span class="fw-semibold">{{ item.ingredient.name }}</span>
                        {% if item.brand %}<span class="text-muted small ms-1">({{ item.brand }})</span>{% endif %}
                        <span class="badge {{ 'bg-danger' if days_left <= 1 else 'bg-warning text-dark' }} ms-2" style="font-size:.65rem">
                            {% if days_left == 0 %}Expires today{% elif days_left == 1 %}Tomorrow{% else %}{{ days_left }} days left{% endif %}
                        </span>
                    </div>
                    <button class="btn btn-outline-primary btn-sm py-0 px-2" onclick="openEdit({{ item.id }})">Edit</button>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}

    {# ═══ STATS ROW ═══ #}
    <div class="row g-2 mb-4">
        <div class="col-6 col-md-3">
            <div class="card border-0 shadow-sm text-center h-100">
                <div class="card-body py-2 px-1">
                    <div class="fs-4 fw-bold text-primary">{{ total_count }}</div>
                    <div class="text-muted" style="font-size:.7rem;text-transform:uppercase;letter-spacing:.3px">Total Items</div>
                </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-2 px-1">
                    <div class="fs-4 fw-bold text-success">{{ grouped_pantry|length }}</div>
                    <div class="text-muted" style="font-size:.7rem;text-transform:uppercase;letter-spacing:.3px">Categories</div>
                </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-2 px-1">
                    <div class="fs-4 fw-bold {{ 'text-warning' if expiring_soon else 'text-muted' }}">{{ expiring_soon|length }}</div>
                    <div class="text-muted" style="font-size:.7rem;text-transform:uppercase;letter-spacing:.3px">Expiring Soon</div>
                </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-2 px-1">
                    <div class="fs-4 fw-bold {{ 'text-danger' if expired_items else 'text-muted' }}">{{ expired_items|length }}</div>
                    <div class="text-muted" style="font-size:.7rem;text-transform:uppercase;letter-spacing:.3px">Expired</div>
                </div>
            </div>
        </div>
    </div>

    {# ═══ SEARCH & FILTER TOOLBAR ═══ #}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body py-2 px-3">
            <form method="GET" class="d-flex flex-wrap gap-2 align-items-center">
                <div class="position-relative" style="min-width:140px;flex:1 1 180px;max-width:300px">
                    <i class="fas fa-search position-absolute text-muted" style="left:10px;top:50%;transform:translateY(-50%);font-size:.8rem"></i>
                    <input name="q" class="form-control form-control-sm ps-4" placeholder="Search pantry…" value="{{ search }}">
                </div>
                <select name="category" class="form-select form-select-sm" style="width:auto;max-width:160px">
                    <option value="">All Categories</option>
                    {% for cat in categories %}
                    <option value="{{ cat }}" {{ 'selected' if category_filter==cat }}>{{ cat }}</option>
                    {% endfor %}
                </select>
                <select name="location" class="form-select form-select-sm" style="width:auto">
                    <option value="">All Locations</option>
                    {% for loc in ['Pantry','Refrigerator','Freezer','Counter','Spice Rack'] %}
                    <option value="{{ loc }}" {{ 'selected' if location_filter==loc }}>{{ loc }}</option>
                    {% endfor %}
                </select>
                <select name="status" class="form-select form-select-sm" style="width:auto">
                    <option value="">All Status</option>
                    <option value="good" {{ 'selected' if status_filter=='good' }}>✅ Fresh</option>
                    <option value="expiring" {{ 'selected' if status_filter=='expiring' }}>⚠️ Expiring</option>
                    <option value="expired" {{ 'selected' if status_filter=='expired' }}>🔴 Expired</option>
                </select>
                <button class="btn btn-sm btn-outline-success"><i class="fas fa-filter me-1"></i>Filter</button>
                {% if search or category_filter or location_filter or status_filter %}
                <a href="{{ url_for('pantry_master') }}" class="btn btn-sm btn-outline-secondary">
                    <i class="fas fa-times me-1"></i>Clear
                </a>
                {% endif %}
            </form>
        </div>
    </div>

    {# ═══ PANTRY ITEMS — grouped by category ═══ #}
    {% if grouped_pantry %}
        {% for category, items in grouped_pantry.items() %}
        <div class="card border-0 shadow-sm mb-3 pantry-group">
            <div class="card-header bg-white py-2 d-flex justify-content-between align-items-center"
                 role="button" data-bs-toggle="collapse" data-bs-target="#grp{{ loop.index }}" aria-expanded="true">
                <h6 class="fw-bold text-uppercase text-muted mb-0" style="font-size:.78rem;letter-spacing:.4px">
                    <i class="fas fa-layer-group me-2 text-success"></i>{{ category }}
                    <span class="badge bg-secondary bg-opacity-10 text-secondary ms-1 px-2" style="font-size:.65rem;border-radius:4px">{{ items|length }} item{{ 's' if items|length != 1 }}</span>
                </h6>
                <i class="fas fa-chevron-down text-muted grp-chevron" style="font-size:.65rem;transition:transform .2s"></i>
            </div>
            <div class="collapse show" id="grp{{ loop.index }}">
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0 align-middle pantry-tbl">
                            <thead class="table-light">
                                <tr>
                                    <th class="ps-3" style="min-width:150px">Ingredient</th>
                                    <th class="d-none d-md-table-cell" style="min-width:90px">Brand</th>
                                    <th style="width:65px">Qty</th>
                                    <th style="width:65px">Unit</th>
                                    <th class="d-none d-sm-table-cell" style="width:100px">Location</th>
                                    <th class="d-none d-md-table-cell" style="width:80px">Opened</th>
                                    <th class="d-none d-sm-table-cell" style="width:100px">Location</th>
                                    <th style="width:115px">Expires</th>
                                    <th class="text-end pe-3" style="width:80px">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in items %}
                                {% set exp_days = (item.expiration_date - today).days if item.expiration_date else None %}
                                <tr class="{% if item.quantity is not none and item.quantity <= 0 %}row-depleted{% elif exp_days is not none and exp_days < 0 %}row-expired{% elif exp_days is not none and exp_days <= 3 %}row-expiring-soon{% elif exp_days is not none and exp_days <= 7 %}row-expiring{% endif %}">
                                    <td class="ps-3">
                                        <div class="fw-semibold text-dark" style="font-size:.88rem">{{ item.ingredient.name }}</div>
                                        {% if item.notes %}
                                        <div class="text-muted text-truncate" style="max-width:200px;font-size:.68rem" title="{{ item.notes }}">
                                            <i class="fas fa-sticky-note me-1"></i>{{ item.notes }}
                                        </div>
                                        {% endif %}
                                    </td>
                                    <td class="d-none d-md-table-cell">
                                        {% if item.brand %}
                                        <span class="text-muted" style="font-size:.82rem">{{ item.brand }}</span>
                                        {% else %}
                                        <span class="text-muted opacity-50" style="font-size:.75rem">—</span>
                                        {% endif %}
                                    </td>
                                    <td class="fw-medium" style="font-size:.88rem">
                                        {% if item.quantity is not none and item.quantity <= 0 %}
                                        <span class="badge bg-danger" style="font-size:.68rem" title="Out of stock">Empty</span>
                                        {% else %}
                                        {{ item.quantity if item.quantity else '' }}
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if item.unit %}
                                        <span class="badge bg-light text-dark border" style="font-size:.72rem">{{ item.unit }}</span>
                                        {% else %}
                                        <span class="text-muted opacity-50" style="font-size:.72rem">—</span>
                                        {% endif %}
                                    </td>
                                    <td class="d-none d-md-table-cell">
                                        {% if item.opened %}
                                        <span class="badge" style="background:#0891b2;color:#fff;font-size:.65rem"><i class="fas fa-box-open me-1"></i>Opened</span>
                                        {% else %}
                                        <span class="text-muted" style="font-size:.7rem">Sealed</span>
                                        {% endif %}
                                    </td>
                                    <td class="d-none d-sm-table-cell">
                                        {% if item.storage_location %}
                                        <span class="badge bg-light text-dark border" style="font-size:.7rem">
                                            {% if item.storage_location == 'Refrigerator' %}<i class="fas fa-snowflake text-info me-1"></i>
                                            {% elif item.storage_location == 'Freezer' %}<i class="fas fa-temperature-low text-primary me-1"></i>
                                            {% elif item.storage_location == 'Pantry' %}<i class="fas fa-door-closed text-secondary me-1"></i>
                                            {% elif item.storage_location == 'Counter' %}<i class="fas fa-house text-muted me-1"></i>
                                            {% elif item.storage_location == 'Spice Rack' %}<i class="fas fa-pepper-hot text-danger me-1"></i>
                                            {% else %}<i class="fas fa-location-dot text-muted me-1"></i>{% endif %}
                                            {{ item.storage_location }}
                                        </span>
                                        {% else %}
                                        <span class="text-muted opacity-50" style="font-size:.72rem">—</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if item.expiration_date %}
                                            {% if exp_days < 0 %}
                                                <span class="badge bg-danger" style="font-size:.68rem">Expired</span>
                                                <div class="text-muted" style="font-size:.6rem">{{ item.expiration_date.strftime('%b %d, %Y') }}</div>
                                            {% elif exp_days == 0 %}
                                                <span class="badge bg-danger" style="font-size:.68rem"><i class="fas fa-exclamation me-1"></i>Today!</span>
                                            {% elif exp_days <= 3 %}
                                                <span class="badge bg-warning text-dark" style="font-size:.68rem">{{ exp_days }}d left</span>
                                                <div class="text-muted" style="font-size:.6rem">{{ item.expiration_date.strftime('%b %d') }}</div>
                                            {% elif exp_days <= 7 %}
                                                <span class="badge bg-warning text-dark bg-opacity-75" style="font-size:.68rem">{{ exp_days }}d</span>
                                                <div class="text-muted" style="font-size:.6rem">{{ item.expiration_date.strftime('%b %d') }}</div>
                                            {% else %}
                                                <span class="text-muted" style="font-size:.78rem">{{ item.expiration_date.strftime('%b %d, %Y') }}</span>
                                            {% endif %}
                                        {% else %}
                                            <span class="text-muted opacity-50" style="font-size:.72rem">—</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-end pe-3 text-nowrap">
                                        <button class="btn btn-link btn-sm p-0 me-2 text-primary" onclick="openEdit({{ item.id }})" title="Edit">
                                            <i class="fas fa-pen-to-square"></i>
                                        </button>
                                        <form method="POST" action="{{ url_for('pantry_delete', item_id=item.id) }}"
                                              class="d-inline confirm-form" data-confirm="Remove {{ item.ingredient.name }}?">
                                            <button class="btn btn-link btn-sm p-0 text-danger" title="Remove">
                                                <i class="fas fa-trash-can"></i>
                                            </button>
                                        </form>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}

    {% else %}
        {# ═══ EMPTY STATE ═══ #}
        <div class="text-center py-5">
            <div class="mb-3">
                <i class="fas fa-box-open fa-3x text-muted opacity-25"></i>
            </div>
            {% if search or category_filter or location_filter or status_filter %}
                <h4 class="text-muted mb-2">No items match your filters</h4>
                <p class="text-muted small mb-3">Try adjusting or clearing your search criteria.</p>
                <a href="{{ url_for('pantry_master') }}" class="btn btn-outline-success">
                    <i class="fas fa-times me-1"></i>Clear Filters
                </a>
            {% else %}
                <h4 class="text-muted mb-2">Your pantry is empty</h4>
                <p class="text-muted small mb-3">Start tracking what you have on hand to find matching recipes and build smarter shopping lists.</p>
                <div class="d-flex gap-2 justify-content-center flex-wrap">
                    <button class="btn btn-success shadow-sm" data-bs-toggle="modal" data-bs-target="#addModal">
                        <i class="fas fa-plus me-1"></i>Add Your First Item
                    </button>
                    <a href="{{ url_for('recipes', pantry_mode='on') }}" class="btn btn-outline-success">
                        <i class="fas fa-utensils me-1"></i>Browse Recipes
                    </a>
                </div>
            {% endif %}
        </div>
    {% endif %}
</div>


{# ═══════════════════════════════════════════════════════════ #}
{# ═══ ADD ITEM MODAL                                     ═══ #}
{# ═══════════════════════════════════════════════════════════ #}
<div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background:linear-gradient(135deg,#198754 0%,#157347 100%)">
                <h5 class="modal-title text-white" id="addModalLabel">
                    <i class="fas fa-plus-circle me-2"></i>Add to Pantry
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            {# novalidate prevents native HTML5 validation — we do it ourselves in JS #}
            <form method="POST" action="{{ url_for('pantry_add') }}" id="addForm" novalidate>
                <div class="modal-body">
                    {# Ingredient search #}
                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            Ingredient <span class="text-danger">*</span>
                        </label>
                        <div class="position-relative">
                            {# NO required — JS validates the hidden field instead #}
                            <input type="text" id="addIngSearch" class="form-control"
                                   placeholder="Start typing to search ingredients…" autocomplete="off">
                            <input type="hidden" name="ingredient_id" id="addIngId">
                            <div id="addIngResults" class="ing-results"></div>
                        </div>
                        <div id="addIngSelected" class="mt-1" style="display:none">
                            <span class="badge bg-success bg-opacity-10 text-success border border-success border-opacity-25 px-2 py-1">
                                <i class="fas fa-check-circle me-1"></i>
                                <span id="addIngSelectedName"></span>
                                <button type="button" class="btn-close ms-2" style="font-size:.5rem" onclick="clearIngSelection()"></button>
                            </span>
                        </div>
                        {# Inline validation message #}
                        <div id="addIngError" class="text-danger small mt-1" style="display:none">
                            <i class="fas fa-exclamation-circle me-1"></i>Please select an ingredient.
                        </div>
                    </div>

                    <div class="row g-3">
                        {# Brand #}
                        <div class="col-12">
                            <label class="form-label fw-semibold">
                                Brand <span class="text-muted fw-normal" style="font-size:.78rem">(optional)</span>
                            </label>
                            <input type="text" name="brand" class="form-control" placeholder="e.g., Organic Valley, Great Value…">
                        </div>
                        {# Qty + Unit #}
                        <div class="col-5">
                            <label class="form-label fw-semibold">Quantity</label>
                            <input type="text" name="quantity" class="form-control" id="addQtyInput" value="" placeholder="e.g. 2, 1/2, 1 1/4" pattern="[0-9/ .]+" required>
                        </div>
                        <div class="col-7">
                            <label class="form-label fw-semibold">Unit</label>
                            <select name="unit" class="form-select" required>
                                <option value="" disabled selected>Select unit…</option>
                                {% for u in units %}
                                <option value="{{ u.abbreviation }}">{{ u.name }} ({{ u.abbreviation }})</option>
                                {% endfor %}
                                <option value="whole">whole</option>
                                <option value="pinch">pinch</option>
                                <option value="clove">clove</option>
                            </select>
                        </div>
                        {# Location + Expiration #}
                        <div class="col-6">
                            <label class="form-label fw-semibold">Stored In</label>
                            <select name="storage_location" class="form-select">
                                <option value="">Not specified</option>
                                <option value="Pantry">🚪 Pantry / Shelf</option>
                                <option value="Refrigerator">❄️ Refrigerator</option>
                                <option value="Freezer">🧊 Freezer</option>
                                <option value="Counter">🏠 Counter</option>
                                <option value="Spice Rack">🌶️ Spice Rack</option>
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold">Expiration Date</label>
                            <input type="date" name="expiration_date" class="form-control">
                        </div>
                        {# Notes #}
                        <div class="col-12">
                            <label class="form-label fw-semibold">
                                Notes <span class="text-muted fw-normal" style="font-size:.78rem">(optional)</span>
                            </label>
                            <input type="text" name="notes" class="form-control" placeholder="e.g. buy again soon, low stock…">
                        </div>
                        <div class="col-12">
                            <div class="form-check form-switch mt-1">
                                <input class="form-check-input" type="checkbox" name="opened" id="addOpened" value="on">
                                <label class="form-check-label fw-semibold" for="addOpened">
                                    Opened / Partially used
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success"><i class="fas fa-plus me-1"></i>Add to Pantry</button>
                </div>
            </form>
        </div>
    </div>
</div>


{# ═══════════════════════════════════════════════════════════ #}
{# ═══ EDIT ITEM MODAL                                    ═══ #}
{# ═══════════════════════════════════════════════════════════ #}
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-primary bg-opacity-10">
                <h5 class="modal-title text-primary" id="editModalLabel">
                    <i class="fas fa-pen-to-square me-2"></i>Edit Pantry Item
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" id="editForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Ingredient</label>
                        <input type="text" id="editIngName" class="form-control bg-light" readonly>
                    </div>
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label fw-semibold">Brand</label>
                            <input type="text" name="brand" id="editBrand" class="form-control" placeholder="Optional brand name">
                        </div>
                        <div class="col-5">
                            <label class="form-label fw-semibold">Quantity</label>
                            <input type="text" name="quantity" id="editQty" class="form-control" placeholder="e.g. 2, 1/2, 1 1/4">
                        </div>
                        <div class="col-7">
                            <label class="form-label fw-semibold">Unit</label>
                            <select name="unit" id="editUnit" class="form-select">
                                <option value="">Select unit…</option>
                                {% for u in units %}
                                <option value="{{ u.abbreviation }}">{{ u.name }} ({{ u.abbreviation }})</option>
                                {% endfor %}
                                <option value="whole">whole</option>
                                <option value="pinch">pinch</option>
                                <option value="clove">clove</option>
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold">Stored In</label>
                            <select name="storage_location" id="editLocation" class="form-select">
                                <option value="">Not specified</option>
                                <option value="Pantry">🚪 Pantry / Shelf</option>
                                <option value="Refrigerator">❄️ Refrigerator</option>
                                <option value="Freezer">🧊 Freezer</option>
                                <option value="Counter">🏠 Counter</option>
                                <option value="Spice Rack">🌶️ Spice Rack</option>
                            </select>
                        </div>
                        <div class="col-6">
                            <label class="form-label fw-semibold">Expiration Date</label>
                            <input type="date" name="expiration_date" id="editExpiration" class="form-control">
                            <div class="form-text" style="font-size:.65rem">Leave blank to clear</div>
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-semibold">Notes</label>
                            <input type="text" name="notes" id="editNotes" class="form-control" placeholder="Optional notes">
                        </div>
                        <div class="col-12">
                            <div class="form-check form-switch mt-1">
                                <input class="form-check-input" type="checkbox" name="opened" id="editOpened" value="on">
                                <label class="form-check-label fw-semibold" for="editOpened">
                                    Opened / Partially used
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-save me-1"></i>Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>


{# ═══════════════════════════════════════════════════════════ #}
{# ═══ CONFIRM MODAL (delete)                             ═══ #}
{# ═══════════════════════════════════════════════════════════ #}
<div class="modal fade" id="confirmModal" tabindex="-1">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header py-2">
                <h6 class="modal-title mb-0">
                    <i class="fas fa-exclamation-triangle text-warning me-2"></i>Confirm
                </h6>
                <button type="button" class="btn-close" style="font-size:.7rem" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body py-3" id="confirmMsg">Are you sure?</div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger btn-sm" id="confirmYes">Remove</button>
            </div>
        </div>
    </div>
</div>


{# ═══ MOBILE FAB ═══ #}
<button class="btn btn-success rounded-circle shadow-lg d-flex d-md-none align-items-center justify-content-center position-fixed"
        style="bottom:24px;right:24px;width:56px;height:56px;z-index:1050;border:none"
        data-bs-toggle="modal" data-bs-target="#addModal" title="Add Item">
    <i class="fas fa-plus fa-lg text-white"></i>
</button>


{# ═══════════════════════════════════════════════════════════ #}
{# ═══ JAVASCRIPT                                         ═══ #}
{# ═══════════════════════════════════════════════════════════ #}
<script>
(function(){
    /* ── Ingredient data from taxonomy (for Add modal search) ── */
    var ingData = {{ ingredient_json|tojson }};

    /* ── Item data for Edit modal ── */
    var itemData = {{ item_json|tojson }};

    /* ──────────────────────────────────────────── */
    /*  ADD MODAL — ingredient search / typeahead   */
    /* ──────────────────────────────────────────── */
    var si       = document.getElementById('addIngSearch');
    var hi       = document.getElementById('addIngId');
    var rd       = document.getElementById('addIngResults');
    var selBox   = document.getElementById('addIngSelected');
    var selName  = document.getElementById('addIngSelectedName');
    var ingError = document.getElementById('addIngError');

    function escHtml(s) {
        var d = document.createElement('div');
        d.textContent = s;
        return d.innerHTML;
    }

    si.addEventListener('input', function(){
        /* Clear any previous validation error while user types */
        ingError.style.display = 'none';
        si.classList.remove('is-invalid');

        var q = this.value.toLowerCase().trim();
        if (q.length < 1) { rd.style.display = 'none'; return; }
        var matches = ingData.filter(function(i){
            return i.name.toLowerCase().indexOf(q) !== -1 || i.cat.toLowerCase().indexOf(q) !== -1;
        }).slice(0, 25);
        if (!matches.length) {
            rd.innerHTML = '<div class="px-3 py-2 text-muted small">No matching ingredients found</div>';
        } else {
            rd.innerHTML = matches.map(function(m){
                return '<div class="ing-result-item" data-id="' + m.id + '" data-name="' + escHtml(m.name) + '">'
                     + '<span class="fw-medium">' + escHtml(m.name) + '</span>'
                     + (m.cat ? '<span class="text-muted small ms-2">' + escHtml(m.cat) + '</span>' : '')
                     + '</div>';
            }).join('');
        }
        rd.style.display = 'block';
    });

    rd.addEventListener('click', function(e){
        var item = e.target.closest('.ing-result-item');
        if (!item) return;
        var id   = item.getAttribute('data-id');
        var name = item.getAttribute('data-name');
        hi.value = id;
        si.value = '';
        si.style.display = 'none';
        si.classList.remove('is-invalid');
        ingError.style.display = 'none';
        selName.textContent = name;
        selBox.style.display = 'block';
        rd.style.display = 'none';
    });

    si.addEventListener('blur', function(){ setTimeout(function(){ rd.style.display = 'none'; }, 200); });
    si.addEventListener('focus', function(){ if (this.value.length >= 1) this.dispatchEvent(new Event('input')); });

    window.clearIngSelection = function(){
        hi.value = '';
        si.value = '';
        si.style.display = 'block';
        selBox.style.display = 'none';
        si.focus();
    };

    /* ──────────────────────────────────────────── */
    /*  ADD FORM — JS validation before submit      */
    /* ──────────────────────────────────────────── */
    document.getElementById('addForm').addEventListener('submit', function(e){
        if (!hi.value) {
            e.preventDefault();
            /* Show the search field if it was hidden, highlight it */
            si.style.display = 'block';
            si.classList.add('is-invalid');
            ingError.style.display = 'block';
            si.focus();
            return false;
        }
        /* Ingredient selected — allow normal form POST */
    });

    /* Reset add modal on open */
    var addModalEl = document.getElementById('addModal');
    if (addModalEl) {
        addModalEl.addEventListener('show.bs.modal', function(){
            document.getElementById('addForm').reset();
            hi.value = '';
            si.value = '';
            si.style.display = 'block';
            si.classList.remove('is-invalid');
            ingError.style.display = 'none';
            selBox.style.display = 'none';
            rd.style.display = 'none';
        });
    }

    /* ──────────────────────────────────────────── */
    /*  EDIT MODAL — pre-fill from itemData         */
    /* ──────────────────────────────────────────── */
    window.openEdit = function(id) {
        var d = itemData[String(id)];
        if (!d) return;
        document.getElementById('editForm').action = '/pantry/' + id + '/update';
        document.getElementById('editIngName').value   = d.name;
        document.getElementById('editBrand').value      = d.brand;
        document.getElementById('editQty').value        = d.qty || '';
        document.getElementById('editUnit').value       = d.unit;
        document.getElementById('editLocation').value   = d.loc;
        document.getElementById('editExpiration').value  = d.exp;
        document.getElementById('editNotes').value      = d.notes;
        document.getElementById('editOpened').checked    = d.opened || false;
        new bootstrap.Modal(document.getElementById('editModal')).show();
    };

    /* ──────────────────────────────────────────── */
    /*  CONFIRM DELETE                              */
    /* ──────────────────────────────────────────── */
    var _cM;
    function getCM() {
        if (!_cM) _cM = new bootstrap.Modal(document.getElementById('confirmModal'));
        return _cM;
    }
    function freshBtn(cb) {
        var o = document.getElementById('confirmYes');
        var n = o.cloneNode(true);
        n.id = 'confirmYes';
        o.parentNode.replaceChild(n, o);
        n.addEventListener('click', cb);
    }
    document.addEventListener('submit', function(e){
        var f = e.target.closest('.confirm-form');
        if (!f) return;
        e.preventDefault();
        document.getElementById('confirmMsg').textContent = f.dataset.confirm || 'Are you sure?';
        freshBtn(function(){
            getCM().hide();
            f.classList.remove('confirm-form');
            f.submit();
            f.classList.add('confirm-form');
        });
        getCM().show();
    });

    /* ── Chevron rotation for collapsible groups ── */
    document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(function(btn){
        var target = document.querySelector(btn.getAttribute('data-bs-target'));
        if (!target) return;
        var chevron = btn.querySelector('.grp-chevron');
        if (!chevron) return;
        target.addEventListener('hide.bs.collapse', function(){ chevron.style.transform = 'rotate(-90deg)'; });
        target.addEventListener('show.bs.collapse', function(){ chevron.style.transform = 'rotate(0deg)'; });
    });
})();
</script>


{# ═══════════════════════════════════════════════════════════ #}
{# ═══ STYLES                                             ═══ #}
{# ═══════════════════════════════════════════════════════════ #}

{% endblock %}