%# /templates/shopping.html.ep

<% layout 'default'; %>
<% title 'Shopping List'; %>

% content_for 'head' => begin
    <link rel="stylesheet" href="/css/shopping.css">
    <script src="/js/shopping.js"></script>
% end

<div class="shopping-container">
    <div class="header-bar">
        <h1>🛒 <span>Shopping List</span></h1>
    </div>
    
    <!-- Add Item Form -->
    <div class="glass-panel add-item-panel">
        <form id="addShoppingForm" class="add-item-form">
            <input 
                type="text" 
                name="item_name" 
                class="game-input" 
                placeholder="Add item to shopping list..." 
                autocomplete="off"
                required
                maxlength="255"
            >
            <button type="submit" class="btn-blue-add">Add Item</button>
        </form>
    </div>

    <!-- Shopping List Items -->
    <div class="items-container">
        <% if (@$items) { %>
            <% my @unchecked = grep { !$_->{is_checked} } @$items; %>
            <% my @checked = grep { $_->{is_checked} } @$items; %>
            
            <% if (@unchecked) { %>
                <h3 class="section-title">To Buy</h3>
                <% for my $item (@unchecked) { %>
                    <div class="shopping-item" data-id="<%= $item->{id} %>">
                        <div class="item-content">
                            <button type="button" class="checkbox-btn" onclick="toggleItem(<%= $item->{id} %>)" title="Mark as bought">
                                <span class="checkmark"></span>
                            </button>
                            <div class="item-details">
                                <a href="https://www.google.com/search?q=<%= $item->{item_name} %>" target="_blank" class="item-link">
                                    <span class="item-name"><%= $item->{item_name} %></span>
                                </a>
                                <small class="item-meta">Added by <%= $item->{added_by} %></small>
                            </div>
                        </div>
                        <div class="action-buttons">
                            <button type="button" class="btn-icon-edit" onclick="editItem(<%= $item->{id} %>, `<%= $item->{item_name} %>`)" title="Edit">✎</button>
                            <button type="button" class="btn-icon-delete" onclick="openDeleteModal(<%= $item->{id} %>, `<%= $item->{item_name} %>`)" title="Delete">🗑️</button>
                        </div>
                    </div>
                <% } %>
            <% } %>
            
            <% if (@checked) { %>
                <div class="checked-section">
                    <div class="checked-header">
                        <h3 class="section-title">Checked Items</h3>
                        <button type="button" class="btn-clear-all" onclick="openClearAllModal()">
                            Clear All
                        </button>
                    </div>
                    <% for my $item (@checked) { %>
                        <div class="shopping-item checked" data-id="<%= $item->{id} %>">
                            <div class="item-content">
                                <button type="button" class="checkbox-btn checked" onclick="toggleItem(<%= $item->{id} %>)" title="Uncheck">
                                    <span class="checkmark">✓</span>
                                </button>
                                <div class="item-details">
                                    <span class="item-name"><%= $item->{item_name} %></span>
                                    <small class="item-meta">Added by <%= $item->{added_by} %></small>
                                </div>
                            </div>
                            <div class="action-buttons">
                                <button type="button" class="btn-icon-delete" onclick="openDeleteModal(<%= $item->{id} %>, `<%= $item->{item_name} %>`)" title="Delete">🗑️</button>
                            </div>
                        </div>
                    <% } %>
                </div>
            <% } %>
            
        <% } else { %>
            <div class="empty-state">
                <p>Your shopping list is empty!</p>
                <p class="empty-hint">Add your first item above to get started.</p>
            </div>
        <% } %>
    </div>
</div>

<!-- Edit Modal -->
<div id="editModal" class="modal-overlay" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Edit Item</h3>
            <span class="close-btn" onclick="closeEditModal()">&times;</span>
        </div>
        <div class="modal-body">
            <div class="modal-group">
                <label for="editName">Item Name</label>
                <input 
                    type="text" 
                    id="editName" 
                    name="item_name" 
                    class="game-input" 
                    required 
                    maxlength="255"
                    placeholder="e.g. Milk"
                >
                <input type="hidden" id="editId">
            </div>
        </div>
        <div class="modal-actions">
            <button type="button" onclick="submitEdit()" class="btn-primary btn-small">Save Changes</button>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div id="deleteModal" class="delete-modal-overlay" style="display: none;">
    <div class="delete-modal-content">
        <div class="delete-modal-header">
            <h3>Delete Item</h3>
            <span class="delete-modal-close" onclick="closeDeleteModal()">&times;</span>
        </div>
        <div class="delete-modal-body">
            <p>Are you sure you want to remove <strong id="deleteItemName"></strong> from the list?</p>
        </div>
        <div class="modal-actions">
            <button type="button" id="confirmDeleteBtn" class="btn-danger-confirm">Delete Item</button>
        </div>
    </div>
</div>

<!-- Clear All Modal -->
<div id="clearAllModal" class="delete-modal-overlay" style="display: none;">
    <div class="delete-modal-content">
        <div class="delete-modal-header">
            <h3>Clear Checked Items</h3>
            <span class="delete-modal-close" onclick="closeClearAllModal()">&times;</span>
        </div>
        <div class="delete-modal-body">
            <p>Are you sure you want to remove all checked items from the list?</p>
        </div>
        <div class="modal-actions">
            <form action="/shopping/clear" method="POST">
                <button type="submit" class="btn-danger-confirm">Clear All</button>
            </form>
        </div>
    </div>
</div>