@php ($headerOption = [
'title' => "Reported Users",
'filters' => isset($filters) ? $filters : [],
'data' => isset($data) ? $data : []
])
@endphp
@extends('admin.layouts.layout',$headerOption)


@section('content')
<div class="page-filter">
  <select name="status" class="form-select mb-3" style="max-width: 150px" id="status-select" onchange="redirectToPage(this)">
    <option value="{{ route('repored-users.index', ['status' => '']) }}" @if(request('status') == '') selected @endif>Reports</option>
    <option value="{{ route('repored-users.index', ['status' => 'blocked']) }}"@if(request('status') == 'blocked') selected @endif>Blocked Users</option>
  </select>
</div>

<div class="table-responsive">
  {{-- <table class="{!! \Config::get('view.table.table_class') !!}"> --}}
    <table id="exampleTable" class="table table-striped table-bordered">
    <thead class="{!! \Config::get('view.table.table_head_class') !!}">
      <tr>
        {{-- <th colspan="2">Name {!! \App\Helpers\Helper::sort($routePrefix . '.index', 'first_name', $orderBy) !!}</th>
        <th>Contact {!! \App\Helpers\Helper::sort($routePrefix . '.index', 'email', $orderBy) !!}</th>
        <th>Role {!! \App\Helpers\Helper::sort($routePrefix . '.index', 'r__title', $orderBy) !!}</th>
        <th>Status</th>
        <th>Created At</th>
        @if($permission['edit'] || $permission['destroy'])
        <th width="15%" style="text-align: right;">Action</th>
        @endif --}}
        <th>Image</th>
        <th>Username </th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
        <th>Gender</th>
        <th>Unblock</th>
        <th>More Info</th>
        
      </tr>
    </thead>
    <tbody>
      @if($reportsInfo)
        @foreach ($reportsInfo as $key => $val)
        <tr>
          {{-- <td width="3%">{!! \App\Helpers\Helper::genLogo($val->avatar, $val, 'xs', 'rounded-circle') !!}</td>
          <td><a href="{{ route($routePrefix . '.show', $val->id) }}" class="show-modal-lg">{{ $val->full_name }}</a></td>
          <td><strong>Email:</strong> {{ $val->email }}</td>
          <td>{{ $val->role_title }}</td>
          <td><span class="badge badge-pill badge-soft-{{ $val->statuses[$val->status]['badge'] }} font-size-12">{!! $val->statuses[$val->status]['name'] !!}</span></td>
          <td>{{ \App\Helpers\Helper::showDate($val->created_at) }}</td>
          @if($permission['edit'] || $permission['destroy'])
          <td class="text-right">
            @if($permission['edit'])
            <a href="{{ route($routePrefix . '.edit', $val->id) }}" class="{!! \Config::get('view.table.list_light_button') !!}" data-toggle="tooltip" title="" data-original-title="Edit">{!! \Config::get('settings.icon_edit') !!}</a>
            @endif
            @if($permission['destroy'] && $val->id != auth()->user()->id)
              <a class="{!! \Config::get('view.table.list_danger_button') !!}" data-toggle="tooltip" title="" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" data-confirm-yes="event.preventDefault();
                    document.getElementById('delete-form-{{$val->id}}').submit();" data-original-title="Delete">{!! \Config::get('settings.icon_delete') !!}</a>
              {!! html()->form('DELETE', route(
                  $routePrefix . '.destroy',
                  $val->id
                  ))->attributes([
                  'style' => 'display:inline',
                  'id'    => 'delete-form-' . $val->id  
                ])->open() !!}
              {!! html()->form()->close() !!}
            @endif
          </td>
          @endif --}}

          <td> <img src="{{ isset($val['photo_url']) ? $val['photo_url'] : asset('img/no-profile.jpg') }}" alt="Profile Image" width="50" height="50" style="border-radius: 50%;"></td>
          <td>{{ isset($val['username']) ? $val['username'] : '-' }}</td>
          <td>{{ isset($val['first_name']) ? $val['first_name'] : '-' }}</td>
          <td>{{ isset($val['last_name']) ? $val['last_name'] : '-' }}</td>
          <td>{{ isset($val['email']) ? $val['email'] : '-' }}</td>
          <td>{{ isset($val['gender']) ? $val['gender']:'-'}}</td>
          <td>
            <a class="btn btn-light" data-toggle="tooltip" title="" data-confirm="Are You Sure You Want To {{ !empty($val['is_blocked']) ? 'Unblock' : 'Block' }} {{ $val['first_name'] ?? 'This User' }} ?" data-confirm-yes="event.preventDefault();
                document.getElementById('delete-form-{{$val['id']}}').submit();" data-original-title="Delete">{{ !empty($val['is_blocked']) ? 'Unblock' : 'Block' }}</a>
          {!! html()->form('PUT', route(
              'users' . '.restrictUser',
              $val['id']
              ))->attributes([
              'style' => 'display:inline',
              'id'    => 'delete-form-' . $val['id'] 
            ])->open() !!}
          {!! html()->form()->close() !!}
          </td>
          <td>
            {{-- <a href="{{ route('users' . '.show', $val['id']) }}" class="{!! \Config::get('view.table.list_light_button') !!}" data-toggle="tooltip" title="" data-original-title="show"><i class='bx bx-info-circle'></i></a> --}}
            <a  href="javascript:void(0)" class='viewdetails' data-id='{{ $val->id }}' data-toggle="tooltip" title="" data-original-title="show">
                           <i class='bx bx-info-circle'></i></a>
          </td>
        </tr>
        @endforeach
      @else
      <tr>
        <td colspan="25">
          <div class="alert alert-danger">No Data</div>
        </td>
      </tr>
      @endif
    </tbody>
  </table>
</div>

@include('admin.components.pagination')
@section('modals')
    <div class="modal fade custom-modal-ass-lawyer" id="empModal">
        <div class="modal-dialog">

            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">User Info</h6>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    
                </div>
                <div class="modal-body">
                    <table class="table w-100" id="tblempinfo">
                        <tbody></tbody>
                    </table>
                </div>
               
            </div>
        </div>
    </div>
@endsection
@push('page_script')
<script type='text/javascript'>
  $(document).ready(function() {
      $('#exampleTable').on('click', '.viewdetails', function() {
          var id = $(this).attr('data-id');
          if (id > 0) {

              // AJAX request
              var url = "{{ route('users.show', [':id']) }}";
              url = url.replace(':id', id);

              // Empty modal data
              $('#tblempinfo tbody').empty();

              $.ajax({
                  url: url,
                  dataType: 'json',
                  success: function(response) {

                      // Add employee details
                      $('#tblempinfo tbody').html(response.html);
                      // Display Modal
                      $('#empModal').modal('show');

                  }
              });
          }
      });

      $('.close').on('click', function() {
        $('#empModal').modal('hide');
    });

  });
</script>
<script>
  
    $(document).ready(function () {
        $('#exampleTable').DataTable({
            searching: false, // Disables the search bar
            scrollY: '400px',  // Adjust height as needed
          scrollCollapse: true,
          paging: true,     // Disable pagination if needed
          fixedHeader: true
        });
    });
    function redirectToPage(select) {
        var url = select.value; // Get the selected value (URL)
        if (url) {
            window.location.href = url; // Redirect to the selected route
        }
    }

    
</script>
@endpush
@endsection