<div class="modal-header">
	<button type="button" class="close" data-ng-click="cancel()">×</button>
	<h3 class="modal-title"><i class="fa fa-plane"></i> Request Holiday</h3>
</div>
<style>
	/* Remove gray selection background from form rows */
	.modal-body .form-group:hover,
	.modal-body .form-group:focus,
	.modal-body .form-group:active,
	.modal-body .row:hover,
	.modal-body .row:focus,
	.modal-body .row:active {
		background-color: transparent !important;
	}
	
	/* Ensure input fields don't have gray background on selection */
	.modal-body input:focus,
	.modal-body input:active,
	.modal-body input:hover {
		background-color: #fff !important;
	}
	
	/* Make date inputs manually editable with visible calendar icon */
	input[type="date"] {
		cursor: text !important;
		width: 100% !important;
		position: relative;
		padding-right: 10px !important;
	}
	
	/* Style the calendar icon to be clearly visible */
	input[type="date"]::-webkit-calendar-picker-indicator {
		cursor: pointer;
		opacity: 1;
		width: 16px;
		height: 16px;
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="%23666" d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.89-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.11-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z"/></svg>');
		background-repeat: no-repeat;
		background-position: center;
		background-size: 16px;
		margin-right: 4px;
	}
</style>
<form class="form-horizontal form-edit" data-ng-submit="save()">
	<div class="modal-body" style="padding: 30px;">
		
		<!-- Double Column Layout -->
		<div class="row">
			<!-- Left Column: Labels/Titles -->
			<div class="col-sm-4">
				
				<!-- Reason/Description -->
				<div class="form-group" style="margin-bottom: 25px;">
					<label class="control-label" style="font-weight: bold; font-size: 16px;">
						<i class="fa fa-edit"></i> Reason/Description:
					</label>
				</div>
				
				<!-- Paid Holiday -->
				<div class="form-group" style="margin-bottom: 25px;">
					<label class="control-label" style="font-weight: bold; font-size: 16px;">
						<i class="fa fa-money"></i> Paid Holiday:
					</label>
				</div>
				
				<!-- Select Holiday Dates -->
				<div class="form-group">
					<label class="control-label" style="font-weight: bold; font-size: 16px;">
						<i class="fa fa-calendar"></i> Select Holiday Dates:
					</label>
				</div>
				
			</div>
			
			<!-- Right Column: Controls/Inputs -->
			<div class="col-sm-8">
				
				<!-- Reason/Description Input -->
				<div class="form-group" style="margin-bottom: 25px;">
					<input type="text" 
						   name="description" 
						   class="form-control input-lg" 
						   style="font-size: 14px; height: 45px; border-radius: 6px;"
						   ng-model="data.description" 
						   placeholder="e.g., Family vacation, Personal time..."
						   required>
				</div>
				
				<!-- Paid Holiday Radio Buttons -->
				<div class="form-group" style="margin-bottom: 25px;">
					<div style="margin-top: 5px;">
						<label class="radio-inline" style="font-size: 16px; margin-right: 25px;">
							<input type="radio" name="paid" ng-model="data.paid" value="1" required style="margin-right: 8px;"> 
							<strong>Yes</strong> <small class="text-muted">({[{ user_details.paid_holiday_days_left }]} days left)</small>
						</label>
						<label class="radio-inline" style="font-size: 16px;">
							<input type="radio" name="paid" ng-model="data.paid" value="0" required style="margin-right: 8px;"> 
							<strong>No</strong> <small class="text-muted">(unpaid)</small>
						</label>
					</div>
				</div>
				
				<!-- Date Selection -->
				<div class="form-group">
					<div class="row">
						<div class="col-sm-5">
							<label style="font-weight: bold; margin-bottom: 5px;">From Date:</label>
							<input type="date" 
								   class="form-control input-lg" 
								   ng-model="fromDateModel"
								   ng-change="updateFromDate()"
								   min="{[{ getTodayDate() }]}"
								   style="font-size: 14px; height: 45px; cursor: pointer; padding: 10px;">
						</div>
						<div class="col-sm-5">
							<label style="font-weight: bold; margin-bottom: 5px;">To Date:</label>
							<input type="date" 
								   class="form-control input-lg" 
								   ng-model="toDateModel"
								   ng-change="updateToDate()"
								   min="{[{ fromDateModel || getTodayDate() }]}"
								   style="font-size: 14px; height: 45px; cursor: pointer; padding: 10px;">
						</div>
						<div class="col-sm-2" style="padding-top: 25px;">
							<button type="button" class="btn btn-warning btn-sm" ng-click="clearDates()" ng-if="fromDateModel || toDateModel">
								<i class="fa fa-refresh"></i>
							</button>
						</div>
					</div>
					
					<!-- Live Summary -->
					<div ng-if="total_holidays > 0" class="alert alert-success" style="margin: 15px 0; padding: 15px; border-radius: 8px;">
						<div style="font-size: 18px; font-weight: bold; color: #2e7d32;">
							<i class="fa fa-calendar-check-o"></i> 
							That's a total of <strong>{[{ total_holidays }]}</strong> days.
						</div>
					</div>
				</div>
				
			</div>
		</div>
		
		<!-- Balance Info -->
		<div class="text-center" style="margin-top: 20px;">
			<small class="text-muted">
				<i class="fa fa-info-circle"></i>
				<span ng-if="data.paid == 1">
					You have <strong>{[{ user_details.paid_holiday_days_left }]} paid holiday days</strong> remaining this year.
				</span>
				<span ng-if="data.paid == 0">
					Unpaid holiday - no deduction from your holiday balance.
				</span>
			</small>
		</div>
		
		<!-- Hidden compatibility fields -->
		<div style="display: none;">
			<select ng-options="o for o in DateTime.days" ng-model="from.days" class="form-control" required></select>
			<select ng-options="o.value as o.name for o in DateTime.months" ng-model="from.months" class="form-control" required></select>
			<select ng-options="o for o in DateTime.years" ng-model="from.years" class="form-control" required></select>
			<select ng-options="o for o in DateTime.days" ng-model="to.days" class="form-control" required></select>
			<select ng-options="o.value as o.name for o in DateTime.months" ng-model="to.months" class="form-control" required></select>
			<select ng-options="o for o in DateTime.years" ng-model="to.years" class="form-control" required></select>
		</div>
	</div>
	
	<div class="modal-footer" style="padding: 20px 30px; border-top: 2px solid #f5f5f5;">
		<button class="btn btn-default btn-lg" data-ng-click="cancel()" eat-click>
			<i class="fa fa-times"></i> Cancel
		</button>
		<button class="btn btn-primary btn-lg" style="margin-left: 15px;" ng-disabled="!total_holidays || !data.description">
			<i class="fa fa-paper-plane"></i> Send Holiday Request
		</button>
	</div>
</form>