<div class="row tmp-div">
    <input type="hidden" name="crm_url" id="crm_url" value="<?= $crm_url ?>" />

    <div class="row">
        <div class="col-md-7">
            <div class="row">
                <div class="col-md-5">
                    <div class="template-container">
                        <label>Templates</label>

                        <select id="temp_select" class="form-control">
                            <option value="" checked>---- Select a template ----</option>
                            <?php foreach ($templates as $key => $value) : ?>
                                <option value="<?= $key ?>"><?= $value->name ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>

                <div class="col-md-3 btn-div">
                    <button id="new_template" class="btn btn-success action-btn" data-tooltip="tooltip" title="Add New Template" data-toggle="modal" data-target="#editTemplateModal">
                        <i class="fa fa-plus"></i>
                    </button>

                    <button id="edit_template" class="btn btn-warning action-btn" data-tooltip="tooltip" title="Edit Template" data-toggle="modal" data-target="#editTemplateModal">
                        <i class="fa fa-pencil"></i>
                    </button>

                    <button id="delete_template" class="btn btn-danger action-btn" data-tooltip="tooltip" title="Delete Template">
                        <i class="fa fa-trash"></i>
                    </button>
                </div>

                <div class="col-md-2" style="margin-top: 2%;">
                    <?php if ($isAdmin) : ?>
                        <form action="/trialusage/exportUsers" method="post" id="export_users_form">
                            <input type="hidden" id="users" name="users" value="">
                            <input type="hidden" id="selected_template" name="selected_template" value="">

                            <input type="submit" class="btn btn-primary" value="Export Users">
                        </form>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6" style="z-index: 10;">
            <div class="table-div">
                <h2 id="table-label"></h2>
                <div id="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="name" class="mouse-pointer sorted" data-order="asc">
                                        Name
                                        <span class="fa order-span fa-sort-amount-asc"></span>
                                    </div>
                                </th>

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

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

                                <th>
                                    <div id="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>
                                <th>
                                    <div id="wt" class="mouse-pointer sorted" data-order="">
                                        Working hour(s)
                                        <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-3">
            <div class="chart-container">
                <canvas id="myChart"></canvas>
            </div>

            <div id="statistics">
                <h3>All: <span id="program_starts"></span></h3>
            </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">
                <div class="template-container" style="margin-bottom: 20px;">
                    <label for="appearance">Appearance</label>

                    <select id="appearance" class="form-control">
                        <option value="1" <?= $appearance == 1 ? 'selected' : '' ?>>Cumulative total</option>
                        <option value="2" <?= $appearance == 2 ? 'selected' : '' ?>>Subtotal (for the selected period)</option>
                    </select>
                </div>
            </div>

            <div class="row col-md-12" style="margin-bottom: 20px;">
                <label for="appearance">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="0">Without distributor</option>
                    <?php endif; ?>

                    <?php foreach ($dists as $dist) : ?>
                        <option value="<?= $dist->ctrID ?>" <?= $dist->ctrID == $ctrID ? 'selected' : '' ?>><?= $dist->name ?></option>
                    <?php endforeach; ?>
                </select>
            </div>

            <?php if ($isAdmin) : ?>
                <div class="row col-md-12" style="margin-bottom: 20px;">
                    <label for="schools">Schools:</label>
                    <select id="schools" name="schools" multiple class="selectpicker show-menu-arrow show-tick form-control" title="Select school(s)" multiple data-actions-box="true" data-width="100%" data-size="auto" multiple data-selected-text-format="count > 10">
                        <?php foreach ($schools as $school) : ?>
                            <option value="<?= $school->id ?>"><?= $school->name ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>

                <div id="courses-div" class="row col-md-12" style="margin-bottom: 20px;">
                    <label for="courses">Courses:</label>
                    <select id="courses" name="courses" multiple class="selectpicker show-menu-arrow show-tick form-control" title="Select school(s)" multiple data-actions-box="true" data-width="100%" data-size="auto" multiple data-selected-text-format="count > 10">
                    </select>
                </div>

                <div class="row col-md-12">
                    <button id="editNameMaskBtn" class="btn btn-default" data-tooltip="tooltip" title="Edit Name Mask" data-toggle="modal" data-target="#editNameMask">
                        Edit Name Mask
                    </button>
                </div>
            <?php endif; ?>
        </div>
    </div>
</div>

<!-- Edit Table Content Modal Begin -->
<?php if ($isAdmin) : ?>
    <div class="modal fade" id="editNameMask" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4>Edit Name Mask</h4>
                </div>

                <div class="modal-body usage-modal">
                    <form id="table-content-form">
                        <div class="form-group">
                            <label for="name_mask">Table Content:</label>
                            <input type="text" class="form-control" id="name_mask" name="name_mask" value="">
                            <div id="name_mask-error"></div>
                        </div>
                    </form>

                    <div class="form-group">
                        <label for="name_mask_example">Example:</label>
                        <input type="text" class="form-control" id="name_mask_example" name="name_mask_example" value="" disabled>
                    </div>
                    <br>

                    <div class="row col-md-12">
                        <label>Strings</label>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <ul>
                                <li>%n - Name</li>
                                <li>%e - Email</li>
                                <li>%k - Key (the first 6 digits of the serial number)</li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" id="save-name-mask-btn" class="btn btn-success mr-auto save-btn">Save changes</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
<?php endif; ?>
<!-- Edit Table Content Modal End -->

<!-- New Template Modal Begin -->
<div class="modal fade" id="editTemplateModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"></h4>
            </div>

            <form id="template-form">
                <div class="modal-body usage-modal">
                    <input type="hidden" name="template_id" id="template_id" value="" />

                    <div class="form-group">
                        <label for="template_name">Template Name:</label>
                        <input type="text" class="form-control" id="template_name" name="template_name" value="">
                        <div id="name-error"></div>
                    </div>

                    <div class="form-group">
                        <label for="product">Product:</label>
                        <select id="product" name="product" data-style="btn-default" class="selectpicker show-menu-arrow show-tick form-control" title="Select a product">
                            <option value="1">ARCHLine.XP</option>
                            <option value="2">ARCHLine.XP LIVE</option>
                        </select>

                        <div id="product-error"></div>
                    </div>

                    <div id="type-div" class="form-group">
                        <label for="program_type">Program Type:</label>
                        <select id="program_type" name="program_type" multiple class="selectpicker show-menu-arrow show-tick form-control" title="Select program type(s)" data-actions-box="true" data-width="100%" data-size="auto" data-selected-text-format="count > 10">
                            <?php foreach ($types as $type) : ?>
                                <option value="<?= $type->typeCode ?>"><?= $type->typeName ?></option>
                            <?php endforeach; ?>
                        </select>

                        <div id="type-error"></div>
                    </div>

                    <div class="form-group">
                        <label for="program_version">Program Version:</label>
                        <select id="program_version" name="program_version" multiple class="selectpicker show-menu-arrow show-tick form-control" title="Select program version(s)" multiple data-actions-box="true" data-width="100%" data-size="auto" multiple data-selected-text-format="count > 10">
                            <?php foreach ($versions as $version) : ?>
                                <option value="<?= $version->verPassword8and9 ?>"><?= $version->year ?></option>
                            <?php endforeach; ?>
                        </select>

                        <div id="version-error"></div>
                    </div>

                    <div class="form-group">
                        <label for="status">Program status:</label>
                        <select id="status" name="status" data-style="btn-default" class="selectpicker show-menu-arrow show-tick form-control" title="Select a status">
                            <option value="-1">All</option>
                            <option value="0">Active</option>
                            <option value="1">Inactive</option>
                        </select>

                        <div id="status-error"></div>
                    </div>

                    <div id="ctr-div" class="form-group">
                        <label for="country_code">Licence type:</label>
                        <select id="country_code" name="country_code" multiple class="selectpicker show-menu-arrow show-tick form-control" title="Select country code(s)" multiple data-actions-box="true" data-width="100%" data-size="auto" multiple data-selected-text-format="count > 10">
                            <option value="comm">Commercial</option>
                            <option value="trial">Trial</option>
                            <option value="99">Non-Profit</option>
                        </select>

                        <div id="country-code-error"></div>
                    </div>

                    <div class="form-group">
                        <label for="interval">Interval:</label>
                        <select id="interval" name="interval" class="selectpicker show-menu-arrow show-tick form-control" title="Select the chart's interval">
                            <option value="0">All time</option>

                            <?php if ($appearance == 2) : ?>
                                <option value="1">Last week only</option>
                                <option value="2">In the penultimate week</option>
                                <option value="3">3 and 4 weeks ago only</option>
                                <option value="4">In the penultimate month</option>
                                <option value="5">3 month ago only</option>
                                <option value="6">Between 4 and 6 months only</option>
                                <option value="7">Between 7 and 12 months only</option>
                                <option value="8">In the penultimate year</option>
                            <?php else : ?>
                                <option value="1">Last week</option>
                                <option value="2">Last 2 weeks</option>
                                <option value="3">Last month</option>
                                <option value="4">Last 2 months</option>
                                <option value="5">Last 3 months</option>
                                <option value="6">Last 6 months</option>
                                <option value="7">Last year</option>
                                <option value="8">Last 2 years</option>
                            <?php endif; ?>

                            <option value="9">3 years ago</option>
                        </select>

                        <div id="interval-error"></div>
                    </div>

                    <div class="form-group">
                        <label for="chart_type">Chart type:</label>
                        <select id="chart_type" name="chart_type" data-style="btn-default" class="selectpicker show-menu-arrow show-tick form-control" title="Select the chart's type">
                            <option value="bar">Bar Chart</option>
                            <option value="pie">Pie Chart</option>
                            <option value="doughnut">Doughnut Chart</option>
                            <option value="line">Line Chart</option>
                            <option value="polarArea">Polar Area Chart</option>
                        </select>

                        <div id="interval-error"></div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" id="edit-template-btn" class="btn btn-success mr-auto save-btn">Save changes</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- New Template Modal End -->