@extends('app-new')

@push('head-script')
	<!-- BEGIN: Vendor CSS-->
	<link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
	<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
	<link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/select/select2.full.min.css">
	<!-- END: Vendor CSS-->
@endpush

@push('content-header')
	<div class="row breadcrumbs-top">
		<div class="col-12">
			<h2 class="content-header-title float-start mb-0">Payroll Templates</h2>
			<div class="breadcrumb-wrapper">
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="{{ '/'.$alias.'/home' }}">Home</a></li>
					<li class="breadcrumb-item"><a href="{{ '/'.$alias.'/payroll/employee-template-assignment' }}">Employee Assignments</a></li>
					<li class="breadcrumb-item active">Assign Template</li>
				</ol>
			</div>
		</div>
	</div>
@endpush

@section('content')

@if ($errors->any())
	<!--Error Alerts start -->
	<div class="row">
		<div class="col-md-12">
			<div class="alert alert-danger alert-dismissible fade show" role="alert">
				<div class="alert-body">
					@foreach ($errors->all() as $error)
						{{ $error }}<br>
					@endforeach
				</div>
				<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
			</div>
		</div>
	</div>
	<!--Error Alerts end -->
@endif

@if (session('success'))
	<!--Success Alerts start -->
	<div class="row">
		<div class="col-md-12">
			<div class="alert alert-success alert-dismissible fade show" role="alert">
				<div class="alert-body">{{ session('success') }}</div>
				<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
			</div>
		</div>
	</div>
	<!--Success Alerts end -->
@endif

@if (session('error'))
	<!--Error Alerts start -->
	<div class="row">
		<div class="col-md-12">
			<div class="alert alert-danger alert-dismissible fade show" role="alert">
				<div class="alert-body">{{ session('error') }}</div>
				<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
			</div>
		</div>
	</div>
	<!--Error Alerts end -->
@endif

<div class="row mt-2">
	<div class="col-12">
		<div class="card">
			<div class="card-header border-bottom">
				<div class="head-label">
					<h6 class="card-title mb-0">Payroll Templates</h6>
				</div>
				<div class="dt-action-buttons text-end">
					<div class="dt-buttons d-inline-flex">
						
						<a class="dt-button create-new btn btn-secondary me-2" tabindex="0"
                                        aria-controls="organization" href="{{ url($alias . '/payroll/templates') }}">
									<span>
								 Back
							</span>
						</a>
						
					</div>
				</div>
			</div>

			<div class="card-body">

				<form method="POST" action="{{ '/'.$alias.'/payroll/employee-template-assignment' }}">
					@csrf
					
					<div class="row mt-3">
						<div class="col-md-4 mb-1">
							<div class="d-flex justify-content-between align-items-center">
								<label for="category" class="form-label mb-0">Category</label>
								<label class="form-check-label" style="font-size: 12px; cursor: pointer;"><input type="checkbox" class="form-check-input select-all-check" data-target="#category" style="cursor: pointer; width: 0.80rem; height: 0.80rem;"> Select All</label>
							</div>
							<select class="form-control select2" id="category" name="category_ids[]" multiple>
								@foreach($categories as $cat)
									<option value="{{ $cat->id }}" {{ in_array($cat->id, old('category_ids', [])) ? 'selected' : '' }}>{{ $cat->name }}</option>
								@endforeach
							</select>
							@error('category_ids')
								<div class="invalid-feedback d-block">{{ $message }}</div>
							@enderror
						</div>

						<div class="col-md-4 mb-1">
							<div class="d-flex justify-content-between align-items-center">
								<label for="department" class="form-label mb-0">Department</label>
								<label class="form-check-label" style="font-size: 12px; cursor: pointer;"><input type="checkbox" class="form-check-input select-all-check" data-target="#department" style="cursor: pointer; width: 0.80rem; height: 0.80rem;"> Select All</label>
							</div>
							<select class="form-control select2" id="department" name="department_ids[]" multiple>
								@foreach($departments as $dept)
									<option value="{{ $dept->id }}" {{ in_array($dept->id, old('department_ids', [])) ? 'selected' : '' }}>{{ $dept->name }}</option>
								@endforeach
							</select>
							@error('department_ids')
								<div class="invalid-feedback d-block">{{ $message }}</div>
							@enderror
						</div>

						<div class="col-md-4 mb-1">
							<div class="d-flex justify-content-between align-items-center">
								<label for="designation" class="form-label mb-0">Designation</label>
								<label class="form-check-label" style="font-size: 12px; cursor: pointer;"><input type="checkbox" class="form-check-input select-all-check" data-target="#designation" style="cursor: pointer; width: 0.80rem; height: 0.80rem;"> Select All</label>
							</div>
							<select class="form-control select2" id="designation" name="designation_ids[]" multiple>
								@foreach($designations as $designation)
									<option value="{{ $designation->id }}" {{ in_array($designation->id, old('designation_ids', [])) ? 'selected' : '' }}>{{ $designation->name }}</option>
								@endforeach
							</select>
							@error('designation_ids')
								<div class="invalid-feedback d-block">{{ $message }}</div>
							@enderror
						</div>

						<div class="col-md-4 mb-1">
							<div class="d-flex justify-content-between align-items-center">
								<label for="grade" class="form-label mb-0">Grade</label>
								<label class="form-check-label" style="font-size: 12px; cursor: pointer;"><input type="checkbox" class="form-check-input select-all-check" data-target="#grade" style="cursor: pointer; width: 0.80rem; height: 0.80rem;"> Select All</label>
							</div>
							<select class="form-control select2" id="grade" name="grade_ids[]" multiple>
								@foreach($grades as $grade)
									<option value="{{ $grade->id }}" {{ in_array($grade->id, old('grade_ids', [])) ? 'selected' : '' }}>{{ $grade->name }}</option>
								@endforeach
							</select>
							@error('grade_ids')
								<div class="invalid-feedback d-block">{{ $message }}</div>
							@enderror
						</div>

						<div class="col-md-4 mb-1">
							<div class="d-flex justify-content-between align-items-center">
								<label for="location" class="form-label mb-0">Location</label>
								<label class="form-check-label" style="font-size: 12px; cursor: pointer;"><input type="checkbox" class="form-check-input select-all-check" data-target="#location" style="cursor: pointer; width: 0.80rem; height: 0.80rem;"> Select All</label>
							</div>
							<select class="form-control select2" id="location" name="location_ids[]" multiple>
								@foreach($locations as $location)
									<option value="{{ $location->id }}" {{ in_array($location->id, old('location_ids', [])) ? 'selected' : '' }}>{{ $location->name }}</option>
								@endforeach
							</select>
							@error('location_ids')
								<div class="invalid-feedback d-block">{{ $message }}</div>
							@enderror
						</div>
						<div class="col-md-4 mb-1">
							<label for="effective_from" class="form-label">Effective From <span class="text-danger">*</span></label>
							<input type="date" name="effective_from" id="effective_from" class="form-control" value="{{ old('effective_from') }}">
							@error('effective_from')
								<div class="invalid-feedback d-block">{{ $message }}</div>	
							@enderror
						</div>

						<div class="col-md-4 mb-1">
							<label for="template_id" class="form-label">Payroll Template <span class="text-danger">*</span></label>
							<select class="form-control select2" id="template_id" name="template_id">
								<option value="">-- Select Template --</option>
								@foreach($templates as $template)
									<option value="{{ $template->id }}" {{ old('template_id') == $template->id ? 'selected' : '' }}>{{ $template->name }}</option>
								@endforeach
							</select>
							@error('template_id')
								<div class="invalid-feedback d-block">{{ $message }}</div>
							@enderror
						</div>

						<div class="col-12 mb-1">
							<div class="d-flex justify-content-between align-items-center">
								<label for="employee" class="form-label mb-0">Employees</label>
								<label class="form-check-label" style="font-size: 12px; cursor: pointer;"><input type="checkbox" class="form-check-input select-all-check" data-target="#employee" style="cursor: pointer; width: 0.80rem; height: 0.80rem;"> Select All</label>
							</div>
							<select class="form-control select2" id="employee" name="employee_ids[]" multiple>
								@foreach($employees as $employee)
									<option value="{{ $employee->id }}" {{ in_array($employee->id, old('employee_ids', [])) ? 'selected' : '' }}>{{ $employee->name }} ({{ $employee->employee_code }})</option>
								@endforeach
							</select>
							@error('employee_ids')
								<div class="invalid-feedback d-block">{{ $message }}</div>
							@enderror
						</div>
					</div>

					<div class="row mt-3 pt-3 border-top">
						<div class="col-12 d-flex justify-content-end gap-2">
							<a href="{{ '/'.$alias.'/payroll/employee-template-assignment' }}" class="btn btn-outline-secondary">
								<i data-feather="x" style="width: 16px; height: 16px;"></i> Cancel
							</a>
							<button type="submit" class="btn btn-success" id="submit-btn">
								<i data-feather="check-circle" style="width: 16px; height: 16px;"></i> Assign Template
							</button>
						</div>
					</div>
				</form>

			</div>
		</div>
	</div>
</div>

@endsection

@push('footer-script')
	<!-- BEGIN: Page Vendor JS-->
	<script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
	<!-- END: Page Vendor JS-->

	<script>
		$(document).ready(function() {
			$('.select2').select2({
				allowClear: true,
				width: '100%'
			});

			// Select All checkbox handler
			$('.select-all-check').on('change', function() {
				var target = $(this).data('target');
				var $select = $(target);
				if ($(this).is(':checked')) {
					var allValues = [];
					$select.find('option').each(function() {
						if ($(this).val() !== '') {
							allValues.push($(this).val());
						}
					});
					$select.val(allValues).trigger('change');
				} else {
					$select.val(null).trigger('change');
				}
			});

			// Sync checkbox state when dropdown changes manually
			$('.select2').on('change', function() {
				var $check = $('.select-all-check[data-target="#' + $(this).attr('id') + '"]');
				if ($check.length) {
					var totalOptions = $(this).find('option').length;
					var selectedOptions = ($(this).val() || []).length;
					$check.prop('checked', totalOptions > 0 && selectedOptions === totalOptions);
				}
			});
		});
	</script>
@endpush