@extends('admin.layouts.layout')

@section('content')
<div class="mb-4">	
	<div class="title_area">
		<div class="d-flex align-items-center gap-2">
			<h3>All Employees</h3>
		</div>
		<div class="d-flex align-items-center gap-2 ms-auto">
			@if(isset($isSuperOrSubAdmin) && $isSuperOrSubAdmin && isset($tenants))
			<div class="d-flex align-items-center me-3">
				<label class="form-label mb-0 me-2 text-nowrap" style="font-size: 13px;">Tenant:</label>
				<select id="tenant-filter" class="form-select form-select-sm" style="min-width: 180px;">
					<option value="">All Tenants</option>
					@foreach($tenants as $tenant)
						<option value="{{ $tenant->id }}" {{ (isset($selectedTenantId) && $selectedTenantId == $tenant->id) ? 'selected' : '' }}>
							{{ $tenant->name }}
						</option>
					@endforeach
				</select>
			</div>
			@endif
			<div class="d-flex align-items-center">
				<div class="search_box">
					<input type="text" id="live-search-input" class="form-control" placeholder="Search..." value="{{ request('search_query') }}">
					<button class="btn btn_search" id="search-btn" type="button">
						<img src="{{ asset('images/search.svg') }}" alt="Search Icon" />
					</button>
				</div>
				<button class="btn btn-sm ms-2 reset-btn" id="clear-search" title="Reset Search" @if(!request('search_query')) style="display: none;" @endif>
					<img src="{{ asset('images/delete.svg') }}" alt="Clear" width="14" height="14" style="transform: rotate(45deg);" /> Clear
				</button>
			</div>

			<form id="multiple-delete-form" action="{{ route('employees.delete-multiple') }}" method="POST" style="display: none;">
				@csrf
				<input type="hidden" name="selected_ids" id="selected-ids-input">
			</form>

			<div class="contact_btns">
				@if($permission['create'])
				<a href="{{route($routePrefix . '.create')}}" class="add_btn btn"><img src="{{ asset('images/add.svg') }}" /> Add</a>
				@endif
				@if($permission['destroy'])
				<a href="javascript:void(0);" id="delete-selected" class="delete_btn btn"><img src="{{ asset('images/delete.svg') }}" /> Delete</a>
				@endif
			</div>
		</div>
	</div>
	<div class="table-responsive">
		<table class="table table-hover" id="employee-table">
			<thead>
				<tr>
					<th width="30"><input type="checkbox" class="form-check-input" id="select-all-employees" title="Select All Employees"></th>
					<th>Employee</th>
					<th>Tenant</th>
					<th>Mobile</th>
					<th>Email</th>
					<th>Status</th>
					<th>Actions</th>
				</tr>
			</thead>
			<tbody>
				@if(isset($data) && count($data) > 0)
					@foreach($data as $emp)
						<tr>
							<td width="30">
								@if($emp['role_title'] != 'Tenant Admin')
									<input type="checkbox" class="form-check-input employee-checkbox" value="{{ $emp['id'] }}" id="employee-{{ $emp['id'] }}">
								@endif
							</td>
							<td>
								<div class="d-flex align-items-center gap-2">
									@php
										$avatarThumb = isset($emp['avatar']['thumb'])
											? $emp['avatar']['thumb']
											: asset('img/200x200/no-profile.jpg');
									@endphp
									<img src="{{ $avatarThumb }}" alt="Employee Avatar" style="width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #dee2e6;">
									<div>
										<strong>{{ $emp['full_name'] ?? ($emp['first_name'] . ' ' . $emp['last_name']) }}</strong>
										@if(isset($emp['role_title']) && $emp['role_title'] == 'Tenant Admin')
											<br><span class="badge bg-warning text-dark" style="font-size: 10px;">{{ $emp['role_title'] }}</span>
										@endif
									</div>
								</div>
							</td>
							<td>
								<span class="badge bg-info text-white">{{ $emp['tenant_name'] ?? 'N/A' }}</span>
							</td>
							<td>
								{{ \App\Helpers\Helper::formatPhone($emp['phone'] ?? '') }}</td>
							<td><a href="mailto:{{ $emp['email'] ?? '' }}">{{ $emp['email'] ?? '' }}</a></td>
							<td>
								@if(isset($emp['status']) && $emp['status'] == 1)
									<span class="badge bg-success">Active</span>
								@elseif(isset($emp['status']) && $emp['status'] == 2)
									<span class="badge bg-danger">Blocked</span>
								@else
									<span class="badge bg-secondary">Inactive</span>
								@endif
							</td>
							<td>
								<div class="d-flex gap-2">
									@if($permission['show'])
									<a href="{{ route($routePrefix . '.show', $emp['id']) }}" class="btn btn_view" title="View">
										<img src="{{ asset('images/view.svg') }}" alt="View" />
									</a>
									@endif									
									<button type="button" class="btn btn_message btn-send-set-password" 
										data-user-id="{{ $emp['id'] }}" data-email="{{ $emp['email'] ?? '' }}" title="Send Set Password Email">
										<img src="{{ asset('images/message.svg') }}" />
									</button>									
									<a href="{{ route('service-pay-settings.index', ['user_id' => $emp['id']]) }}" class="btn d-none" title="Services & Pay">
										<img src="{{ asset('images/money.svg') }}" style="width: 25px;" />
									</a> 									
									<a href="javascript:void(0);" class="btn btn-availability d-none" title="Availability" onclick="openAvailabilityModal({{ $emp['id'] }}, '{{ $emp['full_name'] ?? ($emp['first_name'] . ' ' . $emp['last_name']) }}')">
										<img src="{{ asset('images/calendar.svg') }}" style="width: 20px;" />
									</a>									
									@if($permission['getWorkingHours'])
									<a href="javascript:void(0);" class="btn btn-working-hours" title="Working Hours" onclick="openWorkingHoursModal({{ $emp['id'] }}, '{{ $emp['full_name'] ?? ($emp['first_name'] . ' ' . $emp['last_name']) }}')">
										<i class="fas fa-clock" style="font-size: 18px; color: #6c757d;"></i>
									</a>
									@endif
									<a href="javascript:void(0);" class="btn btn-login-credentials" title="Login Credentials" onclick="openLoginModal({{ $emp['id'] }}, '{{ $emp['full_name'] ?? ($emp['first_name'] . ' ' . $emp['last_name']) }}')">
										<img src="{{ asset('images/user-lock.svg') }}" style="width: 20px;"/>
									</a>
									@if($permission['edit'])
									<a href="{{ route($routePrefix . '.edit', $emp['id']) }}" class="btn btn_edit" title="Edit">
										<img src="{{ asset('images/edit.svg') }}" />
									</a>
									@endif

									@if($permission['destroy'] && ($emp['role_title'] != 'Tenant Admin'))
									<a class="btn" data-toggle="tooltip" title="Delete" 
										data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" 
										data-confirm-yes="event.preventDefault(); document.getElementById('delete-form-{{$emp->id}}').submit();">
										<img src="{{ asset('images/delete_black.svg') }}" />
									</a>
									{!! html()->form('DELETE', route($routePrefix . '.destroy', $emp->id))->attributes(['style' => 'display:inline','id' => 'delete-form-' . $emp->id])->open() !!}
									{!! html()->form()->close() !!}
									@endif

									@if(isset($canBlockEmployees) && $canBlockEmployees && $emp['id'] != auth()->id())
											@if(isset($emp['status']) && $emp['status'] == 1)
											<button type="button" class="btn btn-sm btn-outline-danger btn-toggle-status" 
												data-user-id="{{ $emp['id'] }}" 
												data-status="2"
												data-name="{{ $emp['full_name'] ?? ($emp['first_name'] . ' ' . $emp['last_name']) }}"
												title="Block Employee">
												<i class="fas fa-user-slash"></i>
											</button>
											@else
											<button type="button" class="btn btn-sm btn-outline-success btn-toggle-status" 
												data-user-id="{{ $emp['id'] }}" 
												data-status="1"
												data-name="{{ $emp['full_name'] ?? ($emp['first_name'] . ' ' . $emp['last_name']) }}"
												title="Activate Employee">
												<i class="fas fa-user-check"></i>
											</button>
											@endif
									@endif
								</div>
							</td>
						</tr>
					@endforeach
				@else
					<tr><td colspan="7" class="text-center py-4 text-muted">No employees found.</td></tr>
				@endif
			</tbody>
		</table>
	</div>		
</div>
@include('admin.employees.availability_modal')
@include('admin.employees.login_modal')
@include('admin.employees.working_hours_modal')
@endsection



@push('page_script')
<script>
$(function(){
	const selectAll = $('#select-all-employees');
	const checkboxes = $('.employee-checkbox');
	const deleteBtn = $('#delete-selected');
	const form = $('#multiple-delete-form');
	const idsInput = $('#selected-ids-input');
	const searchInput = $('#live-search-input');
	const clearBtn = $('#clear-search');
	const table = $('#employee-table');
	const pagination = $('.pagination-container');
	
	// Tenant filter handler
	$('#tenant-filter').on('change', function() {
		const tenantId = $(this).val();
		const currentUrl = new URL(window.location.href);
		if (tenantId) {
			currentUrl.searchParams.set('tenant_id', tenantId);
		} else {
			currentUrl.searchParams.delete('tenant_id');
		}
		window.location.href = currentUrl.toString();
	});
	
	// Toggle employee status handler (Activate/Block)
	$(document).on('click', '.btn-toggle-status', function() {
		const btn = $(this);
		const userId = btn.data('user-id');
		const newStatus = btn.data('status');
		const empName = btn.data('name');
		const action = newStatus == 1 ? 'activate' : 'block';
		const actionText = newStatus == 1 ? 'Activate' : 'Block';
		const iconType = newStatus == 1 ? 'question' : 'warning';
		const confirmBtnColor = newStatus == 1 ? '#28a745' : '#dc3545';
		
		Swal.fire({
			title: `${actionText} Employee?`,
			text: `Are you sure you want to ${action} "${empName}"?`,
			icon: iconType,
			showCancelButton: true,
			confirmButtonColor: confirmBtnColor,
			cancelButtonColor: '#6c757d',
			confirmButtonText: `Yes, ${action}!`,
			cancelButtonText: 'Cancel'
		}).then((result) => {
			if (result.isConfirmed) {
				btn.prop('disabled', true);
				
				$.ajax({
					url: '{{ route("employees.toggle-status") }}',
					method: 'POST',
					data: {
						_token: '{{ csrf_token() }}',
						user_id: userId,
						status: newStatus
					},
					success: function(response) {
						if (response.success) {
							Swal.fire({
								title: 'Success!',
								text: response.message || `Employee ${action}ed successfully`,
								icon: 'success',
								timer: 2000,
								showConfirmButton: false
							}).then(() => {
								window.location.reload();
							});
						} else {
							Swal.fire('Error', response.message || `Failed to ${action} employee`, 'error');
							btn.prop('disabled', false);
						}
					},
					error: function(xhr) {
						const errorMsg = xhr.responseJSON?.message || `Failed to ${action} employee`;
						Swal.fire('Error', errorMsg, 'error');
						btn.prop('disabled', false);
					}
				});
			}
		});
	});

	function updateDeleteState(){
		if($('.employee-checkbox:checked').length){ 
			deleteBtn.addClass('active');
		} else { 
			deleteBtn.removeClass('active');
		}
	}

	selectAll.on('change', function(){ checkboxes.prop('checked', $(this).prop('checked')); updateDeleteState(); });
	checkboxes.on('change', function(){ if(!$(this).prop('checked')) selectAll.prop('checked', false); updateDeleteState(); });

	function filterLocal(term){
		term = term.toLowerCase();
		table.find('tbody tr.no-results').remove();
		if(term===''){ table.find('tbody tr').show(); clearBtn.hide(); pagination.show(); return; }
		clearBtn.show(); pagination.hide();
		let count=0;
		table.find('tbody tr').each(function(){
			const row=$(this); if(row.find('td[colspan]').length) { row.hide(); return; }
			const name=row.find('td:nth-child(2)').text().toLowerCase();
			const phone=row.find('td:nth-child(3)').text().toLowerCase();
			const email=row.find('td:nth-child(4)').text().toLowerCase();
			const status=row.find('td:nth-child(5)').text().toLowerCase();
			if(name.includes(term)||phone.includes(term)||email.includes(term)||status.includes(term)){ row.show(); count++; } else { row.hide(); }
		});
		if(count===0){ table.find('tbody').append('<tr class="no-results"><td colspan="6" class="text-center py-4 text-muted">No employees found matching "'+term+'"</td></tr>'); }
	}

	let timer;
	function remoteSearch(term){
		filterLocal(term);
		clearTimeout(timer);
		if(term.length < 2) return;
		timer = setTimeout(()=>{ $.get("{{ route('employees.search') }}", { search_query: term }); }, 300);
	}
	searchInput.on('input', function(){ remoteSearch($(this).val()); });
	clearBtn.on('click', function(){ searchInput.val(''); filterLocal(''); });

	deleteBtn.on('click', function(e){ 
		e.preventDefault();
		
		const selectedIds = [];
		$('.employee-checkbox:checked').each(function() {
			selectedIds.push($(this).val());
		});
		
		if (selectedIds.length === 0) {
			showNotification('warning', 'Please select at least one employee to delete.');
			return;
		}
		
		// Create confirmation message using the same format as agency delete
		Swal.fire({
			title: 'Are You Sure?',
			text: 'This action can not be undone. Do you want to continue?',
			icon: 'warning',
			showCancelButton: true,
			confirmButtonColor: '#3085d6',
			cancelButtonColor: '#d33',
			confirmButtonText: 'Yes, Sure!',
			cancelButtonText: 'Cancel',
			showClass: {
				popup: 'animate__animated animate__fadeInDown'
			},
			hideClass: {
				popup: 'animate__animated animate__fadeOutUp'
			}
		}).then((result) => {
			if (result.isConfirmed) {
				// Set the selected IDs in the hidden input
				idsInput.val(JSON.stringify(selectedIds));
				
				// Show loading indicator or message
				Swal.fire({
					title: 'Processing...',
					html: 'Deleting selected employees',
					allowOutsideClick: false,
					didOpen: () => {
						Swal.showLoading();
					}
				});
				
				// Submit the form
				form.submit();
			}
		});
	});
	
	updateDeleteState(); if(searchInput.val()) remoteSearch(searchInput.val());

	// Set Password Email Buttons
	const csrfToken = $('meta[name="csrf-token"]').attr('content');
	$('.btn-send-set-password').on('click', function(){
		const btn = $(this);
		const userId = btn.data('user-id');
		const email = btn.data('email');
		if(!email){
			Swal.fire('No Email','No email address available for this employee.','warning');
			return;
		}
		Swal.fire({
			title: 'Send Set Password Email?',
			text: 'An email with a link to set password will be sent to '+email+'.',
			icon: 'question',
			showCancelButton: true,
			confirmButtonText: 'Send',
			cancelButtonText: 'Cancel'
		}).then((result)=>{
			if(!result.isConfirmed) return;
			btn.prop('disabled', true);
			const originalHtml = btn.html();
			btn.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
			fetch(`/employees/${userId}/send-set-password`, {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json',
					'X-CSRF-TOKEN': csrfToken,
					'Accept': 'application/json'
				},
				body: JSON.stringify({})
			}).then(r => r.json())
			.then(res => {
				if(res.status === 200){
					Swal.fire('Email Sent','Set password email sent to '+email,'success');
				}else{
					Swal.fire('Failed', res.message || 'Failed to send email','error');
				}
			})
			.catch(err => {
				console.error(err);
				Swal.fire('Error','Unexpected error sending email','error');
			})
			.finally(()=>{
				btn.prop('disabled', false).html(originalHtml);
			});
		});
	});
});

// Availability Modal Functions
function openAvailabilityModal(employeeId, employeeName) {
	console.log('Opening availability modal for employee:', employeeId, employeeName);
	
	$('#employeeId').val(employeeId);
	$('#employeeName').text(employeeName);
	$('#availabilityRecords').html('<div class="text-center"><i class="fas fa-spinner fa-spin"></i> Loading...</div>');
	
	// Clear any existing status
	$('#availability-status').remove();
	
	$('#availabilityModal').modal('show');
	
	// Load availability data
	$.ajax({
		url: '{{ route("employees.availability.get", ":id") }}'.replace(':id', employeeId),
		method: 'GET',
		headers: {
			'X-CSRF-TOKEN': _token
		},
		success: function(response) {
			console.log('Availability data loaded:', response);
			if(response.status === 'success') {
				renderAvailabilityRecords(response.data);
			} else {
				$('#availabilityRecords').html('<div class="alert alert-danger">Failed to load availability data.</div>');
			}
		},
		error: function(xhr, status, error) {
			console.log('Error loading availability:', xhr.responseText);
			$('#availabilityRecords').html('<div class="alert alert-danger">Failed to load availability data.</div>');
		}
	});
}

function renderAvailabilityRecords(records) {
	let html = '';
	
	if (!records || records.length === 0) {
		// Default empty record
		html = `
			<div class="availability-record border rounded p-3">
				<div class="row">
					<div class="col-md-3">
						<label class="form-label">Availability Type</label>
						<select class="form-select" name="availability_type[]" readonly>
							<option value="by_day" selected>By Day</option>
						</select>
					</div>
					<div class="col-md-3">
						<label class="form-label">Start Time</label>
						<input type="time" class="form-control" name="start_time[]" value="09:00" readonly>
					</div>
					<div class="col-md-5">
						<label class="form-label">Days</label>
						<div class="days-selection d-flex justify-content-between">
							<div class="day-checkbox selected" data-day="0">
								<input type="checkbox" name="days_0[]" value="1" checked>
								<span>Su</span>
							</div>
							<div class="day-checkbox selected" data-day="1">
								<input type="checkbox" name="days_0[]" value="2" checked>
								<span>M</span>
							</div>
							<div class="day-checkbox selected" data-day="2">
								<input type="checkbox" name="days_0[]" value="4" checked>
								<span>T</span>
							</div>
							<div class="day-checkbox selected" data-day="3">
								<input type="checkbox" name="days_0[]" value="8" checked>
								<span>W</span>
							</div>
							<div class="day-checkbox selected" data-day="4">
								<input type="checkbox" name="days_0[]" value="16" checked>
								<span>Th</span>
							</div>
							<div class="day-checkbox selected" data-day="5">
								<input type="checkbox" name="days_0[]" value="32" checked>
								<span>F</span>
							</div>
							<div class="day-checkbox selected" data-day="6">
								<input type="checkbox" name="days_0[]" value="64" checked>
								<span>Sa</span>
							</div>
						</div>
					</div>
					<div class="col-md-1 text-right">
						<div class="dropdown mt-4">
							<button class="btn btn-link p-0" type="button" data-toggle="dropdown">
								<i class="fas fa-ellipsis-v"></i>
							</button>
							<div class="dropdown-menu">
								<a class="dropdown-item" href="#" onclick="addAvailabilityRecord()">Add Record</a>
								<a class="dropdown-item text-danger" href="#" onclick="removeAvailabilityRecord(this)">Remove</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		`;
	} else {
		// Render all records from database
		records.forEach(function(record, index) {
			const daysMask = record.days && record.days.length > 0 ? record.days[0] : 127; // Default to all days if no data
			
			html += `
				<div class="availability-record border rounded p-3" data-record-id="${record.id || ''}">
					<div class="row">
						<div class="col-md-3">
							<label class="form-label">Availability Type</label>
							<select class="form-select" name="availability_type[]" readonly>
								<option value="by_day" selected>By Day</option>
							</select>
						</div>
						<div class="col-md-3">
							<label class="form-label">Start Time</label>
							<input type="time" class="form-control" name="start_time[]" value="${record.start_time || '09:00'}" readonly>
						</div>
						<div class="col-md-5">
							<label class="form-label">Days</label>
							<div class="days-selection d-flex justify-content-between">
								<div class="day-checkbox ${daysMask & 1 ? 'selected' : ''}" data-day="0">
									<input type="checkbox" name="days_${index}[]" value="1" ${daysMask & 1 ? 'checked' : ''}>
									<span>Su</span>
								</div>
								<div class="day-checkbox ${daysMask & 2 ? 'selected' : ''}" data-day="1">
									<input type="checkbox" name="days_${index}[]" value="2" ${daysMask & 2 ? 'checked' : ''}>
									<span>M</span>
								</div>
								<div class="day-checkbox ${daysMask & 4 ? 'selected' : ''}" data-day="2">
									<input type="checkbox" name="days_${index}[]" value="4" ${daysMask & 4 ? 'checked' : ''}>
									<span>T</span>
								</div>
								<div class="day-checkbox ${daysMask & 8 ? 'selected' : ''}" data-day="3">
									<input type="checkbox" name="days_${index}[]" value="8" ${daysMask & 8 ? 'checked' : ''}>
									<span>W</span>
								</div>
								<div class="day-checkbox ${daysMask & 16 ? 'selected' : ''}" data-day="4">
									<input type="checkbox" name="days_${index}[]" value="16" ${daysMask & 16 ? 'checked' : ''}>
									<span>Th</span>
								</div>
								<div class="day-checkbox ${daysMask & 32 ? 'selected' : ''}" data-day="5">
									<input type="checkbox" name="days_${index}[]" value="32" ${daysMask & 32 ? 'checked' : ''}>
									<span>F</span>
								</div>
								<div class="day-checkbox ${daysMask & 64 ? 'selected' : ''}" data-day="6">
									<input type="checkbox" name="days_${index}[]" value="64" ${daysMask & 64 ? 'checked' : ''}>
									<span>Sa</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			`;
		});
	}
	
	$('#availabilityRecords').html(html);
	
	// Add click handlers for day checkboxes
	bindDayCheckboxEvents();
}

function bindDayCheckboxEvents() {
	$('.day-checkbox').off('click').on('click', function() {
		const checkbox = $(this).find('input[type="checkbox"]');
		const employeeId = $('#employeeId').val();
		const recordElement = $(this).closest('.availability-record');
		const recordId = recordElement.data('record-id') || null;
		const startTime = recordElement.find('input[name="start_time[]"]').val();
		
		// Toggle checkbox
		checkbox.prop('checked', !checkbox.prop('checked'));
		$(this).toggleClass('selected', checkbox.prop('checked'));
		
		// Get all selected days for this record
		const selectedDays = [];
		recordElement.find('input[type="checkbox"]:checked').each(function() {
			selectedDays.push(parseInt($(this).val()));
		});
		
		// Update availability immediately
		updateAvailabilityAjax(employeeId, recordId, startTime, selectedDays);
	});
}

function updateAvailabilityAjax(employeeId, recordId, startTime, selectedDays) {
	// Show loading indicator
	const loadingHtml = '<div class="text-center text-muted"><i class="fas fa-spinner fa-spin"></i> Updating...</div>';
	
	if (!$('#availability-status').length) {
		$('#availabilityRecords').prepend('<div id="availability-status"></div>');
	}
	
	$('#availability-status').html(loadingHtml);
	
	$.ajax({
		url: '{{ route("employees.availability.update", ":id") }}'.replace(':id', employeeId),
		method: 'POST',
		data: {
			_token: _token,
			record_id: recordId,
			start_time: startTime || '09:00',
			end_time: startTime || '09:00',
			days: selectedDays
		},
		success: function(response) {
			if(response.status === 'success') {
				$('#availability-status').html('<div class="alert alert-success alert-sm py-1 mb-2"><i class="fas fa-check"></i> Updated successfully</div>');
				
				// Update record ID if it was a new record
				if(response.record_id && !recordId) {
					$('.availability-record').last().attr('data-record-id', response.record_id);
				}
			} else {
				$('#availability-status').html('<div class="alert alert-danger alert-sm py-1 mb-2"><i class="fas fa-exclamation-triangle"></i> Update failed</div>');
			}
			
			// Hide status after 3 seconds
			setTimeout(function() {
				$('#availability-status').fadeOut();
			}, 3000);
		},
		error: function(xhr, status, error) {
			console.log('Error response:', xhr.responseJSON);
			$('#availability-status').html('<div class="alert alert-danger alert-sm py-1 mb-2"><i class="fas fa-exclamation-triangle"></i> Update failed</div>');
			
			// Hide status after 3 seconds
			setTimeout(function() {
				$('#availability-status').fadeOut();
			}, 3000);
		}
	});
}

function addAvailabilityRecord() {
	const recordCount = $('.availability-record').length;
	const newRecord = `
		<div class="availability-record border rounded p-3">
			<div class="row">
				<div class="col-md-3">
					<label class="form-label">Availability Type</label>
					<select class="form-select" name="availability_type[]" readonly>
						<option value="by_day" selected>By Day</option>
					</select>
				</div>
				<div class="col-md-3">
					<label class="form-label">Start Time</label>
					<input type="time" class="form-control" name="start_time[]" value="09:00" readonly>
				</div>
				<div class="col-md-5">
					<label class="form-label">Days</label>
					<div class="days-selection d-flex justify-content-between">
						<div class="day-checkbox selected" data-day="0">
							<input type="checkbox" name="days_${recordCount}[]" value="1" checked>
							<span>Su</span>
						</div>
						<div class="day-checkbox selected" data-day="1">
							<input type="checkbox" name="days_${recordCount}[]" value="2" checked>
							<span>M</span>
						</div>
						<div class="day-checkbox selected" data-day="2">
							<input type="checkbox" name="days_${recordCount}[]" value="4" checked>
							<span>T</span>
						</div>
						<div class="day-checkbox selected" data-day="3">
							<input type="checkbox" name="days_${recordCount}[]" value="8" checked>
							<span>W</span>
						</div>
						<div class="day-checkbox selected" data-day="4">
							<input type="checkbox" name="days_${recordCount}[]" value="16" checked>
							<span>Th</span>
						</div>
						<div class="day-checkbox selected" data-day="5">
							<input type="checkbox" name="days_${recordCount}[]" value="32" checked>
							<span>F</span>
						</div>
						<div class="day-checkbox selected" data-day="6">
							<input type="checkbox" name="days_${recordCount}[]" value="64" checked>
							<span>Sa</span>
						</div>
					</div>
				</div>
				<div class="col-md-1 text-right">
					<div class="dropdown mt-4">
						<button class="btn btn-link p-0" type="button" data-toggle="dropdown">
							<i class="fas fa-ellipsis-v"></i>
						</button>
						<div class="dropdown-menu">
							<a class="dropdown-item" href="#" onclick="addAvailabilityRecord()">Add Record</a>
							<a class="dropdown-item text-danger" href="#" onclick="removeAvailabilityRecord(this)">Remove</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	`;
	
	$('#availabilityRecords').append(newRecord);
	
	// Re-bind click handlers for new checkboxes
	bindDayCheckboxEvents();
	
	// Auto-save the new record with default values
	const employeeId = $('#employeeId').val();
	const defaultDays = [1, 2, 4, 8, 16, 32, 64]; // All days selected
	updateAvailabilityAjax(employeeId, null, '09:00', defaultDays);
}

function removeAvailabilityRecord(element) {
	if ($('.availability-record').length > 1) {
		$(element).closest('.availability-record').remove();
	} else {
		showNotification('error', 'At least one availability record is required');
	}
}

function showNotification(type, message) {
	// Use the global toastr-based notification function
	if (typeof toastr !== 'undefined') {
		toastr[type](message);
		toastr.options = {
			"closeButton": true,
			"debug": false,
			"newestOnTop": false,
			"progressBar": true,
			"positionClass": "toast-top-right",
			"preventDuplicates": false,
			"showDuration": 300,
			"hideDuration": 1000,
			"timeOut": 5000,
			"extendedTimeOut": 1000,
			"showEasing": "swing",
			"hideEasing": "linear",
			"showMethod": "fadeIn",
			"hideMethod": "fadeOut"
		};
	} else if (typeof Swal !== 'undefined') {
		// Fallback to SweetAlert
		Swal.fire('Error', message, 'error');
	} else {
		// Final fallback
		alert(message);
	}
}

// Initialize modal events when document is ready
$(document).ready(function() {
	// Ensure modal can be closed properly
	$('#availabilityModal').on('hidden.bs.modal', function () {
		// Clear modal content when closed
		$('#availabilityRecords').empty();
		$('#availability-status').remove();
	});
	
	// Handle close button clicks explicitly for both Bootstrap versions
	$(document).on('click', '[data-dismiss="modal"], [data-bs-dismiss="modal"]', function() {
		$(this).closest('.modal').modal('hide');
	});
	
	// Handle escape key
	$(document).on('keydown', function(e) {
		if (e.keyCode === 27) { // Escape key
			$('.modal.show').modal('hide');
		}
	});
	
	// Handle backdrop click
	$(document).on('click', '.modal', function(e) {
		if (e.target === this) {
			$(this).modal('hide');
		}
	});
	
	// Login Modal Events
	$('#loginModal').on('hidden.bs.modal', function () {
		// Clear form when closed
		$('#loginCredentialsForm')[0].reset();
		$('#login-status').empty();
	});
	
	// Password toggle functionality
	$('#togglePassword').on('click', function() {
		const passwordField = $('#password');
		const icon = $(this).find('i');
		
		if (passwordField.attr('type') === 'password') {
			passwordField.attr('type', 'text');
			icon.removeClass('fa-eye').addClass('fa-eye-slash');
		} else {
			passwordField.attr('type', 'password');
			icon.removeClass('fa-eye-slash').addClass('fa-eye');
		}
	});
	
	$('#toggleConfirmPassword').on('click', function() {
		const confirmField = $('#confirmPassword');
		const icon = $(this).find('i');
		
		if (confirmField.attr('type') === 'password') {
			confirmField.attr('type', 'text');
			icon.removeClass('fa-eye').addClass('fa-eye-slash');
		} else {
			confirmField.attr('type', 'password');
			icon.removeClass('fa-eye-slash').addClass('fa-eye');
		}
	});
	
	// Generate username
	$('#generateUsername').on('click', function() {
		const employeeId = $('#loginEmployeeId').val();
		if (employeeId) {
			const username = 'emp' + employeeId + Math.floor(Math.random() * 100);
			$('#username').val(username);
		}
	});
	
	// Generate password
	$('#generatePassword').on('click', function() {
		const password = generateRandomPassword();
		$('#password').val(password);
		$('#confirmPassword').val(password);
	});
	
	// Save login credentials
	$('#saveLoginCredentials').on('click', function() {
		saveLoginCredentials();
	});
});

// Login Modal Functions
function openLoginModal(employeeId, employeeName, userId) {
	console.log('Opening login modal for employee:', employeeId, employeeName, 'User ID:', userId);
	
	$('#loginEmployeeId').val(employeeId);
	$('#loginUserId').val(userId);
	$('#loginEmployeeName').text(employeeName);
	
	// Clear any existing status
	$('#login-status').empty();
	
	// Clear and disable autocomplete on form fields
	$('#loginCredentialsForm')[0].reset();
	$('#loginCredentialsForm input').attr('autocomplete', 'off');
	$('#password').attr('autocomplete', 'new-password');
	$('#confirmPassword').attr('autocomplete', 'new-password');
	
	// Load existing credentials
	loadEmployeeCredentials(employeeId);
	
	$('#loginModal').modal('show');
	
	// Additional autocomplete prevention after modal is shown
	setTimeout(function() {
		$('#password').val('').focus().blur();
		$('#confirmPassword').val('');
	}, 100);
}

function loadEmployeeCredentials(employeeId) {
	$.ajax({
		url: '{{ route("employees.credentials.get", ":id") }}'.replace(':id', employeeId),
		method: 'GET',
		headers: {
			'X-CSRF-TOKEN': _token
		},
		success: function(response) {
			if(response.status === 'success' && response.data) {
				$('#username').val(response.data.username || '');
				// Don't populate password for security reasons
			}
		},
		error: function(xhr, status, error) {
			console.log('Error loading credentials:', xhr.responseText);
		}
	});
}

function saveLoginCredentials() {
	const employeeId = $('#loginEmployeeId').val();
	const userId = $('#loginUserId').val();
	const username = $('#username').val().trim();
	const password = $('#password').val();
	const confirmPassword = $('#confirmPassword').val();
	
	// Clear previous status
	$('#login-status').empty();
	
	// Validation
	if (!username) {
		showLoginStatus('error', 'Username is required');
		return;
	}
	
	// Password validation - only if password is provided
	if (password || confirmPassword) {
		if (!password) {
			showLoginStatus('error', 'Password is required when changing password');
			return;
		}
		
		if (password !== confirmPassword) {
			showLoginStatus('error', 'Passwords do not match');
			return;
		}
		
		if (password.length < 6) {
			showLoginStatus('error', 'Password must be at least 6 characters long');
			return;
		}
	}
	
	// Show loading
	$('#saveLoginCredentials').prop('disabled', true).html('<i class="fas fa-spinner fa-spin mr-1"></i>Saving...');
	
	// Prepare data - only include password if provided
	const requestData = {
		_token: _token,
		username: username,
		user_id: userId
	};
	
	if (password) {
		requestData.password = password;
		requestData.password_confirmation = confirmPassword;
	}
	
	$.ajax({
		url: '{{ route("employees.credentials.update", ":id") }}'.replace(':id', employeeId),
		method: 'POST',
		data: requestData,
		success: function(response) {
			if(response.status === 'success') {
				showLoginStatus('success', 'Login credentials updated successfully');
				setTimeout(function() {
					$('#loginModal').modal('hide');
				}, 2000);
			} else {
				showLoginStatus('error', response.message || 'Failed to update credentials');
			}
		},
		error: function(xhr, status, error) {
			let message = 'Failed to update credentials';
			if (xhr.responseJSON && xhr.responseJSON.message) {
				message = xhr.responseJSON.message;
			} else if (xhr.responseJSON && xhr.responseJSON.errors) {
				message = Object.values(xhr.responseJSON.errors).flat().join(', ');
			}
			showLoginStatus('error', message);
		},
		complete: function() {
			$('#saveLoginCredentials').prop('disabled', false).html('<i class="fas fa-save mr-1"></i>Save Changes');
		}
	});
}

function showLoginStatus(type, message) {
	const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
	const iconClass = type === 'success' ? 'fa-check' : 'fa-exclamation-triangle';
	
	const html = `
		<div class="alert ${alertClass} alert-dismissible fade show" role="alert">
			<i class="fas ${iconClass} mr-1"></i>${message}
			<button type="button" class="close btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
		</div>
	`;
	
	$('#login-status').html(html);
}

function generateRandomPassword() {
	const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*';
	let password = '';
	for (let i = 0; i < 10; i++) {
		password += chars.charAt(Math.floor(Math.random() * chars.length));
	}
	return password;
}

</script>
@endpush