@extends('layouts.jobseeker')

@section('title', 'Log Support Ticket | Candidate Portal')

@section('content')
<div class="jobseeker-ticket-create" style="max-width: 860px; margin: 0 auto;">
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
    <div>
      <h1 style="font-size: 1.75rem; font-family: var(--font-heading); margin-bottom: 0.25rem;">Submit Support Request</h1>
      <p style="color: var(--text-muted); font-size: 0.95rem; margin: 0;">Our employment exchange desk will assign an officer to assist you.</p>
    </div>
    <a href="{{ route('jobseeker.tickets.index') }}" class="btn btn-outline btn-sm">
      <i class="fas fa-arrow-left"></i> Back to Tickets
    </a>
  </div>

  @if($errors->any())
    <div class="alert alert-danger" style="background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); color: #ef4444; padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;">
      <ul style="margin: 0; padding-left: 1.25rem;">
        @foreach($errors->all() as $error)
          <li>{{ $error }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  <!-- SLA Guarantee Notice -->
  <div style="background: rgba(56, 189, 248, 0.08); border: 1px solid rgba(56, 189, 248, 0.25); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 2rem;">
    <div style="display: flex; align-items: flex-start; gap: 0.75rem;">
      <i class="fas fa-shield-halved" style="color: #38bdf8; font-size: 1.25rem; margin-top: 0.15rem;"></i>
      <div>
        <strong style="color: #38bdf8; display: block; margin-bottom: 0.25rem; font-size: 0.95rem;">Citizen Charter & Resolution SLA</strong>
        <p style="font-size: 0.88rem; color: var(--text-muted); margin: 0; line-height: 1.5;">
          Requests are triaged in accordance with the MahaSwayam citizen charter. <strong>Urgent:</strong> within 4 hours • <strong>High:</strong> within 12 hours • <strong>Normal:</strong> within 24 hours. You will receive real-time email notifications for every update.
        </p>
      </div>
    </div>
  </div>

  <!-- Ticket Form -->
  <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 2rem;">
    <form method="POST" action="{{ route('jobseeker.tickets.store') }}" enctype="multipart/form-data">
      @csrf

      <div style="margin-bottom: 1.5rem;">
        <label for="subject" style="display: block; font-weight: 600; margin-bottom: 0.5rem; font-size: 0.95rem;">
          Subject / Brief Summary <span style="color: #ef4444;">*</span>
        </label>
        <input type="text" id="subject" name="subject" value="{{ old('subject') }}" class="form-control" placeholder="e.g. Unable to verify Aadhaar OTP during Step 1 registration" required style="width: 100%; font-size: 0.95rem; padding: 0.75rem 1rem;">
      </div>

      <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem;">
        <div>
          <label for="category" style="display: block; font-weight: 600; margin-bottom: 0.5rem; font-size: 0.95rem;">
            Issue Category <span style="color: #ef4444;">*</span>
          </label>
          <select id="category" name="category" class="form-control" required style="width: 100%; font-size: 0.95rem; padding: 0.75rem 1rem;">
            <option value="">Select Category</option>
            @foreach($categories as $key => $label)
              <option value="{{ $key }}" {{ old('category') === $key ? 'selected' : '' }}>{{ $label }}</option>
            @endforeach
          </select>
        </div>

        <div>
          <label for="priority" style="display: block; font-weight: 600; margin-bottom: 0.5rem; font-size: 0.95rem;">
            Urgency / Priority <span style="color: #ef4444;">*</span>
          </label>
          <select id="priority" name="priority" class="form-control" required style="width: 100%; font-size: 0.95rem; padding: 0.75rem 1rem;">
            @foreach($priorities as $key => $label)
              <option value="{{ $key }}" {{ old('priority', 'normal') === $key ? 'selected' : '' }}>{{ $label }}</option>
            @endforeach
          </select>
        </div>
      </div>

      <div style="margin-bottom: 1.5rem;">
        <label for="message" style="display: block; font-weight: 600; margin-bottom: 0.5rem; font-size: 0.95rem;">
          Detailed Description <span style="color: #ef4444;">*</span>
        </label>
        <textarea id="message" name="message" rows="6" class="form-control" placeholder="Please describe what you are experiencing in detail. Include any error messages, relevant registration steps, or job titles..." required style="width: 100%; font-size: 0.95rem; padding: 0.75rem 1rem; line-height: 1.5;">{{ old('message') }}</textarea>
      </div>

      <div style="margin-bottom: 2rem;">
        <label for="attachments" style="display: block; font-weight: 600; margin-bottom: 0.5rem; font-size: 0.95rem;">
          Supporting Attachments (Optional)
        </label>
        <input type="file" id="attachments" name="attachments[]" multiple class="form-control" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx" style="width: 100%; font-size: 0.9rem; padding: 0.6rem;">
        <span style="font-size: 0.8rem; color: var(--text-muted); display: block; margin-top: 0.35rem;">
          Allowed: PDF, JPG, PNG, DOC, DOCX. Max 5MB per file.
        </span>
      </div>

      <div style="display: flex; justify-content: flex-end; gap: 1rem;">
        <a href="{{ route('jobseeker.tickets.index') }}" class="btn btn-outline">Cancel</a>
        <button type="submit" class="btn btn-primary" style="padding: 0.75rem 1.75rem;">
          <i class="fas fa-paper-plane" style="margin-right: 0.5rem;"></i> Submit Request
        </button>
      </div>
    </form>
  </div>
</div>
@endsection