@extends('jobseeker.wizard.layout')

@section('wizard-step')
<div class="step-header" style="margin-bottom: 2rem;">
  <span class="section-badge" style="margin-bottom: 0.5rem;"><i class="fas fa-map-marker-alt"></i> Domicile & Placement Matching</span>
  <h2 style="font-size: 1.5rem; font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); margin: 0 0 0.5rem;">
    Step 4: Residential Address & Employment Preferences
  </h2>
  <p style="color: var(--text-light); font-size: 0.92rem; margin: 0;">
    Under the Maharashtra Employment Service regulations, candidates are registered with their respective District Employment Exchange. Specify your residential address and career placement preferences.
  </p>
</div>

<form action="{{ route('jobseeker.wizard.save-step4') }}" method="POST" class="wizard-step-form" id="step4Form">
  @csrf

  <!-- Section A: Permanent / Residential Address -->
  <h3 style="font-size: 1.15rem; font-family: var(--font-heading); color: var(--text-heading); margin-bottom: 1rem; border-bottom: 1px solid var(--border-light); padding-bottom: 0.5rem;">
    <i class="fas fa-home" style="color: var(--accent); margin-right: 0.4rem;"></i> Residential Domicile Address
  </h3>

  <div class="form-group" style="margin-bottom: 1.25rem;">
    <label for="address_line" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
      Full Street / House Address <span style="color: #ef4444;">*</span>
    </label>
    <textarea name="address_line" 
              id="address_line" 
              class="form-control" 
              rows="2" 
              placeholder="e.g. Flat 302, Sai Vihar Apartment, Sitabuldi" 
              required>{{ old('address_line', $profile->address_line) }}</textarea>
    @error('address_line')
      <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
    @enderror
  </div>

  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem;">
    
    <!-- State -->
    <div class="form-group">
      <label for="state" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
        State <span style="color: #ef4444;">*</span>
      </label>
      <input type="text" 
             name="state" 
             id="state" 
             class="form-control" 
             value="{{ old('state', $profile->state ?? 'Maharashtra') }}" 
             readonly 
             style="background: var(--bg-surface);">
    </div>

    <!-- District -->
    <div class="form-group">
      <label for="district" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
        District (Maharashtra) <span style="color: #ef4444;">*</span>
      </label>
      <select name="district" id="district" class="form-control" required>
        <option value="">-- Select Your District --</option>
        @foreach($districts as $d)
          <option value="{{ $d->name }}" {{ old('district', $profile->district ?? $user->assigned_district) === $d->name ? 'selected' : '' }}>
            {{ $d->name }} ({{ $d->division }} Div)
          </option>
        @endforeach
      </select>
      @error('district')
        <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
      @enderror
    </div>

    <!-- Taluka -->
    <div class="form-group">
      <label for="taluka" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
        Taluka / Tehsil <span style="color: #ef4444;">*</span>
      </label>
      <input type="text" 
             name="taluka" 
             id="taluka" 
             class="form-control" 
             placeholder="e.g. Nagpur Urban / Haveli" 
             value="{{ old('taluka', $profile->taluka) }}" 
             required>
      @error('taluka')
        <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
      @enderror
    </div>

  </div>

  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-bottom: 2rem;">
    
    <!-- PIN Code -->
    <div class="form-group">
      <label for="pincode" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
        6-Digit Postal PIN Code <span style="color: #ef4444;">*</span>
      </label>
      <input type="text" 
             name="pincode" 
             id="pincode" 
             class="form-control" 
             placeholder="440012" 
             maxlength="6" 
             value="{{ old('pincode', $profile->pincode) }}" 
             required>
      @error('pincode')
        <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
      @enderror
    </div>

    <!-- Alternate Mobile -->
    <div class="form-group">
      <label for="alternate_mobile" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
        Alternate Mobile (Optional)
      </label>
      <input type="text" 
             name="alternate_mobile" 
             id="alternate_mobile" 
             class="form-control" 
             placeholder="9876543210" 
             maxlength="10" 
             value="{{ old('alternate_mobile', $profile->alternate_mobile) }}">
      @error('alternate_mobile')
        <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
      @enderror
    </div>

  </div>

  <!-- Section B: Career & Placement Preferences -->
  <h3 style="font-size: 1.15rem; font-family: var(--font-heading); color: var(--text-heading); margin-bottom: 1rem; border-bottom: 1px solid var(--border-light); padding-bottom: 0.5rem;">
    <i class="fas fa-briefcase" style="color: var(--accent); margin-right: 0.4rem;"></i> Employment & Placement Preferences
  </h3>

  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem;">
    
    <!-- Preferred District -->
    <div class="form-group">
      <label for="preferred_district" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
        Preferred Working District <span style="color: #ef4444;">*</span>
      </label>
      <select name="preferred_district" id="preferred_district" class="form-control" required>
        <option value="">-- Select Preferred District --</option>
        <option value="Anywhere in Maharashtra" {{ old('preferred_district', $profile->preferred_district) === 'Anywhere in Maharashtra' ? 'selected' : '' }}>
          ★ Anywhere in Maharashtra
        </option>
        @foreach($districts as $d)
          <option value="{{ $d->name }}" {{ old('preferred_district', $profile->preferred_district) === $d->name ? 'selected' : '' }}>
            {{ $d->name }}
          </option>
        @endforeach
      </select>
      @error('preferred_district')
        <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
      @enderror
    </div>

    <!-- Preferred Industry Sector -->
    <div class="form-group">
      <label for="preferred_sector" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
        Preferred Industry Sector <span style="color: #ef4444;">*</span>
      </label>
      <select name="preferred_sector" id="preferred_sector" class="form-control" required>
        <option value="">-- Select Sector --</option>
        @foreach([
          'Information Technology & Software',
          'Banking, Financial Services & Insurance (BFSI)',
          'Healthcare & Pharmaceuticals',
          'Automotive & Engineering',
          'Manufacturing & Heavy Industries',
          'Retail, Logistics & Supply Chain',
          'BPO, KPO & Customer Support',
          'Hospitality, Travel & Aviation',
          'Education & Training',
          'Government & Public Sector Placement'
        ] as $sector)
          <option value="{{ $sector }}" {{ old('preferred_sector', $profile->preferred_sector) === $sector ? 'selected' : '' }}>{{ $sector }}</option>
        @endforeach
      </select>
      @error('preferred_sector')
        <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
      @enderror
    </div>

  </div>

  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-bottom: 2rem;">
    
    <!-- Expected Salary Min -->
    <div class="form-group">
      <label for="expected_salary_min" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
        Minimum Expected Monthly Salary (₹)
      </label>
      <input type="number" 
             name="expected_salary_min" 
             id="expected_salary_min" 
             class="form-control" 
             placeholder="25000" 
             step="1000" 
             min="0" 
             value="{{ old('expected_salary_min', $profile->expected_salary_min) }}">
      @error('expected_salary_min')
        <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
      @enderror
    </div>

    <!-- Expected Salary Max -->
    <div class="form-group">
      <label for="expected_salary_max" class="form-label" style="font-weight: 600; color: var(--text-heading); margin-bottom: 0.4rem; display: block;">
        Maximum Expected Monthly Salary (₹)
      </label>
      <input type="number" 
             name="expected_salary_max" 
             id="expected_salary_max" 
             class="form-control" 
             placeholder="45000" 
             step="1000" 
             min="0" 
             value="{{ old('expected_salary_max', $profile->expected_salary_max) }}">
      @error('expected_salary_max')
        <span style="color: #ef4444; font-size: 0.82rem; display: block; margin-top: 0.3rem;">{{ $message }}</span>
      @enderror
    </div>

  </div>

  <!-- Form Actions -->
  <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 2rem; border-top: 1px solid var(--border-light); padding-top: 1.5rem; flex-wrap: wrap; gap: 1rem;">
    <a href="{{ route('jobseeker.wizard.step', 3) }}" class="btn btn-outline">
      <i class="fas fa-arrow-left"></i> Previous (Qualifications)
    </a>
    <button type="submit" class="btn btn-primary" id="submitStep4Btn">
      Save & Continue to Final Review <i class="fas fa-arrow-right"></i>
    </button>
  </div>
</form>
@endsection