<div class="row tmp-div">
    <div class="row">
        <div class="col-md-7" style="z-index: 10;">
            <div class="table-div">
                <h2 id="table-label"></h2>
                <div id="trial-data-table" class="table-responsive" style="height: 600px">
                    <table class="table table-bordered table-striped">
                        <thead style="position: sticky;top: 0" class="bg-primary">
                            <tr>
                                <th>
                                    <div id="trial_name" class="mouse-pointer sorted" data-order="asc">
                                        Name
                                        <span class="fa order-span fa-sort-amount-asc"></span>
                                    </div>
                                </th>

                                <th>
                                    <div id="trial_email" class="mouse-pointer sorted" data-order="">
                                        Email
                                        <span class="fa order-span fa-sort-amount-asc" style="display: none;"></span>
                                    </div>
                                </th>

                                <th>
                                    <div id="trial_phone" class="mouse-pointer sorted" data-order="">
                                        Phone
                                        <span class="fa order-span fa-sort-amount-asc" style="display: none;"></span>
                                    </div>
                                </th>

                                <th>
                                    <div id="trial_type">
                                        Program Type
                                    </div>
                                </th>
                                <th>
                                    <div id="trial_version">
                                        Program Version
                                    </div>
                                </th>

                                <th>
                                    <div id="trial_starts" class="mouse-pointer sorted" data-order="">
                                        Number of starts
                                        <span class="fa order-span fa-sort-amount-asc" style="display: none;"></span>
                                    </div>
                                </th>
                            </tr>
                        </thead>

                        <tbody id="data-body"></tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-md-2">
            <div class="chart-container">
                <canvas id="myChart"></canvas>
            </div>
        </div>

        <div class="col-md-3">
            <div class="row date-div" style="margin-bottom: 20px;">
                <div class="col-md-6">
                    <label for="startDate">From</label>

                    <div id="startDate" class="input-group date selectpicker" data-provide="datepicker">
                        <input type="text" class="form-control">
                        <div class="input-group-addon">
                            <span class="glyphicon glyphicon-th"></span>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <label for="endDate">To</label>

                    <div id="endDate" class="input-group date selectpicker" data-provide="datepicker">
                        <input type="text" class="form-control">
                        <div class="input-group-addon">
                            <span class="glyphicon glyphicon-th"></span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row col-md-12" style="margin-bottom: 20px;">
                <label for="type_select">Program Type</label>

                <select name="type_select" id="type_select" class="form-control">
                    <option value="professional">Professional</option>
                    <option value="lt">LT</option>
                    <option value="live">LIVE</option>
                </select>
            </div>

            <div class="row col-md-12" style="margin-bottom: 20px;">
                <label for="version_select">Program Version</label>

                <select name="version_select" id="version_select" class="form-control">
                    <?php foreach ($versions as $version) : ?>
                        <?php if ($version->verID < '24') continue; ?>
                        <option value="<?= $version->verPassword8and9 ?>"><?= $version->year ?></option>
                    <?php endforeach; ?>
                </select>
            </div>

            <div class="row col-md-12" style="margin-bottom: 20px;">
                <label for="dist_select">Distributor</label>

                <select name="dist_select" id="dist_select" class="form-control" <?= $permission->is_admin == 0 ? 'disabled' : '' ?>>
                    <?php if ($permission->is_admin == 1) : ?>
                        <option value="-1">Without distributor</option>
                    <?php endif; ?>

                    <?php foreach ($dists as $dist) : ?>
                        <?php if ($permission->is_admin == 1 || ($permission->is_admin == 0 && $dist->ctrID == $ctrID)) : ?>
                            <option value="<?= $dist->id ?>" <?= $dist->ctrID == $ctrID ? 'selected' : '' ?>><?= $dist->name ?></option>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </select>
            </div>

            <div class="row col-md-12" style="margin-bottom: 20px;">
                <button id="trial_search" class="btn btn-default">Search</button>
            </div>
        </div>
    </div>
</div>