@extends('admin.layouts.masterlayout')
@section('styles')

<link href="{{asset('new_theme/assets/plugins/datatable/css/dataTables.bootstrap5.min.css')}}" rel="stylesheet" />
@endsection
@section('content')
<div class="main-content">
    <div class="row page-titles mx-0" data-aos="fade-up">
        <div class="col-sm-6 p-md-0">
            <!-- <div class="welcome-text">
                <h4>All Players list</h4>
            </div> -->
        </div>
        <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
            <!-- <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0)">Datatable</a></li>
                <li class="breadcrumb-item active"><a href="javascript:void(0)">Players</a></li>
            </ol> -->
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div class="card" data-aos="fade-up">
                <div class="card-header">
                    <h4>All Promotors</h4>
                    <!-- <a href="{{route('Series.add')}}" class="btn btn-primary btn-sm"> Add New {{$modelName}}</a> -->
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="dataList"  class="table table-striped table-bordered dataTable no-footer"  style="width:100%">
                            <thead>
                                <tr>
                                    <th>S No.</th>
                                    <th>Name</th>
                                    <th>
                                        <input style="margin-bottom:5px" placeholder="Please Enter Email" type="text" id="filter_email" name="filter_email" value="" onclick="cancelEvent()" onkeyup="filterData(event , 'filter_email')">
                                        <br>
                                        email</th>
                                    <th><input style="margin-bottom:5px" placeholder="Please Enter Mobile"  type="text" id="filter_mobile" name="filter_mobile" value="" onclick="cancelEvent()" onkeyup="filterData(event , 'filter_mobile')">
                                        <br>    
                                    mobile</th>
                                    <th>state</th>
                                    <th>city</th>
                                    <th>user_id</th>
                                    <th>Date</th>
                                    <th>Action</th>

                                </tr>
                            </thead>
                            
                            
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!----------------Player Credit-------------------------------->
<!-- Modal -->
<!--  -->
<!--End Modal -->
<!--------------------End Player Credit---------------------------->

<!-- Modal -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Set YouTuber Percentage</h4>
                <button type="button" class="close" data-bs-dismiss="modal"><span>&times;</span>
                </button>
            </div>
            <form name="submit_percentage_form" id="submit_percentage_form" method="post" action="{{route('Registerusers.update_percentage')}}">
                {!! csrf_field() !!}

                <div class="modal-body">Youtuber Commission Type</div>
                <div class="modal-row row m-auto">
                    <div class="modal-group col-md">
                        <input type="radio" class="mr-2" name="youtuber_commission_type" value="0"
                            onchange="$('#value_tagRevenue').css('display','block'); $('#value_tagFlat').css('display','none');$('#youtuber_commission').css('display','block'); ">
                        Revenue Percentage
                    </div>

                    <div class="modal-group col-md">
                        <input type="radio" class="mr-2" name="youtuber_commission_type" value="1"
                            onchange="$('#value_tagRevenue').css('display','none'); $('#value_tagFlat').css('display','block');$('#youtuber_commission').css('display','block')">
                        Flat Amount
                    </div>
                </div>
                <div class="modal-row overflow-hidden py-3">
                    <p class="modal-body lbl_frm mb-0">
                        <label id="value_tagRevenue" style="display: none;">Percentage %</label>
                        <label id="value_tagFlat" style="display: none;">Amount</label>
                    </p>
                    <!-- <div class="modal-row">
                  <div class="modal-group col-md-12"> -->
                    <input type="text" style="display: none" name="youtuber_commission" id="youtuber_commission" value="" autocomplete="off" class="in_text my-3" />
                </div>
                <input type="hidden" name="getplayer_id" id="getplayer_id" value="" />
                <input type="hidden" name="is_yoububer" id="is_yoububer" value="" />

                <!-- </div> </div> -->
                <div class="modal-footer col-md">

                    <input type="submit" class="btn btn-primary" name="submit_player_percentage" id="submit_player_percentage" value="Submit" />
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection
@section('scripts')
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="{{asset('new_theme/assets/plugins/datatable/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('new_theme/assets/plugins/datatable/js/dataTables.bootstrap5.min.js')}}"></script>
<script type="text/javascript">
    var fieldname = '';

    var filtercolums = {
        'filter_email': '',
        'filter_mobile': ''
    }

    function cancelEvent() {
        event.stopPropagation();
    }

    function filterData(event, fieldname) {


        var value = event.target.value;
        //  updateURL(event,fieldname);

        if (fieldname == 'filter_email') {
            filtercolums['filter_email'] = value;
        }
        // alert(value);
        if (fieldname == 'filter_mobile') {
            filtercolums['filter_mobile'] = value;
        }
        //URL UPDATE
        var url = window.location.href.split('?')[0];
        history.pushState('', '', url + "?filter=1&filter_email=" + filtercolums['filter_email'] + "&filter_mobile=" + filtercolums['filter_mobile']);

        $('#dataList').DataTable().clear().destroy(); //clear table data Table

        $('#dataList').DataTable({
            order: [],
            "processing": true,
            "serverSide": true,
            "bPaginate": true,
            "ajax": {
                url: "{{route($modelName.'.promotor_request')}}",
                type: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    "filter_columns": filtercolums
                }
            },
            "columns": [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'email',
                    name: 'email'
                },
                {
                    data: 'mobile',
                    name: 'mobile'
                },
                {
                    data: 'state',
                    name: 'state'
                },
                {
                    data: 'city',
                    name: 'city'
                },
                {
                    data: 'user_id',
                    name: 'user_id'
                },
                {
                    data: 'date',
                    name: 'date'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },

            ]
        });

        document.getElementById(fieldname).focus();

    }


    function addActive(id) {

        $(".pageNumber").removeClass("active");
        var element = document.getElementById(id);
        element.classList.add("active");
        hidePageNumber();
    }

    function hidePageNumber() {

        let pageNumber = 1;
        const queryString = window.location.search;
        const urlParams = new URLSearchParams(queryString);

        if (urlParams.get('page') != null) {

            pageNumber = urlParams.get('page')
        }

        //  $pageValue = $_GET['page'];
        // $nextPages = $pageValue + 3;
        // $lastPages = $pages - 3;
        $(".pageNumber").hide();
        var nextPageNumber = parseInt(pageNumber) + 5;
        for (let p = pageNumber; p < nextPageNumber; p++) {
            $("#pageItem_" + p).show();

        }

        let lastPageNumber = '';

        $("#pageItem_default").show();
        $("#pageItem_" + parseInt(lastPageNumber)).show();

    }
    $(function(event) {
        var custom_page = 1;
        $(document).on('click', '.page-link', function(e) {
            custom_page = $(this).attr("data-page_no");
            getPageData(custom_page);
        });
    });

    function getPageData(custom_page = 1) {
        $('#dataList').DataTable().clear().destroy(); //clear table data Table
        $('#dataList').DataTable({
            order: [],
            "processing": true,
            "serverSide": true,
            "bPaginate": true,
            "ajax": {
                url: "{{route($modelName.'.promotor_request')}}",
                type: "POST",
                data: {
                    "_token": "{{ csrf_token() }}",
                    "custom_page": custom_page
                }
            },
            "columns": [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'email',
                    name: 'email'
                },
                {
                    data: 'mobile',
                    name: 'mobile'
                },
                {
                    data: 'state',
                    name: 'state'
                },
                {
                    data: 'city',
                    name: 'city'
                },
                {
                    data: 'user_id',
                    name: 'user_id'
                },
                {
                    data: 'date',
                    name: 'date'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },

            ]
        });
    }

    $(document).ready(function() {
        var filtercolums = {

            'filter_email': '',
            'filter_mobile': ''
        }


        let filter_email = '';
        let filter_mobile = '';

        // for Filtering

        if (filter_email !== '') {
            filtercolums['filter_email'] = filter_email;
        }
        if (filter_mobile !== '') {
            filtercolums['filter_mobile'] = filter_mobile;
        }
        var filtercolums = {

            'filter_email': '',
            'filter_mobile': ''
        }


        $('#dataList').DataTable({
            order: [],
            "processing": true,
            "serverSide": true,
            "bPaginate": true,
            "ajax": {
                url: "{{route($modelName.'.promotor_request')}}",
                type: "POST",
                data: {
                    "_token": "{{ csrf_token() }}"
                }
            },
            "columns": [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'email',
                    name: 'email'
                },
                {
                    data: 'mobile',
                    name: 'mobile'
                },
                {
                    data: 'state',
                    name: 'state'
                },
                {
                    data: 'city',
                    name: 'city'
                },
                {
                    data: 'user_id',
                    name: 'user_id'
                },
                {
                    data: 'date',
                    name: 'date'
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false
                },

            ]
        });
    });

    $(document).on('click', '.submitper', function() {
        $('#getplayer_id').val($(this).data('id'));
        $('#is_yoububer').val($(this).data('status'));
        $('#myModal').modal('show');
    });
</script>
@endsection