@extends('layouts.admin.master')
@section('tab-name', 'پاسخ به تیکت: ' . $item->subject)
@section('content')
    <div class="body d-flex py-3">
        <div class="container-fluid">

            {{-- هدر تیکت: ساده و کاربردی --}}
            <div class="card border-0 shadow-sm mb-3" style="border-radius: 15px;">
                <div class="card-body d-flex justify-content-between align-items-center flex-wrap">
                    <div>
                        <h4 class="fw-bolder mb-1 text-dark">موضوع: {{ $item->subject }}</h4>
                        <div class="text-muted small">
                            <i class="bi bi-calendar3 me-1"></i> تاریخ ایجاد: {{ jdate_format('Y/m/d H:i', strtotime($item->created_at)) }}
                            <span class="mx-2">|</span>
                            <span class="badge rounded-pill px-3 py-2 {{ $item->status == 'closed' ? 'bg-secondary' : 'bg-success' }}">
                                وضعیت فعلی: {{ $item->status }}
                            </span>
                        </div>
                    </div>
                    <div class="d-flex gap-2 mt-2 mt-md-0">
                        {{-- دکمه مودال تنظیمات --}}
                        <button type="button" class="btn btn-outline-primary rounded-pill px-4" data-bs-toggle="modal" data-bs-target="#editTicketModal">
                            <i class="bi bi-gear-fill me-1"></i> تنظیمات و وضعیت
                        </button>
                    </div>
                </div>
            </div>

            {{-- باکس اصلی گفتگو (استایل چت مدرن) --}}
            <div class="card border-0 shadow-lg" style="border-radius: 20px; height: 750px; display: flex; flex-direction: column; overflow: hidden;">

                {{-- تاریخچه گفتگو با اسکرول خودکار --}}
                <div class="chat-history p-4" style="flex-grow: 1; overflow-y: auto; background-color: #f0f2f5;">
                    @foreach($item->messages as $message)
                        @php
                            $isMe = $message->user_id == auth()->id();
                            $extension = pathinfo($message->attachment, PATHINFO_EXTENSION);
                            $isImage = in_array(strtolower($extension), ['jpg', 'jpeg', 'png', 'gif', 'webp']);
                        @endphp

                        <div class="d-flex mb-4 {{ $isMe ? 'justify-content-start' : 'justify-content-end' }}">
                            <div class="message-bubble shadow-sm"
                                 style="max-width: 75%; border-radius: 18px; padding: 12px 15px;
                                 {{ $isMe ? 'background: #ffffff; border-bottom-left-radius: 2px;' : 'background: #e1ffc7; border-bottom-right-radius: 2px;' }}">

                                <div class="d-flex justify-content-between align-items-center mb-1 gap-4">
                                    <span class="fw-bold small {{ $isMe ? 'text-primary' : 'text-success' }}">
                                        {{ $message->user->name ?? 'کاربر' }}
                                    </span>
                                    <span class="text-muted" style="font-size: 10px;">
                                        {{ jdate_format('H:i - Y/m/d', strtotime($message->created_at)) }}
                                    </span>
                                </div>

                                {{-- متن پیام --}}
                                <div class="message-text text-dark" style="white-space: pre-line; line-height: 1.6; font-size: 14px;">
                                    {{ $message->message }}
                                </div>

                                {{-- نمایش ضمیمه بر اساس نوع فایل --}}
                                @if($message->attachment)
                                    <div class="attachment-box mt-3 pt-2 border-top border-opacity-10">
                                        @if($isImage)
                                            {{-- نمایش عکس با پیش‌نمایش --}}
                                            <a href="{{ $message->getAttachFile() }}" target="_blank" class="d-block overflow-hidden rounded-3 border">
                                                <img src="{{ $message->getAttachFile() }}" class="img-fluid" style="max-height: 250px; width: 100%; object-fit: cover;">
                                            </a>
                                        @else
                                            {{-- نمایش فایل با باکس دانلود --}}
                                            <a href="{{ $message->getAttachFile() }}" target="_blank" class="d-flex align-items-center p-2 rounded bg-light text-decoration-none text-dark border">
                                                <i class="bi bi-file-earmark-arrow-down-fill fs-3 text-primary me-2"></i>
                                                <div class="overflow-hidden">
                                                    <div class="small fw-bold text-truncate">دانلود فایل ضمیمه</div>
                                                    <div class="text-muted" style="font-size: 10px;">{{ strtoupper($extension) }}</div>
                                                </div>
                                            </a>
                                        @endif
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>

                {{-- باکس ارسال پاسخ جمع‌وجور و مرتب --}}
                <div class="p-3 bg-white border-top">
                    <form action="{{ route('admin.tickets.reply', $item->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="row g-2 align-items-center">
                            <div class="col">
                                <div class="position-relative">
                                    <textarea name="message" class="form-control border-0 bg-light p-3" rows="1"
                                              style="border-radius: 15px; resize: none; padding-right: 45px !important;"
                                              placeholder="پاسخ خود را اینجا بنویسید..." required></textarea>

                                    {{-- دکمه گیره برای انتخاب فایل --}}
                                    <label for="admin-attachment" class="position-absolute top-50 translate-middle-y end-0 me-3" style="cursor: pointer;">
                                        <i class="bi bi-paperclip fs-5 text-muted"></i>
                                        <input type="file" name="attachment" id="admin-attachment" class="d-none">
                                    </label>
                                </div>
                            </div>
                            <div class="col-auto">
                                <button type="submit" class="btn btn-primary rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                    <i class="bi bi-send-fill fs-5"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- مودال تنظیمات تیکت (جایگزین فرم بالای صفحه) --}}
    <div class="modal fade" id="editTicketModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg" style="border-radius: 20px;">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold">بروزرسانی وضعیت تیکت</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('admin.tickets.update', $item->id) }}" method="POST">
                    @csrf @method('PUT')
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="small fw-bold mb-2">تغییر وضعیت تیکت</label>
                            <select name="status" class="form-select bg-light border-0 py-2" style="border-radius: 10px;">
                                <option value="open" {{ $item->status == 'open' ? 'selected' : '' }}>باز</option>
                                <option value="pending" {{ $item->status == 'pending' ? 'selected' : '' }}>در انتظار</option>
                                <option value="answered" {{ $item->status == 'answered' ? 'selected' : '' }}>پاسخ داده شده</option>
                                <option value="closed" {{ $item->status == 'closed' ? 'selected' : '' }}>بسته شده</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label class="small fw-bold mb-2">تغییر اولویت</label>
                            <select name="priority" class="form-select bg-light border-0 py-2" style="border-radius: 10px;">
                                <option value="low" {{ $item->priority == 'low' ? 'selected' : '' }}>کم</option>
                                <option value="medium" {{ $item->priority == 'medium' ? 'selected' : '' }}>متوسط</option>
                                <option value="high" {{ $item->priority == 'high' ? 'selected' : '' }}>فوری</option>
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer border-0 pt-0">
                        <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">انصراف</button>
                        <button type="submit" class="btn btn-primary rounded-pill px-4">ذخیره تغییرات</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <style>
        /* استایل شخصی‌سازی اسکرول‌بار چت */
        .chat-history::-webkit-scrollbar { width: 6px; }
        .chat-history::-webkit-scrollbar-track { background: transparent; }
        .chat-history::-webkit-scrollbar-thumb { background: #ccc; border-radius: 10px; }
        .chat-history::-webkit-scrollbar-thumb:hover { background: #aaa; }

        .message-bubble { transition: all 0.2s ease; }
        .chat-history { scroll-behavior: smooth; }
    </style>
@stop

@push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // اسکرول اتوماتیک به آخرین پیام هنگام لود صفحه
            var chatHistory = document.querySelector(".chat-history");
            chatHistory.scrollTop = chatHistory.scrollHeight;

            // نمایش هشدار کوچک در صورت انتخاب فایل
            const fileInput = document.getElementById('admin-attachment');
            fileInput.addEventListener('change', function() {
                if (this.files[0]) {
                    const fileName = this.files[0].name;
                    alert("فایل آماده ارسال: " + fileName);
                }
            });
        });
    </script>
@endpush