@extends('layouts.admin-master')
@section('content')


<div class=" container my-3">
   <style>
      /* claim  */
      .claim {
         border-radius: 20px;
         background-color: white;
      }
      .ctext{
         color: #1f93d1 !important;
      }
      .msg {
            border-radius: 10px;
        }
        .cp{
            color:#ff3394; 
        }
        .cg{
            color:green
        }
   </style>

   <div class="col-md-12 shadow claim">
      <div class="container">
         <div class="row">
            <div class="col-md-4">
               <div class="mb-5 my-3">
                  <h4 class="text ctext">{{$complain->count()}} Complaints Found</h4>
               </div>
            </div>
            <div class="col-md-4">
               <div class="accordion" id="accordionExample">
                  <div class="">
                     <button class="" type="button" data-bs-toggle="collapse" data-bs-target="#filter" aria-expanded="false" aria-controls="collapseThree">
                        filter
                     </button>
                  </div>
               </div>
            </div>

            <div class="col-md-4 ">
               <!-- Search -->
               <form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
                  <div class="input-group">
                     <input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
                     <div class="input-group-append">
                        <button class="btn btn-primary" type="button">
                           <i class="fas fa-search fa-sm"></i>
                        </button>
                     </div>
                  </div>
               </form>
            </div>
         </div>
         
        <div id="filter" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body col-md-4">
               Complaint Status
               <select name="filter" class="form-control">
                  <option value="">Chose Complaint Status</option>
                  <option value="all">All</option>
                  <option value="open">Open</option>
                  <option value="pending">Pending</option>
                  <option value="completed">Completed</option>
                  <option value="rejected">Rejected</option>
               </select>
            </div>
         </div>
      </div>
   </div>

   @foreach($complain as $row)
   <div class="col-md-12 shadow claim my-3">
      <div class="accordion" id="accordionExample">
         <div class="accordion-item border-0">
            <h2 class="accordion-header" id="headingThree">
               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{$row->complain_id}}" aria-expanded="false" aria-controls="collapseThree">
                  <table class="table table-borderless  ">
                     <tbody class="my-5">
                        <tr>
                           <td>
                              <dt><i class="fa-solid fa-user" style="font-size: 50px;"></i></dt>
                           </td>
                           <td>
                              <dt> {{$row->complain_subject}} </dt>
                              <dd>
                                 <button class="btn btn-outline-danger" disable> {{$row->complain_type}} </button>
                                 by {{$row->sender_name}} at {{$row->created_at}}
                              </dd>
                           </td>
                           <td>
                              <dd class='mt-4'> Token No: {{$row->token_no}} </dd>
                           </td>
                           <td>
                              <dd class='mt-4'> Status: {{$row->status}}</dd>
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </button>
            </h2>
           
            <div id="collapse{{$row->complain_id}}" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
               <div class="accordion-body">

                  <strong>{{$row->description}} </strong>
                  @if($row->status != 'completed')
                    <div>
                        <div class="accordion-body col-md-3 ">
                            <select name="complaints-options" data-complaint-id="{{$row->complain_id}}" class=" complaintAction form-control">
                            <option value="" >Action</option>
                            <option value="completed" class="cg">Completed</option>
                            <option value="rejected" class="cp">Rejected</option>
                            </select>
                        </div>
                    </div>
                  @endif

                  @foreach($row->ComplainChart as $chat)
                  <div class="my-2">
                    @if($chat->reply_by == 'user')
                     <div class="col-md-6 ">
                        {{$chat->reply_by_name}}   {{$chat->message_on}}   
                        <p class=" border msg p-2">{{$chat->message}}</p>
                     </div>
                    @else   
                     <div class="col-md-6 ms-auto">
                     {{$chat->reply_by_name}}   {{$chat->message_on}}
                        <p class="border msg p-2">{{$chat->message}} </p>
                     </div>
                    @endif
                  </div>
                  @endforeach()
                  <div class="row ">
                        <input type="hidden" class="complain-id getComplain" value="{{$row->complain_id}}" >
                        <div class="col-md-4 p-0 ms-auto">
                           <input type="text" placeholder="Text a message..." class="form-control form-control-lg message ">
                        </div>
                        <div class="col-md-1 p-0 mt-2">
                           <i class="fa fa-paper-plane sendReply" style="cursor: pointer; color: #007bff; font-size: 24px;"></i>
                        </div>
                     </div>
               </div>

            </div>
         </div>
      </div>
   </div>
   @endforeach()
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>      

$('.complaintAction').on('change',function(){
    $(this).attr("disabled", true);
    var complaintId = $(this).attr("data-complaint-id");
    var status = $(this).val();
            $.ajax
            ({ 
                url: '{{route("change.ticket.status")}}',
                type: 'Post',
                dataType: 'json',
                data: {
                    _token: '{{csrf_token()}}',
                    status : status,
                    complaintId : complaintId
                },
                success: function(result)
                { 
                   console.log(result);
                }
            });
        });

    $('.sendReply').on('click',function(){
        $(this).attr("disabled", true);
        var complaintId = $('.getComplain').val();
        var message = $('.message').val();
            $.ajax
            ({ 
                url: '{{url("/ticket/message/save")}}',
                type: 'Post',
                dataType: 'json',
                data: {
                    _token: '{{csrf_token()}}',
                    message : message, 
                    reply_by : 'admin',
                    complain_id : complaintId
                },
                success: function(result)
                { 
                   console.log(result);
                   $(window).load();
                   $(this).attr("disabled", false);
                }
            });
        });
</script>

@endsection