@extends('layouts.master')
@section('title', 'Ticket')
@push('styles')
    <style>
       .change_status{
          width: 15%;
       }
    </style>
@endpush

@section("content")
 
          <div class="card chat-sidebar-container h-100" data-sidebar-container="chat">
            <div class="chat-sidebar-wrap" data-sidebar="chat">
              <div class="border-end">
                <div class="contacts-scrollable perfect-scrollbar">
                  <div class="p-3 px-1 d-flex align-items-center border-bottom">
                    <img class="avatar-sm rounded-circle me-1"
                      src="{{ asset('backend/images/faces/2.png') }}"
                      alt="alt"/>
                    <div class="d-flex flex-column w-75">
                      <h6 class="m-0 w-100"> {{ ucwords($member->user->details->first_name ?? '') }} {{ ucwords($member->user->details->last_name ?? '') }}</h6>
                      <span class="text-muted text-small w-100">{{$member->user->details->email ?? ''}}</span>
                    </div>
                  </div>

                  <nav class="list-group border-0">
                    <a class="list-group-item border-0"><i class="bi bi-ticket me-2"></i>{{$ticket->ticket_no}} </a>
                    @if($redirectLink != '' )
                        <a class="list-group-item border-0" href="{{ $redirectLink }}" target="_new"><i class="fas fa-user"></i>{{$member->user->details->username ??''}}</a>
                    @endif
                    <a class="list-group-item border-0"><i class="bi bi-shield-check me-2"></i><span class="ticket_status"><span class="ticketCurrentStatus badge bg-{{ (($ticket->status == 0) ? 'info' : ( ($ticket->status == 1) ? 'warning' : 'primary')) }}">{{ $ticket->getStatus() }}</span></span></a>
                    <a class="list-group-item border-0 d-flex"><i class="bi bi-phone me-2 mt-1"></i><div class="w-full">{{$ticket->ticketDetails->ip}}</div></a>
                    <a class="list-group-item border-0"><i class="bi bi-globe me-2"></i>{{$ticket->domain->name ?? 'N-A'}}</a>
                    <a class="list-group-item border-0 d-flex"><i class="bi bi-exclamation-triangle me-2 mt-1"></i><div class="w-full">{{$ticket->category->name ?? 'N-A'}}</div></a>
                    <a class="list-group-item border-0"><i class="bi bi-calendar3 me-2"></i>{{ $ticket->created_at->diffForHumans() }}</a>
                    <a class="list-group-item border-0"><i class="bi bi-arrow-counterclockwise me-2"></i>{{ $ticket->updated_at->diffForHumans() }}</a>
                  </nav>   
                 
                </div>
              </div>
            </div>
            <div class="chat-content-wrap" data-sidebar-content="chat">
              <div class="d-flex ps-3 pe-3 pt-2 pb-2 o-hidden box-shadow-1 chat-topbar">
                <a class="link-icon d-md-none" data-sidebar-toggle="chat"><i class="icon-regular i-Right ms-0 me-3"></i></a>
                @if ($ticket->ticketDetails->agent_id == $supportUser->id || $ticket->ticketDetails->agent_id == 0)
                  <div class="form-group change_status">
                      <div class="relative z-0 my-1 group">
                          <label for="kyc_status" class="ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Change Status') }}</label>
                          <select name="kyc_status" id="kyc_status" class="form-select form-control rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-8" onchange="changeTicketStatus()">
                              <option value="">{{__('Change Status')}}</option>
                              @foreach(config('constants.tickets.ticket_status') as $status => $index)
                                  <option value="{{ $index }}" {{$ticket->status == $index ? 'selected' : ''}}>{{ $status }}
                                  </option>
                              @endforeach
                          </select>
                          <div class="text-danger error kyc_status_error"></div>
                      </div>
                  </div>
                @endif
                <div class="flex-grow-1"></div>
                <a href="{{url('admin/member/view') . "/" . basicEncrypt($member->member_id).'#TicketList'}}" data-toggle="tooltip" data-placement="top" title="Back" class="btn btn-primary float-end"> {!! renderIconHtml('back') !!}{{__('Back')}}</a>

              </div>
              <div class="chat-content perfect-scrollbar" data-suppress-scroll-x="true">
                <div id="ticket_responses">
                  <!-- Ticket Response will be load here using AJAX -->
                </div>
              </div>
              <div class="ps-3 pe-3 pt-3 pb-3 box-shadow-1 chat-input-area">
                @if ($ticket->ticketDetails->agent_id == $supportUser->id || $ticket->ticketDetails->agent_id == 0)
                  <form id="supportTicketResponseForm" method="post" action="{{ route('admin.ticket.addTicketResponse', [basicEncrypt($ticket->id)])}}">
                    <div class="row">
                      <div class="relative z-0 w-full mb-2 mt-3 col-xl-4 col-lg-4 col-sm-4 col-12">
                        <label class="ml-3 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10" for="template">{{__('Template') }}</label>
                            <select class="form-select form-control rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11" name="template">
                              <option value="0">{{__('Select Template')}}</option>
                              @if(count($supportTemplate)>0)
                                @foreach($supportTemplate as $template) 
                                  <option value="{{basicEncrypt($template->id)}}">{{$template->title}}</option>
                                @endforeach
                              @endif
                            </select>
                            <span class="template_error text-danger error"></span>
                      </div>
                    <div class="relative z-0 w-full mb-2 mt-3  col-xl-4 col-lg-4 col-sm-4 col-12">
                      <input type="file" class="form-control rounded-lg" name="file[]" multiple>
                    </div>
                  </div>

                    <div class="form-group">
                      <textarea class="form-control form-control-rounded w-100 summernote" name="description" id="ticketDescription" placeholder="Type your message" name="message" rows="3"
                      ></textarea>
                    </div>
                    <div class="d-flex">
                      <div class="flex-grow-1"></div>
                      <button class="btn btn-icon btn-rounded btn-primary me-2 btn-send-response">{!! renderIconHtml('save') !!}{{__('Send')}}</button>
                    </div>
                  </form>
                @endif
              </div>
            </div>
          </div>

          <button id='tt' style="display: none;"></button>
          <input type="hidden" id="agentId" value="{{  $ticket->ticketDetails->agent_id }}">
          <input type="hidden" id="authId" value="{{  $supportUser->id }}">
          <input type="hidden" id="ticketStatusURL" value="{{route('admin.ticket.updateTicketStatus',[basicEncrypt($ticket->id)])}}">
          <input type="hidden" id="ticketTakeControl" value="{{route('admin.ticket.updateTicketControl',[basicEncrypt($ticket->id)])}}">
          <input type="hidden" id="ticketHistoryDetails" value="{{route('admin.ticket.ticketDetailsHistory',[basicEncrypt($ticket->id)])}}">
          <input type="hidden" id="ticketResponse" value="{{ route('admin.ticket.getTicketResponses', [ basicEncrypt($ticket->id) ])}}">
</section>
@endsection
@push('scripts')
<script src="{{asset('backend/js/sidebar.script.min.js')}}"></script>
<script src="{{ asset('backend/js/pages-js/ticket-view.js') }}"></script>
@endpush