@extends('layouts.employer')

@section('title', 'Corporate Ticket #' . $ticket->ticket_number . ' | Employer Portal')

@section('content')
<div class="employer-ticket-show" style="max-width: 900px; margin: 0 auto;">
  <!-- Top Navigation & Actions -->
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
    <a href="{{ route('employer.tickets.index') }}" class="btn btn-outline btn-sm">
      <i class="fas fa-arrow-left"></i> Back to Corporate Desk
    </a>
    <div style="display: flex; gap: 0.5rem; align-items: center;">
      {!! $ticket->priorityBadgeHtml() !!}
      {!! $ticket->statusBadgeHtml() !!}
      {!! $ticket->slaBadgeHtml() !!}
    </div>
  </div>

  @if(session('success'))
    <div class="alert alert-success" style="background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.3); color: #10b981; padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;">
      <i class="fas fa-check-circle" style="margin-right: 0.5rem;"></i> {{ session('success') }}
    </div>
  @endif

  <!-- Ticket Header Card -->
  <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.75rem; margin-bottom: 1.5rem;">
    <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem;">
      <div>
        <span style="font-family: var(--font-mono, monospace); font-weight: 700; color: #10b981; font-size: 0.9rem; display: block; margin-bottom: 0.25rem;">
          ENTERPRISE TICKET #{{ $ticket->ticket_number }}
        </span>
        <h1 style="font-size: 1.4rem; font-family: var(--font-heading); margin: 0 0 0.5rem 0;">
          {{ $ticket->subject }}
        </h1>
        <div style="font-size: 0.85rem; color: var(--text-muted); display: flex; gap: 1.25rem; flex-wrap: wrap;">
          <span><i class="fas fa-folder" style="margin-right: 0.35rem;"></i> {{ $ticket->categoryLabel() }}</span>
          <span><i class="fas fa-clock" style="margin-right: 0.35rem;"></i> Logged {{ $ticket->created_at->format('d M Y, h:i A') }}</span>
          @if($ticket->assignedOfficer)
            <span><i class="fas fa-user-shield" style="margin-right: 0.35rem;"></i> Assigned Officer: {{ $ticket->assignedOfficer->name }}</span>
          @endif
        </div>
      </div>
    </div>

    <!-- Original Message -->
    <div style="background: var(--bg-surface); border-radius: var(--radius-md); padding: 1.25rem; border-left: 4px solid #10b981; font-size: 0.95rem; line-height: 1.6; white-space: pre-wrap;">{{ $ticket->message }}</div>
  </div>

  <!-- Conversation Thread -->
  <div style="margin-bottom: 2rem;">
    <h3 style="font-size: 1.15rem; font-family: var(--font-heading); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;">
      <i class="fas fa-comments" style="color: #10b981;"></i> Conversation History
    </h3>

    @if($ticket->replies->isEmpty())
      <div style="background: var(--bg-card); border: 1px dashed var(--border-light); border-radius: var(--radius-lg); padding: 2rem; text-align: center; color: var(--text-muted); font-size: 0.9rem;">
        No responses recorded yet. An enterprise support officer is reviewing your query.
      </div>
    @else
      <div style="display: flex; flex-direction: column; gap: 1rem;">
        @foreach($ticket->replies as $reply)
          @continue($reply->is_internal_note)
          @php $isOfficer = $reply->sender_type === 'staff'; @endphp
          <div style="background: var(--bg-card); border: 1px solid {{ $isOfficer ? 'rgba(16, 185, 129, 0.3)' : 'var(--border-light)' }}; border-radius: var(--radius-lg); padding: 1.25rem;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; flex-wrap: wrap; gap: 0.5rem;">
              <div style="display: flex; align-items: center; gap: 0.5rem;">
                <div style="width: 32px; height: 32px; border-radius: 50%; background: {{ $isOfficer ? 'rgba(16, 185, 129, 0.2)' : 'rgba(148, 163, 184, 0.2)' }}; color: {{ $isOfficer ? '#10b981' : 'var(--text-primary)' }}; display: flex; align-items: center; justify-content: center; font-size: 0.85rem;">
                  <i class="fas {{ $isOfficer ? 'fa-user-tie' : 'fa-building' }}"></i>
                </div>
                <div>
                  <strong style="font-size: 0.92rem; display: block; color: {{ $isOfficer ? '#10b981' : 'var(--text-primary)' }};">
                    {{ $reply->user?->name ?? ($isOfficer ? 'Enterprise Support Officer' : 'Company Representative') }}
                    @if($isOfficer)
                      <span class="badge" style="background: rgba(16, 185, 129, 0.15); color: #10b981; font-size: 0.72rem; margin-left: 0.35rem;">Staff Officer</span>
                    @endif
                  </strong>
                  <span style="font-size: 0.78rem; color: var(--text-muted);">{{ $reply->created_at->format('d M Y, h:i A') }}</span>
                </div>
              </div>
            </div>

            <div style="font-size: 0.95rem; line-height: 1.6; color: var(--text-primary); white-space: pre-wrap;">{{ $reply->message }}</div>

            @if(!empty($reply->attachments))
              <div style="margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border-light); display: flex; flex-wrap: wrap; gap: 0.5rem;">
                @foreach($reply->attachments as $att)
                  <a href="{{ asset('storage/' . $att['path']) }}" target="_blank" class="btn btn-outline btn-sm" style="font-size: 0.8rem; padding: 0.25rem 0.6rem; display: inline-flex; align-items: center; gap: 0.35rem;">
                    <i class="fas fa-paperclip"></i> {{ $att['name'] ?? 'Attachment' }}
                  </a>
                @endforeach
              </div>
            @endif
          </div>
        @endforeach
      </div>
    @endif
  </div>

  <!-- Post Reply Form -->
  <div style="background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1.75rem;">
    @if(in_array($ticket->status, ['resolved', 'closed']))
      <div style="background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3); border-radius: var(--radius-md); padding: 0.85rem 1rem; margin-bottom: 1.25rem; color: #f59e0b; font-size: 0.88rem; display: flex; align-items: center; gap: 0.5rem;">
        <i class="fas fa-info-circle"></i> This inquiry is marked as <strong>{{ ucfirst($ticket->status) }}</strong>. Submitting a reply will reopen it automatically.
      </div>
    @endif

    <h4 style="font-size: 1.1rem; font-family: var(--font-heading); margin-bottom: 1rem;">Post Corporate Response</h4>

    <form method="POST" action="{{ route('employer.tickets.reply', $ticket->id) }}" enctype="multipart/form-data">
      @csrf

      <div style="margin-bottom: 1.25rem;">
        <textarea name="message" rows="4" class="form-control" placeholder="Provide additional details or reply to officer questions..." required style="width: 100%; font-size: 0.95rem; padding: 0.75rem 1rem; line-height: 1.5;">{{ old('message') }}</textarea>
      </div>

      <div style="margin-bottom: 1.5rem;">
        <label for="reply-attachments" style="display: block; font-weight: 600; margin-bottom: 0.5rem; font-size: 0.88rem;">
          Attach Documents (Optional)
        </label>
        <input type="file" id="reply-attachments" name="attachments[]" multiple class="form-control" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx" style="width: 100%; font-size: 0.85rem; padding: 0.5rem;">
      </div>

      <div style="display: flex; justify-content: flex-end;">
        <button type="submit" class="btn btn-primary" style="padding: 0.65rem 1.5rem; background: #10B981; border-color: #10B981;">
          <i class="fas fa-paper-plane" style="margin-right: 0.5rem;"></i> Send Response
        </button>
      </div>
    </form>
  </div>
</div>
@endsection