@extends('layouts.admin.master')
@section('tab-name', 'گفتگو: ' . $ticket->subject)
@section('content')
    <div class="body d-flex py-3">
        <div class="container-fluid">
            {{-- هدر تیکت: نمایش اطلاعات پایه شناسنامه --}}
            <div class="card border mb-4 shadow-sm bg-light">
                <div class="card-body d-flex justify-content-between align-items-center flex-wrap">
                    <div>
                        <h4 class="fw-bolder mb-1 text-dark">{{ $ticket->subject }}</h4>
                        <p class="mb-0 text-muted small">
                            ایجاد شده توسط: <strong>{{ $ticket->user->name }}</strong> |
                            تاریخ: {{ jdate_format('Y/m/d H:i', strtotime($ticket->created_at)) }}
                        </p>
                    </div>
                    <div class="d-flex gap-2 align-items-center mt-2 mt-md-0">
                        @php
                            $statusColors = ['open' => 'bg-success', 'pending' => 'bg-warning', 'answered' => 'bg-primary', 'closed' => 'bg-secondary'];
                            $priorityColors = ['low' => 'bg-info', 'medium' => 'bg-custom-b', 'high' => 'bg-danger'];
                        @endphp
                        <span
                            class="badge {{ $statusColors[$ticket->status] }} px-3 py-2 rounded-custom">وضعیت: {{ $ticket->status }}</span>
                        <span
                            class="badge {{ $priorityColors[$ticket->priority] }} px-3 py-2 rounded-custom">اولویت: {{ $ticket->priority }}</span>
                        @if($ticket->status !='closed')
                            <form action="{{ route('admin.tickets.close', $ticket->id) }}" method="POST"
                                  class="d-inline">
                                @csrf
                                @method('POST')
                                <button type="submit" class="btn btn-sm btn-outline-danger rounded-custom px-3">
                                    <i class="bi bi-x-circle me-1"></i> بستن تیکت
                                </button>
                            </form>
                        @elseif($ticket->status ='closed')
                            <form action="{{ route('admin.tickets.open', $ticket->id) }}" method="POST"
                                  class="d-inline">
                                @csrf
                                @method('POST')
                                <button type="submit" class="btn btn-sm btn-outline-success rounded-custom px-3">
                                    <i class="bi bi-check-circle me-1"></i> بازکردن تیکت
                                </button>
                            </form>
                        @endif
                    </div>

                </div>
            </div>

            {{-- بخش نمایش پیام‌ها --}}
            <div class="card border p-3 shadow-sm bg-white"
                 style="height: 600px; display: flex; flex-direction: column;">
                <div class="chat-history mb-3 p-2"
                     style="flex-grow: 1; overflow-y: auto; background: #f9f9f9; border-radius: 15px;">
                    @forelse($messages as $message)
                        <div
                            class="d-flex mb-4 {{ $message->user_id == auth()->id() ? 'justify-content-start' : 'justify-content-end text-end' }}">
                            <div class="p-3 rounded-custom shadow-sm border"
                                 style="max-width: 80%; {{ $message->user_id == auth()->id() ? 'background-color: #fff; border-right: 4px solid #0d6efd;' : 'background-color: #e9ecef; border-left: 4px solid #6c757d;' }}">

                                <div class="d-flex justify-content-between align-items-center mb-2 small opacity-75">
                                    <span class="fw-bold">{{ $message->user->name ?? 'کاربر ناشناس' }}</span>
                                    <span
                                        class="ms-3">{{ jdate_format('H:i - Y/m/d', strtotime($message->created_at)) }}</span>
                                </div>

                                <div class="message-text mb-2" style="white-space: pre-line; line-height: 1.6;">
                                    {{ $message->message }}
                                </div>

                                @if($message->attachment)
                                    <div class="attachment-box mt-2 pt-2 border-top">
                                        <a href="{{$message->getAttachFile()}}" target="_blank"
                                           class="btn btn-sm btn-light border rounded-custom py-1">
                                            <i class="bi bi-paperclip me-1"></i> مشاهده فایل پیوست
                                        </a>
                                    </div>
                                @endif
                            </div>
                        </div>
                    @empty
                        <div class="d-flex flex-column align-items-center justify-content-center py-5 h-100"
                             style="direction: rtl;">
                            <div class="rounded-circle bg-light p-4 mb-3">
                                <i class="bi bi-chat-left-dots text-muted fs-1"></i>
                            </div>
                            <h5 class="fw-bolder text-secondary">هنوز پیامی ارسال نشده است</h5>
                            <p class="text-muted small">اولین پیام را از طریق فرم زیر ارسال کنید.</p>
                        </div>
                    @endforelse
                </div>

                {{-- فرم ارسال پیام جدید --}}
                <div class="reply-box pt-3 border-top">
                    <form action="{{ route('admin.tickets.messages-store', $ticket->id) }}" method="POST"
                          enctype="multipart/form-data">
                        @csrf
                        <div class="row align-items-end">
                            <div class="col-md-9 col-12 mb-2">
                                <textarea name="message" class="form-control bg-light rounded-custom" rows="3"
                                          placeholder="پاسخ خود را اینجا بنویسید..." required></textarea>
                            </div>
                            <div class="col-md-3 col-12 mb-2">
                                <div class="mb-2">
                                    <label class="small fw-bold">پیوست فایل:</label>
                                    <input type="file" name="attachment"
                                           class="form-control form-control-sm bg-light rounded-custom">
                                </div>
                                <button type="submit" class="btn btn-custom w-100 rounded-custom py-2 shadow-sm">
                                    <i class="bi bi-send-fill me-2"></i> ارسال پاسخ
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@stop