@extends('layouts.employer')

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

@section('content')
<div class="employer-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;">Open Corporate Support Ticket</h1>
      <p style="color: var(--text-muted); font-size: 0.95rem; margin: 0;">Direct escalation to enterprise onboarding, verification, and technical desk.</p>
    </div>
    <a href="{{ route('employer.tickets.index') }}" class="btn btn-outline btn-sm">
      <i class="fas fa-arrow-left"></i> Back to Support Desk
    </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(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 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-building-shield" style="color: #10b981; font-size: 1.25rem; margin-top: 0.15rem;"></i>
      <div>
        <strong style="color: #10b981; display: block; margin-bottom: 0.25rem; font-size: 0.95rem;">Enterprise Service Level Agreement</strong>
        <p style="font-size: 0.88rem; color: var(--text-muted); margin: 0; line-height: 1.5;">
          All enterprise requisitions and KYC inquiries are handled by dedicated compliance officers under defined SLA timelines: <strong>Urgent:</strong> within 4 hours • <strong>High:</strong> within 12 hours • <strong>Normal:</strong> within 24 hours.
        </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('employer.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;">
          Query Subject <span style="color: #ef4444;">*</span>
        </label>
        <input type="text" id="subject" name="subject" value="{{ old('subject') }}" class="form-control" placeholder="e.g. GSTIN and Incorporation certificate verification clarification" 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;">
            Department / 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;">
            Priority Level <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 Information <span style="color: #ef4444;">*</span>
        </label>
        <textarea id="message" name="message" rows="6" class="form-control" placeholder="Provide full context regarding your query, vacancy requisition numbers, or statutory documents..." 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 Documents (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;">
          Upload relevant statutory certificates, screenshots, or requisition briefs (PDF, JPG, PNG, DOCX up to 5MB).
        </span>
      </div>

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