@extends('layouts.app')

@section('page_css')
  @parent
  <style>
    .user_request_table_height
    {
      max-height:35rem; overflow-y:auto;
    }
  </style>
@endsection

@section('content')
  <!-- Content -->
  <div class="container-xxl flex-grow-1 container-p-y">
    <div class="row">
      <!-- breadcrumb start -->
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a href="javascript:void(0)">Request</a>
          </li>
          <li class="breadcrumb-item active">{{ $page_title }}</li>
        </ol>
      </nav>
      <!-- breadcrumb end -->
      <form id="datatable-user-request-filter-form" class="sm:mr-auto" method="post">
        <div class="d-flex text-start">
          <div class="col-lg-4 col-md-4 col-sm-12 mb-3 me-3">
            <select id="user_request_type" name="user_request_type[]" data-placeholder="Select Request Type" class="select2 form-select mt-0" multiple>
              @if(@$arr_req_types && count($arr_req_types))
                @foreach($arr_req_types as $req_type_id => $req_type_nm)
                  @php
                    $sel = (@in_array(@$req_type_id, @$user_request_type)) ? 'selected' : '';
                  @endphp
                  <option {{ $sel }} value="{{ $req_type_id }}">{{ $req_type_nm }}</option>
                @endforeach
              @endif
            </select>
          </div>
          @php
            $arr_req_status = ['P' => 'Pending', 'A' => 'Accepted', 'R' => 'Rejected'];
          @endphp
          <div class="col-lg-4 col-md-4 col-sm-12 mb-3">
            <select id="user_request_status" name="user_request_status[]" data-placeholder="Select Status" class="select2 form-select mt-0" multiple>
              @if(@$arr_req_status && count($arr_req_status))
                @foreach($arr_req_status as $req_status_id => $req_status_cap)
                  @php
                    $sel = (@in_array(@$req_status_id, @$user_request_status)) ? 'selected' : '';
                  @endphp
                  <option {{ $sel }} value="{{ $req_status_id }}">{{ $req_status_cap }}</option>
                @endforeach
              @endif
            </select>
          </div>
        </div>
      </form>
    </div>
    <!-- Basic Bootstrap Table -->
    <div class="card">
      <div class="d-flex justify-content-between">
        <h5 class="card-header">User Request Listing</h5>
      </div>
      <div class="card-datatable table-responsive user_request_table_height">
        <table class="table">
          <thead>
            <tr>
              <th class="text-nowrap">S.No.</th>
              <th class="text-nowrap text-center">Date</th>
              <th class="text-nowrap">Type</th>
              <th>Title</th>
              <th class="text-nowrap text-center">Status</th>
              <th class="text-nowrap text-center">Action</th>
            </tr>
          </thead>
          <tbody>
            @if(@count($user_request_list))
              @php
                $counter = @$user_request_list->firstItem() ?? 1;
              @endphp
              @foreach($user_request_list->all() as $user_request)
                @php
                  $req_status = strtoupper(trim(@$user_request->status));
                  $res_seen   = strtoupper(trim(@$user_request->response_seen));

                  $tr_class = '';
                  
                  if(@$req_status != 'P' && @$res_seen == 'N')
                  {
                    $tr_class = 'table-active';
                  }

                  $req_title  = @$user_request->title ? @$user_request->title : '--';
                  $req_title1 = mb_strimwidth($req_title, 0, 30, "..."); 
                @endphp
                <tr class="{{ $tr_class }}" id="req_tr_{{ $user_request->id }}">
                  <td class="text-nowrap">{{ $counter }}</td>
                  <td class="text-nowrap text-center">
                    {!! @$user_request->request_dt ? date('d-m-Y', strtotime(@$user_request->request_dt)) : '--' !!}
                  </td>
                  <td class="text-nowrap">
                    {!! @$user_request->request_type ? @$user_request->request_type : '--' !!}
                  </td>
                  <td>
                    @if(@$req_status != 'P' && @$res_seen == 'N')
                      <span class="badge badge-dot bg-danger" id="sp_bg_{{ $user_request->id }}"></span>
                    @endif
                    <span title="{{ $req_title }}" data-bs-toggle="tooltip" data-bs-placement="left" style="cursor:pointer;">
                      {!! @$req_title1 !!}
                    </span>
                  </td>
                  <td class="text-nowrap text-center">
                    @if(@$req_status == 'A')
                      <button type="button" class="btn btn-outline-success waves-effect btn-xs">Accepted</button>
                    @elseif(@$req_status == 'R')
                      <button type="button" class="btn btn-outline-danger waves-effect btn-xs">Rejected</button>
                    @else
                      <button type="button" class="btn btn-outline-warning waves-effect btn-xs">Pending</button>
                    @endif
                  </td>
                  <td class="text-nowrap text-center">
                    <span class="badge bg-label-primary p-2 rounded  me-1">
                      <a href="javascript:void(0);" class="view-request" data-request_id="{{ $user_request->id }}">
                        <i class="fa fa-eye fa-lg"></i>
                      </a>
                    </span>
                  </td>
                </tr>
                @php
                  $counter++;
                @endphp
              @endforeach
            @else
              <tr>
                <td class="text-danger" colspan="10">No Records Found ...!!</td>
              </tr>  
            @endif
          </tbody>
        </table>
      </div>
      @if(@$user_request_list->count() > 0)
        <div class="row mt-3 mx-2">
          <div class="my-1">
            showing {{ @$user_request_list->firstItem() }} to {{ @$user_request_list->lastItem() }} of {{ @$user_request_list->total() }}
          </div>
          <div class="d-flex my-1">
            {!!@$user_request_list->links('pagination::bootstrap-4') !!}
          </div>
        </div>
      @endif
    </div>
  </div>
  <!--/ Content -->
@endsection

@section('modals')
  @parent
  <!-- user-request-view-modal start  -->
  <div class="modal fade" id="startup_view_rating_modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
      <div class="modal-content text-center" id="startup_view_rating_modal_content"></div>
    </div>
  </div>  

  <div id="user-request-view-modal" class="modal fade" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
      <div class="modal-content text-center" id="modal_request_details"></div>
    </div>
  </div>
  <!-- user-request-view-modal end -->
@endsection

@section('page_scripts')
  @parent
  <script type="text/javascript">
    
    $(document).ready(function()
    {
      $(".select2").select2();
    });

    $('select#user_request_type, select#user_request_status').change(function()
    {
      $('form#datatable-user-request-filter-form').trigger('submit');
    });

    $('.view-request').click(function()
    {
      var usr_req_id = $(this).data('request_id');

      $.ajax(
      {
        type : "post", url : "{{ route('admin.getuserrequestdetails') }}",
        data : {"_token" : "{{ csrf_token() }}", 'usr_req_id' : usr_req_id, 'update_response_seen' : '1'},
        success : function(res_details)
        {
          $('#modal_request_details').html(res_details);
          $('#user-request-view-modal').modal('show');
          $("tr#req_tr_"+usr_req_id).removeClass();
          $("span#sp_bg_"+usr_req_id).remove();
        }
      }).done(function(){});
    });
  </script>
@endsection
<!--/ END PAGE CONTENT -->