<?php
require_once(INCLUDES_PATH . '/Const/recipes.php');
the_header(
    $context['recipe']->field_title,
    'This is a single recipe page where you can view the details of the recipe, including ingredients, instructions, and more.',
    'recipe',
    [

        ['keywords', 'terms, use, conditions']
    ]
);
?>

<div class="container">
    <div class="single-recipe">
        <div class="single-recipe-info">
            <div class="single-recipe-info__image">
                <img src="<?= $context['recipe']->get_image_url(); ?>"
                    alt="<?php echo $context['recipe']->field_title; ?>">
            </div>
            <div class="single-recipe-info__details">
                <div class="single-recipe-title">
                    <h1 class="title"><?php echo $context['recipe']->field_title; ?></h1>
                </div>
                <div class="single-recipe-data">
                    <div class="single-recipe-data__item">
                        <span class="data-name">Category: </span>
                        <span class="data"><?= $context['recipe']->category_name ?></span>
                    </div>
                    <div class="single-recipe-data__item">
                        <span class="data-name">Author: </span>
                        <span class="data"><?= $context['author']->field_username ?></span>
                    </div>
                    <div class="single-recipe-data__item">
                        <span class="data-name">Estimated Price: </span>
                        <span class="data"><?php echo $context['recipe']->get_price(); ?></span>
                    </div>
                    <div class="single-recipe-data__item">
                        <span class="data-name">Time To Make: </span>
                        <span class="data"><?php echo $context['recipe']->get_time(); ?></span>
                    </div>
                    <div class="single-recipe-data__item">
                        <span class="data-name">Ingredients: </span>
                        <span class="data"><?= join(", ", $context['ingredients']) ?></span>
                    </div>
                    <div class="single-recipe-data__item">
                        <span class="data-name">Date Created: </span>
                        <span class="data"><?php echo $context['recipe']->field_created_at; ?></span>
                    </div>
                </div>
                <div class="button-ctrl">
                    <select class="hidden" name="daily-meal-select" id="daily-meal-day">
                        <?php foreach (DAYS_OF_WEEK as $day): ?>
                            <option value="<?= $day ?>"><?= ucfirst($day) ?></option>
                        <?php endforeach; ?>
                        <option value="remove">Remove From List</option>
                    </select>
                    <div class="day-select-wrapper">
                        <div class="hover-anim">
                            <button type="button" href="#" id="day-select" class="btn btn-primary day-select">Add to
                                list</button>
                            <i class="fa-solid fa-list select-icon"></i>
                        </div>
                        <div id="custom-select-dropdown" class="custom-select-dropdown hidden">
                            <?php foreach (DAYS_OF_WEEK as $day): ?>
                                <div class="dropdown-item hover-anim" data-value="<?= $day?>">
                                    <?= ucfirst($day) ?>
                                </div>
                            <?php endforeach; ?>
                            <div class="dropdown-item hover-anim" data-value="remove">Remove From List</div>

                        </div>
                    </div>
                    <div class="small-btns">
                        <button class="btn btn-secondary btn-small hover-anim" title="Add To Favorites">
                            <i class="fa-regular fa-heart"></i>
                        </button>
                        <a class="btn btn-secondary btn-small hover-anim"
                            href="<?php the_permalink('recipes:export-pdf', [$context['recipe']->get_id()]); ?>"
                            target="_blank" title="Export As PDF">
                            <i class="fa-solid fa-download"></i>
                        </a>
                        <button class="btn btn-secondary btn-small hover-anim" id="qr-btn" title="Get QR Code">
                            <i class="fa-solid fa-qrcode"></i>
                        </button>
                    </div>
                    <div id="overlay" class="hidden"></div>
                    <div class="qr-popup hidden">
                        <div id="qrcode"></div>
                        <a id="downloadLink" class="btn btn-primary hover-anim" href="#" download="recipe-qr.png">
                            Download QR Code
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="single-recipe-content">
            <div class="single-instructions">
                <h2 class="title">Instructions</h2>

                <?= $context['recipe']->get_html_instruction(); ?>
            </div>
            <div class="single-ingredients">
                <h2 class="title">Ingredients</h2>
                <table class="ingredients-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Count</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                        foreach ($context['ingredients'] as $ing) {
                            ?>
                            <tr>
                                <td><?= $ing; ?></td>
                                <td><?= $ing->get_count(); ?></td>
                            </tr>
                        <?php } ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>




<?php the_footer(array(
    ASSETS_PATH . '/js/single.js',
)); ?>