@extends('templates.structure')

@section('custom_css')
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/dataTables.bootstrap4.css')}}">
<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.min.css')}}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-theme/0.1.0-beta.10/select2-bootstrap.min.css" />
@endsection
@section('content')

    <div class="row">
        <div class="col-12">
            <div class="card">
                {{-- <div class="card-header">
                    <h3 class="card-title">Data Table With Full Features</h3>
                </div> --}}
                <!-- /.card-header -->
                <div class="card-body">
                    <table id="clientDataTable" class="table table-hover" style="width:100%">
                        <thead>
                            <tr>
                                <th>Location ID</th>
                                <th>Client ID</th>
                                <th>Email</th>
                                <th>Name</th>
                                <th>Phone</th>
                                <th>Company</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>                
            </div>
        </div>
    </div>
    <!-- /.row -->

@endsection

@section('custom_js')
<!-- DataTables -->
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/jquery.dataTables.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/datatables/dataTables.bootstrap4.js')}}"></script>
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.full.min.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.30.0/dist/sweetalert2.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script>
var table = $('#clientDataTable').DataTable({
    "searchDelay": 450,
    "scrollX": true,
    "processing": true,
    "serverSide": true,
    "ajax": {
                url : '{{route("clients.datatable")}}'
            },
    "columns": [
            { "name": "op.location_id", "data": "location_id", "visible": false, "searchable": true },
            { "name": "op.clientid", "data": "clientid", "orderable": true, "searchable": true },
            { "name": "op.email", "data": "email", "orderable": true, "searchable": true },
            { "name": "op.fullname", "data": "fullname", "orderable": true, "searchable": true },
            { "name": "op.phone", "data": "phone", "orderable": true, "searchable": true },
            { "name": "op.company_name", "data": "company_name" , "orderable": true, "searchable": true },
            { "name": "action", "data": null, "orderable": false, "searchable": false },
        ],
    "order" :[[ 0, 'desc' ]],
    "columnDefs": [ {
        "targets": -1,
        "data": "action",
        "render": function ( data, type, row, meta ) {
            var complete = '';
            if(data.complete_profile == 0){
                complete = '<sup><span class="fa fa-exclamation-triangle text-danger"></span></sup>&nbsp;'
            }
            var route = "{{url()->full()}}/"+data.clientid
            var route1 = "{{url('/plan')}}/"+data.clientid

            // console.log(data)
            var action = '<div class="btn-group float-right" role="group" aria-label="Basic example">';
            action += '<button class="btn btn-outline-success bg-button-success details-control" onclick="show(\''+route1+'\')"><span class="fa fa-info"></span></button>&nbsp;'
            if(data.status == "1"){
                action += '<button class="btn btn-outline-info bg-button-info" style="width: 95px">Active</button>&nbsp'
            }
            if(data.status == "0"){
                action += '<button class="btn btn-outline-danger bg-button-danger">In-Active</button>&nbsp'
            }
            action += '<button class="btn btn-outline-primary bg-button-primary" onclick="show(\''+route+'\')">'+complete+'<span class="fa fa-pencil"></span></button>&nbsp;'
            action += '<button class="btn btn-outline-warning" onclick="changePassword(\''+ data.clientid +'\', \'' + data.fullname + '\')"><span class="fa fa-key"></span></button>&nbsp;'
            action += '</div>'

            return action            
        }
    },
    ],    
})

let addLocationId = () => {
    let location_name = $('[name="location_id"]');
    location_name.select2({
        placeholder: 'Filter By Location',
        // theme: "bootstrap",
        width: '40%',
        allowClear: true,
        ajax: {            
            url: '{{route("locations.datatable")}}',
            dataType: 'json',
            data: function(params) {                
                return {                    
                    start: params.page == NaN ? 0 : (params.page-1) * 25,
                    length: 25,
                    columns: {
                        0:{
                        name: 'op.location_name',
                        orderable: true,
                        searchable: true
                        }
                    },
                    search: {value: params.term},
                    order: {0:{dir:'asc'}}
                }
            },
            processResults: function (data, params) {
                params.page = params.page || 1;                
                var newData = []
                $.each(data.data, function(key, val){
                    newData[key] = {'id' : val.id, 'text' : val.location_name};                    
                })

                data.results = newData;
            
                return {
                    results: data.results,
                    pagination: {
                        more: (params.page * 25) < data.recordsFiltered
                    }
                }
            },
            cache: true
        }
    });

    
    $('[name="location_id"]').change(function () {
        table.columns(0).search($('[name="location_id"]').val()).draw();
    })
}

let addFilterLocation = () => {
    $('.dataTables_filter > label').after('<label class="px-2">Location :</label></span><select name="location_id" class="form-control"  placeholder="location_id"></select>')

        addLocationId();

}

addFilterLocation();

function changePassword(id, fullname)
{
    Swal({
        title: 'Are you sure?',
        text: 'To change '+ fullname +' password',
        type: 'warning',
        showCancelButton:true,
        confirmButtonColor:'#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, Change the password'
    })
    .then((result) => {
        if (result.value) {
            let dataToSend = {
                'clientid':id
            };

            axios.post('{{route("clients.requestPassword")}}', dataToSend, config)
            .then(function (response) 
            {
                // console.log(response);
                window.location = response.data.additional.redirect;
            })
            .catch(function (error) { 
                $('#match-not').css('display', 'block')
                // console.log(error.response)
                Swal({
                    type: 'error',
                    title: 'Oops...',
                    text: error.response.data.data.message,
                    // footer: '<a href>Why do I have this issue?</a>'
                })

            });
            
           
        }

    });
}

function disactive(id, name){
    Swal({ title: 'Are you sure?', text: "You want to deactivate "+name+"!", type: 'warning', showCancelButton: true, confirmButtonColor:'#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, deactivate it!' }).then((result) => { if (result.value) {
        unity_operators_status(id, 0, name, '{{url("clients")}}/'+id)
    } })
}
function actived(id, name){
    Swal({ title: 'Are you sure?', text: "You want to activate "+name+"!", type: 'warning', showCancelButton:true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, activate it!' }).then((result)=> { if (result.value) {
        unity_operators_status(id, 1, name, '{{url("clients")}}/'+id)

    } })
}

function managePlane(id){
    // console.log('{{url("plan")}}/'+id)
    window.location.href = '{{url("/plan")}}/'+id;
}

</script>
@endsection

@section('addCustomInfo')
if(v.name == 'status'){
    if(valuename == 0){
        valuename = 'In-Active';
    }
    if(valuename == 1){
        valuename = 'Active';
    }
}
if(v.name == 'id_type'){
    keyname = 'ID Type'
    if(valuename == '1'){
        valuename = 'KTP'
    }
    if(valuename == '2'){
        valuename = 'SIM'
    }
    if(valuename == '3'){
        valuename = 'PASSPORT'
    }
    if(valuename == '3'){
        valuename = 'Taxpayer Number'
    }
}
if(v.name == 'id_no'){
    keyname = 'ID Number'
}
if(v.name == 'country'){
    valuename = null
}
if(v.name == 'complete_profile'){
    if(valuename == 0){
        valuename = 'Profile not yet complete'
    } 
    if(valuename == 1){
        valuename = 'Profile was complete'
    }
}
if(v.name == 'firstname'){
    keyname = 'First Name'
}
if(v.name == 'lastname'){
    keyname = 'Last Name'
}
if(v.name == 'facebookID'){
    valuename = null
}
if(v.name == 'googleID'){
    valuename = null
}

@endsection

@section('moreinfoJsLg')
if(currentRoute == 'clients.index'){
    result += '<tr>'+
                    '<td width="30%"><strong>More</strong></td>'+
                    '<td><button type="button" class="btn btn-outline-secondary" onclick="managePlane('+data.clientid+')">Manage Plan</button></td>'+
                '</tr>';
}
@endsection