@extends('partial.layout')
@section('content')
    <div class="container mt-4">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h4 class="mb-0">{{ $ticket->title }}</h4>
                        <div>
                            <span class="badge bg-{{ $ticket->status === 'closed' ? 'secondary' : ($ticket->status === 'waiting_for_answer' ? 'warning' : 'info') }} me-2">
                                {{ $ticket->status === 'closed' ? 'بسته شده' : ($ticket->status === 'waiting_for_answer' ? 'در انتظار پاسخ' : 'در حال بررسی') }}
                            </span>
                            <span class="badge bg-{{ $ticket->priority === 'high' ? 'danger' : ($ticket->priority === 'medium' ? 'warning' : 'success') }}">
                                {{ $ticket->priority === 'high' ? 'مهم' : ($ticket->priority === 'medium' ? 'متوسط' : 'عادی') }}
                            </span>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="ticket-info mb-4">
                            <div class="row">
                                <div class="col-md-6">
                                    <p><strong>دپارتمان:</strong> {{ $ticket->department ? $ticket->department->title : '-' }}</p>
                                    @if($ticket->order_number)
                                        <p><strong>شماره سفارش:</strong> {{ $ticket->order_number }}</p>
                                    @endif
                                </div>
                                <div class="col-md-6 text-md-end">
                                    <p><strong>تاریخ ایجاد:</strong> {{ jdate($ticket->created_at)->format('Y/m/d H:i') }}</p>
                                    <p><strong>آخرین پاسخ:</strong> {{ $ticket->last_reply ? jdate($ticket->last_reply)->format('Y/m/d H:i') : 'بدون پاسخ' }}</p>
                                </div>
                            </div>
                        </div>

                        <div class="ticket-content mb-4">
                            <h5>متن تیکت:</h5>
                            <div class="p-3 bg-light rounded">
                                {{ $ticket->content }}
                            </div>
                        </div>

                        <div class="ticket-comments">
                            <h5>پاسخ‌ها:</h5>
                            @forelse($ticket->comments as $comment)
                                <div class="comment mb-3 {{ $comment->user_id ? 'admin-comment' : 'customer-comment' }}">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <div>
                                                    <strong>
                                                        @if($comment->user_id)
                                                            <i class="fas fa-user-shield text-primary"></i> پشتیبان
                                                        @else
                                                            <i class="fas fa-user text-success"></i> شما
                                                        @endif
                                                    </strong>
                                                </div>
                                                <small class="text-muted">
                                                    {{ jdate($comment->created_at)->format('Y/m/d H:i') }}
                                                </small>
                                            </div>
                                            <p class="mb-0">{{ $comment->comment }}</p>
                                            @if($comment->attachment)
                                                <div class="mt-2">
                                                    <a href="{{ asset('storage/' .$comment->attachment)}}" class="btn btn-sm btn-outline-primary" target="_blank">
                                                        <i class="fas fa-paperclip"></i> دانلود فایل پیوست
                                                    </a>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="alert alert-info">
                                    هنوز پاسخی برای این تیکت ثبت نشده است.
                                </div>
                            @endforelse
                        </div>

                        @if($ticket->status !== 'closed')
                            <div class="add-comment mt-4">
                                <h5>افزودن پاسخ:</h5>
                                <form action="{{ route('customer.tickets.comments.store', $ticket->id) }}" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <div class="mb-3">
                                        <textarea name="comment" class="form-control" rows="4" required placeholder="متن پاسخ خود را وارد کنید..."></textarea>
                                    </div>
                                    <div class="mb-3">
                                        <label for="attachment" class="form-label">فایل پیوست (اختیاری)</label>
                                        <input type="file" class="form-control" id="attachment" name="attachment">
                                    </div>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-paper-plane"></i> ارسال پاسخ
                                    </button>
                                </form>
                            </div>
                        @else
                            <div class="alert alert-warning mt-4">
                                این تیکت بسته شده است و امکان ارسال پاسخ وجود ندارد.
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
<style>
    .admin-comment .card {
        border-right: 3px solid #0d6efd;
    }
    .customer-comment .card {
        border-left: 3px solid #198754;
    }
</style>
@endpush