<?php /** * @var array $available_services * @var array $timezones * @var string $require_phone_number * @var string $timezone */ ?> <div id="manage-appointment" class="modal fade" tabindex="-1"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title"><?= lang('edit_appointment_title') ?></h3> <button class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <div class="modal-message alert d-none"></div> <form> <fieldset> <legend><?= lang('appointment_details_title') ?></legend> <input id="appointment-id" type="hidden"> <div class="row"> <div class="col-12 col-sm-6"> <div class="form-group"> <label for="select-service" class="control-label"> <?= lang('service') ?> <span class="text-danger">*</span> </label> <select id="select-service" class="required form-control"> <?php // Group services by category, only if there is at least one service // with a parent category. $has_category = FALSE; foreach ($available_services as $service) { if ( ! empty($service['category_id'])) { $has_category = TRUE; break; } } if ($has_category) { $grouped_services = []; foreach ($available_services as $service) { if ( ! empty($service['category_id'])) { if ( ! isset($grouped_services[$service['category_name']])) { $grouped_services[$service['category_name']] = []; } $grouped_services[$service['category_name']][] = $service; } } // We need the uncategorized services at the end of the list so we will use // another iteration only for the uncategorized services. $grouped_services['uncategorized'] = []; foreach ($available_services as $service) { if ($service['category_id'] == NULL) { $grouped_services['uncategorized'][] = $service; } } foreach ($grouped_services as $key => $group) { $group_label = $key !== 'uncategorized' ? $group[0]['category_name'] : 'Uncategorized'; if (count($group) > 0) { echo '<optgroup label="' . $group_label . '">'; foreach ($group as $service) { echo '<option value="' . $service['id'] . '">' . $service['name'] . '</option>'; } echo '</optgroup>'; } } } else { foreach ($available_services as $service) { echo '<option value="' . $service['id'] . '">' . $service['name'] . '</option>'; } } ?> </select> </div> <div class="form-group"> <label for="select-provider" class="control-label"> <?= lang('provider') ?> <span class="text-danger">*</span> </label> <select id="select-provider" class="required form-control"></select> </div> <div class="form-group"> <label for="appointment-location" class="control-label"> <?= lang('location') ?> </label> <input id="appointment-location" class="form-control"> </div> <div class="form-group"> <label for="appointment-notes" class="control-label"><?= lang('notes') ?></label> <textarea id="appointment-notes" class="form-control" rows="3"></textarea> </div> </div> <div class="col-12 col-sm-6"> <div class="form-group"> <label for="start-datetime" class="control-label"><?= lang('start_date_time') ?></label> <input id="start-datetime" class="required form-control"> </div> <div class="form-group"> <label for="end-datetime" class="control-label"><?= lang('end_date_time') ?></label> <input id="end-datetime" class="required form-control"> </div> <div class="form-group"> <label class="control-label"><?= lang('timezone') ?></label> <ul> <li> <?= lang('provider') ?>: <span class="provider-timezone"> - </span> </li> <li> <?= lang('current_user') ?>: <span> <?= $timezones[$timezone] ?> </span> </li> </ul> </div> </div> </div> </fieldset> <br> <fieldset> <legend> <?= lang('customer_details_title') ?> <button id="new-customer" class="btn btn-outline-secondary btn-sm" type="button" data-tippy-content="<?= lang('clear_fields_add_existing_customer_hint') ?>"> <i class="fas fa-plus-square mr-2"></i> <?= lang('new') ?> </button> <button id="select-customer" class="btn btn-outline-secondary btn-sm" type="button" data-tippy-content="<?= lang('pick_existing_customer_hint') ?>"> <i class="fas fa-hand-pointer mr-2"></i> <span> <?= lang('select') ?> </span> </button> <input id="filter-existing-customers" placeholder="<?= lang('type_to_filter_customers') ?>" style="display: none;" class="input-sm form-control"> <div id="existing-customers-list" style="display: none;"></div> </legend> <input id="customer-id" type="hidden"> <div class="row"> <div class="col-12 col-sm-6"> <div class="form-group"> <label for="first-name" class="control-label"> <?= lang('first_name') ?> <span class="text-danger">*</span> </label> <input id="first-name" class="required form-control"> </div> <div class="form-group"> <label for="last-name" class="control-label"> <?= lang('last_name') ?> <span class="text-danger">*</span> </label> <input id="last-name" class="required form-control"> </div> <div class="form-group"> <label for="email" class="control-label"> <?= lang('email') ?> <span class="text-danger">*</span> </label> <input id="email" class="required form-control"> </div> <div class="form-group"> <label for="phone-number" class="control-label"> <?= lang('phone_number') ?> <?php if ($require_phone_number === '1'): ?> <span class="text-danger">*</span> <?php endif ?> </label> <input id="phone-number" class="form-control <?= $require_phone_number === '1' ? 'required' : '' ?>"> </div> </div> <div class="col-12 col-sm-6"> <div class="form-group"> <label for="address" class="control-label"> <?= lang('address') ?> </label> <input id="address" class="form-control"> </div> <div class="form-group"> <label for="city" class="control-label"> <?= lang('city') ?> </label> <input id="city" class="form-control"> </div> <div class="form-group"> <label for="zip-code" class="control-label"> <?= lang('zip_code') ?> </label> <input id="zip-code" class="form-control"> </div> <div class="form-group"> <label for="customer-notes" class="control-label"> <?= lang('notes') ?> </label> <textarea id="customer-notes" rows="2" class="form-control"></textarea> </div> </div> </div> </fieldset> </form> </div> <div class="modal-footer"> <button class="btn btn-outline-secondary" data-dismiss="modal"> <i class="fas fa-ban"></i> <?= lang('cancel') ?> </button> <button id="save-appointment" class="btn btn-primary"> <i class="fas fa-check-square mr-2"></i> <?= lang('save') ?> </button> </div> </div> </div> </div>