@extends('user.support.layout')

@section('title', 'Reply to Support Ticket')

@section('content')
<div class="container py-4">

  <!-- Navigation Menu -->
  <div class="mb-4">
    <nav class="nav nav-pills flex-column flex-sm-row text-center bg-white shadow-sm rounded-3 p-2">
      <a class="flex-sm-fill text-sm-center nav-link {{ request()->routeIs('ticket.index') ? 'active' : '' }}" href="{{ route('ticket.index') }}">
        <i class="bi bi-speedometer2"></i> Dashboard
      </a>
      <a class="flex-sm-fill text-sm-center nav-link {{ request()->routeIs('ticket.open') ? 'active' : '' }}" href="{{ route('ticket.open') }}">
        <i class="bi bi-folder2-open"></i> Open
      </a>
      <a class="flex-sm-fill text-sm-center nav-link {{ request()->routeIs('ticket.inprogress') ? 'active' : '' }}" href="{{ route('ticket.inprogress') }}">
        <i class="bi bi-hourglass-split"></i> In Progress
      </a>
      <a class="flex-sm-fill text-sm-center nav-link {{ request()->routeIs('ticket.closed') ? 'active' : '' }}" href="{{ route('ticket.closed') }}">
        <i class="bi bi-folder-x"></i> Closed
      </a>
      <a class="flex-sm-fill text-sm-center nav-link {{ request()->routeIs('ticket.create') ? 'active' : '' }}" href="{{ route('ticket.create') }}">
        <i class="bi bi-plus-circle"></i> New Ticket
      </a>
    </nav>
  </div>

  <!-- Ticket Header -->
  <div class="card shadow-sm border-0 mb-4">
    <div class="card-header bg-primary text-white">
      <h5 class="mb-0">Reply to Ticket #{{ $ticket->st_no }}</h5>
    </div>
    <div class="card-body">
      <div class="row mb-3">
        <div class="col-md-6">
          <strong>Subject:</strong> {{ $ticket->st_subject }}
        </div>
        <div class="col-md-6">
          <strong>Issue Type:</strong> {{ $ticket->issueType->sit_name ?? 'N/A' }}
        </div>
      </div>

      <div class="row mb-3">
        <div class="col-md-6">
          <strong>Status:</strong>
          <span class="badge 
            @if($ticket->st_status == 'Open') bg-success 
            @elseif($ticket->st_status == 'In Progress') bg-warning text-dark
            @else bg-secondary @endif">
            {{ $ticket->st_status }}
          </span>
        </div>
        <div class="col-md-6">
          <strong>Assigned To:</strong> {{ $ticket->assignedTo->ul_name ?? 'Unassigned' }}
        </div>
      

      <div class="col-md-12">
        <strong>Description: </strong>{{ $ticket->st_description }}</p>
      </div>
      </div>

      @if($ticket->attachments && $ticket->attachments->count() > 0)
        <div class="alert alert-light border mt-3">
          <strong>Ticket Attachments:</strong>
          <ul class="list-unstyled ms-3 mt-2">
            @foreach($ticket->attachments as $attachment)
              <li>
                <a href="{{ asset('storage/' . $attachment->sta_file_path) }}" target="_blank">
                  {{ basename($attachment->sta_file_path) }}
                </a>
              </li>
            @endforeach
          </ul>
        </div>
      @endif
    </div>
  </div>

  <!-- Conversation History -->
  <div class="card shadow-sm border-0 mb-4">
    <div class="card-header bg-light">
      <h6 class="mb-0"><i class="bi bi-chat-dots"></i> Conversation</h6>
    </div>
    <div class="card-body" style="max-height: 400px; overflow-y: auto;">
      @forelse($ticket->comments as $comment)
        <div class="border rounded p-3 mb-3 @if($comment->stc_staff_id) bg-light @else bg-white @endif">
          <div class="d-flex justify-content-between align-items-center">
            <strong>
              @if($comment->staff)
                {{ $comment->staff->ul_name }} <span class="text-primary">(Support)</span>
              @elseif($comment->user)
                {{ $comment->user->name }} <span class="text-success">(You)</span>
              @else
                Unknown
              @endif
            </strong>
            <small class="text-muted">{{ $comment->created_at->format('d M Y h:i A') }}</small>
          </div>
          <p class="mb-2 mt-2">{{ $comment->stc_comment }}</p>

          @if($comment->attachments && $comment->attachments->count() > 0)
            <div class="mt-2">
              <strong>Attachments:</strong>
              <ul class="list-unstyled ms-3">
                @foreach($comment->attachments as $attachment)
                  <li>
                    <a href="{{ asset('storage/' . $attachment->stca_file_path) }}" target="_blank">
                      {{ basename($attachment->stca_file_path) }}
                    </a>
                  </li>
                @endforeach
              </ul>
            </div>
          @endif
        </div>
      @empty
        <p class="text-muted text-center my-3">No replies yet.</p>
      @endforelse
    </div>
  </div>

  <!-- Reply Form -->
  @if($ticket->st_status !== 'Closed')
  <div class="card shadow-sm border-0 mt-4">
    <div class="card-header bg-light">
      <h6 class="mb-0"><i class="bi bi-reply"></i> Add Reply</h6>
    </div>
    <div class="card-body">
      <form method="POST" action="{{ route('ticket.reply.store', $ticket->st_id) }}" enctype="multipart/form-data">
        @csrf
        <div class="mb-3">
          <textarea name="stc_comment" class="form-control" rows="4" placeholder="Type your reply..." required></textarea>
        </div>
        <div class="mb-3">
          <label class="form-label">Attachments (optional)</label>
          <input type="file" name="attachments[]" class="form-control" multiple>
          <small class="text-muted">Allowed: JPG, PNG, MP4, MP3, WAV (max 10MB each)</small>
        </div>
        <div class="d-flex justify-content-end">
          <a href="{{ route('ticket.index') }}" class="btn btn-light me-2">Back</a>
          <button type="submit" class="btn btn-primary"><i class="bi bi-send"></i> Send Reply</button>
        </div>
      </form>
    </div>
  </div>
  @else
  <div class="alert alert-secondary mt-4 text-center">
    <i class="bi bi-lock"></i> This ticket is closed and cannot receive new replies.
  </div>
  @endif

</div>
@endsection