easyappointments/application/views/components/manage_appointment_modal.php

269 lines
14 KiB
PHP

<?php
/**
* @var array $available_services
* @var array $timezones
*/
?>
<div id="manage-appointment" class="modal fade">
<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="btn-close" data-bs-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[session('timezone', 'UTC')] ?>
</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 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">
<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 (setting('require_phone_number') === '1'): ?>
<span class="text-danger">*</span>
<?php endif ?>
</label>
<input id="phone-number"
class="form-control <?= setting('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-bs-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 me-2"></i>
<?= lang('save') ?>
</button>
</div>
</div>
</div>
</div>