soil-report-ai/dashboard/crop-analysis/animal-dietary-balance/index.php

<?php
require_once __DIR__ . '/../../../config/database.php';
require_once __DIR__ . '/../../../lib/auth.php';
require_once __DIR__ . '/../../../lib/csrf.php';

if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

requireLogin();

$pageTitle = 'Animal Dietary Balance';
$siteName  = 'Crop Monitor';

include __DIR__ . '/../../../layouts/header.php';
include __DIR__ . '/../../../layouts/navbar.php';
?>

<style>
    .btn-append {
        color: #495057;
        background-color: #e9ecef;
        border: 1px solid #ced4da;
    }
</style>

<div id="layoutSidenav">
    <div id="layoutSidenav_nav">
        <?php include __DIR__ . '/../../../layouts/sidebar.php'; ?>
    </div>
    <div id="layoutSidenav_content">
        <main>
            <div class="container-fluid px-4">
                <h1 class="mt-4"><?= htmlspecialchars($pageTitle, ENT_QUOTES, 'UTF-8') ?></h1>
                <ol class="breadcrumb mb-4">
                    <li class="breadcrumb-item"><a href="/dashboard/dashboard.php">Dashboard</a></li>
                    <li class="breadcrumb-item active">Animal Dietary Balance</li>
                </ol>

                <div class="row">
                    <div class="container">
                        <h3>Animal Dietary Balance Entry</h3>
                        <span class="text-danger small">* required fields.</span>

                        <?php include __DIR__ . '/../../../components/clientDetailsForm.php'; ?>

                        <form method="post" action="/controllers/animalTestSubmit.php" id="csvForm">
                            <input type="hidden" name="csrf_token" value="<?= htmlspecialchars(generateCsrfToken(), ENT_QUOTES, 'UTF-8') ?>">

                            <hr>
                            <label class="col"><b>Animal Detail</b></label>

                            <div class="row">
                                <div class="col-md-3">
                                    <small class="form-text text-muted">Dry Matter Intake Per Day</small>
                                    <div class="input-group input-group-sm mb-3">
                                        <input type="text" class="form-control" name="dry_matter_kg" id="dry_matter_kg" placeholder="Dry Matter">
                                        <span class="input-group-text">kg</span>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <small class="form-text text-muted">Animal Weight</small>
                                    <div class="input-group input-group-sm mb-3">
                                        <input type="text" class="form-control" name="animal_weight_kg" id="animal_weight_kg" placeholder="Animal Weight">
                                        <span class="input-group-text">kg</span>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <small class="form-text text-muted">Calving Month</small>
                                    <input class="form-control form-control-sm" name="calving_month" id="calving_month" placeholder="mm/yyyy" type="month">
                                </div>

                                <div class="col-md-3">
                                    <small class="form-text text-muted">Lactation Period <span class="text-danger">*</span></small>
                                    <select name="lactation_period" id="lactation_period" class="form-control form-control-sm" required>
                                        <option value="">Select the Lactation Period...</option>
                                        <option value="peak">Peak Lactation</option>
                                        <option value="mid">Mid Lactation</option>
                                        <option value="late">Late Lactation</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-3">
                                    <small class="form-text text-muted">Analysis Type <span class="text-danger">*</span></small>
                                    <select name="analysis_type" id="analysis_type" class="form-control form-control-sm" required>
                                        <option value="">Select the type of Analysis...</option>
                                        <option value="ash">Dry Ash Test</option>
                                        <option value="sap">Sap Analysis</option>
                                        <option value="field">Field Test</option>
                                    </select>
                                </div>

                                <div class="col-md-3">
                                    <small class="form-text text-muted">Lab No</small>
                                    <input type="text" class="form-control form-control-sm" name="lab_no" id="lab_no" placeholder="Lab No">
                                </div>

                                <div class="col-md-3">
                                    <small class="form-text text-muted">Batch No</small>
                                    <input type="text" class="form-control form-control-sm" name="batch_no" id="batch_no" placeholder="Batch No">
                                </div>

                                <div class="col-md-3">
                                    <small class="form-text text-muted">Date Sampled</small>
                                    <input type="date" class="form-control form-control-sm" name="date_sampled" id="date_sampled" placeholder="Date Sampled">
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4">
                                    <small class="form-text text-muted">Sample ID <span class="text-danger">*</span></small>
                                    <input type="text" class="form-control form-control-sm" name="sample_id" id="sample_id" placeholder="Sample Id" required>
                                </div>

                                <div class="col-md-4">
                                    <small class="form-text text-muted">Site ID</small>
                                    <input type="text" class="form-control form-control-sm" name="site_id" id="site_id" placeholder="Paddock Id">
                                </div>

                                <div class="col-md-4">
                                    <small class="form-text text-muted">Crop Type</small>
                                    <input type="text" class="form-control form-control-sm" name="crop_type" id="crop_type" placeholder="Crop / Pasture Type">
                                </div>
                            </div>

                            <hr class="my-2">
                            <label class="col mb-0"><b>Analysis Inputs</b></label>

                            <div class="row mt-2">
                                <?php
                                $elements = [
                                    ['ca',  'Calcium',    10000],
                                    ['p',   'Phosphorus', 10000],
                                    ['mg',  'Magnesium',  10000],
                                    ['k',   'Potassium',  10000],
                                    ['n',   'Nitrogen',   10000],
                                    ['s',   'Sulphur',    10000],
                                ];
                                foreach ($elements as [$id, $label, $factor]): ?>
                                <div class="col-md-2">
                                    <small class="form-text text-muted"><?= htmlspecialchars($label, ENT_QUOTES, 'UTF-8') ?></small>
                                    <div class="input-group input-group-sm mb-0">
                                        <input type="text" class="form-control form-control-sm"
                                               name="<?= $id ?>" id="<?= $id ?>"
                                               placeholder="<?= htmlspecialchars($id . ' - ' . $label, ENT_QUOTES, 'UTF-8') ?>">
                                        <input class="btn btn-append" type="button"
                                               id="btn_<?= $id ?>" value="ppm"
                                               onclick="conversion(this, document.getElementById('btn_<?= $id ?>'), document.getElementById('<?= $id ?>'), <?= $factor ?>)">
                                    </div>
                                </div>
                                <?php endforeach; ?>
                            </div>

                            <div class="row mt-2">
                                <?php
                                $elements2 = [
                                    ['na', 'Sodium',      10000],
                                    ['b',  'Boron',       10000],
                                    ['zn', 'Zinc',        10000],
                                    ['cu', 'Copper',      10000],
                                    ['mn', 'Manganese',   10000],
                                    ['fe', 'Iron',        10000],
                                ];
                                foreach ($elements2 as [$id, $label, $factor]): ?>
                                <div class="col-md-2">
                                    <small class="form-text text-muted"><?= htmlspecialchars($label, ENT_QUOTES, 'UTF-8') ?></small>
                                    <div class="input-group input-group-sm mb-0">
                                        <input type="text" class="form-control form-control-sm"
                                               name="<?= $id ?>" id="<?= $id ?>"
                                               placeholder="<?= htmlspecialchars($id . ' - ' . $label, ENT_QUOTES, 'UTF-8') ?>">
                                        <input class="btn btn-append" type="button"
                                               id="btn_<?= $id ?>" value="ppm"
                                               onclick="conversion(this, document.getElementById('btn_<?= $id ?>'), document.getElementById('<?= $id ?>'), <?= $factor ?>)">
                                    </div>
                                </div>
                                <?php endforeach; ?>
                            </div>

                            <div class="row mt-2">
                                <?php
                                $elements3 = [
                                    ['m',  'Molybdenum', 10000],
                                    ['co', 'Cobalt',     10000],
                                    ['se', 'Selenium',   10000],
                                    ['ch', 'Chloride',   10000],
                                ];
                                foreach ($elements3 as [$id, $label, $factor]): ?>
                                <div class="col-md-2">
                                    <small class="form-text text-muted"><?= htmlspecialchars($label, ENT_QUOTES, 'UTF-8') ?></small>
                                    <div class="input-group input-group-sm mb-0">
                                        <input type="text" class="form-control form-control-sm"
                                               name="<?= $id ?>" id="<?= $id ?>"
                                               placeholder="<?= htmlspecialchars($id . ' - ' . $label, ENT_QUOTES, 'UTF-8') ?>">
                                        <input class="btn btn-append" type="button"
                                               id="btn_<?= $id ?>" value="ppm"
                                               onclick="conversion(this, document.getElementById('btn_<?= $id ?>'), document.getElementById('<?= $id ?>'), <?= $factor ?>)">
                                    </div>
                                </div>
                                <?php endforeach; ?>
                            </div>

                            <div class="mt-3">
                                <button type="submit" class="btn btn-success">Submit</button>
                            </div>
                        </form>

                        <?php include __DIR__ . '/../../../components/newClientModal.php'; ?>

                        <hr>

                        <div class="card mt-3">
                            <div class="card-body">
                                <h5 class="card-title">Excel/CSV Upload</h5>
                                <p class="card-text">Download a CSV of this form for easy filling or upload a filled form to pre-populate.</p>
                                <div class="input-group mt-3">
                                    <input type="file" class="form-control" id="CM-upload">
                                    <button class="btn btn-outline-secondary" type="button" id="CM-download">Download</button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </main>

        <?php include __DIR__ . '/../../../layouts/footer.php'; ?>
    </div>
</div>

<script>
function conversion(btnEl, input, element, factor) {
    var val = parseFloat(element.value) || 0;
    if (btnEl.value === 'ppm') {
        btnEl.value = '%';
        element.value = (val / factor).toFixed(4);
    } else {
        btnEl.value = 'ppm';
        element.value = (val * factor).toFixed(2);
    }
}
</script>