@extends('template.coin.layouts.admin-base')
@section('title', __('KYC'))
@section('content')

<div class="tabs-content">
    <div class="tab-content">
        <h5>Documents</h5>
        <div class="table-control auth-3">
            <div class="row">
                <span>Download as</span>
                <div class="actions-container">
                    <div class="dropdown bootstrap-select form-control">
                        <select class="selectpicker form-control" id="download-filetype" title="File format">
                            <option class="bs-title-option" value=""></option>
                            <option value="xls">Excel</option>
                            <option value="csv">CSV</option>
                        </select>
                        <button
                            type="button"
                            tabindex="-1"
                            class="btn dropdown-toggle btn-light bs-placeholder"
                            data-toggle="dropdown"
                            role="combobox"
                            aria-owns="bs-select-1"
                            aria-haspopup="listbox"
                            aria-expanded="false"
                            data-id="download-filetype"
                            title="File format"
                        >
                            <div class="filter-option">
                                <div class="filter-option-inner"><div class="filter-option-inner-inner">File format</div></div>
                            </div>
                        </button>
                        <div class="dropdown-menu">
                            <div class="inner show" role="listbox" id="bs-select-1" tabindex="-1"><ul class="dropdown-menu inner show" role="presentation"></ul></div>
                        </div>
                    </div>
                </div>
                <div class="action-helper">
                    <button class="btn btn-primary" data-action="download" id="download">Download</button>
                </div>
            </div>
            <div class="row">
                <span>Filter</span>
                <div class="actions-container">
                    <div class="dropdown bootstrap-select form-control">
                        <select class="selectpicker form-control" id="filters-list" title="Choose...">
                            <option class="bs-title-option" value=""></option>
                            <option value="+add">Add...</option>
                        </select>
                        <button
                            type="button"
                            tabindex="-1"
                            class="btn dropdown-toggle bs-placeholder btn-light"
                            data-toggle="dropdown"
                            role="combobox"
                            aria-owns="bs-select-2"
                            aria-haspopup="listbox"
                            aria-expanded="false"
                            data-id="filters-list"
                            title="Choose..."
                        >
                            <div class="filter-option">
                                <div class="filter-option-inner"><div class="filter-option-inner-inner">Choose...</div></div>
                            </div>
                        </button>
                        <div class="dropdown-menu" style="max-height: 94px; overflow: hidden; min-height: 0px;">
                            <div class="inner show" role="listbox" id="bs-select-2" tabindex="-1" style="max-height: 80px; overflow-y: auto; min-height: 0px;">
                                <ul class="dropdown-menu inner show" role="presentation" style="margin-top: 0px; margin-bottom: 0px;">
                                    <li>
                                        <a role="option" class="dropdown-item" id="bs-select-2-0" tabindex="0"><span class="bs-ok-default check-mark"></span><span class="text">Add...</span></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="action-helper">
                    <button class="btn btn-primary" data-action="save-filter" id="save-filter">Save</button>
                    <button class="btn btn-red" data-action="delete-filter" id="delete-filter">Delete</button>
                </div>
            </div>
            <div class="row">
                <button class="btn btn-primary" data-action="clear" id="clear-filters">Clear Filters</button>
            </div>
            <div class="row absolute">
                <div class="row" id="columns-selector">
                    <span>Columns</span>
                    <div class="actions-container">
                        <div class="dropdown bootstrap-select show-tick form-control columns-list">
                            <select class="selectpicker form-control columns-list" multiple="" title="Configure...">
                                <option value="ID" selected="selected">ID</option>
                                <option value="Client" selected="selected">Client</option>
                                <option value="Type" selected="selected">Type</option>
                                <option value="Time Uploaded" selected="selected">Time Uploaded</option>
                                <option value="Status" selected="selected">Status</option>
                                <option value="Time Processed" selected="selected">Time Processed</option>
                                <option value="Action" selected="selected">Action</option>
                            </select>
                            <button
                                type="button"
                                tabindex="-1"
                                class="btn dropdown-toggle btn-light"
                                data-toggle="dropdown"
                                role="combobox"
                                aria-owns="bs-select-3"
                                aria-haspopup="listbox"
                                aria-expanded="false"
                                title="ID, Client, Type, Time Uploaded, Status, Time Processed, Action"
                            >
                                <div class="filter-option">
                                    <div class="filter-option-inner"><div class="filter-option-inner-inner">ID, Client, Type, Time Uploaded, Status, Time Processed, Action</div></div>
                                </div>
                            </button>
                            <div class="dropdown-menu" style="max-height: 222px; overflow: hidden; min-height: 92px;">
                                <div class="inner show" role="listbox" id="bs-select-3" tabindex="-1" aria-multiselectable="true" style="max-height: 208px; overflow-y: auto; min-height: 78px;">
                                    <ul class="dropdown-menu inner show" role="presentation" style="margin-top: 0px; margin-bottom: 0px;">
                                        <li class="selected">
                                            <a role="option" class="dropdown-item selected" id="bs-select-3-0" tabindex="0" aria-selected="true"><span class="bs-ok-default check-mark"></span><span class="text">ID</span></a>
                                        </li>
                                        <li class="selected">
                                            <a role="option" class="dropdown-item selected" id="bs-select-3-1" tabindex="0" aria-selected="true"><span class="bs-ok-default check-mark"></span><span class="text">Client</span></a>
                                        </li>
                                        <li class="selected">
                                            <a role="option" class="dropdown-item selected" id="bs-select-3-2" tabindex="0" aria-selected="true"><span class="bs-ok-default check-mark"></span><span class="text">Type</span></a>
                                        </li>
                                        <li class="selected">
                                            <a role="option" class="dropdown-item selected" id="bs-select-3-3" tabindex="0" aria-selected="true"><span class="bs-ok-default check-mark"></span><span class="text">Time Uploaded</span></a>
                                        </li>
                                        <li class="selected">
                                            <a role="option" class="dropdown-item selected" id="bs-select-3-4" tabindex="0" aria-selected="true"><span class="bs-ok-default check-mark"></span><span class="text">Status</span></a>
                                        </li>
                                        <li class="selected">
                                            <a role="option" class="dropdown-item selected" id="bs-select-3-5" tabindex="0" aria-selected="true"><span class="bs-ok-default check-mark"></span><span class="text">Time Processed</span></a>
                                        </li>
                                        <li class="selected">
                                            <a role="option" class="dropdown-item selected" id="bs-select-3-6" tabindex="0" aria-selected="true"><span class="bs-ok-default check-mark"></span><span class="text">Action</span></a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <button class="btn btn-primary" id="columns-selector-toggler" title="Select Columns"><i class="material-icons">filter_alt</i></button>
                    <button class="btn btn-primary" data-action="refresh" id="refresh-table"><i class="material-icons">sync</i></button>
                </div>
            </div>
        </div>
        <div id="table-documents_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
            <div class="row">
                <div class="col-sm-2 col-md-2">
                    <div class="dataTables_length" id="table-documents_length">
                        <label>
                            Show
                            <select name="table-documents_length" aria-controls="table-documents" class="custom-select custom-select-sm form-control form-control-sm">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                                <option value="250">250</option>
                                <option value="500">500</option>
                            </select>
                            entries
                        </label>
                    </div>
                </div>
                <div class="col-sm-9 col-md-9 invisible"></div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <table id="table-documents" class="dataTable no-footer" role="grid" style="width: 1142px;">
                        <thead>
                            <tr role="row">
                                <th class="sorting_desc" tabindex="0" aria-controls="table-documents" rowspan="1" colspan="1" style="width: 53px;" aria-label="ID: activate to sort column ascending" aria-sort="descending">ID</th>
                                <th class="sorting" tabindex="0" aria-controls="table-documents" rowspan="1" colspan="1" style="width: 111px;" aria-label="Client: activate to sort column ascending">Client</th>
                                <th class="sorting" tabindex="0" aria-controls="table-documents" rowspan="1" colspan="1" style="width: 94px;" aria-label="Type: activate to sort column ascending">Type</th>
                                <th class="sorting" tabindex="0" aria-controls="table-documents" rowspan="1" colspan="1" style="width: 267px;" aria-label="Time Uploaded: activate to sort column ascending">Time Uploaded</th>
                                <th class="sorting" tabindex="0" aria-controls="table-documents" rowspan="1" colspan="1" style="width: 117px;" aria-label="Status: activate to sort column ascending">Status</th>
                                <th class="sorting" tabindex="0" aria-controls="table-documents" rowspan="1" colspan="1" style="width: 271px;" aria-label="Time Processed: activate to sort column ascending">Time Processed</th>
                                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 122px;" aria-label="Action">Action</th>
                                <th class="sorting" tabindex="0" aria-controls="table-documents" rowspan="1" colspan="1" style="width: 14px;" aria-label=": activate to sort column ascending"></th>
                                <th class="sorting" tabindex="0" aria-controls="table-documents" rowspan="1" colspan="1" style="width: 14px;" aria-label=": activate to sort column ascending"></th>
                            </tr>
                            <tr class="search-tab">
                                <th></th>
                                <th><input type="text" class="form-control" placeholder="Search" data-name="user.fullname" value="" /></th>
                                <th>
                                    <div class="dropdown bootstrap-select show-tick form-control">
                                        <select class="form-control selectpicker" data-name="type" multiple="">
                                            <option value="0">Identity</option>
                                            <option value="1">Address</option>
                                            <option value="2">Credit Card Front</option>
                                            <option value="3">Credit Card Back</option>
                                            <option value="4">Identity Back</option>
                                            <option value="5">Selfie</option>
                                        </select>
                                        <button
                                            type="button"
                                            tabindex="-1"
                                            class="btn dropdown-toggle btn-light bs-placeholder"
                                            data-toggle="dropdown"
                                            role="combobox"
                                            aria-owns="bs-select-4"
                                            aria-haspopup="listbox"
                                            aria-expanded="false"
                                            title="Nothing selected"
                                        >
                                            <div class="filter-option">
                                                <div class="filter-option-inner"><div class="filter-option-inner-inner">Nothing selected</div></div>
                                            </div>
                                        </button>
                                        <div class="dropdown-menu">
                                            <div class="bs-searchbox">
                                                <input type="search" class="form-control" autocomplete="off" placeholder="Filter" role="combobox" aria-label="Search" aria-controls="bs-select-4" aria-autocomplete="list" />
                                            </div>
                                            <div class="bs-actionsbox">
                                                <div class="btn-group btn-group-sm btn-block">
                                                    <button type="button" class="actions-btn bs-select-all btn btn-light">Check&nbsp;all</button>
                                                    <button type="button" class="actions-btn bs-deselect-all btn btn-light">Uncheck&nbsp;all</button>
                                                </div>
                                            </div>
                                            <div class="inner show" role="listbox" id="bs-select-4" tabindex="-1" aria-multiselectable="true"><ul class="dropdown-menu inner show" role="presentation"></ul></div>
                                        </div>
                                    </div>
                                </th>
                                <th>
                                    <div class="dropdown bootstrap-select show-tick form-control">
                                        <select class="form-control selectpicker" data-name="time_created" multiple="">
                                            <option value="$gte=1641772801">Today</option>
                                            <option value="$gte=1641686401&amp;$lte=1641772801">Yesterday</option>
                                            <option value="$gte=1641772800">This Week</option>
                                            <option value="$gte=1641168000&amp;$lte=1641772800">Past Week</option>
                                            <option value="$gte=1640995200">This Month</option>
                                            <option value="$gte=1638316800&amp;$lte=1640995200">Past Month</option>
                                            <option value="$gte=1641168001">Last 7 days</option>
                                            <option value="$gte=1639180801">Last 30 days</option>
                                            <option value="_custom" class="time-filter-custom">Custom...</option>
                                        </select>
                                        <button
                                            type="button"
                                            tabindex="-1"
                                            class="btn dropdown-toggle btn-light bs-placeholder"
                                            data-toggle="dropdown"
                                            role="combobox"
                                            aria-owns="bs-select-5"
                                            aria-haspopup="listbox"
                                            aria-expanded="false"
                                            title="Nothing selected"
                                        >
                                            <div class="filter-option">
                                                <div class="filter-option-inner"><div class="filter-option-inner-inner">Nothing selected</div></div>
                                            </div>
                                        </button>
                                        <div class="dropdown-menu">
                                            <div class="bs-searchbox">
                                                <input type="search" class="form-control" autocomplete="off" placeholder="Filter" role="combobox" aria-label="Search" aria-controls="bs-select-5" aria-autocomplete="list" />
                                            </div>
                                            <div class="bs-actionsbox">
                                                <div class="btn-group btn-group-sm btn-block">
                                                    <button type="button" class="actions-btn bs-select-all btn btn-light">Check&nbsp;all</button>
                                                    <button type="button" class="actions-btn bs-deselect-all btn btn-light">Uncheck&nbsp;all</button>
                                                </div>
                                            </div>
                                            <div class="inner show" role="listbox" id="bs-select-5" tabindex="-1" aria-multiselectable="true"><ul class="dropdown-menu inner show" role="presentation"></ul></div>
                                        </div>
                                    </div>
                                </th>
                                <th>
                                    <div class="dropdown bootstrap-select show-tick form-control">
                                        <select class="form-control selectpicker" data-name="status" multiple="">
                                            <option value="0">Pending</option>
                                            <option value="1">Approved</option>
                                            <option value="2">Declined</option>
                                        </select>
                                        <button
                                            type="button"
                                            tabindex="-1"
                                            class="btn dropdown-toggle btn-light bs-placeholder"
                                            data-toggle="dropdown"
                                            role="combobox"
                                            aria-owns="bs-select-6"
                                            aria-haspopup="listbox"
                                            aria-expanded="false"
                                            title="Nothing selected"
                                        >
                                            <div class="filter-option">
                                                <div class="filter-option-inner"><div class="filter-option-inner-inner">Nothing selected</div></div>
                                            </div>
                                        </button>
                                        <div class="dropdown-menu">
                                            <div class="bs-searchbox">
                                                <input type="search" class="form-control" autocomplete="off" placeholder="Filter" role="combobox" aria-label="Search" aria-controls="bs-select-6" aria-autocomplete="list" />
                                            </div>
                                            <div class="bs-actionsbox">
                                                <div class="btn-group btn-group-sm btn-block">
                                                    <button type="button" class="actions-btn bs-select-all btn btn-light">Check&nbsp;all</button>
                                                    <button type="button" class="actions-btn bs-deselect-all btn btn-light">Uncheck&nbsp;all</button>
                                                </div>
                                            </div>
                                            <div class="inner show" role="listbox" id="bs-select-6" tabindex="-1" aria-multiselectable="true"><ul class="dropdown-menu inner show" role="presentation"></ul></div>
                                        </div>
                                    </div>
                                </th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody> @if(!empty($documents))
                         
                               
                               
                                @for($i = 0; $i < count($documents); $i++)
                                <tr role="row" class="@if($i % 2 == 0 ) odd @else even @endif">
                                     <td class="sorting_1">#{{$documents[$i]->doc_id}}</td>
                                    
                                    <td class="pointer bold text-left">
                                        <a class="name-container" href="{{secure_url('/admin/user/'.$documents[$i]->account()->username)}}">
                                            <span class="">{{$documents[$i]->account()->fname}} {{$documents[$i]->account()->lname}}</span><i class="material-icons">open_in_new</i><i class="material-icons pointer" data-toggle="tooltip">speaker_notes</i><i class="material-icons">paid</i>
                                        </a>
                                    </td>
                                    <td class="sorting_1">{{$documents[$i]->type}}</td>
                                    <td class="sorting_1">{{$documents[$i]->created_at}}</td>
                                    <td class="sorting_1" data-file="status{{$i}}">{{$documents[$i]->status}}</td>
                                    <td class="sorting_1">{{$documents[$i]->processed_at}}</td>
                                   <td class="sorting_1"> 
                                   
                                   <i class="material-icons btn btn-red" title="view"   data-bs-toggle="modal" data-bs-target="#viewModalCenter{{$i}}">visibility</i>
                                   <i class="material-icons btn btn-red" title="accept"   data-bs-toggle="modal" data-bs-target="#acceptModalCenter{{$i}}">edit</i>
                                   <br/><i class="material-icons btn btn-red" title="reject"   data-bs-toggle="modal" data-bs-target="#rejectModalCenter{{$i}}">delete_forever</i>
                                   </td>
                                </tr>
                                
                                <div class="modal fade" id="acceptModalCenter{{$i}}" tabindex="-1" role="dialog" aria-labelledby="acceptModalCenterTitle{{$i}}" aria-hidden="true" data-backdrop="false">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="acceptModalLongTitle{{$i}}">Accept Document - (#{{$documents[$i]->doc_id}}  + {{$documents[$i]->type}} )</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       You are about to accept #{{$documents[$i]->doc_id}} + {{$documents[$i]->type}}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary acceptModalBtn" id="" data-search="acceptModalCenter{{$i}}" data-file="status{{$i}}" data-id="{{$documents[$i]->id}}">Accept</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="rejectModalCenter{{$i}}" tabindex="-1" role="dialog" aria-labelledby="rejectModalCenterTitle{{$i}}" aria-hidden="true" data-backdrop="false">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="rejectModalLongTitle{{$i}}">Reject Document - (#{{$documents[$i]->doc_id}}  + {{$documents[$i]->type}} )</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       You are about to reject #{{$documents[$i]->doc_id}} + {{$documents[$i]->type}}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary rejectModalBtn" id="" data-search="rejectModalCenter{{$i}}" data-file="status{{$i}}" data-id="{{$documents[$i]->id}}">Reject</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="viewModalCenter{{$i}}" tabindex="-1" role="dialog" aria-labelledby="viewModalCenterTitle{{$i}}" aria-hidden="true" data-backdrop="false">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="rejectModalLongTitle{{$i}}"> Document - (#{{$documents[$i]->doc_id}}  + {{$documents[$i]->type}} )</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       <img src="{{getTemplateFiles('coin')}}/kyc/{{$documents[$i]->docs}}" />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
   
      </div>
    </div>
  </div>
</div>




                                
                                
                                @endfor
                                
                                @else 
                                <tr class="odd">
                                <td valign="top" colspan="9" class="dataTables_empty">No data available in tables</td> 
                                </tr>
                                @endif
                                
                           
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-2 col-md-2">
                    <div class="dataTables_length">
                        <label>
                            Show
                            <select name="table-documents_length" aria-controls="table-documents" class="custom-select custom-select-sm form-control form-control-sm">
                                <option value="10">10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                                <option value="250">250</option>
                                <option value="500">500</option>
                            </select>
                            entries
                        </label>
                    </div>
                </div>
                <div class="col-sm-9 col-md-9 invisible"></div>
                <div class="col-sm-1 col-md-1">
                    <div class="dataTables_paginate paging_input" id="table-documents_paginate" style="display: none;">
                        <span class="first paginate_button page-item" id="table-documents_first">First</span><span class="previous paginate_button page-item" id="table-documents_previous">Previous</span><span>Page </span>
                        <input class="paginate_input" type="text" /><span> of </span><span class="paginate_total"></span><span></span><span class="next paginate_button page-item" id="table-documents_next">Next</span>
                        <span class="last paginate_button page-item" id="table-documents_last">Last</span>
                    </div>
                </div>
            </div>
        </div>
        <style id="table-style-table-documents"></style>
    </div>
</div>


@endsection

@section('scripts')
<script>
    $(function(){
     
        
        /******* Delete Data ****/
         $('body').on('click','.acceptModalBtn', function(){
     var Fave = $(this).attr('data-id');
     var Search = $(this).attr('data-search');
     var filex = $(this).attr('data-file');
     
     var token = "{{ csrf_token() }}";
                var data = "dtype=" + Fave   + "&_token=" + token;
              
                $.ajax({
                    type: "post",
                    url: '{{ secure_url("admin/AcceptKyc") }}',
                    data: data,
                    dataType: 'json',
                    success: function (res) {
                $('.modal').css('display','none');    
                        if(res.status == true){
          
               $("td[data-file='"+filex+"']").text(res.mmg);
              $.toast({
    heading: 'Success',
    text: res.message,
    showHideTransition: 'slide',
    icon: 'success'
});
            }else{
              $.toast({
    heading: 'Error',
    text: res.message,
    showHideTransition: 'slide',
    icon: 'error'
});  
            };
                        
                    },
                });
  })
  
  /******* Delete Data ****/
         $('body').on('click','.rejectModalBtn', function(){
     var Fave = $(this).attr('data-id');
     var Search = $(this).attr('data-search');
     var filex = $(this).attr('data-file');
     
     var token = "{{ csrf_token() }}";
                var data = "dtype=" + Fave   + "&_token=" + token;
              
                $.ajax({
                    type: "post",
                    url: '{{ secure_url("admin/RejectKyc") }}',
                    data: data,
                    dataType: 'json',
                    success: function (res) {
                $('.modal').css('display','none');    
                        if(res.status == true){
          
               $("td[data-file='"+filex+"']").text(res.mmg);
              $.toast({
    heading: 'Success',
    text: res.message,
    showHideTransition: 'slide',
    icon: 'success'
});
            }else{
              $.toast({
    heading: 'Error',
    text: res.message,
    showHideTransition: 'slide',
    icon: 'error'
});  
            };
                        
                    },
                });
  })
    })
</script>
@endsection