@extends('layouts.master')
@section('content')
<style>
    .container-fluid {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    

}
.container_Sub_Header {
    width: 100%;
    padding-left: 16px;
    margin: 10px;
}
.sub-header {
    font-size: 20px;
    color: #1c3faa;
    font-family: inherit;
    padding-top: 15px;
}
input {
  font: italic  12px/30px Georgia, serif;
}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
</style>
<div class="top-bar">
    <div class="-intro-x breadcrumb mr-auto hidden sm:flex">
        <a href="">Application</a>
        <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="breadcrumb__icon feather feather-chevron-right">
           <polyline points="9 18 15 12 9 6"></polyline>
        </svg>
        <a href="" class="breadcrumb--active">Approved User Registration</a>
     </div>
      <div class="intro-x relative mr-3 sm:mr-6">
    <a href=""><button type="button" class="btn btn-info">
     <span class="glyphicon glyphicon-search"></span>
    </button></a>
    </div>
</div>
<div class="mt-4 card shadow-lg bg-white rounded h-75">
    <div class="card-body" style="background-color: white ;" >
        <div class="row" style="background: #f1f1f1;">
            <h2 class="formheading" style="margin-left: 10px;margin-top: 5px;font-size: 18px;font-weight: 400;color: saddlebrown;">Approved User Registration</h2>
        </div>
        <br>
        <div class="table-responsive" style="width: 100%;">
            <table class="table table-striped table-bordered dataTable bt-data" style="width: 100%;"  id="tbl_of_user_details">
                <thead>
                    <tr>
                            <th style="width: 5%;">SL#</th>
                            <th style="width: 10%;">Organization Name</th>
                            <th style="width: 10%;"> Contact Person</th>
                            <th style="width: 10%;"> District</th>
                            <th style="width: 10%;"> Subdivision</th>
                            <th style="width: 8%;"> Block</th>
                            <th style="width: 8%;">Police Station</th>
                            <th style="width: 8%;">Mobile No</th>
                            <th style="width: 5%;">&nbsp;&nbsp;Status&nbsp;&nbsp;</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
<script type="text/javascript">
     $(function () {
        get_user_details();
     });
     function get_user_details() {
        $("#tbl_of_user_details").dataTable().fnDestroy();
        $('#tbl_of_user_details').DataTable({
            "scrollX": true,
            "processing": true,
            "serverSide": true,
            "paging": true,
            "ajax": {
                type: "post",
                url: "get_user_details",
                data: {'_token': '{{csrf_token()}}'},
                dataSrc: "record_details",
            },
            "dataType": 'json',
            "columnDefs":
                [
                    {className: "table-text", "targets": "_all"},
                    {
                        "targets": 0,
                        "data": 'id',
                    },
                    {
                        "targets": 1,
                        "data": 'organization_name',
                    },
                    {
                        "targets": 2,
                        "data": 'organization_contact_pr_name',
                    },
                    {
                        "targets": 3,
                        "data": 'district',
                    },
                    {
                        "targets": 4,
                        "data": 'subdivision',
                    },
                    {
                        "targets": 5,
                        "data": 'block',
                    },
                    {
                        "targets": 6,
                        "data": 'ps',
                    },
                    {
                        "targets": 7,
                        "data": 'mobile_no',
                    },
                    {
                        "targets": -1,
                        "data": 'action',
                        "searchable": false,
                        "sortable": false,
                        "render": function(data, type, full, meta) {
                            var str_btns = "";
                            if(data.status==1) {
                                str_btns += '<label class="switch"><input type="checkbox" id="checkd_'+data.s+'" onchange="approved_status('+data.s+')" checked disabled><span class="slider"></span></label>';
                            } else {
                                str_btns += '<label class="switch"><input type="checkbox" id="checkd_'+data.s+'" onchange="approved_status('+data.s+')"><span class="slider"></span></label>';
                            }
                            return str_btns;
                        }
                    }
                ],
                "order": [[1, 'asc']]
        });
     }
     function approved_status(user_code) {
        var checked_val = $("#checkd_"+user_code).is(":checked") ? 1 : 0;

        $.ajax({
                    type: 'post',
                    url: 'update_approved_status',
                    data: {'user_code':user_code,'checked_val':checked_val,'_token': '{{csrf_token()}}'},
                    dataType: 'json',
                    success: function(data){

                    }
        });
     }
</script>
@stop