@extends('layouts.admin')

@section('title', 'Ticket #' . $ticket->ticket_number . ' | Support Desk Operations')

@section('content')
<div class="admin-ticket-detail">
  <!-- Top Navigation -->
  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
    <a href="{{ route('admin.tickets.index') }}" class="btn btn-outline btn-sm">
      <i class="fas fa-arrow-left"></i> Back to Support Desk Queue
    </a>
    <div style="display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;">
      {!! $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

  @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

  <div style="display: grid; grid-template-columns: 2.2fr 1fr; gap: 1.5rem; align-items: start;">
    <!-- Left Column: Details & Thread -->
    <div>
      <!-- Ticket Header Card -->
      <div class="admin-card" style="margin-bottom: 1.5rem;">
        <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
          <div>
            <span style="font-family: var(--font-mono, monospace); font-weight: 700; color: #38bdf8; font-size: 0.88rem; display: block; margin-bottom: 0.25rem;">
              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: 1rem; flex-wrap: wrap;">
              <span><i class="fas fa-folder"></i> Category: <strong>{{ $ticket->categoryLabel() }}</strong></span>
              <span><i class="fas fa-calendar"></i> Logged: {{ $ticket->created_at->format('d M Y, h:i A') }}</span>
              <span><i class="fas fa-tag"></i> Submitter Role: <strong>{{ ucfirst($ticket->role) }}</strong></span>
            </div>
          </div>
        </div>

        <!-- Citizen Submitter Profile Info -->
        <div style="background: var(--bg-surface); border-radius: var(--radius-md); padding: 1rem 1.25rem; margin-bottom: 1.25rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem;">
          <div>
            <strong style="display: block; font-size: 0.95rem;">{{ $ticket->name }}</strong>
            <span style="font-size: 0.85rem; color: var(--text-muted);">{{ $ticket->email }} @if($ticket->phone) • {{ $ticket->phone }} @endif</span>
          </div>
          <div>
            @if($ticket->user && $ticket->role === 'jobseeker')
              <a href="{{ route('admin.jobseekers.show', $ticket->user->id) }}" class="btn btn-outline btn-sm" style="font-size: 0.8rem; padding: 0.3rem 0.65rem;">
                <i class="fas fa-user-graduate"></i> View Candidate Profile
              </a>
            @elseif($ticket->user && $ticket->role === 'employer' && $ticket->user->employerProfile)
              <a href="{{ route('admin.employers.show', $ticket->user->employerProfile->id) }}" class="btn btn-outline btn-sm" style="font-size: 0.8rem; padding: 0.3rem 0.65rem;">
                <i class="fas fa-building"></i> View Corporate KYC
              </a>
            @endif
          </div>
        </div>

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

      <!-- Thread / Timeline -->
      <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: #38bdf8;"></i> Ticket Timeline & Staff Notes
        </h3>

        @if($ticket->replies->isEmpty())
          <div class="admin-card" style="text-align: center; color: var(--text-muted); font-size: 0.9rem; padding: 2rem;">
            No responses or internal notes on this ticket yet.
          </div>
        @else
          <div style="display: flex; flex-direction: column; gap: 1rem;">
            @foreach($ticket->replies as $reply)
              @if($reply->is_internal_note)
                <!-- Confidential Internal Staff Note -->
                <div style="background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.3); border-left: 4px solid #f59e0b; 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: rgba(245, 158, 11, 0.2); color: #f59e0b; display: flex; align-items: center; justify-content: center; font-size: 0.85rem;">
                        <i class="fas fa-lock"></i>
                      </div>
                      <div>
                        <strong style="font-size: 0.92rem; color: #f59e0b;">
                          {{ $reply->user?->name ?? 'Staff Officer' }}
                          <span class="badge" style="background: rgba(245, 158, 11, 0.2); color: #f59e0b; font-size: 0.72rem; margin-left: 0.35rem; border: 1px solid rgba(245, 158, 11, 0.3);">
                            <i class="fas fa-shield-alt"></i> Internal Staff Note (Hidden from Submitter)
                          </span>
                        </strong>
                        <span style="font-size: 0.78rem; color: var(--text-muted); display: block;">{{ $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>
                </div>
              @else
                <!-- Public Message (User or Staff) -->
                @php $isOfficer = $reply->sender_type === 'staff'; @endphp
                <div class="admin-card" style="border-left: 4px solid {{ $isOfficer ? '#10b981' : '#38bdf8' }}; 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(56, 189, 248, 0.2)' }}; color: {{ $isOfficer ? '#10b981' : '#38bdf8' }}; display: flex; align-items: center; justify-content: center; font-size: 0.85rem;">
                        <i class="fas {{ $isOfficer ? 'fa-user-tie' : 'fa-user' }}"></i>
                      </div>
                      <div>
                        <strong style="font-size: 0.92rem; color: var(--text-primary);">
                          {{ $reply->user?->name ?? ($isOfficer ? 'Support Desk Officer' : $ticket->name) }}
                          @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>
                          @else
                            <span class="badge" style="background: rgba(56, 189, 248, 0.15); color: #38bdf8; font-size: 0.72rem; margin-left: 0.35rem;">Citizen / Client</span>
                          @endif
                        </strong>
                        <span style="font-size: 0.78rem; color: var(--text-muted); display: block;">{{ $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>
              @endif
            @endforeach
          </div>
        @endif
      </div>

      <!-- Action Response Composer -->
      <div class="admin-card">
        <h4 style="font-size: 1.1rem; font-family: var(--font-heading); margin-bottom: 1rem;">Compose Response or Staff Note</h4>

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

          <!-- Type Selector: Public Reply vs Internal Note -->
          <div style="display: flex; gap: 1.5rem; margin-bottom: 1.25rem; background: var(--bg-surface); padding: 0.75rem 1rem; border-radius: var(--radius-md);">
            <label style="display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; cursor: pointer; font-weight: 600;">
              <input type="radio" name="is_internal_note" value="0" checked onchange="toggleNoteBadge(false)">
              <span style="color: #10b981;"><i class="fas fa-envelope-open-text"></i> Public Reply</span>
              <small style="color: var(--text-muted); font-weight: normal;">(Sends email to submitter)</small>
            </label>

            <label style="display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; cursor: pointer; font-weight: 600;">
              <input type="radio" name="is_internal_note" value="1" onchange="toggleNoteBadge(true)">
              <span style="color: #f59e0b;"><i class="fas fa-lock"></i> Internal Staff Note</span>
              <small style="color: var(--text-muted); font-weight: normal;">(Confidential to team)</small>
            </label>
          </div>

          <!-- Message Body -->
          <div style="margin-bottom: 1.25rem;">
            <textarea name="message" id="reply-message" rows="5" class="form-control" placeholder="Write public response or confidential staff remarks..." required style="width: 100%; font-size: 0.95rem; padding: 0.75rem 1rem; line-height: 1.5;">{{ old('message') }}</textarea>
          </div>

          <!-- Transition Status Upon Reply -->
          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem;">
            <div>
              <label for="status" style="display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem;">
                Update Status to:
              </label>
              <select name="status" class="form-control" style="width: 100%; font-size: 0.88rem; padding: 0.55rem;">
                <option value="">Keep Current ({{ ucfirst($ticket->status) }})</option>
                <option value="in_progress">In Progress</option>
                <option value="awaiting_user">Awaiting Response</option>
                <option value="resolved">Resolved</option>
                <option value="closed">Closed</option>
              </select>
            </div>

            <div>
              <label for="attachments" style="display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem;">
                Attach File:
              </label>
              <input type="file" name="attachments[]" multiple class="form-control" style="width: 100%; font-size: 0.82rem; padding: 0.45rem;">
            </div>
          </div>

          <div style="display: flex; justify-content: flex-end;">
            <button type="submit" id="submit-btn" class="btn btn-primary" style="padding: 0.65rem 1.75rem;">
              <i class="fas fa-paper-plane" style="margin-right: 0.5rem;"></i> Submit Response
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- Right Column: Operations Sidebar -->
    <div>
      <!-- SLA & Timing Card -->
      <div class="admin-card" style="margin-bottom: 1.5rem;">
        <h4 style="font-size: 1rem; font-family: var(--font-heading); margin-bottom: 1rem; border-bottom: 1px solid var(--border-light); padding-bottom: 0.5rem;">
          <i class="fas fa-stopwatch" style="color: #38bdf8;"></i> SLA & Timings
        </h4>

        <div style="font-size: 0.88rem; display: flex; flex-direction: column; gap: 0.75rem;">
          <div>
            <span style="color: var(--text-muted); display: block; font-size: 0.78rem;">SLA STATUS</span>
            <div style="margin-top: 0.25rem;">{!! $ticket->slaBadgeHtml() !!}</div>
          </div>

          <div>
            <span style="color: var(--text-muted); display: block; font-size: 0.78rem;">SLA DEADLINE</span>
            <strong>{{ $ticket->sla_due_at ? $ticket->sla_due_at->format('d M Y, h:i A') : 'N/A' }}</strong>
          </div>

          <div>
            <span style="color: var(--text-muted); display: block; font-size: 0.78rem;">CREATED AT</span>
            <span>{{ $ticket->created_at->format('d M Y, h:i A') }}</span>
          </div>

          <div>
            <span style="color: var(--text-muted); display: block; font-size: 0.78rem;">LAST ACTIVITY</span>
            <span>{{ $ticket->last_reply_at ? $ticket->last_reply_at->format('d M Y, h:i A') : $ticket->created_at->format('d M Y, h:i A') }}</span>
          </div>

          @if($ticket->resolved_at)
            <div>
              <span style="color: var(--text-muted); display: block; font-size: 0.78rem;">RESOLVED AT</span>
              <span style="color: #10b981;">{{ $ticket->resolved_at->format('d M Y, h:i A') }}</span>
            </div>
          @endif
        </div>
      </div>

      <!-- Quick Status Progression Card -->
      <div class="admin-card" style="margin-bottom: 1.5rem;">
        <h4 style="font-size: 1rem; font-family: var(--font-heading); margin-bottom: 1rem; border-bottom: 1px solid var(--border-light); padding-bottom: 0.5rem;">
          <i class="fas fa-arrows-spin" style="color: #10b981;"></i> Status Transition
        </h4>

        <form method="POST" action="{{ route('admin.tickets.status', $ticket->id) }}">
          @csrf
          @method('PATCH')

          <div style="margin-bottom: 1rem;">
            <label for="change-status" style="display: block; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 0.35rem;">
              CHANGE STATUS
            </label>
            <select name="status" id="change-status" class="form-control" style="width: 100%; font-size: 0.9rem; padding: 0.6rem;">
              @foreach(\App\Models\Ticket::STATUSES as $key => $label)
                <option value="{{ $key }}" {{ $ticket->status === $key ? 'selected' : '' }}>{{ $label }}</option>
              @endforeach
            </select>
          </div>

          <div style="margin-bottom: 1rem;">
            <label for="remarks" style="display: block; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 0.35rem;">
              OPTIONAL STATUS REMARKS
            </label>
            <input type="text" name="remarks" id="remarks" class="form-control" placeholder="Resolution brief or status note..." style="width: 100%; font-size: 0.85rem; padding: 0.5rem;">
          </div>

          <button type="submit" class="btn btn-outline btn-sm" style="width: 100%; padding: 0.6rem;">
            Update Status
          </button>
        </form>
      </div>

      <!-- Case Officer Assignment Card -->
      <div class="admin-card">
        <h4 style="font-size: 1rem; font-family: var(--font-heading); margin-bottom: 1rem; border-bottom: 1px solid var(--border-light); padding-bottom: 0.5rem;">
          <i class="fas fa-user-check" style="color: #f59e0b;"></i> Officer Assignment
        </h4>

        <form method="POST" action="{{ route('admin.tickets.assign', $ticket->id) }}">
          @csrf
          @method('PATCH')

          <div style="margin-bottom: 1rem;">
            <label for="assigned_to" style="display: block; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 0.35rem;">
              ASSIGNED OFFICER
            </label>
            <select name="assigned_to" id="assigned_to" class="form-control" style="width: 100%; font-size: 0.9rem; padding: 0.6rem;">
              <option value="">[Unassigned]</option>
              @foreach($officers as $officer)
                <option value="{{ $officer->id }}" {{ $ticket->assigned_to == $officer->id ? 'selected' : '' }}>
                  {{ $officer->name }} ({{ ucfirst($officer->role) }})
                </option>
              @endforeach
            </select>
          </div>

          <button type="submit" class="btn btn-outline btn-sm" style="width: 100%; padding: 0.6rem;">
            Assign Case
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
function toggleNoteBadge(isInternal) {
  const btn = document.getElementById('submit-btn');
  if (isInternal) {
    btn.innerHTML = '<i class="fas fa-lock" style="margin-right: 0.5rem;"></i> Save Internal Staff Note';
    btn.style.background = '#f59e0b';
    btn.style.borderColor = '#f59e0b';
  } else {
    btn.innerHTML = '<i class="fas fa-paper-plane" style="margin-right: 0.5rem;"></i> Submit Public Response';
    btn.style.background = '';
    btn.style.borderColor = '';
  }
}
</script>
@endsection