@extends('dashboard.base')

@section('content')
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>


        <div class="container-fluid">
          <div class="animated fadeIn">
            <div class="row">
              <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                <div class="card">
                
                 
                    <div class="card-header">
                    @if(session()->has('success'))
                    <div class="alert alert-success" role="alert">
                      <strong></strong> {{ session()->get('success') }}
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    @endif
                      <i class="fa fa-align-justify"></i>{{ __('Organization Management') }}
                      
                      <a href="/add-business-user" class="btn btn-xs btn-info pull-right"  id="addDevicesBtn">Create Organization</a>
                   <br/> <br/>  

            
              
                   <div class="row">
                        

                       <div class="col-md-4">
                                   
                                 <select class="form-control" type="text" id="filter_user" placeholder="select user" name="filter_user">
                                        <option value="0">All Organizations</option>
                                        <option value="2">Minipol Organizations</option>
                                        <option value="3">Pinipol Organizations</option>
                                        <option value="4">Approved Organizations</option>
                                        <option value="5">Rejected Organizations</option>
                                        <option value="6">Pending Organizations</option>
                                </select>
                        </div>
                   
                        </div>
                           </form>
                    </div>
                    <div class="card-body">
                        <div class="container">
                            <table class="table table-bordered display " id="userdoatatable">
                              @csrf
                                <thead>
                                <tr>
                                    <th>Organization Name</th>
                                    <th>Legal Name</th>
                                    <th>Email</th>
                                    <th>Registered On</th>
                                    <th>Organization Type</th>
                                    <th>Sector </th>
                                    <th>Phone Number</th>
                                    <th>City</th>
                                   <th class = "org_action">Action</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <link  href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
                        <link  href="https://cdn.datatables.net/responsive/2.2.4/css/responsive.dataTables.min.css" rel="stylesheet">

                        <style> 
                          #userdoatatable {
                              width: 100% !important;
                          }
                          .org_action{
                            width:235px !important;
                          }
                        </style>
                        <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
                        <script src="https://cdn.datatables.net/responsive/2.2.4/js/dataTables.responsive.min.js"></script>
                     
                         <script>
                            $(document).ready( function () {
                                $(".alert-success").delay(5000).slideUp(300); // hide success alert messages...
                                fill_datatable();

      
                              function fill_datatable(filter_user = '')
                                {
                                     $.fn.dataTable.ext.errMode = 'throw';
                                       var dataTable = $('#userdoatatable').DataTable({
                                        "oLanguage": {
                                              "sEmptyTable": "No Data Available"
                                          },
                                        processing: true,
                                        serverSide: true,
                                        responsive: true,
                                         ajax:{
                                            type: "POST",
                                            url: "{{ url('businessuser-type-list')  }}",
                                            data:{"_token": "{{ csrf_token() }}",filter_user:filter_user}
                                        },
                                    columns: [
                                        { data: 'org_name', name: 'org_name' },
                                        { data: 'firstname', name: 'firstname' },
                                        { data: 'email', name: 'email' },
                                        { data: 'user_role', name: 'user_role' },
                                        { data: 'user_organisation_type', name: 'user_organisation_type' },
                                        { data: 'user_sector', name: 'user_sector' },
                                        { data: 'phone_num', name: 'phone_num' },
                                        { data: 'user_city', name: 'user_city' },
                                        { data: 'action', name: 'action', orderable: false, searchable: false}
                                     ],
                                     columnDefs: [
                                  {
                                      targets:0,
                                      render: function ( data, type, row, meta ) {
                                        
                                          if(type === 'display'){
                                              data = '<a href="/business-user-view/' + row.id + '">' + data + '</a>';
                                          }

                                          return data;
                                      }
                                  }
                              ] 
                               

                                });


                              }

                             $('#filter_user').on('change',function(){
                              var filter_user = $('#filter_user').val();
                              if(filter_user != '')
                              {
                                  $('table#userdoatatable').DataTable().destroy();
                                  fill_datatable(filter_user);
                              }
                             
                          });
                              $(document).on('click',".confirmation", function(){
                                  return confirm('Are you sure you want to Activate Account?');
                                });

                               $(document).on('click',".confirmation-sus", function(){
                                  return confirm('Are you sure you want to Suspend Account?');
                                });
                               $(document).on('click',".cil-x-circle", function(){
                                  return confirm('Are you sure you want to delete this Organization?');
                                });

                               
                            });
                                    $('div.alert').not('.alert-important').delay(4000).fadeOut(500);

                        </script>
                    </div>
                </div>
             
              </div>
            </div>
          </div>
        </div>




@endsection


@section('javascript')

@endsection