<head>
    <!-- Include jQuery library -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <!-- Include jQuery UI library -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<form class="row g-3 auto-width" action="{{ route('appointment-shift.store') }}" method="post"
    enctype='multipart/form-data' id="quality_form">
    @csrf
    <div class="col-md-12">
        <label for="name" class="form-label">Name <span class="text-danger"><b>*</b></span></label>
        <input type="text" class="form-control" id="name" name="name" aria-describedby="inputGroupPrepend"
            required>
        <span class="text-danger error_name" style="display:none;">This field is required.</span>
    </div>
    <div class="col-md-6">
        <label for="name" class="form-label">Code <span class="text-danger"><b>*</b></span></label>
        <input type="text" class="form-control" id="code" name="code" aria-describedby="inputGroupPrepend"required>
        <span class="text-danger error_name" style="display:none;">This field is required.</span>
    </div>
    <div class="col-md-6">
        <label for="patient_quantity" class="form-label">Patients Qty <span class="text-danger"><b>*</b></span></label>
        <input type="number" class="form-control" id="patient_quantity" name="patient_quantity"
            aria-describedby="inputGroupPrepend" required>
        <span class="text-danger error_patient_quantity" style="display:none;">This field is required.</span>
    </div>
    <div class="col-md-6">
        <label for="priority" class="form-label"> Priority </span></label>
        <input type="text" class="form-control" name="priority" aria-describedby="inputGroupPrepend" required
            value="{!! $priority + 1 !!}">
        <span class="text-danger error_priority" style="display:none;">This field is required.</span>
    </div>
    <div class="col-md-6">
        <label for="serial_start_from" class="form-label"> Serial Start From </span></label>
        <input type="number" class="form-control" name="serial_start_from" aria-describedby="inputGroupPrepend">
        <span class="text-danger error_serial_start_from" style="display:none;">This field is required.</span>
    </div>
    <div class="col-md-6">
        <label for="gap_between_two_patient" class="form-label"> Gap Between Two Patients </span></label>
        <input type="number" class="form-control" name="gap_between_two_patient" aria-describedby="inputGroupPrepend" required>
        <span class="text-danger error_gap_between_two_patient" style="display:none;">This field is required.</span>
    </div>
    <div class="col-md-6">
        <label for="serial_prefix" class="form-label"> Serial Prefix </span></label>
        <input type="text" class="form-control" name="serial_prefix" aria-describedby="inputGroupPrepend">
        <span class="text-danger error_serial_prefix" style="display:none;">This field is required.</span>
    </div>

    <div class="col-md-6">
        <label for="time_from" class="form-label">Time from </label>
        <input type="time" class="form-control datepicker" id="time_from" name="time_from">
        <span class="text-danger error_time_from" style="display: none;">This field is required.</span>
    </div>

    <div class="col-md-6">
        <label for="time_to" class="form-label">Time to </label>
        <input type="time" class="form-control datepicker" id="time_to" name="time_to">
        <span class="text-danger error_time_to" style="display: none;">This field is required.</span>
    </div>

    <div class="col-md-6">
        <label for="color" class="form-label">Text Color </span></label>
        <input type="color" class="form-control" style="width:55px;" id="color" name="color"
            aria-describedby="inputGroupPrepend" required>
        <span class="text-danger error_color" style="display:none;">This field is required.</span>
    </div>
    <div class="col-md-6">
        <label for="bg_color" class="form-label">Background Color </span></label>
        <input type="color" class="form-control" style="width:55px;" id="bg_color" name="bg_color"
            aria-describedby="inputGroupPrepend" required>
        <span class="text-danger error_bg_color" style="display:none;">This field is required.</span>
    </div>

</form>

<script>
    $(function() {
        $('input.timepicker').timepicker({
            timeFormat: 'h:mm',
        });
    });
</script>
<script>
    $(function() {
        $('input.timepicker').timepicker({
            timeFormat: 'h:mm',
        });
    });
</script>
