@extends('layouts.app')

@section('appjs')
    <script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection

@section('content')
@section('page_title')
    Whistle Feed Publisher Profiles
@endsection
<div class="container-fluid">
    <div class="card mt-4">
    <div class="card-body table-responsive">
    <div class="row">
        @can('hasExcelPermission')
        <div class="form-group col-md-6">
            <h3 class="form-group">Feed Publisher Profiles</h3>
        </div>
       
        <div class="form-group col-md-6">
            <form action="{{ url('exportpublisherprofiles') }}" class="pull-right" method="post">
                @csrf
                <button type="submit" class="publisher_profiles_excel btn btn-sm excel-btn border-radius-0"><i class="fa fa-download"></i> Export</button>
            </form>
        </div>
       @endcan
    </div>

        <table class="table-bordered table-hover" id="publisherprofiles">
            <thead>
                <tr>
                    <th>Sl.No</th>
                    <th>Publisher ID</th>
                    <th>Email ID</th>
                    <th>UserName</th>
                    <th>City</th>
                    <th>Website Name</th>
                    <th>Mobile Number</th>
                    <th>Token</th>
                    <th>Re-Seller</th>
                    <th>On-Boarded Date</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<script src="{{ asset('js/bootstrap-toggle.min.js')}}"></script>
<script type="application/javascript">

$(document).ready(function() {
    publisherprofilesdetails();
    getPublisherCount();
    $('.toggle-event').bootstrapToggle();
});


//all records displaying here
function publisherprofilesdetails() {
    $("#publisherprofiles").DataTable().clear().destroy();
    $('#publisherprofiles').DataTable({
        "bautoWidth": false,
        "processing": true,
        "serverSide": true,
        "paging": true,
        "lengthChange": false,
        "searching": true,
        "scrollX": true,
        "lengthChange": false,
        "pageLength": 50,
        "scrollCollapse": true,
        "scrollY":  400,
        "ordering": true,
        "language": { search: '', searchPlaceholder: "Search..." },
        "order": [
            [0, "desc"]
        ],
       
         
        "ajax": {
            "url": "{{ url('getpublisherprofiles') }}",
            "dataType": "json",
            "type": "POST",
            "data": {
                _token: "{{csrf_token()}}"
            },
        },
        "columnDefs": [
              { orderable: false, targets: 0 }
        ],
        "columns": [
            { data: "id",
                render: function(data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            { data: "id",
                render:function(data, type, row, meta){
                    return ((row.id)  ? row.id :  "NA")
                }
            },
            { data: "email"},
            { data: "username",
                render: function(data, type, row, meta){
                 return ((row.username)  ? row.username :  "NA")
                }
            },
            { data: "city",
                render:function(data, type, row, meta){
                    return ((row.city) ? row.city:  "NA")
                }
            },
            { data: "account_name",
                render: function(data, type, row, meta){
                 return ((row.account_name)  ? row.account_name :  "NA")
                }
            },
            { data: "mobile_number",
                render:function(data, type, row, meta){
                    return ((row.mobile_number) ? row.mobile_number:  "NA")
                }
            },
            { data: "token",
                render:function(data, type, row, meta){
                    return ((row.token) ? row.token:  "NA")
                }
            },
            { data: "account_type",
                render: function(data, type, row, meta){
                return data = '<input id="' + row.id + '" type="checkbox" ' + (row.account_type == 1 ? 'checked' : '') + ' data-onstyle="default" data-offstyle="light" data-info="' + row.id + '" class="account-type-toggle toggle-event-account" data-toggle="toggle" />';
                }
            },
            { data: "created_on",
                render:function(data, type, row, meta){
                    return ((row.created_on) ? row.created_on:  "NA")
                }
            },
        ],
        fnRowCallback: function(nRow, aData) {
            $('.toggle-event-account',nRow).prop( 'checked', aData.account_type == 1 ).bootstrapToggle({
                    on      : ' Yes ',
                    off     : ' No ',
                    width   : '60%',
            });
            return nRow;
        }
    });
}

$(document).on('change', '.account-type-toggle', function(e) {
    let click_val = $(this).prop('checked');
    let id = $(this).attr('data-info');
    $('.loading').css('display', 'block');
    $.ajax({
        type: "POST",
        url: "{{ url('UpdateAccountType') }}",
        data: {
            "_token": "{{ csrf_token() }}",
            "id"    : id,
            "account_type": Number(click_val)
        },
        dataType: 'json',
        success: function(data) {
            $('.loading').css('display', 'none');
            if (data.status == 'SUCCESS') {
                if (click_val) {
                    $("#publisherprofiles").DataTable().clear();
                    toastr.success('Account Type is Re-Seller');
                } else {
                    $("#publisherprofiles").DataTable().clear();
                    toastr.success('Account Type is Publisher');
                }
            } else {
                toastr.error(data.message);
            }
            $('#publisherprofiles').DataTable().ajax.reload(null, false);
        }
    });
    $("#publisherprofiles").DataTable().clear();
});


    $(document).ready(function(){
        $("#clear_checked").change(function () {
            $('input[type=checkbox]').prop('checked',$(this).prop("checked"));
        });
    });
</script>
@endsection