@extends('layouts.app')
@section('title', 'تذكرة دعم')
@section('page_title', $ticket->subject)
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('tickets.index') }}">تذاكر الدعم</a></li>
    <li class="breadcrumb-item active">{{ $ticket->code }}</li>
@endsection

@section('page_actions')
    @can('tickets.edit')
        <a href="{{ route('tickets.edit', $ticket) }}" class="btn btn-light"><i class="fa-solid fa-pen ms-2"></i>تعديل</a>
    @endcan
@endsection

@section('content')
<div class="row g-3">
    <div class="col-xl-4">
        <div class="card mb-3">
            <div class="card-body">
                <div class="profile-head mb-3">
                    <div class="profile-avatar bg-{{ $ticket->priority_color }}"><i class="fa-solid fa-headset"></i></div>
                    <div>
                        <h2 class="h6 fw-bold mb-1">{{ $ticket->code }}</h2>
                        <div class="mt-2">
                            {!! badge($ticket->status_label, $ticket->status_color) !!}
                            {!! badge($ticket->priority_label, $ticket->priority_color) !!}
                            {!! badge($ticket->type_label, 'secondary') !!}
                        </div>
                    </div>
                </div>

                <ul class="detail-list">
                    <li><span class="dl-label">العميل</span>
                        <span class="dl-value"><a href="{{ route('customers.show', $ticket->customer) }}">{{ $ticket->customer?->display_name ?? '—' }}</a></span>
                    </li>
                    <li><span class="dl-label">الجوال</span><span class="dl-value">{{ $ticket->customer?->phone ?? '—' }}</span></li>
                    <li><span class="dl-label">المركبة</span>
                        <span class="dl-value">
                            @if ($ticket->vehicle)
                                <a href="{{ route('vehicles.show', $ticket->vehicle) }}">{{ $ticket->vehicle->plate_number }}</a>
                            @else — @endif
                        </span>
                    </li>
                    <li><span class="dl-label">الجهاز</span>
                        <span class="dl-value">
                            @if ($ticket->deviceUnit)
                                <a href="{{ route('devices.show', $ticket->deviceUnit) }}" class="font-monospace small">{{ $ticket->deviceUnit->imei }}</a>
                            @else — @endif
                        </span>
                    </li>
                    <li><span class="dl-label">المسؤول</span><span class="dl-value">{{ $ticket->assignee?->name ?? 'لم يُسند' }}</span></li>
                    <li><span class="dl-label">تاريخ الفتح</span><span class="dl-value">{{ arabicDate($ticket->created_at, true) }}</span></li>
                    <li><span class="dl-label">تاريخ الحل</span><span class="dl-value">{{ arabicDate($ticket->resolved_at, true) }}</span></li>
                    <li><span class="dl-label">فتحها</span><span class="dl-value">{{ $ticket->creator?->name ?? '—' }}</span></li>
                </ul>
            </div>
        </div>

        @can('tickets.edit')
            <div class="card">
                <div class="card-header"><span><i class="fa-solid fa-shuffle text-primary ms-2"></i>تحديث الحالة</span></div>
                <div class="card-body">
                    <form action="{{ route('tickets.status', $ticket) }}" method="POST">
                        @csrf
                        <select name="status" class="form-select mb-2">
                            @foreach ($statuses as $k => $v)
                                <option value="{{ $k }}" @selected($ticket->status === $k)>{{ $v }}</option>
                            @endforeach
                        </select>
                        <textarea name="resolution" class="form-control mb-2" rows="3" placeholder="الحل / الإجراء المتخذ">{{ $ticket->resolution }}</textarea>
                        <button class="btn btn-primary btn-sm w-100"><i class="fa-solid fa-check ms-1"></i>تحديث</button>
                    </form>
                </div>
            </div>
        @endcan
    </div>

    <div class="col-xl-8">
        <div class="card mb-3">
            <div class="card-header"><span><i class="fa-solid fa-circle-info text-info ms-2"></i>تفاصيل المشكلة</span></div>
            <div class="card-body">
                <h3 class="h6 fw-bold">{{ $ticket->subject }}</h3>
                <p class="mb-0 text-muted" style="white-space: pre-line">{{ $ticket->description ?: 'لا توجد تفاصيل إضافية.' }}</p>

                @if ($ticket->resolution)
                    <div class="alert alert-success small mt-3 mb-0">
                        <strong><i class="fa-solid fa-circle-check ms-1"></i>الحل:</strong>
                        <div style="white-space: pre-line">{{ $ticket->resolution }}</div>
                    </div>
                @endif
            </div>
        </div>

        <div class="card">
            <div class="card-header"><span><i class="fa-solid fa-comments text-primary ms-2"></i>الردود والمتابعة ({{ $ticket->replies->count() }})</span></div>
            <div class="card-body">
                @forelse ($ticket->replies as $reply)
                    <div class="d-flex gap-2 mb-3 pb-3 border-bottom">
                        <img src="{{ $reply->user?->avatar_url ?? '' }}" alt="" class="rounded-circle" style="width:36px;height:36px;object-fit:cover">
                        <div class="flex-grow-1">
                            <div class="d-flex justify-content-between align-items-center flex-wrap gap-1">
                                <span class="fw-bold small">{{ $reply->user?->name ?? 'مستخدم محذوف' }}</span>
                                <span class="text-muted small">
                                    {{ arabicDate($reply->created_at, true) }}
                                    @if ($reply->is_internal) {!! badge('ملاحظة داخلية', 'warning') !!} @endif
                                </span>
                            </div>
                            <div class="small mt-1" style="white-space: pre-line">{{ $reply->message }}</div>
                            @if ($reply->attachment)
                                <a href="{{ \Illuminate\Support\Facades\Storage::disk('public')->url($reply->attachment) }}"
                                   target="_blank" class="small d-inline-block mt-1">
                                    <i class="fa-solid fa-paperclip"></i> عرض المرفق
                                </a>
                            @endif
                        </div>
                    </div>
                @empty
                    <p class="text-muted text-center py-3">لا توجد ردود بعد</p>
                @endforelse

                @can('tickets.edit')
                    <form action="{{ route('tickets.reply', $ticket) }}" method="POST" enctype="multipart/form-data" class="mt-3">
                        @csrf
                        <div class="mb-2">
                            <textarea name="message" class="form-control" rows="3" placeholder="اكتب ردك هنا..." required></textarea>
                        </div>
                        <div class="row g-2 align-items-center">
                            <div class="col-md-6"><input type="file" name="attachment" class="form-control form-control-sm"></div>
                            <div class="col-md-3">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="is_internal" value="1" id="isInternal">
                                    <label class="form-check-label small" for="isInternal">ملاحظة داخلية</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <button class="btn btn-primary btn-sm w-100"><i class="fa-solid fa-paper-plane ms-1"></i>إرسال الرد</button>
                            </div>
                        </div>
                    </form>
                @endcan
            </div>
        </div>
    </div>
</div>
@endsection