{% extends 'base.html.twig' %}

{% block body %}
	{{ block('nav', 'internal/libs/nav.html.twig') }}

	<main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
		{{ block('topnav', 'internal/libs/top-nav.html.twig') }}

		<section>
			<div class="card card-plain">
				<div class="card-header">
					<h4 class="font-weight-bolder">Add Referral Note</h4>
					<p class="mb-0">{{ referral.memberCase.caseName }}</p>
				</div>
				<div class="card-body">
					{{ form_start(form) }}
					{{ form_errors(form) }}
					<div class='container'>
						<div class='row'>
							{% set endDateWarning = '' %}
							{% if date("+28 days") >= referral.endDate %}
								{% set endDateWarning = 'bg-gradient-warning' %}
							{% elseif date("+14 days") >= referral.endDate %}
								{% set endDateWarning = 'bg-gradient-danger text-white' %}
							{% endif %}
							<span class='col{% if referral.hours < 40 %} bg-gradient-danger text-white{% endif %}'>
								Hours:
								{{ referral.hours }}
								/
								Remaining:
								{{ referral.getHoursRemaining() }}
							</span>
							<span class='col {{ endDateWarning }}'>
								Expiration Date:
								{{ referral.endDate|date('M j, Y', company_timezone) }}
							</span>
						</div>
						<div class='row' style='margin-top:10px;'>
							<div class='col'>
								<div class='input-group input-group-outline mb-3'>
									<label for='note_form_date'></label>
									<input type='date' name='{{ field_name(form.date) }}' id='note_form_date' class='form-control' title='Visit Date'/>
								</div>
								<div class='input-group input-group-outline mb-3'>
									<label for='note_form_startTime'></label>
									<input type='time' name='{{ field_name(form.startTime) }}' id='note_form_startTime' onchange='calcTime()' class='form-control' title='Start Time'/>&nbsp;&nbsp;
									<label for='note_form_endTime'></label>
									<input type='time' name='{{ field_name(form.endTime) }}' id='note_form_endTime' onchange='calcTime()' class='form-control' title='End Time'/>
								</div>
								<div class='input-group input-group-outline mb-3'>
									<input type='text' id='case-mins' style='width:49%;margin-right:5px;' disabled='disabled' title='Case Minutes'/>
									<input type='text' id='case-hours' style='width:49%;margin-left:5px;' disabled='disabled' title='Case Hours'/>
								</div>
								<div class='input-group input-group-outline mb-3'>
									<select name='{{ field_name(form.status) }}' id='note_form_status' class='form-control'>
										<option value=''>-- Status --</option>

										{% for s in enum('App\\Enums\\Case\\NoteStatus').cases() %}
											<option value='{{ s.value }}'>{{ s.value|capitalize }}</option>
										{% endfor %}
									</select>
								</div>
								<div class='input-group input-group-outline mb-3'>
									<select name='{{ field_name(form.location) }}' id='note_form_location' class='form-control'>
										<option value=''>-- Location --</option>

										{% for l in enum('App\\Enums\\Case\\NoteLocation').cases() %}
											<option value='{{ l.value }}' {% if l == default_location %} selected='selected' {% endif %}>{{ l.value }}</option>
										{% endfor %}
									</select>
								</div>
								<div class='input-group input-group-outline mb-3'>
									<select name='{{ field_name(form.method) }}' id='note_form_method' class='form-control'>
										<option value=''>-- Method --</option>

										{% for m in enum('App\\Enums\\Case\\NoteMethod').cases() %}
											<option value='{{ m.value }}' {% if m == default_method %} selected='selected' {% endif %}>{{ m.name|replace({'_': ' '})|lower|capitalize }}</option>
										{% endfor %}
									</select>
								</div>
							</div>
							<div class='col'>
								<div class='input-group input-group-outline mb-3'>
									{% for m in members %}
										<div class='row'>
											<input type='checkbox' name='{{ field_name(form.members) }}[]' id='visit_note_form_member_{{ loop.index }}' value='{{ m.id }}' class='member-present'/>
											<label for='visit_note_form_member_{{ loop.index }}'>{{ m.name }}</label>
										</div>
									{% endfor %}
								</div>
								<div class='input-group input-group-outline mb-3'>
									<label for='case_note_note' class='form-label'>Notes</label>
									<textarea name='{{ field_name(form.note) }}' id='case_note_note' class='form-control' style='width:100%;height:300px;'></textarea>
								</div>
							</div>
						</div>
						<div class='row'>
							<div class="text-center">
								<button type="submit" class="btn btn-lg bg-gradient-dark btn-lg w-100 mt-4 mb-0">Save Note</button>
							</div>
						</div>
					</div>
					{{ form_end(form) }}
				</div>
			</div>
		</section>
	</main>

	{{ block('right_bar', 'internal/libs/right-bar.html.twig') }}
{% endblock %}

{% block page_js %}
	<script type='module'>
		import {default as moment} from "{{ asset('vendor/moment/moment.index.js') }}";
		import {calcTime} from "{{ asset('js/app/notes.js') }}";
		window.calcTime = calcTime;
		window.moment = moment;
	</script>
{% endblock %}

{% block page_css %}
	<style type='text/css'>
		.row>* {
			width: revert !important;
			flex-shrink: revert !important;
		}
		.member-present {
			margin-left: var(--bs-gutter-x);
		}
	</style>
{% endblock %}