@extends('layouts.default1400-profile', ['title' => 'مشاهده درخواست پشتیبانی '])

@section('content')

<div>
	<a href="/tickets" class="block m-4 rounded-lg text-primary text-sm">
		<span class="flex">
			<img class="h-4 pl-2" src="/svgs-new1400/arrow-right-blue.svg">
			بازگشت
		</span>
	</a>

	<div class="grid grid-cols-1 bg-gray-50 rounded-xl m-2">

		<div class=" bg-gray-100 rounded-t-xl py-2 px-4 text-gray-500">
			{{ $data->title }}
		</div>

		<div class="grid grid-cols-1 p-4">


			@foreach ($data->TicketItems as $item)

			@if($item->user_id == $data->user_id)

			<div class="place-self-start bg-blue-100 rounded-xl p-3 my-4 text-blue-500 min-w-[30%] max-w-xl">
				{{ $item->content }}

				<div class="flex justify-between text-sm text-blue-300 px-4 pt-2">
					<p>{{ GetShamsiDate($item->created_at) }}</p>
					<p>{{ $item->User->first_name . ' ' . $item->User->last_name }}</p>
				</div>
			</div>

			@else

			<div class="place-self-end bg-blue-400 rounded-xl p-3 my-4 text-gray-100 min-w-[30%] max-w-2xl">
				{{ $item->content }}

				<div class="flex justify-between  text-sm text-blue-200 px-4 pt-2">
					<p>{{ GetShamsiDate($item->created_at) }}</p>
					<p>{{ $item->User->first_name . ' ' . $item->User->last_name }}</p>
				</div>

			</div>
			@endif
			@endforeach

		</div>
	</div>



	<form autoComplete="off" class="m-4" method="post" action="/ticket/{{ $data->id }}/submit">
		@csrf

		<div class="lg:w-4/5">

			<p class="text-xs mt-5 mr-2 text-blue-600">
				<span class="inline-flex"> <img class="h-3" src="/svgs-new1400/circle-info-blue.svg"></span>
				جهت تسریع در روند پاسخ گویی ، تا جای ممکن پیام خود را در قالب یک پیام ارسال کنید.
			</p>

			<textarea name="content" id="tcontent" rows="5" placeholder="پیام خود را بنویسید ..."
				class="my-2 p-4 w-full rounded-lg text-gray-500 placeholder-gray-400 border focus:outline-none"></textarea>
		</div>

		<span class="grid justify-items-end">

			<div>
				<a href="/ticket/{{ $data->id }}/close">بستن درخواست</a>

				<button type="submit" class="bg-blue-500 mx-5 py-2 px-5 rounded-lg text-white text-sm"
					onclick="return check();">
					ارسال پاسخ
				</button>
			</div>


		</span>
	</form>


</div>


@stop

@section('scripts')
<script src="/js/tickets.js"></script>
@stop