@extends('layouts.app')

@section('content')
<main id="mainContent">
  <!-- Header Banner -->
  <header class="page-header" style="padding: 3rem 0 2rem; background: var(--bg-surface); border-bottom: 1px solid var(--border-light);">
    <div class="container">
      <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1.5rem;" class="reveal">
        <div>
          <nav class="breadcrumbs" aria-label="Breadcrumb" style="margin-bottom: 0.5rem;">
            <a href="{{ route('home') }}">Home</a>
            <i class="fas fa-chevron-right" style="font-size: 0.7rem;"></i>
            <a href="{{ route('employer.dashboard') }}">Employer Portal</a>
            <i class="fas fa-chevron-right" style="font-size: 0.7rem;"></i>
            <a href="{{ route('employer.vacancies.index') }}">Vacancies</a>
            <i class="fas fa-chevron-right" style="font-size: 0.7rem;"></i>
            <span>New Requisition</span>
          </nav>
          <h1 style="font-size: 2rem; font-family: var(--font-heading); font-weight: 700; color: var(--text-heading); margin-bottom: 0.35rem;">
            Publish Job Vacancy
          </h1>
          <p style="color: var(--text-light); font-size: 0.95rem; margin: 0;">
            Provide vacancy particulars, statutory qualification criteria, and Maharashtra placement district.
          </p>
        </div>

        <a href="{{ route('employer.vacancies.index') }}" class="btn btn-outline">
          <i class="fas fa-arrow-left"></i> Cancel &amp; Back
        </a>
      </div>
    </div>
  </header>

  <!-- Vacancy Form Section -->
  <section class="section" style="padding: 2.5rem 0;">
    <div class="container" style="max-width: 860px;">
      
      @if($errors->any())
        <div style="background: rgba(239, 68, 68, 0.1); border: 1px solid #ef4444; color: #ef4444; padding: 1rem 1.25rem; border-radius: var(--radius-md); margin-bottom: 2rem;">
          <h4 style="font-size: 0.95rem; margin: 0 0 0.5rem 0; font-weight: 700;">Please correct the highlighted errors:</h4>
          <ul style="margin: 0; padding-left: 1.25rem; font-size: 0.9rem;">
            @foreach($errors->all() as $err)
              <li>{{ $err }}</li>
            @endforeach
          </ul>
        </div>
      @endif

      <form method="POST" action="{{ route('employer.vacancies.store') }}" class="card reveal" style="background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-xl); padding: 2rem;">
        @csrf

        <h3 style="font-size: 1.25rem; margin-bottom: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-light); color: var(--text-heading);">
          <i class="fas fa-briefcase" style="color: var(--accent); margin-right: 0.5rem;"></i> Job Specifics &amp; Classification
        </h3>

        <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem;">
          <div>
            <label for="title" style="display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.35rem;">
              Job Title / Designation <span style="color: #ef4444;">*</span>
            </label>
            <input type="text" name="title" id="title" value="{{ old('title') }}" required placeholder="e.g. Senior Full Stack Engineer" style="width: 100%; padding: 0.7rem; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-heading);">
          </div>

          <div>
            <label for="category_id" style="display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.35rem;">
              Department Category <span style="color: #ef4444;">*</span>
            </label>
            <select name="category_id" id="category_id" required style="width: 100%; padding: 0.7rem; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-heading);">
              <option value="">Select Category</option>
              @foreach($categories as $cat)
                <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
              @endforeach
            </select>
          </div>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-bottom: 1.25rem;">
          <div>
            <label for="sector" style="display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.35rem;">
              Industry Sector <span style="color: #ef4444;">*</span>
            </label>
            <input type="text" name="sector" id="sector" value="{{ old('sector', 'Information Technology & Software Services') }}" required style="width: 100%; padding: 0.7rem; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-heading);">
          </div>

          <div>
            <label for="district" style="display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.35rem;">
              Maharashtra District Placement <span style="color: #ef4444;">*</span>
            </label>
            <select name="district" id="district" required style="width: 100%; padding: 0.7rem; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-heading);">
              <option value="">Select District</option>
              @foreach($districts as $d)
                <option value="{{ $d->name }}" {{ old('district', auth()->user()->assigned_district) === $d->name ? 'selected' : '' }}>{{ $d->name }}</option>
              @endforeach
            </select>
          </div>

          <div>
            <label for="city" style="display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.35rem;">
              City / Taluka (Optional)
            </label>
            <input type="text" name="city" id="city" value="{{ old('city') }}" placeholder="e.g. Nagpur Urban / Hinjewadi" style="width: 100%; padding: 0.7rem; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-heading);">
          </div>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem;">
          <div>
            <label for="qualification_required" style="display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.35rem;">
              Required Qualification <span style="color: #ef4444;">*</span>
            </label>
            <select name="qualification_required" id="qualification_required" required style="width: 100%; padding: 0.7rem; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-heading);">
              @foreach($qualifications as $q)
                <option value="{{ $q }}" {{ old('qualification_required') === $q ? 'selected' : '' }}>{{ $q }}</option>
              @endforeach
            </select>
          </div>

          <div>
            <label for="vacancies_count" style="display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.35rem;">
              Number of Posts <span style="color: #ef4444;">*</span>
            </label>
            <input type="number" name="vacancies_count" id="vacancies_count" min="1" max="1000" value="{{ old('vacancies_count', 1) }}" required style="width: 100%; padding: 0.7rem; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-heading);">
          </div>

          <div>
            <label for="job_type" style="display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.35rem;">
              Employment Type <span style="color: #ef4444;">*</span>
            </label>
            <select name="job_type" id="job_type" required style="width: 100%; padding: 0.7rem; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-heading);">
              <option value="fulltime" {{ old('job_type') === 'fulltime' ? 'selected' : '' }}>Full-Time</option>
              <option value="contract" {{ old('job_type') === 'contract' ? 'selected' : '' }}>Contract</option>
              <option value="hybrid" {{ old('job_type') === 'hybrid' ? 'selected' : '' }}>Hybrid</option>
              <option value="remote" {{ old('job_type') === 'remote' ? 'selected' : '' }}>Remote</option>
            </select>
          </div>

          <div>
            <label for="experience_level" style="display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.35rem;">
              Experience Required <span style="color: #ef4444;">*</span>
            </label>
            <input type="text" name="experience_level" id="experience_level" value="{{ old('experience_level', '2 - 5 Years') }}" required placeholder="e.g. 1 - 3 Years" style="width: 100%; padding: 0.7rem; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-heading);">
          </div>
        </div>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.5rem;">
          <div>
            <label for="salary_display" style="display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.35rem;">
              Salary / CTC Display Range
            </label>
            <input type="text" name="salary_display" id="salary_display" value="{{ old('salary_display') }}" placeholder="e.g. ₹6,00,000 - ₹9,50,000 P.A." style="width: 100%; padding: 0.7rem; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-heading);">
          </div>

          <div>
            <label for="deadline" style="display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.35rem;">
              Application Last Date (Deadline)
            </label>
            <input type="date" name="deadline" id="deadline" value="{{ old('deadline') }}" style="width: 100%; padding: 0.7rem; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-heading);">
          </div>
        </div>

        <div style="margin-bottom: 1.5rem;">
          <label style="display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: 0.92rem; font-weight: 600; color: var(--text-heading);">
            <input type="checkbox" name="is_scheme_vacancy" value="1" {{ old('is_scheme_vacancy') ? 'checked' : '' }} style="width: 18px; height: 18px; accent-color: var(--accent);">
            <span>
              <i class="fas fa-landmark" style="color: var(--accent);"></i> Flag as MahaSwayam Government / Apprenticeship Scheme Vacancy
            </span>
          </label>
          <span style="display: block; font-size: 0.8rem; color: var(--text-light); margin-left: 1.75rem; margin-top: 0.2rem;">
            Enables eligibility for state stipend matching, CM Yuva Karya Prashikshan Yojana, and priority employment exchange rosters.
          </span>
        </div>

        <h3 style="font-size: 1.25rem; margin: 2rem 0 1.25rem 0; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border-light); color: var(--text-heading);">
          <i class="fas fa-align-left" style="color: var(--accent); margin-right: 0.5rem;"></i> Job Description &amp; Candidate Mandate
        </h3>

        <div style="margin-bottom: 1.25rem;">
          <label for="description" style="display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.35rem;">
            Full Job Description <span style="color: #ef4444;">*</span>
          </label>
          <textarea name="description" id="description" rows="6" required placeholder="Detailed duties, scope of work, organizational background..." style="width: 100%; padding: 0.75rem; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-heading); font-size: 0.92rem;">{{ old('description') }}</textarea>
        </div>

        <div style="margin-bottom: 1.25rem;">
          <label for="requirements" style="display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.35rem;">
            Key Requirements (One bullet point per line)
          </label>
          <textarea name="requirements" id="requirements" rows="4" placeholder="Bachelor's degree in Computer Science or equivalent&#10;Strong problem solving skills&#10;Excellent communication" style="width: 100%; padding: 0.75rem; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-heading); font-size: 0.92rem;">{{ old('requirements') }}</textarea>
        </div>

        <div style="margin-bottom: 2rem;">
          <label for="skills" style="display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 0.35rem;">
            Required Skills (Comma separated)
          </label>
          <input type="text" name="skills" id="skills" value="{{ old('skills') }}" placeholder="PHP, Laravel, MySQL, JavaScript, Git" style="width: 100%; padding: 0.7rem; border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-heading);">
        </div>

        <div style="display: flex; justify-content: flex-end; gap: 1rem; border-top: 1px solid var(--border-light); padding-top: 1.5rem;">
          <a href="{{ route('employer.vacancies.index') }}" class="btn btn-outline">
            Cancel
          </a>
          <button type="submit" class="btn btn-primary">
            <i class="fas fa-check-circle"></i> Publish Vacancy Now
          </button>
        </div>
      </form>
    </div>
  </section>
</main>
@endsection