<?= $this->extend("layouts/print") ?>

<?= $this->section("title") ?>Bill of Materials<?= $this->endSection() ?>

<?= $this->section("header") ?>
<link rel="stylesheet" href="<?= base_url('/js/jquery-ui-1.14.1/jquery-ui.min.css') ?>" />
<script type='text/javascript' src="<?= base_url('/js/jquery/jquery-3.7.1.min.js') ?>"></script>
<script type='text/javascript' src="<?= base_url('/js/jquery-ui-1.14.1/jquery-ui.min.js') ?>"></script>
<link rel="stylesheet" href="<?= base_url('/js/select2/dist/css/select2.min.css') ?>" />
<script type='text/javascript' src="<?= base_url('/js/select2/dist/js/select2.min.js') ?>"></script>
<link rel="stylesheet" href="<?= base_url('/css/recipes.css') . '?' . rand() ?>" />
<script type='text/javascript'>
    $(document).ready(function() {
        $('.select2').select2();
    });
    $(function() {
        var focusedElement;
        $(document).on('focus', 'input', function() {
            if (focusedElement == this) return; //already focused, return so user can now place cursor at specific point in input.
            focusedElement = this;
            setTimeout(function() {
                focusedElement.select();
            }, 100); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting.
        });
    });
</script>

<?= $this->endSection() ?>

<?= $this->section("content") ?>

<div id="recipes-outer" style="display: grid; gap:1rem; grid-template-columns:1fr;">

    <div style="display: grid; row-gap: 1rem; grid-template-columns:1fr 1fr">
        <div id="recipes-heading" style="background-color: <?= $recipe->HeaderColour ?>;"><?= $recipe->RecipeName ?></div>
        <div id="recipes-heading" style="background-color: <?= $recipe->HeaderColour ?>;"><?= $recipe->RecipeCode ?></div>
    </div>
    <div id="recipes-main">
        <?= $this->include("Recipes/bomheader") ?>
    </div>

    <div id="recipes-inputs">
        <?php $recipe->showRemove = false; ?>
        <?= $this->include("Recipes/bominputs") ?>

        <div>
        </div>
    </div>
    <?= $this->endSection() ?>