@extends('layouts.app')
@section('title', 'تذكرة ' . $ticket->reference)
@section('page_title', 'التذكرة ' . $ticket->reference)
@section('page_subtitle', $ticket->subject)

@section('page_actions')
    @if (auth()->user()->hasPermission('tickets.close'))
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#statusModal">
            <i class="bi bi-arrow-repeat"></i> تغيير الحالة
        </button>
    @endif
@endsection

@section('content')
<div class="row g-3">
    <div class="col-lg-8">
        <div class="card mb-3">
            <div class="card-header">تفاصيل البلاغ</div>
            <div class="card-body">
                <p>{!! nl2br(e($ticket->description ?? '—')) !!}</p>
                @if ($ticket->resolution)
                    <hr>
                    <h6>الحل الموثق</h6>
                    <p class="mb-0">{!! nl2br(e($ticket->resolution)) !!}</p>
                @endif
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header">سلسلة الردود</div>
            <div class="card-body">
                @forelse ($ticket->replies as $reply)
                    <div class="border-bottom pb-2 mb-2">
                        <div class="d-flex justify-content-between">
                            <strong>{{ $reply->user?->name ?? 'النظام' }}</strong>
                            <small class="text-muted">
                                {{ $reply->created_at->format('Y-m-d H:i') }}
                                @if ($reply->is_internal)
                                    <span class="badge bg-warning text-dark">داخلي</span>
                                @endif
                            </small>
                        </div>
                        <div>{!! nl2br(e($reply->body)) !!}</div>
                    </div>
                @empty
                    <div class="text-muted">لا توجد ردود بعد</div>
                @endforelse
            </div>
            @if (auth()->user()->hasPermission('tickets.edit'))
                <div class="card-footer">
                    <form method="POST" action="{{ route('tickets.reply', $ticket->id) }}">
                        @csrf
                        <textarea name="body" class="form-control mb-2" rows="3" placeholder="اكتب ردك..." required></textarea>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="is_internal" value="1" id="is_internal">
                                <label class="form-check-label" for="is_internal">ملاحظة داخلية</label>
                            </div>
                            <button class="btn btn-primary btn-sm"><i class="bi bi-send"></i> إرسال</button>
                        </div>
                    </form>
                </div>
            @endif
        </div>
    </div>

    <div class="col-lg-4">
        @include('tickets.partials.side')
    </div>
</div>

@include('tickets.partials.status-modal')
@endsection

@push('scripts')
<script>
jQuery(function ($) {
    $('#statusForm, #csatForm').on('submit', function (e) {
        e.preventDefault();
        MR.submit(this, { done: function () { location.reload(); } });
    });
});
</script>
@endpush