<?php
require_once APPS_PATH . '/Recipes/components.php';

the_header(
    'Recipes',
    'Explore our delicious recipes and find your next favorite dish.',
    'recipes-page',
    [
        ['keywords', 'recipes, cooking, food, cuisine'],

    ]
);
?>
<div class="container">
    <div class="catalog">
        <div class="catalog-items">
            <?php
            foreach ($context['recipes'] as $recipe) {
                the_product_item($recipe);
            }
            ?>
        </div>
        <div class="filters-container">
            <div class="filters">
                <div class="filters-inner">
                    <form class="filters-form" method="get">
                        <div class="categories-filter">
                        <h3 class="filters__title">
                            Categories</h3>
                            <div class="filters__search">
                                <i class="fa-solid fa-magnifying-glass search-icon"></i>
                                <input type="text" class="search-input" placeholder="Search categories...">
                            </div>
                            <!-- All labels and ids are the same for template design purposes (all labels point to same checkbox) -->
                            <div class="filters-checkboxes">
                                <ul>
                                    <?php foreach ($context['categories'] as $cat): 
                                        $field_id = 'cat_' . $cat->get_id();

                                        $is_checked = false;
                                        $category = $_GET['category'] ?? null;
                                        if($category == $cat->get_id())
                                            $is_checked = true;
                                        ?>
                                    <li>
                                        <input id="<?= $field_id ?>" type="radio" name="category" value="<?= $cat->get_id() ?>" <?= $is_checked ? 'checked' : '' ?>>
                                        <label for="<?= $field_id ?>"><?= $cat->field_name ?></label>
                                    </li>
                                    <?php endforeach; ?>
                                </ul>
                            </div>
                        </div>
                        <div class="ingredients-filter">
                        <h3 class="filters__title">
                            Ingredients</h3>
                            <div class="filters__search">
                                <i class="fa-solid fa-magnifying-glass search-icon"></i>
                                <input type="text" class="search-input" placeholder="Search Ingredients...">
                            </div>
                            <div class="filters-checkboxes">
                                <ul>
                                    <?php foreach ($context['ingredients'] as $ing): 
                                        $field_id = 'ing_' . $ing->get_id();

                                        $is_checked = false;
                                        $ingredients = $_GET['ingredient'] ?? null;
                                        if($ingredients) {
                                            if (in_array($ing->get_id(), $ingredients))
                                                $is_checked = true;
                                        }
                                        ?>
                                    <li>
                                        <input id="<?= $field_id ?>" type="checkbox" name="ingredient[]" value="<?= $ing->get_id() ?>" <?= $is_checked ? 'checked' : '' ?>>
                                        <label for="<?= $field_id ?>"><?= $ing->field_name ?></label>
                                    </li>
                                    <?php endforeach; ?>                                    
                                </ul>
                            </div>
                        </div>
                        <button class="btn btn-primary hover-anim" type="submit">
                            Apply
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<?php the_footer(); ?>