@extends('layouts.admin_default')
@section('title', 'Tickets Details')
@section('page', 'Tickets / Details')
@section('content')

<style type="text/css">
   .select2-container--default .select2-selection--single .select2-selection__rendered {
       line-height: 15px!important;
   }

   .imgDiv img {
       width: 150px;
       margin-right: 10px;
   }

   .imgDiv{
      width: 100%;
      display: flex;
   }

   .select2{
      width: 100% !important;
      float: left;
   }
</style>


<div class="layout-px-spacing">
   <div class="row layout-top-spacing">
      <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">
         <div class="widget-content widget-content-area br-6">
            <div id="delete_bd_ms"></div>
             @if(isset($errors) && $errors->any())
             @foreach($errors->all() as $error )
            <div class="alert alert-danger fade in alert-dismissible show" style="margin-bottom: 5px;">
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
               <span aria-hidden="true" style="font-size:20px">×</span>
               </button>
                {{$error}}
            </div>
            @endforeach
            @endif
            @if(session()->has('message'))
            <div class="alert alert-success fade in alert-dismissible show" style="margin-bottom: 5px;">
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
               <span aria-hidden="true" style="font-size:20px">×</span>
               </button>
               {{ session()->get('message') }}
            </div>
            @elseif(session()->has('error'))
            <div class="alert alert-danger fade in alert-dismissible show" style="margin-bottom: 5px;">
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
               <span aria-hidden="true" style="font-size:20px">×</span>
               </button>
               {{ session()->get('error') }}
            </div>
            @endif
            

            @if(count($technicians) > 0)
               <div class="row mb-4 mt-4">
                  <div class="col-sm-12 col-md-12 col-lg-12 ">
                     <div class="form-group">
                        <label for="technician">Technician*</label>
                        <select class="js-example-basic-single" onchange="updateTechnician()" name="technician" id="technician" required>
                           @foreach($technicians as $technician)
                           <option @if($ticket->technician_id == $technician->id){{'selected'}}@endif value="{{ $technician->id }}">{{ $technician->tech_name }}</option>
                           @endforeach
                        </select>
                     </div>
                  </div>
               </div>
            @endif


            <div class="table-responsive mb-4 mt-4">
               <h3>Ticket Details</h3>
               <table class="table table-hover">
                  <tr>
                     <th>Ticket Id:</th>
                     <td>{{$ticket->ticket_id}}</td>
                  </tr>
                  <tr>
                     <th>User Name:</th>
                     <td>{{$ticket->user_name}}</td>
                  </tr>
                  <tr>
                     <th>Product Name:</th>
                     <td>{{$ticket->product_name}}</td>
                  </tr>
                  <tr>
                     <th>Product Serial No</th>
                     <td>{{$ticket->product_serial_no}}</td>
                  </tr>
                  <tr>
                     <th>Service Type:</th>
                     <td>{{$ticket->service_type}}</td>
                  </tr>
                  <tr>
                     <th>Remark:</th>
                     <td>{{$ticket->remark}}</td>
                  </tr>
                  
                  <tr>
                     <th>Image:</th>
                     <td>
                        <div class="imgDiv">
                           @php 
                           if($ticket->images){
                              $images = explode(',',$ticket->images);
                           }else{
                               $images =[];
                           }
                           @endphp

                           @foreach($images as $image)
                           <img src="{{asset($image)}}">
                           <!-- <img src="https://www.seiu1000.org/sites/main/files/main-images/camera_lense_0.jpeg"> -->
                           @endforeach
                        </div>
                     </td>
                  </tr>
                  <tr>
                     <th>Created Date:</th>
                     <td>{{$ticket->created_at}}</td>
                  </tr>
               </table>
            </div>

            <div class="ticketStatus mb-4 mt-4">
               <h2>Ticket Status Details:</h2>
               <div class="col-md-12 text-right">
                  <a href="javascript:void();" onclick="addModal();" class="btn btn-primary mb-2">Update Status</a>
               </div>
               <table id="multi-column-ordering" class="table table-hover">
                  <thead>
                     <tr>
                        <th>Ticket Id</th>
                        <th>Status</th>
                        <th>Remark</th>
                        <th>Created Date</th>
                     </tr>
                  </thead>
                  <tbody>
                     @foreach($ticketStatusHistory as $ticketHistory)
                     <tr>
                        <td>{{$ticketHistory->ticket_id}}</td>
                        <td>{{$ticketHistory->service_status_title}}</td>
                        <td>{{$ticketHistory->remark}}</td>
                        <td>{{$ticketHistory->created_at}}</td>
                     </tr>
                     @endforeach
                  </tbody>
                  <!-- <tfoot>
                     <tr>
                        <th>Ticket Id</th>
                        <th>Status</th>
                        <th>Remark</th>
                        <th>Created Date</th>
                     </tr>
                  </tfoot> -->
               </table>
            </div>
         </div>
      </div>
   </div>
</div>


<div class="modal fade" id="add_blog_modal">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <form id="ticketStatusForm" method="post" action="{{route('ticket.update-status')}}" enctype="multipart/form-data" novalidate>
            @csrf
            <input type="hidden" name="ticket_id" value="{{$ticket->ticket_id}}">
            <div class="modal-header">
               <h5 class="modal-title">Ticket Status</h5>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
               </button>
            </div>
            <div class="modal-body">
               <div class="row">
                  @php $serviceStatus = \App\Models\ServiceStatus::distinct()->where('status',1)->get(['id', 'title']); @endphp
                  <div class="col-sm-6 col-md-6 col-lg-6 ">
                     <div class="form-group">
                        <label for="status">Status*</label>
                        <select class="form-control" name="status" id="status" required>
                            <option value="">--Select Status--</option>
                            @foreach($serviceStatus as $ser_status)
                           <option value="{{ $ser_status->id }}">{{ $ser_status->title }}</option>
                           @endforeach
                        </select>
                     </div>
                  </div>
                  <div class="col-sm-6 col-md-6 col-lg-6">
                     <div class="form-group">
                        <label for="remark">Remarks</label>
                        <textarea col='3' class="form-control" name="remark" id="remark"></textarea>
                     </div>
                  </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
               <!-- <button type="button" class="btn btn-primary" data-dismiss="modal">No</button> -->
               <button type="submit" class="btn btn-primary" >Submit</button>
            </div>
         </form>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>


<!-- confirm modal -->
<div class="modal fade" id="confirmModal">
   <div class="modal-dialog action-modal">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="">Update Technician</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <div class="modal-body">
            <p id="">Do you want to assign another technician? </p>
         </div>
         <div class="modal-footer justify-content-between">
            <input type="hidden" name="technician_id" id="technician_id">
            <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="notUpdateTicketTech()">No</button>
            <button type="button" class="btn btn-success" onclick="ajax_update_ticket_technician();">Yes, Update</button>
         </div>
      </div>
      <!-- /.modal-content -->
   </div>
   <!-- /.modal-dialog -->
</div>

@endsection
@section('footer')
<script type="text/javascript">
   $(document).ready(function(){
      /*ajax header setup*/
       $.ajaxSetup({
           headers: {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
           }
       });
   });


   function addModal(){
        $("#add_blog_modal").modal('show');
   }

   $( "#ticketStatusForm" ).validate({ });



   function updateTechnician(){
      $('#technician_id').val($('#technician').val());      
      $("#confirmModal").modal('show');
   }

   function ajax_update_ticket_technician(){
      var technician_id = $('#technician_id').val();  
      let _url = "{{route('updateTicketTechnician')}}";
      // let _token = $('meta[name="csrf-token"]').attr('content');
      // _token: _token

      $.ajax({
           url: _url,
           type: 'POST',
           data: {
            technician_id: technician_id,
            ticket_id: '{{$ticket->id}}',
           },
           success: function(response) {
               console.log(response);
               let result = JSON.parse(response);
               if(result.status){
                  mySuccessToast(result.message);
                  $('#confirmModal').modal('hide');
                  setTimeout(()=>{
                     window.location.reload();
                  },1000);
               }else{
                   myFaildToast('Something went wrong.');
               }
           }
       });
   }


   function notUpdateTicketTech(){
      $('#confirmModal').modal('hide');
      var tech_id = "{{$ticket->technician_id}}";
      $('#technician_id').val(tech_id); 
      $('#technician option[value="'+tech_id+'"]').prop('selected', true);
      $('#technician').trigger('change');
   }



</script>

@endsection