<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
    @hotelSettings
    <title>Add New Staff Member - {{ $hotelName ?? hotelName() }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-green: var(--primary-green, #1a936f);
            --secondary-green: var(--secondary-green, #88d498);
            --light-green: var(--light-green, #c6dabf);
            --dark-green: var(--dark-green, #114b5f);
            --accent: var(--accent, #f3e9d2);
            --font-family: var(--font-family, 'Segoe UI', sans-serif);
        }
        
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .navbar {
            background: linear-gradient(90deg, var(--dark-green) 0%, var(--primary-green) 100%);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .sidebar {
            background-color: white;
            box-shadow: 3px 0 10px rgba(0, 0, 0, 0.1);
            height: calc(100vh - 56px);
            position: fixed;
            top: 56px;
            padding: 15px;
            z-index: 1000;
            overflow-y: auto;
            width: 250px;
        }
        
        .sidebar .nav-link {
            color: #495057;
            padding: 15px 20px;
            border-left: 4px solid transparent;
            transition: all 0.3s;
        }
        
        .sidebar .nav-link:hover {
            background-color: #f8f9fa;
            border-left: 4px solid var(--secondary-green);
        }
        
        .sidebar .nav-link.active {
            background-color: var(--light-green);
            color: var(--dark-green);
            border-left: 4px solid var(--primary-green);
            font-weight: 600;
        }
        
        .sidebar .nav-link i {
            margin-right: 10px;
            color: var(--primary-green);
        }
        
        .main-content {
            margin-left: 150px;
            margin-right: 150px;
            padding: 20px;
            margin-top: 56px;
        }
        
        .dashboard-card {
            border-radius: 10px;
            transition: transform 0.3s, box-shadow 0.3s;
            border: none;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        }
        
        .dashboard-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .card-header {
            background: linear-gradient(90deg, var(--primary-green) 0%, var(--secondary-green) 100%);
            color: white;
            border-radius: 10px 10px 0 0 !important;
        }
        
        .bg-primary {
            background-color: var(--primary-green) !important;
        }
        
        .text-primary {
            color: var(--primary-green) !important;
        }
        
        .btn-primary {
            background-color: var(--primary-green);
            border-color: var(--primary-green);
        }
        
        .btn-primary:hover {
            background-color: var(--dark-green);
            border-color: var(--dark-green);
        }
        
        .btn-outline-primary {
            color: var(--primary-green);
            border-color: var(--primary-green);
        }
        
        .btn-outline-primary:hover {
            background-color: var(--primary-green);
            color: white;
        }
        
        .btn-outline-secondary {
            color: #6c757d;
            border-color: #6c757d;
        }
        
        .btn-outline-secondary:hover {
            background-color: #6c757d;
            color: white;
        }
        
        .form-control:focus, .form-select:focus {
            border-color: var(--primary-green);
            box-shadow: 0 0 0 0.2rem rgba(26, 147, 111, 0.25);
        }
        
        .form-label {
            font-weight: 500;
            color: var(--dark-green);
        }
        
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }
        
        .page-title {
            font-size: 28px;
            font-weight: 700;
            color: var(--dark-green);
            margin-bottom: 4px;
        }
        
        .page-subtitle {
            color: #6c757d;
            font-size: 14px;
            margin: 0;
        }
        
        .alert {
            border-radius: 10px;
            border: none;
        }
        
        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--light-green);
        }
        
        .section-header h6 {
            margin: 0;
        }
        
        .form-section {
            background-color: #f9f9f9;
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            border-left: 4px solid var(--primary-green);
        }
        
        .next-of-kin-section {
            background-color: #fff;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        .required::after {
            content: " *";
            color: #dc3545;
        }
        
        .info-icon {
            color: var(--primary-green);
            margin-left: 5px;
            cursor: help;
        }
        
        .step-indicator {
            display: flex;
            justify-content: space-between;
            margin-bottom: 2rem;
            position: relative;
        }
        
        .step-indicator::before {
            content: '';
            position: absolute;
            top: 20px;
            left: 0;
            right: 0;
            height: 2px;
            background-color: #dee2e6;
            z-index: 1;
        }
        
        .step {
            position: relative;
            z-index: 2;
            text-align: center;
            flex: 1;
        }
        
        .step-number {
            width: 40px;
            height: 40px;
            background-color: white;
            border: 2px solid #dee2e6;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
            font-weight: bold;
            color: #6c757d;
        }
        
        .step.active .step-number {
            background-color: var(--primary-green);
            border-color: var(--primary-green);
            color: white;
        }
        
        .step-label {
            font-size: 0.875rem;
            color: #6c757d;
        }
        
        .step.active .step-label {
            color: var(--primary-green);
            font-weight: 500;
        }
        
        @media (max-width: 768px) {
            .sidebar {
                width: 100%;
                position: relative;
                height: auto;
                top: 0;
            }
            
            .main-content {
                margin-left: 0;
            }
            
            .page-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
            }
            
            .step-indicator {
                flex-wrap: wrap;
            }
            
            .step {
                flex: 0 0 50%;
                margin-bottom: 1rem;
            }
        }
    </style>
</head>
<body>
    <!-- Navbar -->
   
    <!-- Main Content -->
    <div class="main-content">
        <div class="page-header">
            <div class="header-content">
                <h1 class="page-title">Add New Staff Member</h1>
                <p class="page-subtitle">Complete all required information for new staff employment</p>
            </div>
            <a href="{{ route('staff.index') }}" class="btn btn-outline-primary">
                <i class="fas fa-arrow-left me-2"></i>Back to Staff List
            </a>
        </div>

        <!-- Progress Steps -->
        <div class="step-indicator">
            <div class="step active">
                <div class="step-number">1</div>
                <div class="step-label">Personal Info</div>
            </div>
            <div class="step">
                <div class="step-number">2</div>
                <div class="step-label">Employment</div>
            </div>
            <div class="step">
                <div class="step-number">3</div>
                <div class="step-label">Financial</div>
            </div>
            <div class="step">
                <div class="step-number">4</div>
                <div class="step-label">Next of Kin</div>
            </div>
        </div>

        <!-- Display Success/Error Messages -->
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle me-2"></i>
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-circle me-2"></i>
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="card shadow mb-4 dashboard-card">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold"><i class="fas fa-user-plus me-2"></i>Staff Registration Form</h6>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('staff.store') }}" id="staffForm" novalidate>
                    @csrf
                    
                    <!-- SECTION 1: Personal Information -->
                    <div class="form-section">
                        <div class="section-header">
                            <h6 class="fw-bold text-primary mb-0"><i class="fas fa-user me-2"></i>Personal Information</h6>
                            <span class="badge bg-light text-dark">Step 1 of 4</span>
                        </div>
                        
                        <div class="row">
                            <!-- Name Fields -->
                            <div class="col-md-4">
                                <div class="form-group mb-3">
                                    <label for="first_name" class="form-label required">First Name</label>
                                    <input type="text" class="form-control @error('first_name') is-invalid @enderror" 
                                           id="first_name" name="first_name" value="{{ old('first_name') }}" required
                                           placeholder="Enter first name">
                                    @error('first_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="form-group mb-3">
                                    <label for="middle_name" class="form-label">Middle Name</label>
                                    <input type="text" class="form-control @error('middle_name') is-invalid @enderror" 
                                           id="middle_name" name="middle_name" value="{{ old('middle_name') }}"
                                           placeholder="Enter middle name">
                                    @error('middle_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="form-group mb-3">
                                    <label for="last_name" class="form-label required">Last Name</label>
                                    <input type="text" class="form-control @error('last_name') is-invalid @enderror" 
                                           id="last_name" name="last_name" value="{{ old('last_name') }}" required
                                           placeholder="Enter last name">
                                    @error('last_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <!-- Contact Information -->
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="email" class="form-label required">Email Address</label>
                                    <input type="email" class="form-control @error('email') is-invalid @enderror" 
                                           id="email" name="email" value="{{ old('email') }}" required
                                           placeholder="Enter email address">
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="phone" class="form-label required">Phone Number</label>
                                    <input type="text" class="form-control @error('phone') is-invalid @enderror" 
                                           id="phone" name="phone" value="{{ old('phone') }}" required
                                           placeholder="Enter phone number">
                                    @error('phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <!-- Identification Numbers -->
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="nin" class="form-label">National ID Number (NIN)</label>
                                    <input type="text" class="form-control @error('nin') is-invalid @enderror" 
                                           id="nin" name="nin" value="{{ old('nin') }}"
                                           placeholder="Enter NIN">
                                    <small class="text-muted">Format: CM123456789ABCD</small>
                                    @error('nin')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="date_of_birth" class="form-label required">Date of Birth</label>
                                    <input type="date" class="form-control @error('date_of_birth') is-invalid @enderror" 
                                           id="date_of_birth" name="date_of_birth" value="{{ old('date_of_birth') }}" required>
                                    @error('date_of_birth')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="gender" class="form-label">Gender</label>
                                    <select class="form-control @error('gender') is-invalid @enderror" id="gender" name="gender">
                                        <option value="">Select Gender</option>
                                        <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>Male</option>
                                        <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>Female</option>
                                        <option value="other" {{ old('gender') == 'other' ? 'selected' : '' }}>Other</option>
                                    </select>
                                    @error('gender')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <!-- Residence Details -->
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label for="residence" class="form-label required">Current Residence</label>
                                    <textarea class="form-control @error('residence') is-invalid @enderror" 
                                              id="residence" name="residence" rows="2" required
                                              placeholder="Enter full residential address">{{ old('residence') }}</textarea>
                                    @error('residence')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- SECTION 2: Employment Information -->
                    <div class="form-section">
                        <div class="section-header">
                            <h6 class="fw-bold text-primary mb-0"><i class="fas fa-briefcase me-2"></i>Employment Information</h6>
                            <span class="badge bg-light text-dark">Step 2 of 4</span>
                        </div>
                        
                        <div class="row">
                            <!-- Employee ID and Hire Date -->
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="employee_id" class="form-label">Employee ID</label>
                                    <input type="text" class="form-control @error('employee_id') is-invalid @enderror" 
                                           id="employee_id" name="employee_id" value="{{ old('employee_id') }}"
                                           placeholder="Leave blank for {{ $nextEmployeeId ?? 'EMP1001' }} (auto)">
                                    <small class="text-muted">Next automatic ID: <strong>{{ $nextEmployeeId ?? '—' }}</strong>. Leave the field empty to assign it.</small>
                                    @error('employee_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="hire_date" class="form-label required">Hire Date</label>
                                    <input type="date" class="form-control @error('hire_date') is-invalid @enderror" 
                                           id="hire_date" name="hire_date" value="{{ old('hire_date', date('Y-m-d')) }}" required>
                                    @error('hire_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <!-- Department and Position -->
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="department_id" class="form-label required">Department</label>
                                    <select class="form-control @error('department_id') is-invalid @enderror" 
                                            id="department_id" name="department_id" required>
                                        <option value="">Select Department</option>
                                        @foreach($departments as $department)
                                            <option value="{{ $department->id }}" {{ old('department_id') == $department->id ? 'selected' : '' }}>
                                                {{ $department->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('department_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="position_id" class="form-label required">Position</label>
                                    <select class="form-control @error('position_id') is-invalid @enderror" 
                                            id="position_id" name="position_id" required>
                                        <option value="">Select Position</option>
                                        @foreach($positions as $position)
                                            <option value="{{ $position->id }}" {{ old('position_id') == $position->id ? 'selected' : '' }}>
                                                {{ $position->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('position_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <!-- Salary and Status -->
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="salary" class="form-label required">Monthly Salary ({{ $currencySymbol ?? 'UGX' }})</label>
                                    <input type="number" step="0.01" class="form-control @error('salary') is-invalid @enderror" 
                                           id="salary" name="salary" value="{{ old('salary') }}" required
                                           placeholder="0.00">
                                    @error('salary')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="status" class="form-label required">Employment Status</label>
                                    <select class="form-control @error('status') is-invalid @enderror" 
                                            id="status" name="status" required>
                                        <option value="">Select Status</option>
                                        <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>Active</option>
                                        <option value="probation" {{ old('status') == 'probation' ? 'selected' : '' }}>Probation</option>
                                        <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                                        <option value="suspended" {{ old('status') == 'suspended' ? 'selected' : '' }}>Suspended</option>
                                        <option value="terminated" {{ old('status') == 'terminated' ? 'selected' : '' }}>Terminated</option>
                                    </select>
                                    @error('status')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- SECTION 3: Financial Information -->
                    <div class="form-section">
                        <div class="section-header">
                            <h6 class="fw-bold text-primary mb-0"><i class="fas fa-file-invoice-dollar me-2"></i>Financial Information</h6>
                            <span class="badge bg-light text-dark">Step 3 of 4</span>
                        </div>
                        
                        <div class="row">
                            <!-- Tax Information -->
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="tin_number" class="form-label">TIN Number</label>
                                    <input type="text" class="form-control @error('tin_number') is-invalid @enderror" 
                                           id="tin_number" name="tin_number" value="{{ old('tin_number') }}"
                                           placeholder="Enter TIN number">
                                    <small class="text-muted">Tax Identification Number</small>
                                    @error('tin_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="nssf_number" class="form-label">NSSF Number</label>
                                    <input type="text" class="form-control @error('nssf_number') is-invalid @enderror" 
                                           id="nssf_number" name="nssf_number" value="{{ old('nssf_number') }}"
                                           placeholder="Enter NSSF number">
                                    <small class="text-muted">National Social Security Fund</small>
                                    @error('nssf_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <!-- Bank Details -->
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="bank_name" class="form-label">Bank Name</label>
                                    <select class="form-control @error('bank_name') is-invalid @enderror" 
                                            id="bank_name" name="bank_name">
                                        <option value="">Select Bank</option>
                                        <option value="Stanbic Bank" {{ old('bank_name') == 'Stanbic Bank' ? 'selected' : '' }}>Stanbic Bank</option>
                                        <option value="Standard Chartered" {{ old('bank_name') == 'Standard Chartered' ? 'selected' : '' }}>Standard Chartered</option>
                                        <option value="Centenary Bank" {{ old('bank_name') == 'Centenary Bank' ? 'selected' : '' }}>Centenary Bank</option>
                                        <option value="DFCU Bank" {{ old('bank_name') == 'DFCU Bank' ? 'selected' : '' }}>DFCU Bank</option>
                                        <option value="Bank of Africa" {{ old('bank_name') == 'Bank of Africa' ? 'selected' : '' }}>Bank of Africa</option>
                                        <option value="Equity Bank" {{ old('bank_name') == 'Equity Bank' ? 'selected' : '' }}>Equity Bank</option>
                                        <option value="Absa Bank" {{ old('bank_name') == 'Absa Bank' ? 'selected' : '' }}>Absa Bank</option>
                                        <option value="PostBank" {{ old('bank_name') == 'PostBank' ? 'selected' : '' }}>PostBank</option>
                                        <option value="Other" {{ old('bank_name') == 'Other' ? 'selected' : '' }}>Other</option>
                                    </select>
                                    @error('bank_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="bank_account" class="form-label">Bank Account Number</label>
                                    <input type="text" class="form-control @error('bank_account') is-invalid @enderror" 
                                           id="bank_account" name="bank_account" value="{{ old('bank_account') }}"
                                           placeholder="Enter account number">
                                    @error('bank_account')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- SECTION 4: Next of Kin Information -->
                    <div class="next-of-kin-section">
                        <div class="section-header">
                            <h6 class="fw-bold text-primary mb-0"><i class="fas fa-users me-2"></i>Next of Kin Information</h6>
                            <span class="badge bg-light text-dark">Step 4 of 4</span>
                        </div>
                        
                        <div class="row">
                            <!-- Next of Kin Details -->
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="next_of_kin_name" class="form-label">Full Name</label>
                                    <input type="text" class="form-control @error('next_of_kin_name') is-invalid @enderror" 
                                           id="next_of_kin_name" name="next_of_kin_name" value="{{ old('next_of_kin_name') }}"
                                           placeholder="Enter next of kin's full name">
                                    @error('next_of_kin_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="next_of_kin_relationship" class="form-label">Relationship</label>
                                    <select class="form-control @error('next_of_kin_relationship') is-invalid @enderror" 
                                            id="next_of_kin_relationship" name="next_of_kin_relationship">
                                        <option value="">Select Relationship</option>
                                        <option value="Spouse" {{ old('next_of_kin_relationship') == 'Spouse' ? 'selected' : '' }}>Spouse</option>
                                        <option value="Parent" {{ old('next_of_kin_relationship') == 'Parent' ? 'selected' : '' }}>Parent</option>
                                        <option value="Child" {{ old('next_of_kin_relationship') == 'Child' ? 'selected' : '' }}>Child</option>
                                        <option value="Sibling" {{ old('next_of_kin_relationship') == 'Sibling' ? 'selected' : '' }}>Sibling</option>
                                        <option value="Other Relative" {{ old('next_of_kin_relationship') == 'Other Relative' ? 'selected' : '' }}>Other Relative</option>
                                    </select>
                                    @error('next_of_kin_relationship')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <!-- Next of Kin Contact -->
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="next_of_kin_phone" class="form-label">Phone Number</label>
                                    <input type="text" class="form-control @error('next_of_kin_phone') is-invalid @enderror" 
                                           id="next_of_kin_phone" name="next_of_kin_phone" value="{{ old('next_of_kin_phone') }}"
                                           placeholder="Enter phone number">
                                    @error('next_of_kin_phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="next_of_kin_address" class="form-label">Address</label>
                                    <input type="text" class="form-control @error('next_of_kin_address') is-invalid @enderror" 
                                           id="next_of_kin_address" name="next_of_kin_address" value="{{ old('next_of_kin_address') }}"
                                           placeholder="Enter full address">
                                    @error('next_of_kin_address')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group mb-3">
                                    <label for="emergency_contact_name" class="form-label">Emergency contact name</label>
                                    <input type="text" class="form-control @error('emergency_contact_name') is-invalid @enderror"
                                           id="emergency_contact_name" name="emergency_contact_name" value="{{ old('emergency_contact_name') }}"
                                           placeholder="Name">
                                    @error('emergency_contact_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group mb-3">
                                    <label for="emergency_contact_phone" class="form-label">Emergency contact phone</label>
                                    <input type="text" class="form-control @error('emergency_contact_phone') is-invalid @enderror"
                                           id="emergency_contact_phone" name="emergency_contact_phone" value="{{ old('emergency_contact_phone') }}"
                                           placeholder="Phone">
                                    @error('emergency_contact_phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group mb-3">
                                    <label for="emergency_contact_relationship" class="form-label">Relationship</label>
                                    <input type="text" class="form-control @error('emergency_contact_relationship') is-invalid @enderror"
                                           id="emergency_contact_relationship" name="emergency_contact_relationship" value="{{ old('emergency_contact_relationship') }}"
                                           placeholder="e.g. Spouse">
                                    @error('emergency_contact_relationship')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Additional Information -->
                    <div class="form-section">
                        <div class="section-header">
                            <h6 class="fw-bold text-primary mb-0"><i class="fas fa-info-circle me-2"></i>Additional Information</h6>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="service_specialization" class="form-label">Service specialization</label>
                                    <input type="text" class="form-control @error('service_specialization') is-invalid @enderror"
                                           id="service_specialization" name="service_specialization" value="{{ old('service_specialization') }}"
                                           placeholder="e.g. Front desk, Housekeeping">
                                    @error('service_specialization')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label for="max_assignments" class="form-label">Max assignments</label>
                                    <input type="number" class="form-control @error('max_assignments') is-invalid @enderror"
                                           id="max_assignments" name="max_assignments" min="1" value="{{ old('max_assignments') }}"
                                           placeholder="Optional">
                                    @error('max_assignments')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="is_available" name="is_available" value="1"
                                       {{ old('is_available') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_available">Currently available for assignments</label>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label for="additional_notes" class="form-label">Additional Notes</label>
                                    <textarea class="form-control @error('additional_notes') is-invalid @enderror" 
                                              id="additional_notes" name="additional_notes" rows="3"
                                              placeholder="Any additional information about the staff member">{{ old('additional_notes') }}</textarea>
                                    @error('additional_notes')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Form Actions -->
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <span class="text-muted">
                                        <i class="fas fa-info-circle me-1"></i>
                                        Fields marked with <span class="text-danger">*</span> are required
                                    </span>
                                </div>
                                <div>
                                    <button type="submit" class="btn btn-primary" id="submitBtn">
                                        <i class="fas fa-save me-2"></i>Register Staff Member
                                    </button>
                                    <a href="{{ route('staff.index') }}" class="btn btn-outline-secondary">
                                        <i class="fas fa-times me-2"></i>Cancel
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('staffForm');
            const submitBtn = document.getElementById('submitBtn');

            // Function to validate NIN format
            function validateNIN(nin) {
                // NIN format validation (example: CM123456789ABCD)
                const ninRegex = /^[A-Z]{2}\d{9}[A-Z]{3,4}$/;
                return ninRegex.test(nin.toUpperCase());
            }

            // Function to validate TIN format
            function validateTIN(tin) {
                // TIN format validation (example: 123456789)
                const tinRegex = /^\d{9}$/;
                return tinRegex.test(tin);
            }

            // Function to validate phone number
            function validatePhone(phone) {
                const phoneRegex = /^\+?[\d\s\-()]{10,15}$/;
                return phoneRegex.test(phone);
            }

            // Real-time validation
            const ninInput = document.getElementById('nin');
            if (ninInput) {
                ninInput.addEventListener('blur', function() {
                    if (this.value && !validateNIN(this.value)) {
                        this.classList.add('is-invalid');
                        const feedback = this.nextElementSibling;
                        if (feedback && feedback.classList.contains('text-muted')) {
                            feedback.style.color = '#dc3545';
                        }
                    } else {
                        this.classList.remove('is-invalid');
                    }
                });
            }

            const tinInput = document.getElementById('tin_number');
            if (tinInput) {
                tinInput.addEventListener('blur', function() {
                    if (this.value && !validateTIN(this.value)) {
                        this.classList.add('is-invalid');
                    } else {
                        this.classList.remove('is-invalid');
                    }
                });
            }

            const phoneInput = document.getElementById('phone');
            if (phoneInput) {
                phoneInput.addEventListener('blur', function() {
                    if (this.value && !validatePhone(this.value)) {
                        this.classList.add('is-invalid');
                    } else {
                        this.classList.remove('is-invalid');
                    }
                });
            }

            form.addEventListener('submit', function(e) {
                // Light checks only — server validates; strict NIN/TIN formats are not enforced here
                const coreIds = ['first_name', 'last_name', 'email', 'phone', 'department_id', 'position_id', 'hire_date', 'salary', 'status', 'date_of_birth', 'residence'];
                let isValid = true;
                coreIds.forEach(id => {
                    const el = document.getElementById(id);
                    if (!el) return;
                    if (id === 'salary') {
                        if (el.value === '' || el.value === null || Number(el.value) < 0) {
                            isValid = false;
                            el.classList.add('is-invalid');
                        } else {
                            el.classList.remove('is-invalid');
                        }
                        return;
                    }
                    const v = (el.value || '').toString().trim();
                    if (!v) {
                        isValid = false;
                        el.classList.add('is-invalid');
                    } else {
                        el.classList.remove('is-invalid');
                    }
                });

                const dobInput = document.getElementById('date_of_birth');
                if (dobInput && dobInput.value) {
                    const dob = new Date(dobInput.value);
                    const today = new Date();
                    let age = today.getFullYear() - dob.getFullYear();
                    const m = today.getMonth() - dob.getMonth();
                    if (m < 0 || (m === 0 && today.getDate() < dob.getDate())) age--;
                    if (age < 18) {
                        isValid = false;
                        dobInput.classList.add('is-invalid');
                        alert('Staff member must be at least 18 years old.');
                    }
                }

                if (ninInput && ninInput.value && !validateNIN(ninInput.value)) {
                    ninInput.classList.add('is-invalid');
                    if (!confirm('National ID format may be invalid. Submit anyway?')) {
                        e.preventDefault();
                        return;
                    }
                }
                if (tinInput && tinInput.value && !validateTIN(tinInput.value)) {
                    tinInput.classList.add('is-invalid');
                    if (!confirm('TIN is usually 9 digits. Submit anyway?')) {
                        e.preventDefault();
                        return;
                    }
                }

                if (!isValid) {
                    e.preventDefault();
                    const firstError = form.querySelector('.is-invalid');
                    if (firstError) {
                        firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                        firstError.focus();
                    }
                    return;
                }

                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Processing...';
            });

            // Real-time validation for all inputs
            const inputs = form.querySelectorAll('input, select, textarea');
            inputs.forEach(input => {
                input.addEventListener('blur', function() {
                    if (this.hasAttribute('required') && !this.value.trim()) {
                        this.classList.add('is-invalid');
                    } else {
                        this.classList.remove('is-invalid');
                    }
                });

                input.addEventListener('input', function() {
                    if (this.value.trim()) {
                        this.classList.remove('is-invalid');
                    }
                });
            });

            // Set default hire date to today if not set
            const hireDateInput = document.getElementById('hire_date');
            if (hireDateInput && !hireDateInput.value) {
                hireDateInput.value = new Date().toISOString().split('T')[0];
            }

            // Format currency input
            const salaryInput = document.getElementById('salary');
            if (salaryInput) {
                salaryInput.addEventListener('blur', function() {
                    if (this.value) {
                        const value = parseFloat(this.value).toFixed(2);
                        this.value = value;
                    }
                });
            }

            // Step indicator update on scroll
            const sections = document.querySelectorAll('.form-section, .next-of-kin-section');
            const steps = document.querySelectorAll('.step');
            
            function updateStepIndicator() {
                let currentStep = 0;
                
                sections.forEach((section, index) => {
                    const rect = section.getBoundingClientRect();
                    if (rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2) {
                        currentStep = index + 1;
                    }
                });
                
                steps.forEach((step, index) => {
                    if (index < currentStep) {
                        step.classList.add('active');
                    } else {
                        step.classList.remove('active');
                    }
                });
            }
            
            // Update step indicator on scroll
            window.addEventListener('scroll', updateStepIndicator);
            updateStepIndicator(); // Initial call
        });
    </script>
    
<script src="{{ asset('js/theme-applier.js') }}"></script>
</body>
</html>

