<?php /** * Local variables. * * @var array $available_services * @var array $appointment_status_options * @var array $timezones * @var array $require_first_name * @var array $require_last_name * @var array $require_email * @var array $require_phone_number * @var array $require_address * @var array $require_city * @var array $require_zip_code * @var array $require_notes */ ?> <div id="appointments-modal" class="modal fade"> <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title"><?= lang('edit_appointment_title') ?></h3> <button class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <div class="modal-message alert d-none"></div> <form> <fieldset> <h5 class="text-black-50 mb-3 fw-light"><?= lang('appointment_details_title') ?></h5> <input id="appointment-id" type="hidden"> <div class="row"> <div class="col-12 col-sm-6"> <div class="mb-3"> <label for="select-service" class="form-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' ? e($group[0]['category_name']) : 'Uncategorized'; if (count($group) > 0) { echo '<optgroup label="' . $group_label . '">'; foreach ($group as $service) { echo '<option value="' . $service['id'] . '">' . e($service['name']) . '</option>'; } echo '</optgroup>'; } } } else { foreach ($available_services as $service) { echo '<option value="' . $service['id'] . '">' . e($service['name']) . '</option>'; } } ?> </select> </div> <div class="mb-3"> <label for="select-provider" class="form-label"> <?= lang('provider') ?> <span class="text-danger">*</span> </label> <select id="select-provider" class="required form-control"></select> </div> <div class="mb-3"> <?php component('color_selection', ['attributes' => 'id="appointment-color"']) ?> </div> <div class="mb-3"> <label for="appointment-location" class="form-label"> <?= lang('location') ?> </label> <input id="appointment-location" class="form-control"> </div> <div class="mb-3"> <label for="appointment-status" class="form-label"> <?= lang('status') ?> </label> <select id="appointment-status" class="form-control"> <?php foreach ($appointment_status_options as $appointment_status_option): ?> <option value="<?= e($appointment_status_option) ?>"> <?= e($appointment_status_option) ?> </option> <?php endforeach ?> </select> </div> </div> <div class="col-12 col-sm-6"> <div class="mb-3"> <label for="start-datetime" class="form-label"><?= lang('start_date_time') ?></label> <input id="start-datetime" class="required form-control"> </div> <div class="mb-3"> <label for="end-datetime" class="form-label"><?= lang('end_date_time') ?></label> <input id="end-datetime" class="required form-control"> </div> <div class="mb-3"> <label class="form-label"> <?= lang('timezone') ?> </label> <div class="border rounded d-flex justify-content-between align-items-center bg-light timezone-info"> <div class="border-end w-50 p-1 text-center"> <small> <?= lang('provider') ?>: <span class="provider-timezone"> - </span> </small> </div> <div class="w-50 p-1 text-center"> <small> <?= lang('current_user') ?>: <span> <?= $timezones[session('timezone', 'UTC')] ?> </span> </small> </div> </div> </div> <div class="mb-3"> <label for="appointment-notes" class="form-label"><?= lang('notes') ?></label> <textarea id="appointment-notes" class="form-control" rows="3"></textarea> </div> </div> </div> </fieldset> <br> <fieldset> <h5 class="text-black-50 mb-3 fw-light"> <?= 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 me-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 me-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"> </h5> <div id="existing-customers-list" style="display: none;"></div> <input id="customer-id" type="hidden"> <div class="row"> <div class="col-12 col-sm-6"> <div class="mb-3"> <label for="first-name" class="form-label"> <?= lang('first_name') ?> <?php if ($require_first_name): ?> <span class="text-danger">*</span> <?php endif ?> </label> <input type="text" id="first-name" class="<?= $require_first_name ? 'required' : '' ?> form-control" maxlength="100"/> </div> <div class="mb-3"> <label for="last-name" class="form-label"> <?= lang('last_name') ?> <?php if ($require_last_name): ?> <span class="text-danger">*</span> <?php endif ?> </label> <input type="text" id="last-name" class="<?= $require_last_name ? 'required' : '' ?> form-control" maxlength="120"/> </div> <div class="mb-3"> <label for="email" class="form-label"> <?= lang('email') ?> <?php if ($require_email): ?> <span class="text-danger">*</span> <?php endif ?> </label> <input type="text" id="email" class="<?= $require_email ? 'required' : '' ?> form-control" maxlength="120"/> </div> <div class="mb-3"> <label for="phone-number" class="form-label"> <?= lang('phone_number') ?> <?php if ($require_phone_number): ?> <span class="text-danger">*</span> <?php endif ?> </label> <input type="text" id="phone-number" maxlength="60" class="<?= $require_phone_number ? 'required' : '' ?> form-control"/> </div> <div class="mb-3"> <label class="form-label" for="language"> <?= lang('language') ?> <span class="text-danger" hidden>*</span> </label> <select id="language" class="form-control required"> <?php foreach (vars('available_languages') as $available_language): ?> <option value="<?= $available_language ?>"> <?= ucfirst($available_language) ?> </option> <?php endforeach ?> </select> </div> </div> <div class="col-12 col-sm-6"> <div class="mb-3"> <label for="address" class="form-label"> <?= lang('address') ?> <?php if ($require_address): ?> <span class="text-danger">*</span> <?php endif ?> </label> <input type="text" id="address" class="<?= $require_address ? 'required' : '' ?> form-control" maxlength="120"/> </div> <div class="mb-3"> <label for="city" class="form-label"> <?= lang('city') ?> <?php if ($require_city): ?> <span class="text-danger">*</span> <?php endif ?> </label> <input type="text" id="city" class="<?= $require_city ? 'required' : '' ?> form-control" maxlength="120"/> </div> <div class="mb-3"> <label for="zip-code" class="form-label"> <?= lang('zip_code') ?> <?php if ($require_zip_code): ?> <span class="text-danger">*</span> <?php endif ?> </label> <input type="text" id="zip-code" class="<?= $require_zip_code ? 'required' : '' ?> form-control" maxlength="120"/> </div> <div class="mb-3"> <label class="form-label" for="timezone"> <?= lang('timezone') ?> <span class="text-danger" hidden>*</span> </label> <?php component('timezone_dropdown', [ 'attributes' => 'id="timezone" class="form-control required"', 'grouped_timezones' => vars('grouped_timezones') ]) ?> </div> <div class="mb-3"> <label for="customer-notes" class="form-label"> <?= lang('notes') ?> <?php if ($require_notes): ?> <span class="text-danger">*</span> <?php endif ?> </label> <textarea id="customer-notes" rows="2" class="<?= $require_notes ? 'required' : '' ?> form-control"></textarea> </div> </div> </div> </fieldset> </form> </div> <div class="modal-footer"> <button class="btn btn-secondary" data-bs-dismiss="modal"> <?= lang('cancel') ?> </button> <button id="save-appointment" class="btn btn-primary"> <i class="fas fa-check-square me-2"></i> <?= lang('save') ?> </button> </div> </div> </div> </div> <?php section('scripts') ?> <script src="<?= asset_url('assets/js/components/appointments_modal.js') ?>"></script> <?php end_section('scripts') ?>