 @extends('adminlte::page') @section('content')
 <?php Fun::lang() ?>
 @include('administrator.agency.form-agency-block')
 <div class="title-add">
     <div class="page-bar">
         <ul class="page-breadcrumb">
             <li> <a class="ng-binding" href="#"><i class="fa fa-dashboard"></i> Dashboard</a> </li>
             <li><a href="#">Manage Agency</a></li>
             <li><a href="#">List Agency Group</a></li>
         </ul>
     </div>
 </div>
 <div class="page">
     <div class="top-content">
         <div class="row">
             <div class="col-sm-12 col-xs-12">
                 <div class="title-add">
                     <div class="pull-left">
                         <h3>List Agency Group</h3>
                     </div>
                 </div>
                 @can('Agency-Create')
                 <div class="pull-right">
                     <a class="button_sm button_primary" href="{{route('super-admin-agency.create')}}"><span class="fa fa-plus"></span> Create New</a>
                 </div>
                 @endcan
             </div>
         </div>
     </div>

     <div class="box-body table-responsive" id="r-agency-list">
         <table id="datatable_agency_group" class="table table-striped table-bordered table-hover nowrap">
             <thead>
                 <tr>
                     <th>No</th>
                     <th>Profile</th>
                     <th>Code</th>
                     <th>Full Name</th>
                     <th>Gender </th>
                     <th>Phone</th>
                     <th>User</th>
                     <th>Group Name</th>
                     <th>Agency Type</th>
                     <th>Created Date</th>
                     <th>Status</th>
                     <th>Action</th>
                 </tr>
             </thead>
             <tbody>

             </tbody>
         </table>
     </div>
 </div>

 <div class="modal fade bs-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
     <div class="modal-dialog modal-dm">
         <div class="modal-content">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                 <h3 class="modal-title">Agency's status will be change.</h3>
             </div>
             <br />
             <form role="form" method="POST" id="form_update">
                 {{csrf_field()}}
                 <div class="row">
                     <div class="col-md-12">
                         <div class="col-md-10">
                             <h4>Are you sure?</h4>
                             <input type="hidden" name="status" id="status">
                         </div>
                     </div>
                 </div>
                 <div class="modal-footer">
                     <button type="button" data-dismiss="modal" class="button_danger"><i class="fa fa-close"></i> No</button>
                     <button type="submit" class="button_success" data-toggle="modal"><i class="fa fa-save"></i> OK</button>
                 </div>
             </form>
         </div>
         <!-- /.modal-content -->
     </div>
     <!-- /.modal-dialog -->
 </div>

 <div class="modal fade bs-modal-lg" id="view_info" tabindex="-1" role="dialog" aria-hidden="true">
     <div class="modal-dialog modal-dm">
         <div class="modal-content">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                 <h3 class="modal-title">Personal Infomation of Agency</h3>
             </div>

             <div class="modal-body">
                 <div class="personal-info">
                     <div class="list">
                         <div class="row">
                             <div class="col-sm-3">
                                 <div class="row">
                                     <div class="col-sm-12 col-xs-12">
                                         <p id="avatar" align="center"></p>
                                     </div>
                                 </div>
                             </div>
                             <div class="col-sm-9">
                                 <div class="personal-info-detail">
                                     <div class="list-info">
                                         <div class="col-sm-6 col-xs-6">
                                             <p>Full Name :</p>
                                         </div>
                                         <div class="col-sm-6 col-xs-6">
                                             <p id="full_name" class="user-info"></p>
                                         </div>
                                     </div>
                                     <div class="list-info">
                                         <div class="col-sm-6 col-xs-6">
                                             <p>Email :</p>
                                         </div>
                                         <div class="col-sm-6 col-xs-6">
                                             <p id="email" class="user-info"></p>
                                         </div>
                                     </div>
                                     <div class="list-info">
                                         <div class="col-sm-6 col-xs-6">
                                             <p>Phone Number :</p>
                                         </div>
                                         <div class="col-sm-6 col-xs-6">
                                             <p id="user_phone" class="user-info"></p>
                                         </div>
                                     </div>
                                     <div class="list-info">
                                         <div class="col-sm-6 col-xs-6">
                                             <p>Gender :</p>
                                         </div>
                                         <div class="col-sm-6 col-xs-6">
                                             <p id="user_gender" class="user-info"></p>
                                         </div>
                                     </div>
                                     <div class="list-info">
                                         <div class="col-sm-6 col-xs-6">
                                             <p>Date Of Birth :</p>
                                         </div>
                                         <div class="col-sm-6 col-xs-6">
                                             <p id="user_dob" class="user-info"></p>
                                         </div>
                                     </div>
                                     <div class="list-info">
                                         <div class="col-sm-6 col-xs-6">
                                             <p>Card ID :</p>
                                         </div>
                                         <div class="col-sm-6 col-xs-6">
                                             <p id="user_cardid" class="user-info"></p>
                                         </div>
                                     </div>
                                     <div class="list-info">
                                         <div class="col-sm-6 col-xs-6">
                                             <p>Reference :</p>
                                         </div>
                                         <div class="col-sm-6 col-xs-6">
                                             <p id="user_reference" class="user-info"></p>
                                         </div>
                                     </div>
                                     <div class="list-info">
                                         <div class="col-sm-6 col-xs-6">
                                             <p>Address :</p>
                                         </div>
                                         <div class="col-sm-6 col-xs-6">
                                             <p id="address" class="user-info"></p>
                                         </div>
                                     </div>
                                     <div class="list-info">
                                         <div class="col-sm-6 col-xs-12">
                                             <strong class="text-center">Bank Information</strong>
                                         </div>
                                     </div>
                                     <div class="list-info">
                                         <div class="col-sm-6 col-xs-6">
                                             <p>Bank Name :</p>
                                         </div>
                                         <div class="col-sm-6 col-xs-6">
                                             <p id="bank_name" class="user-info"></p>
                                         </div>
                                     </div>
                                     <div class="list-info">
                                         <div class="col-sm-6 col-xs-6">
                                             <p>Account Name :</p>
                                         </div>
                                         <div class="col-sm-6 col-xs-6">
                                             <p style="text-transform: uppercase" id="account_name" class="user-info"></p>
                                         </div>
                                     </div>
                                     <div class="list-info">
                                         <div class="col-sm-6 col-xs-6">
                                             <p>Account Number :</p>
                                         </div>
                                         <div class="col-sm-6 col-xs-6">
                                             <p id="account_number" class="user-info"></p>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>

                     </div>

                 </div>
             </div>
             <div class="modal-footer">
                 <button type="button" data-dismiss="modal" class="button_danger"><i class="fa fa-close"></i> Close</button>

             </div>

         </div>
         <!-- /.modal-content -->
     </div>
     <!-- /.modal-dialog -->
 </div>

 <div class="modal fade bs-modal-lg" id="block-permission" tabindex="-1" role="dialog" aria-hidden="true">
     <div class="modal-dialog modal-dm">
         <div class="modal-content">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                 <h3 class="modal-title">Update Status on allowing User To Block Item</h3>
             </div>
             <br />
             <div class="modal-footer">
                 <button type="button" data-dismiss="modal" class="button_danger"><i class="fa fa-close"></i> No</button>
                 <a href="" class="button_primary btn-submit-allowance" data-toggle="modal"><i class="fa fa-save"></i> OK</a>
             </div>
         </div>
     </div>
 </div>
 @endsection @section('js')

 <script type="text/javascript">
     $(document).ready(function() {
        $('#datatable_agency_group').DataTable({
                "lengthMenu": [
                    [20, 25, 50, 100, 500],
                    [20, 25, 50, 100, 500]
                ],
                ordering: false,
                serverSide: true,
                ajax: "{{ route('agencies-group.list') }}",
                columns: [
                    {data: 'DT_RowIndex'}, 
                    {data: 'profile'}, 
                    {data: 'user_code'},
                    {data: 'full_name'},  
                    {data: 'user_gender'},  
                    {data: 'user_phone'},  
                    {data: 'email'},  
                    {data: 'group_name'},  
                    {data: 'agency_type'},  
                    {data: 'created_at'},  
                    {data: 'status'}, 
                    {data: 'action'}
                ],
                "initComplete": function(settings, json) {
                    $('.main-spinner').hide();
                }
            });
            $.fn.dataTable.ext.errMode = 'throw';
     });
     $(document).on('click', '.btn-allow-block-item', function() {
         var id = $(this).data('id');
         var route = "{{route('users-allowance.block-item',':id')}}";
         route = route.replace(':id', id);
         $('.btn-submit-allowance').attr('href', route);
         $('#block-permission').modal('show');
     });
     $(document).on('click', '.viewPopLink', function() {
         var id = $(this).data('id');
         var status = $(this).data('status');

         $("#status").val(status);
         var url = "realty/super-admin/agencies-list";
         $('#form_update').attr('action', url + '/' + id);
         $('#myModal').modal('show');

     });

     $(document).on('click', '.view_info', function() {
         var id = $(this).data('id');
         $(".main-spinner").show();
         var part = "{{asset('assets/images/resize')}}";
         $.ajax({
             type: 'GET',
             url: 'realty/super-admin/agencies-view/' + id,
             dataType: 'json',
             data: {
                 'id': id
             },
             success: function(data) {
                 $.each(data, function(index, element) {

                     $('#full_name').empty();
                     $('#email').empty();
                     $('#user_phone').empty();
                     $('#address').empty();

                     $('#user_reference').empty();
                     $('#bank_name').empty();
                     $('#account_name').empty();
                     $('#account_number').empty();
                     $('#avatar').empty();
                     $('#user_cardid').empty();
                     $('#user_gender').empty();
                     $('#user_dob').empty();

                     $('#full_name').append(element.full_name);
                     $('#email').append(element.email);
                     $('#user_phone').append(element.user_phone);
                     $('#address').append(element.address);
                     $('#user_reference').append(element.user_reference);
                     $('#bank_name').append(element.bank_name);
                     $('#account_name').append(element.account_name);
                     $('#account_number').append(element.account_number);
                     $('#user_gender').append(element.user_gender);
                     $('#user_dob').append(element.user_dob);
                     $('#user_cardid').append(element.user_cardid);
                     $('#avatar').append("<img src='" + part + "/" + element.avatar + "'>");

                 });

                 $('#view_info').modal('show');
                 $(".main-spinner").hide();

             },

         });

     });

     $(window).on('hashchange', function() {
         if (window.location.hash) {
             var page = window.location.hash.replace('#', '');
             if (page == Number.NaN || page <= 0) {
                 return false;
             } else {
                 getData(page);
             }
         }
     });

     $(document).ready(function() {
         $(document).on('click', '.pagination a', function(event) {
             event.preventDefault();

             $('li').removeClass('active');
             $(this).parent('li').addClass('active');

             var myurl = $(this).attr('href');
             var page = $(this).attr('href').split('page=')[1];

             getData(page);
         });

     });

     function getData(page) {
         $.ajax({
             url: '?page=' + page,
             type: "get",
             datatype: "html"
         }).done(function(data) {
             $("#r-agency-list").empty().html(data);
             location.hash = page;
         }).fail(function(jqXHR, ajaxOptions, thrownError) {
             alert('No response from server');
         });
     }
 </script>
 @endsection