@extends('site.layouts.site-layout')
@section('title', 'مشاهده تیکت ' . $ticket->name)

@section('content')

<div class="bread-crumb pt-3">
    <div class="container-fluid">
        <div class="content-box">
            <div class="container-fluid">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}" class="font-14 text-muted">خانه</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('panel.index') }}" class="font-14 text-muted">پنل کاربری</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('panel.tickets.index') }}" class="font-14 text-muted">درخواست های پشتیبانی من</a></li>
                        <li class="breadcrumb-item active main-color-one-color font-14" aria-current="page">{{ $ticket->name }}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</div>

<div class="content">
    <div class="container-fluid">

        <div class="custom-filter d-lg-none d-block">
            <button class="btn btn-filter-float border-0 main-color-two-bg shadow-box px-4 rounded-3 position-fixed"
                style="z-index:999;bottom:80px;" type="button"
                data-bs-toggle="offcanvas" data-bs-target="#panelSideCanvas" aria-controls="panelSideCanvas">
                <i class="bi bi-list font-20 fw-bold text-white"></i>
                <span class="d-block font-14 text-white">منو</span>
            </button>
            <div class="offcanvas offcanvas-start" tabindex="-1" id="panelSideCanvas">
                <div class="offcanvas-header">
                    <h5 class="offcanvas-title">منو پنل</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                    <div class="panel-side">
                        <div class="content-box pb-0">
                            <div class="container-fluid">
                                @include('panel._sidebar')
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="dashboard-panel">
            <div class="row gy-3">

                <div class="col-lg-3 d-lg-block d-none">
                    <div class="panel-side">
                        <div class="content-box pb-0">
                            <div class="container-fluid">
                                @include('panel._sidebar')
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-9">
                    <div class="content-box">
                        <div class="container-fluid">

                            @if(session('success'))
                            <div class="alert alert-success font-13">{{ session('success') }}</div>
                            @endif
                            @if(session('error'))
                            <div class="alert alert-danger font-13">{{ session('error') }}</div>
                            @endif
                            @if($errors->any())
                            <div class="alert alert-danger font-13">
                                <ul class="mb-0 ps-3">
                                    @foreach($errors->all() as $e)
                                    <li>{{ $e }}</li>
                                    @endforeach
                                </ul>
                            </div>
                            @endif

                            {{-- Ticket header --}}
                            <div class="title-panel">
                                <div class="d-flex align-items-baseline flex-wrap gap-2">
                                    <div class="ticket-status me-4">
                                        <span class="bg-{{ $ticket->statusColor() }} badge rounded-0 font-14 me-2">{{ $ticket->statusLabel() }}</span>
                                        <span class="text-muted font-16 fw-lighter mb-0" dir="ltr">{{ $ticket->name }}</span>
                                    </div>
                                    <div class="ticket-created-at me-4">
                                        <i class="bi bi-clock me-1"></i>
                                        <span>تاریخ ایجاد {{ $ticket->shamsi_created }}</span>
                                    </div>
                                    <div class="ticket-created-at me-4">
                                        <i class="bi bi-arrow-left me-1"></i>
                                        <span>به روز شده {{ $ticket->shamsi_updated }}</span>
                                    </div>
                                </div>
                                <div class="mt-2">
                                    <span class="font-14 fw-bold">موضوع:</span>
                                    <span class="font-14">{{ $ticket->subject }}</span>
                                    @if($ticket->department)
                                    <span class="badge bg-light text-dark ms-2">{{ $ticket->department->name }}</span>
                                    @endif
                                </div>
                                @if($ticket->order)
                                <div class="mt-2">
                                    <span class="font-14 fw-bold">سفارش مرتبط:</span>
                                    <a href="{{ route('panel.orders.show', $ticket->order->order_number) }}"
                                       class="font-14 main-color-one-color text-decoration-none" dir="ltr">
                                        {{ $ticket->order->order_number }}
                                    </a>
                                </div>
                                @endif
                            </div>

                            <div class="ticket-message mt-3">

                                {{-- Messages --}}
                                @foreach($ticket->replies as $reply)
                                    @php $isAdmin = $reply->isAdmin(); @endphp
                                    <div class="comment shadow-none {{ $isAdmin ? 'active' : '' }}">
                                        <div class="comment-author-ava">
                                            <img src="{{ asset('theme/assets/image/user.png') }}" alt="Avatar">
                                        </div>
                                        <div class="comment-body">
                                            <p class="comment-text">{!! nl2br(e($reply->message)) !!}</p>

                                            @if($reply->attachment)
                                            <a href="{{ asset('uploads/tickets/' . $reply->attachment) }}" target="_blank"
                                               class="d-inline-flex align-items-center gap-1 main-color-one-color font-12 mb-2">
                                                <i class="bi bi-paperclip"></i> مشاهده فایل ضمیمه
                                            </a>
                                            @endif

                                            <div class="comment-footer">
                                                <span class="comment-meta">
                                                    {{ $isAdmin ? 'پشتیبانی' : ($ticket->user->first_name . ' ' . $ticket->user->last_name) }}
                                                </span>
                                                <div class="comment-date float-end">
                                                    <span class="comment-meta">{{ $reply->shamsi_created }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach

                                {{-- Reply area --}}
                                @if($ticket->isClosed())
                                <div class="my-4">
                                    <div class="alert alert-danger text-center">
                                        تیکت بسته شده است و امکان ارسال پاسخ جدید وجود ندارد
                                    </div>
                                </div>
                                @else
                                <h5 class="mb-3">ارسال پاسخ</h5>
                                <form method="POST" action="{{ route('tickets.reply', $ticket->name) }}" enctype="multipart/form-data">
                                    @csrf
                                    <div class="form-group mb-3">
                                        <textarea class="form-control form-control-rounded" name="message" rows="6"
                                                  placeholder="پیام خود را وارد کنید..." required>{{ old('message') }}</textarea>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label font-13">تصویر ضمیمه (اختیاری)</label>
                                        <input class="form-control" type="file" name="attachment" accept="image/*">
                                        <div class="form-text font-12">فقط تصویر: JPG، PNG، GIF، WebP — حداکثر ۵ مگابایت</div>
                                    </div>
                                    <div class="text-right">
                                        <button class="btn border-0 main-color-one-bg text-white" type="submit">
                                            <i class="bi bi-send me-1 text-white fs-6"></i>ارسال پاسخ
                                        </button>
                                    </div>
                                </form>
                                @endif

                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

@endsection
