<?php
/**
 * GFB Customer Staff
 *
 * @package GFB.
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

?>

<div id="apbgf-booking-modal" class="modal" style="z-index: 9">
	<div class="modal__content apbgf_fancy_scroll">
		<h2><?php echo esc_html__('Add Booking', 'appointment-and-booking-for-gravity-forms'); ?></h2>
		<form id="apbgf-booking-form" autocomplete="off" class="modal--form">

			<input type="hidden" id="apbgf-hdn-location" name="location_id" value="">
			<input type="hidden" id="apbgf-hdn-service" name="service_id" value="">
			<input type="hidden" id="apbgf-hdn-staff" name="staff_id" value="">
			<input type="hidden" id="apbgf-hdn-date" name="date" value="">
			<input type="hidden" id="apbgf-hdn-cost" name="cost" value="">

			<div class="form-col-one">
				<label for="apbgf-show-location"><?php echo esc_html__('Location*', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="text" id="apbgf-show-location" value="" disabled>
			</div>

			<div class="form-col-two">
				<label for="apbgf-show-service"><?php echo esc_html__('Service*', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="text" id="apbgf-show-service" value="" disabled>
			</div>

			<div class="form-col-one">
				<label for="apbgf-show-staff"><?php echo esc_html__('Staff*', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="text" id="apbgf-show-staff" value="" disabled>
			</div>

			<div class="form-col-two">
				<label for="apbgf-show-date"><?php echo esc_html__('Appointment Date*', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="text" id="apbgf-show-date" value="" disabled>
			</div>

			<div class="form-col-one">
				<label for="apbgf-time"><?php echo esc_html__('Appointment Time*', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<select id="apbgf-time" name="time"></select>                
			</div>

			<div class="form-col-two">
				<label for="apbgf-slot"><?php echo esc_html__('Appointment Slot*', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<input type="number" min="1" id="apbgf-slot" name="slot" required>
			</div>

			<div class="form-col-full">
				<label for="apbgf-customer"><?php echo esc_html__('Customer*', 'appointment-and-booking-for-gravity-forms'); ?></label>
				<div class="aligTogether">
					<select name="apbgf_customer" id="apbgf-customer"></select>
					<a href="#" id="apbgf-add-customer" >+</a>
				</div>
			</div>

			<div id="apbgf_new_customer_form" style="display: none;">
				<div class="form-col-one">
					<label for="apbgf-fname"><?php echo esc_html__('First Name*', 'appointment-and-booking-for-gravity-forms'); ?></label>
					<input type="text" id="apbgf-fname" name="fname">
				</div>
				<div class="form-col-two">
					<label for="apbgf-lname"><?php echo esc_html__('Last Name*', 'appointment-and-booking-for-gravity-forms'); ?></label>
					<input type="text" id="apbgf-lname" name="lname">
				</div>
				<div class="form-col-one">
					<label for="apbgf-phone"><?php echo esc_html__('Phone', 'appointment-and-booking-for-gravity-forms'); ?></label>
					<input type="tel" id="apbgf-phone" name="phone">
				</div>
				<div class="form-col-two">
					<label for="apbgf-email"><?php echo esc_html__('Email*', 'appointment-and-booking-for-gravity-forms'); ?></label>
					<input type="email" id="apbgf-email" name="email">
				</div>
			</div>

			<input class="save--modal" type="submit" value="Save">

			<div class="apbgf-response"></div>
		</form>

		<a href="#" class="modal__close">&times;</a>
	</div>
</div>
