<?php
if (file_exists('../../../' . $_REQUEST['tenant'] . '/config.php')) {
    require_once('../../../' . $_REQUEST['tenant'] . '/config.php');
}
if (file_exists('/config.php')) {
    require_once('/config.php');
}

?>


<div id="loadingObject" style="display:none">
    <h1 class="text-center"><i class="fad fa-flux-capacitor fa-spin fa-3x fa-fw"
            style="--fa-primary-color: #0055A6; --fa-secondary-color: gray;"></i><br>Loading Schedule <br><small>Please
            wait</small>
    </h1>
</div>
<div class="row mb-2 mt-2">
    <div class="col-12">
        <h4>Item overview - <span id="name"><?= getClientName($_REQUEST['clientnumber']) ?></span> <span
                class="float-end"><a class="btn btn-sm btn-secondary me-2" onclick="filterStack()"><i
                        class="fad fa-filter"></i> Filter by range</a> <a class="btn btn-sm btn-secondary"
                    onclick="printContent()"><i class="fad fa-print"></i> print</a></span></h4>
    </div>
</div>
<section id="start" class="dark-grey-text" style="display:none">

    <div class="row">

        <div class="col-12 col-md-6 mb-4">
            <a href="javascript:void(0)" class="card hoverable">
                <div class="card-body">
                    <div class="media">
                        <span
                            class="card-img-100 d-inline-flex justify-content-center align-items-center rounded-circle grey lighten-3 me-4">
                            <i class="fad fa-calendar-alt fa-2x text-info"></i>
                        </span>
                        <div class="media-body d-flex">
                            <div class="col-12 col-md-6 date-picker" data-date-type="open"
                                data-mdb-toggle-button="false">
                                <h5 class="dark-grey-text mb-3">Examination period start</h5>
                                <input class="form-control" data-mdb-confirmDateOnSelect data-mdb-toggle="datepicker"
                                    type="text" name="date_start" id="date_start" placeholder="Select date" />
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

        <div class="col-12 col-md-6 mb-4">
            <a href="javascript:void(0)" class="card hoverable">
                <div class="card-body">
                    <div class="media">
                        <span
                            class="card-img-100 d-inline-flex justify-content-center align-items-center rounded-circle grey lighten-3 me-4">
                            <i class="fad fa-calendar-alt fa-2x purple-text"></i>
                        </span>
                        <div class="media-body d-flex">
                            <div class="col-12 col-md-6 date-picker" data-date-type="open"
                                data-mdb-toggle-button="false">
                                <h5 class="dark-grey-text mb-3">Examination period end</h5>
                                <input class="form-control" data-mdb-confirmDateOnSelect data-mdb-toggle="datepicker"
                                    type="text" name="date_end" id="date_end" placeholder="Select date"
                                    value="<?= date('d-m-Y') ?>" />
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>

    </div>
    <div class="col-md-12 text-center mb-4"><a class="btn btn-info" href="javascript:void(0)" onClick="loadData()">Load
            Data</a></div>
</section>
<section id="dataContainer">
    <table id="tableData" class="table table-striped table-bordered table-hover responsive table-sm w-100" width="100%">
        <thead class="table-info">
            <tr>
                <th class="printhead">Item</th>
                <th class="printhead">Count</th>
                <th class="printhead">Frequency</th>
            </tr>
        </thead>
        <tbody>
            <?php
            $unitsTotal = 0;
            $sdcTotal = 0;

            $sp = mysqli_query($GLOBALS['con'], "SELECT DISTINCT `desc`,`code` FROM `itemdetails` WHERE `clientnumber`='" . $_REQUEST['clientnumber'] . "' AND `statuslive`='1'") or die(mysqli_error($con));
            while ($sd = mysqli_fetch_array($sp)) {

                $spc = mysqli_query($GLOBALS['con'], "SELECT `itemnumber` FROM `itemdetails` WHERE `clientnumber`='" . $_REQUEST['clientnumber'] . "' AND `statuslive`='1'  AND `desc`='" . $sd['desc'] . "'") or die(mysqli_error($GLOBALS['con']));
                $sdc = mysqli_num_rows($spc);

                $iuc = mysqli_query($GLOBALS['con'], "SELECT `units`,`frequency` FROM `dd_plant` WHERE `code`='" . $sd['code'] . "'") or die(mysqli_error($GLOBALS['con']));
                $iuc = mysqli_fetch_array($iuc);

                $units = $iuc['units'] * $sdc;
                $sdcTotal += $sdc;
                $unitsTotal += $units;
                echo "<tr><td>" . $sd['desc'] . "</td><td>" . $sdc . "</td><td>" . $iuc['frequency'] . "</td></tr>";
            }; ?>
        </tbody>

        <tfoot class="table-info text-white">
            <tr>
                <th></th>
                <td class="printhead"><?= $sdcTotal ?></td>
                <td class="printhead"></td>
            </tr>
        </tfoot>
    </table>
</section>

<script>
var modalElement = document.getElementById('start');
var datepickerElements = modalElement.querySelectorAll(".date-picker");
datepickerElements.forEach((datepickerEl) => {
    const options = {
        confirmDateOnSelect: true,
        format: "dd-mm-yyyy",
    };

    new mdb.Datepicker(datepickerEl, options);
});

function loadData() {
    document.getElementById('loadingObject').style.display = 'block';
    document.getElementById('tableData').style.display = 'none';
    document.getElementById('start').style.display = 'none';

    var client = '<?= $_REQUEST['clientnumber'] ?>';
    var s = document.getElementById('date_start').value;
    var e = document.getElementById('date_end').value;
    var n = <?= $_REQUEST['clientnumber'] ?>

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '<?= ROOT_URL ?>/includes/master/itemSummary_functions.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    xhr.onload = function() {
        if (xhr.status === 200) {
            var ret = xhr.responseText;
            var d = ret.split('|');
            document.querySelector('#tableData tbody').innerHTML = d[0].trim();
            document.querySelector('#tableData tfoot').innerHTML = d[1].trim();
            document.getElementById('loadingObject').style.display = 'none';
            document.getElementById('tableData').style.display = 'table';
            document.getElementById('name').textContent = n;
        }
    };

    var data = 'FCN=load&clientnumber=' + encodeURIComponent(client) + '&start=' + encodeURIComponent(s) + '&end=' +
        encodeURIComponent(e) + '&tenant=' + encodeURIComponent('<?= $systemUser ?>');
    xhr.send(data);
}


function filterStack() {
    document.getElementById('start').style.display = 'block';
}


document.getElementById('loadingObject').style.display = 'none';
document.getElementById('tableData').style.display = 'table';



function printContent() {
    printContainer('dataContainer', {
        orientation: 'landscape', // or 'Portrait'
        header: '<p><?= getClientName($_REQUEST['clientnumber']) ?> Plant List</p>',
        footer: '<p>Generated by EnRep Reporting System: <?= date('d-m-Y') ?></p>',
        logoUrl: 'images/company/logo.jpg',
        styles: [
            ROOT_URL + '/src/css/print.css'
        ],
    });
}
</script>