<?php
the_header(
    'Submit a Recipe',
    'Share your culinary creations with the world! Fill out the form below to submit your recipe for review and publication.',
    'submit-recipe-body',
    [

        ['keywords', 'recipe, submit, share, cooking, culinary'],
    ]
);
?>

<div class="container">
    <div class="submit-recipe">
        <h1 class="title">Submit a Recipe</h1>
    </div>
    <form action="" class="single-submit-form" method="post" enctype="multipart/form-data">
        <label for="title-input">Title</label><span>*</span>
        <div class="input">
            <input type="text" id="title-input" name="title" placeholder="Enter the recipe title" required>
        </div>
        <label for="description-input">Description</label><span>*</span>
        <div class="input">
            <textarea id="description-input" name="description" placeholder="Describe your recipe in detail"
                required></textarea>
        </div>

        <label for="ingredients-input">Ingredients</label><span>*</span>
        <button type="button" id="add-ingredient-btn" class="btn btn-primary hover-anim add-ingredient-btn">Add new
            ingredient</button>
        <div id="overlay" class="hidden"></div>
        <div class="ing-modal hidden" id="ingredient-modal">
            <div id="new-ingredient">
                <label for="ing-name-input">Ingredient Name</label><span>*</span>
                <div class="input">
                    <input type="text" id="ing-name-input" name="title" placeholder="Enter the ingredient name"
                        required>
                </div>
                <label for="unit-input">Unit of measure</label><span>*</span>
                <div class="input">
                    <input type="text" id="ing-unit-input" name="title" placeholder="Enter the unit of measure"
                        required>
                </div>
                <button type="button" id="new-ingredient-submit" class="btn btn-primary hover-anim">Add new ingredient</button>
            </div>
        </div>

        <div class="input">
            select 2 goes here
        </div>

        <label for="image-input">Image</label><span>*</span>
        <div class="input-file">
            <input type="file" id="image-input" name="image" accept="image/*" required>
        </div>

        <label for="time-input">Estimated Time (minutes)</label><span>*</span>
        <div class="input">
            <input type="text" id="time-input" name="est-time" placeholder="Enter the recipe estimated time" required>
        </div>

        <label for="price-input">Estimated Price ($)</label><span>*</span>
        <div class="input">
            <input type="text" id="price-input" name="est-price" placeholder="Enter the recipe estimated price"
                required>
        </div>
        <label for="category-select">Category</label><span>*</span>
        <div class="input-select">

            <select id="category-select" name="category" required>
                <option value="">Select a category</option>
                <?php foreach ($context['category_options'] as $category): ?>
                    <option value="<?php echo $category[0]; ?>">
                        <?php echo $category[1]; ?>
                    </option>
                <?php endforeach; ?>

            </select>


        </div>
        <button type="submit" class="btn btn-primary hover-anim">Submit Recipe</button>

    </form>
</div>


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