@extends('admin.layout.master')
@section('content')
<style type="text/css">
  th{
    padding: 20px;
  }
  td{
    padding: 20px;
  }
  

  .pagination li.disabled a {
      pointer-events: none;
      color: #ccc;
  }
  .pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

.pagination a:hover:not(.active) {
  background-color: #ddd;
}

.pagination a.disabled {
  pointer-events: none;
  color: #bbb;
}
</style>
    <div class="page-body">
        <div class="container-fluid">
           <div class="page-title">
                <div class="row">
                     <div class="col-12">
                      @if(session('message'))
                      <ol class="breadcrumb">
                        <li class="breadcrumb-item text-success">{{session('message')}}</li>
                      </ol>
                      @endif
                    </div>
                </div>
            </div>
      </div>
          <!-- Container-fluid starts-->
        <div class="container-fluid">
            <div class="row">
              <form class="pager_search" data-for="users_all" data-status="disabled" novalidate=""
                            id="users_all_search" action="{{route('get-user-search')}}">
                            <div class="col-md-12">
                                <div class="row p-t-20">

                                    <div class="col-md-2 col-xs-12">
                                        <div class="form-group">
                                            <label class="control-label">Mobile</label>
                                            <input class="form-control form-control-sm"
                                                value="@isset($mobile){{$mobile}}@endisset"
                                                formcontrolname="userID" name="mobile" id="mobile" type="text">
                                        </div>
                                    </div>

                                    <div class="col-md-2 col-xs-12">
                                        <div class="form-group">
                                            <label class="control-label">Token</label>
                                            <input class="form-control form-control-sm"
                                                value="@isset($token){{$token}}@endisset"
                                                formcontrolname="token" name="token" id="token"
                                                type="number">
                                        </div>
                                    </div>

                                    
                                    <div class="col-md-2 col-xs-12">
                                        <div class="form-group">
                                            <label class="control-label">Status</label>
                                            <select class="form-control form-control-sm" formcontrolname="status"
                                                name="status" value="status" id="status">
                                                <option value="" selected="">All</option>
                                                <option value="1" @isset($status) @if($status==1) selected @endif
                                                    @endisset>Pending</option>
                                               <option value="3" @isset($status) @if($status==3) selected @endif
                                                    @endisset>Done</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-1 col-xs-12">
                                        <div class="form-group">
                                            <button class="btn btn-sm btn-success waves-effect waves-light"
                                                type="submit" style="margin: 19px 10px 10px 10px;">
                                                <span class="text">Search</span>
                                                <span class="spinner-grow spinner-grow-sm inline loading" role="status"
                                                    style="display: none"></span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                <div class="col-md-12">
                    <div class="card">
                      <div class="card-header pb-0 card-no-border">
                        <span><h4>User Details</h4></span><span style="float:right">
                         <form name="ret_form" class="ret_report">

                            <button type="button" onclick="downloadReport()" class="btn btn-sm btn-primary waves-effect waves-light" style="float: right">
                                <div class="spinner-border spinner-border-sm loading" role="status" style="display: none;">
                                    <span class="sr-only">Loading...</span>
                                </div>
                                Download report
                            </button>
                         </form>
                        </span>
                      </div>
                      <div class="card-body">
                        <div class="table-responsive">
                            <table class="" id="">
                                <thead>
                                    <tr style="">
                                        <th>Id</th>
                                        <th>Name</th>
                                        <th>Mobile</th>
                                        <th>Driving License</th>
                                        <th>Token</th>
                                        <th>Image</th>
                                        @if(session('AdminDetail')->role == 0 || checkStatus('subAdminEdit') == 'on')
                                        <th>Action</th>
                                        <th>Status</th>
                                        @endif
                                        <th>Change Status</th>
                                        <th>Download Image</th>
                                    </tr>
                                </thead>
                                <tbody>
                                @foreach($user as $key=>$value)
                                <tr>
                                    <td>{{$key+1}}</td>
                                    <td>{{$value->name}}</td>
                                    <td>{{$value->mobile}}</td>
                                    <td>{{$value->dl}}</td>
                                    <td>{{$value->id}}</td>
                                    <td>@if(isset($value->image))
                                        <img src="{{asset('uploads/'.$value->image)}}" width="300" height="200">
                                        @else
                                        NA
                                        @endif
                                    </td>
                                    @if(session('AdminDetail')->role == 0 || checkStatus('subAdminEdit') == 'on')
                                    <td>
                                        <ul class="action">
                                            <li class="edit"><a href="{{route('user-edit',['id'=>$value->id])}}"><i class="icon-pencil-alt"></i>Edit</a></li>
                                        </ul>
                                    </td>
                                    <td>
                                       <th>@if($value->status == 3)<span class="badge badge-pill badge-success">Active</span>@elseif($value->status == 2)<span class="badge badge-pill badge-danger">Rejected</span>@else<span class="badge badge-pill badge-info">Pending</span>@endif</th>
                                    </td>
                                    @endif
                                    <td>
                                        <a href="{{route('update-status-active',['id'=>$value->id])}}" class="btn btn-success">
                                            Upload
                                        </a>
                                    </td>
                                    <td>
                                        @if(isset($value->image))
                                            <a href="{{ asset('uploads/'.$value->image) }}" download="{{ $value->image }}" class="btn btn-primary">
                                                Download
                                            </a>
                                        @else
                                            NA
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <div class="pagination">
                           {{ $user->onEachSide(1)->links() }}
                        </div>
                    </div>
                      </div>
                    </div>
                </div>
         
            
            </div>
            <form name="changeUser" id="changeUser" action="{{route('update-status')}}" method="post">
              @csrf
              <input type="hidden" name="userId" id="userId">
              <input type="hidden" name="status" id="status_details">
            </form>
        </div>
    </div>
    <script>
      function checkAndSubmit(id){
        // alert (id);
        var result = confirm('Are you sure you want to proceed?');

        // Check the result of the confirmation dialog
        if (result) {
            $('#userId').val(id);
            var status = $('#change'+id).val();
            $('#status_details').val(status);
            // alert(status);
            $('#changeUser').submit();
            
            // Code to execute if user clicked OK
        } else {
            window.location.reload();
            // Code to execute if user clicked Cancel or closed the dialog
        }
      }
      function exportToExcel() {
        // Select the table element
        var table = document.getElementById('basic-9');

          // Exclude the last row (footer) from the table
        var rows = table.rows;
        var num_rows = rows.length - 1; // Exclude the last row
        var data = [];
        for (var i = 0; i < num_rows; i++) {
          data.push([]);
          for (var j = 0; j < rows[i].cells.length; j++) {
            data[i].push(rows[i].cells[j].innerText);
          }
        }

        // Create a workbook
        var ws = XLSX.utils.aoa_to_sheet(data);
        var wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

        // Save the workbook as an Excel file
        XLSX.writeFile(wb, 'user_details.xlsx');
      }
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
    <script>
    function downloadReport() {
      
        // Assuming you have a form with id 'reportForm'
        var formData = $('#ret_form').serializeArray();

        // Disable button and show loading indicator
        var btn = $('#reportForm').find('button[type="submit"]');
        btn.prop("disabled", true);
        btn.find(".loading").show();

        // Perform AJAX request to generate report
        $.get("{{route('generate_admin_dist_report')}}", formData, function(data, textStatus, xhr) {
            if (data.success !== undefined) {
                // Enable button and hide loading indicator
                btn.prop("disabled", false);
                btn.find(".loading").hide();

                // Append report data to body
                $("body").append(data.success);

                // Generate Excel file
                var excel = new ExcelGen({
                    "src_id": "test_table",
                    "show_header": true
                });
                excel.generate(data.name);

                // Remove temporary table
                $("#test_table").remove();
            } else if (data.error !== undefined) {
                // Show error message
                toastr.error(data.error, 'Error!', {
                    timeOut: 15000
                });

                // Enable button and hide loading indicator
                btn.prop("disabled", false);
                btn.find(".loading").hide();
            }
        });
    }
    </script>
    
     <script src="{{ asset('assets/js/pdfmake.min.js') }}"></script>
    <script src="{{ asset('assets/js/vfs_fonts.js') }}"></script>
    <script src="{{ asset('assets/js/jszip.min.js') }}"></script>
    <script src="{{ asset('assets/js/FileSaver.min.js') }}"></script>
    <script src="{{ asset('assets/js/excel-gen.js') }}"></script>
@endsection