@extends('layouts.app', ['pageSlug' => 'portalPayments'])

@section('content')


    <div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>Payment & Extension List</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
    <div class="row">
        <div class="col-lg-6">
           Payments
        </div>
        @if (\Auth::check() && \Auth::user()->role && \Auth::user()->role->roleName->role == 'admin')
        <div class="col-lg-6 text-right">
            <button type="button" class="btn btn-success" data-toggle="modal" data-target="#bulk_confirm"><i class="fa fa-check"></i> Confirm Selected</button>
		</div>
		@endif
    </div>
    <br>
    <div class="row">
        <div class="col-lg-12">
            <div class="p-3">
                <form>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
    							<input type="text" name="min_date" id="min" class="form-control datepicker" placeholder="Min Date" autocomplete="off" value="">
    						</div>
    					</div>
                        <div class="col-md-3">
    						<div class="form-group">
    							<input type="text" name="max_date" id="max" class="form-control datepicker" placeholder="Max Date" autocomplete="off" value="">
    						</div>
    					</div>

                        <div class="col-md-3">
                            <div class="form-group">
                                <input type="text" name="username" id="username" class="form-control" placeholder="username" autocomplete="off" value="">
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="form-group">
                                <input type="text" name="payment_method" id="payment_method" class="form-control" placeholder="payment method" autocomplete="off" value="">
                            </div>
                        </div>

                        <div class="col-md-3">
                            <div class="form-group">
                                <input type="text" name="reference" id="reference" class="form-control" placeholder="reference" autocomplete="off" value="">
                            </div>
                        </div>
                        <div class="col-md-3">
        				    <button type="submit" class="search-btn btn btn-primary" title="Search">Search</button>
        				</div>
        			</div>
        		</form>
                <div class="table-responsive">
                    <table style="width:100%" id="payment_records" class="table table-striped table-bordered dttable dttable1">
                    <thead>
                        <th>
						   <div class="inline custom-checkbox">
							  <input id="checkboxAll" type="checkbox" class="form-control" name="checked[]" value="all">
							  <label for="checkboxAll" class="custom-control-label"></label>
						#</th>
                        <th>ID</th>
                        <th>Customer</th>
                        <th>Type</th>
                        <th>Payment</th>
                        <th>Amount</th>
                        <th>Quantity</th>
                        <th>Attachment</th>
                        <th>Old Exp(radius)</th>
                        <th>Ext Date</th>
                        <th>Ext</th>
                        <th>Ext Exp Date</th>
                        <th>Pay Ext Date</th>
                        <th>Pay Ext</th>
                        <th>Pay Ext Exp Date</th>
                        <th>Paid Date</th>
                        <th>Radius Calc Date</th>
                        <th>Payment Status</th>
                        <th>Extension Status</th>
                        <th>Action</th>
                    </thead>
                    <tbody>

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

    <div class="row">
        <div class="col-lg-12">
           Extensions
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-lg-12">
            <div class="p-3">
                <table id="extension_record" class="table table-striped table-bordered">
                    <thead>
                        <th>#</th>
                        <th>Customer</th>
                        <th>Extensions</th>
                        <th>Status</th>
                        <th>Created At</th>
                        <th>Action</th>
                    </thead>
                    <tbody>

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


<div id="portal-payment-form" title="Change Paymethods for PORTAL PAYMENT">
  <form>
    <fieldset>
        <input type="hidden" name="portal_payment_id" id="portal_payment_id">
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text" name="username" id="username" class="text ui-widget-content ui-corner-all" style="width:100%;" autocomplete="off" readonly>
        </div>

        <div class="form-group">
            <label for="portal_user">Type</label>
            <select name="type" class="select2" id="type" required style="width: 100%;">
                <option value=""></option>
                <option value="Subs">Subs</option>
                @php
                    $cateogory_types = \DB::table('category_types')->where('cash_category', '=', 'in')->get();
                @endphp
                @foreach($cateogory_types as $t)
                    <option value="{{$t->type}}">{{$t->type}}</option>
                @endforeach
            </select>
        </div>

        <div class="form-group">
            <label for="portal_user">Paymethod</label>
            <select name="pay_method" class="select2" id="pay_method" required style="width: 100%;">
                @php
                    $paymethods= \DB::table('category_paymethods')->get();
                @endphp
                <option value=""></option>
                @foreach($paymethods as $p)
                <option value="{{$p->paymethod}}">{{$p->paymethod}}</option>
                @endforeach
            </select>
        </div>

        <div class="form-group">
            <label for="username">Amount</label>
            <input type="text" name="amount" id="amount" class="text ui-widget-content ui-corner-all" style="width:100%;">
        </div>

        <div class="form-group">
            <label for="username">Quantity</label>
            <input type="text" name="quantity" id="quantity" class="text ui-widget-content ui-corner-all" style="width:100%;">
        </div>

        <div class="form-group">
            <label for="username">Reference</label>
            <input type="text" name="reference" id="reference" class="text ui-widget-content ui-corner-all" style="width:100%;">
        </div>

        <div class="form-group">
            <label for="username">Receipt No.</label>
            <input type="text" name="receipt_no" id="receipt_no" class="text ui-widget-content ui-corner-all" style="width:100%;">
        </div>
        <div class="form-group">
            <label for="extend_till">Extend Till</label>
            <input type="text" name="extend_till" id="extend_till" class="text ui-widget-content ui-corner-all download_date" style="width:100%;">
        </div>
      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>

<div id="reset-expiration-form" title="Reset Old Expiration">
  <form>
    <fieldset>
        <input type="hidden" name="id" id="id" value="">
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text" name="username" id="username" class="text ui-widget-content ui-corner-all download_date" style="width:100%;" readonly>
        </div>

        <div class="form-group">
            <label for="old_expiration">Old Expiration</label>
            <input type="text" name="old_expiration" id="old_expiration" class="text ui-widget-content ui-corner-all download_date" style="width:100%;" readonly>
        </div>
        <div class="form-group">
            <label for="new_expiration">New Expiration</label>
            <input type="text" name="new_expiration" id="new_expiration" class="text ui-widget-content ui-corner-all" autocomplete="off" style="width:100%;">
            <span class="fa fa-fw fa-calendar input-suff-span"></span>
        </div>
      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>
<div id="bulk_confirm" class="modal fade" role="dialog">
  <div class="modal-dialog modal-sm">
	<!-- Modal content-->
	<div class="modal-content">
	  <div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">&times;</button>
		<div class="delete-icon"></div>
	  </div>
	  <div class="modal-body text-center">
		<h4 class="modal-heading">Are You Sure ?</h4>
		<p>Do you really want to confirm these records?</p>
	  </div>
	  <div class="modal-footer">
	      <form method="POST" action="{{route('pay-extension.bulkconfirm.payment')}}" id="bulk_confirm_form">
	          @csrf
            <fieldset>
    		  <button type="reset" class="btn btn-danger" data-dismiss="modal">No</button>
    		  <button type="submit" class="btn btn-success">Yes</button>
    		 </fieldset>
		  </form>
	  </div>
	</div>
  </div>
</div>
<div class="please_wait">
    <div class="lds-roller"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div>


@endsection
@push('head')
<style>
.ui-dialog{
    /* top:500px !important;    */
}
.dttable1{
    /* display: block;
    overflow: scroll; */
}
</style>






<style>
    .simple_popup{
        position: absolute;
        top: -1200000px;
        left: 15%;
        background-color: #d1d1d1;
        min-width: 400px;
        width: fit-content;
        height: fit-content;
        padding: 4px;
        border-radius: 5px;
        box-shadow: 1px 1px 32px black;
    }

    .simple_popup .head{
        height: 50px;
        background-color: white;
        font-size: 20px;
        font-weight: 600;
        padding: 10px;
    }

    .simple_popup .content{
        padding: 2px;
        background-color: white;
        margin-top: 4px;
        min-height: 100px;
        max-height: 500px;
        overflow: hidden;
        overflow-y: scroll;
    }

    .simple_popup .fa-times{
        float:right;
        color:black;
    }

    .suggest_payments {
        cursor:pointer;
    }
















    /*CSS LOADER BELOW*/
    .lds-roller {
        display: inline-block;
        position: relative;
        width: 80px;
        height: 80px;
    }
    .lds-roller div {
        animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        transform-origin: 40px 40px;
    }
    .lds-roller div:after {
        content: " ";
        display: block;
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #6cacff;
        margin: -4px 0 0 -4px;
    }
    .lds-roller div:nth-child(1) {
        animation-delay: -0.036s;
    }
    .lds-roller div:nth-child(1):after {
        top: 63px;
        left: 63px;
    }
    .lds-roller div:nth-child(2) {
        animation-delay: -0.072s;
    }
    .lds-roller div:nth-child(2):after {
        top: 68px;
        left: 56px;
    }
    .lds-roller div:nth-child(3) {
        animation-delay: -0.108s;
    }
    .lds-roller div:nth-child(3):after {
        top: 71px;
        left: 48px;
    }
    .lds-roller div:nth-child(4) {
        animation-delay: -0.144s;
    }
    .lds-roller div:nth-child(4):after {
        top: 72px;
        left: 40px;
    }
    .lds-roller div:nth-child(5) {
        animation-delay: -0.18s;
    }
    .lds-roller div:nth-child(5):after {
        top: 71px;
        left: 32px;
    }
    .lds-roller div:nth-child(6) {
        animation-delay: -0.216s;
    }
    .lds-roller div:nth-child(6):after {
        top: 68px;
        left: 24px;
    }
    .lds-roller div:nth-child(7) {
        animation-delay: -0.252s;
    }
    .lds-roller div:nth-child(7):after {
        top: 63px;
        left: 17px;
    }
    .lds-roller div:nth-child(8) {
        animation-delay: -0.288s;
    }
    .lds-roller div:nth-child(8):after {
        top: 56px;
        left: 12px;
    }
    @keyframes lds-roller {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }


    .please_wait{
        position: absolute;
        width: 350px;
        height: 162px;
        background-color: #e6e6e6;
        top: -441%;
        left: -452%;
        border-radius: 10px;
        text-align: center;
        padding: 39px;
        box-shadow: 1px 1px 163px #5a5a5a;
    }




</style>




@endpush
@push('js')
<script>
    function preview(link) {
        window.open(link);
    }
    $.fn.dataTableExt.sErrMode = 'throw'
    $(function () {
      "use strict";
        // var data = {
        //   processing: true,
        //   serverSide: true,
        //   pageLength: 50,
        //   deferRender: true,
        //   deferLoading: 0,
        //   stateSave: true,
        //   ajax: {
        //     url: window.location.href,
        //         data: function(d) {
        //             d.min = $('input[name=min_date]').val();
        //             d.max = $('input[name=max_date]').val();
        //         }
        //     },
        //   language: {
        //     searchPlaceholder: "Search Payments..."
        //   },
        //   columns: [
        //       {data: 'id', name: 'id', searchable : false, orderable : false},
        //       {data: 'DT_RowIndex', name: 'DT_RowIndex', searchable : false, orderable : false},
        //       {data : 'customer', name : 'portal_payments.username'},
        //       {data : 'type', name : 'portal_payments.type'},
        //       {data : 'pay_method', name : 'portal_payments.pay_method'},
        //       {data : 'amount', name : 'portal_payments.amount'},
        //       {data : 'quantity', name : 'portal_payments.quantity'},
        //       {data : 'attachment', name : 'attachment'},
        //       {data : 'old_exp', name : 'old_exp'},
        //       {data : 'ext_date', name : 'ext_date'},
        //       {data : 'ext', name : 'ext'},
        //       {data : 'ext_exp_date', name : 'ext_exp_date'},
        //       {data : 'pay_ext_date', name : 'pay_ext_date'},
        //       {data : 'pay_ext', name : 'pay_ext'},
        //       {data : 'pay_ext_exp_date', name : 'pay_ext_exp_date'},
        //       {data : 'created_at', name : 'created_at'},
        //       {data : 'estimation_exp', name : 'estimation_exp'},
        //       {data : 'status', name : 'portal_payments.status'},
        //       {data : 'extension_status', name : 'extension_status'},
        //       {data : 'action', name : 'action',searchable : false, orderable : false},
        //       {data : 'reference', name : 'portal_payments.reference', searchable: true, visible: false },
        //       {data : 'receipt_no', name : 'portal_payments.receipt_no', searchable: true, visible: false },
        //   ],
        //   dom : 'lBfrtip',
        //   searchDelay: 350,
        //   buttons : [
        //     'csv','excel','pdf','print','copy'
        //   ],
        //   order : [[0,'DESC']]
        // };
        // if (window.location.href.indexOf("type") <= -1) {
        //     data.deferLoading = 0
        // }
        // var table1 = $('#payment_records').DataTable(data);
        // var searchval = $('.dataTables_filter input').val();
        // if (searchval.length>0)  table1.search(searchval).draw();


        class loader_class{

            show(){
                $(document).find('.please_wait').css('left', '30%');
                $(document).find('.please_wait').css('top', '40%');
            }

            hide(){
                $(document).find('.please_wait').css('left', '-440%');
                $(document).find('.please_wait').css('top', '-440%');
            }
        }


        var loader = new loader_class();




        function show_search_result(){
            $('input[name=min_date]').attr('required',true);
            $('input[name=max_date]').attr('required',true);

            var username = $('#username').val();
            var payment_method = $('#payment_method').val();
            var reference = $('#reference').val();

            if($('input[name=min_date]').val() != '' && $('input[name=max_date]').val() != ''){
                // table1.draw();
                load_table($('input[name=min_date]').val() , $('input[name=max_date]').val(), username, payment_method, reference);
            }else{
                if(username || payment_method || reference){
                    load_table('' , '', username, payment_method, reference);
                }
            }
        }

       $('.search-btn').on("click", function(e) {
            e.preventDefault();
           show_search_result();
            // else{
            //     toastr.error('Min & Max date both are required.');
            // }
        });

        $(document).on('change', 'input[name=min_date]', function(){
            show_search_result();
        });

        $(document).on('change', 'input[name=max_date]', function(){
            show_search_result();
        });

        $(document).on('keyup', '#username', function(){
            show_search_result();
        });
        $(document).on('keyup', '#payment_method', function(){
            show_search_result();
        });
        $(document).on('keyup', '#reference', function(){
            show_search_result();
        });




        // $('#payment_records').DataTable({
        //     "paging": true,
        //     "searching": true
        // });





        ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        //CUSTOM DATATABLE CODES BELOW

        function load_table(min_date, max_date,username, payment_method, reference){
            loader.show();
            $.ajax({
                url: "{{url('/')}}"+'/admin/pay-extenion-mng/list?draw=8&columns[0][data]=id&columns[0][name]=id&columns[0][searchable]'+
                    '=false&columns[0][orderable]=false&columns[0][search][value]=&columns[0][search][regex]=false&columns[1][data]=DT_RowIndex&'+
                    'columns[1][name]=DT_RowIndex&columns[1][searchable]=false&columns[1][orderable]=false&columns[1][search][value]=&columns[1][search]'+
                    '[regex]=false&columns[2][data]=customer&columns[2][name]=portal_payments.username&columns[2][searchable]=true&columns[2][orderable]=true&columns'+
                    '[2][search][value]=&columns[2][search][regex]=false&columns[3][data]=type&columns[3][name]=portal_payments.type&columns[3][searchable]='+
                    'true&columns[3][orderable]=true&columns[3][search][value]=&columns[3][search][regex]=false&columns[4][data]=pay_method&columns[4][name]'+
                    '=portal_payments.pay_method&columns[4][searchable]=true&columns[4][orderable]=true&columns[4][search][value]=&columns[4][search][regex]='+
                    'false&columns[5][data]=amount&columns[5][name]=portal_payments.amount&columns[5][searchable]=true&columns[5][orderable]=true&columns[5]'+
                    '[search][value]=&columns[5][search][regex]=false&columns[6][data]=quantity&columns[6][name]=portal_payments.quantity&columns[6][searchable]'+
                    '=true&columns[6][orderable]=true&columns[6][search][value]=&columns[6][search][regex]=false&columns[7][data]=attachment&columns[7][name]='+
                    'attachment&columns[7][searchable]=true&columns[7][orderable]=true&columns[7][search][value]=&columns[7][search][regex]=false&columns[8][data]'+
                    '=old_exp&columns[8][name]=old_exp&columns[8][searchable]=true&columns[8][orderable]=true&columns[8][search][value]=&columns[8][search][regex]'+
                    '=false&columns[9][data]=ext_date&columns[9][name]=ext_date&columns[9][searchable]=true&columns[9][orderable]=true&columns[9][search][value]'+
                    '=&columns[9][search][regex]=false&columns[10][data]=ext&columns[10][name]=ext&columns[10][searchable]=true&columns[10][orderable]=true&columns[10][search][value]='+
                    '&columns[10][search][regex]=false&columns[11][data]=ext_exp_date&columns[11][name]=ext_exp_date&columns[11][searchable]=true&columns[11][orderable]=true'+
                    '&columns[11][search][value]=&columns[11][search][regex]=false&columns[12][data]=pay_ext_date&columns[12][name]=pay_ext_date&columns[12][searchable]=true'+
                    '&columns[12][orderable]=true&columns[12][search][value]=&columns[12][search][regex]=false&columns[13][data]=pay_ext&columns[13][name]=pay_ext&columns[13]'+
                    '[searchable]=true&columns[13][orderable]=true&columns[13][search][value]=&columns[13][search][regex]=false&columns[14][data]=pay_ext_exp_date&columns[14]'+
                    '[name]=pay_ext_exp_date&columns[14][searchable]=true&columns[14][orderable]=true&columns[14][search][value]=&columns[14][search][regex]=false&columns[15]'+
                    '[data]=created_at&columns[15][name]=created_at&columns[15][searchable]=true&columns[15][orderable]=true&columns[15][search][value]=&columns[15][search][regex]'+
                    '=false&columns[16][data]=estimation_exp&columns[16][name]=estimation_exp&columns[16][searchable]=true&columns[16][orderable]=true&columns[16][search][value]=&'+
                    'columns[16][search][regex]=false&columns[17][data]=status&columns[17][name]=portal_payments.status&columns[17][searchable]=true&columns[17][orderable]=true&'+
                    'columns[17][search][value]=&columns[17][search][regex]=false&columns[18][data]=extension_status&columns[18][name]=extension_status&columns[18][searchable]=true'+
                    '&columns[18][orderable]=true&columns[18][search][value]=&columns[18][search][regex]=false&columns[19][data]=action&columns[19][name]=action&columns[19]'+
                    '[searchable]=false&columns[19][orderable]=false&columns[19][search][value]=&columns[19][search][regex]=false&columns[20][data]=reference&columns[20][name]'+
                    '=portal_payments.reference&columns[20][searchable]=true&columns[20][orderable]=true&columns[20][search][value]=&columns[20][search][regex]=false&columns[21]'+
                    '[data]=receipt_no&columns[21][name]=portal_payments.receipt_no&columns[21][searchable]=true&columns[21][orderable]=true&columns[21][search][value]=&columns[21]'+
                    '[search][regex]=false&order[0][column]=0&order[0][dir]=DESC&start=0&search[value]=&search[regex]=false&min='
                    +min_date+'&max='+max_date+'&username='+username+'&payment_method='+payment_method+'&reference='+reference+'&_=1686040194589',
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    // Handle the response data here
                    // console.log(response);
                    // var response_json = JSON.parse(response);

                    var tableBody = $('#payment_records tbody');


                    table_body_html(response.data,tableBody);

                    loader.hide();

                },
                error: function(xhr, status, error) {
                    // Handle any errors that occur during the request
                    loader.hide();
                    console.error(error);
                }
            });

        }

        //method below gets the table body html out of json data
        function table_body_html(jsonData,tableBody){
            var num = 0;
            $('#payment_records').DataTable().clear().destroy();
            tableBody.html('');
            $.each(jsonData, function(index, row) {
                num++;
                var tableRow = $('<tr></tr>');
                tableRow.append('<td>' + get_index_label_html(row) + '</td>'); // checker
                tableRow.append('<td>' + num + '</td>'); // ID
                // console.log((row.old_expiration.replace(' ', 'T')).toISOString().slice(0, 10));
                tableRow.append('<td>' + row.username + '</td>');// customer
                tableRow.append('<td>' + row.type + '</td>');//type
                tableRow.append('<td>' + row.pay_method + '</td>');//pay method
                tableRow.append('<td>' + (row.amount !== null ? row.amount : '--') + '</td>'); // amount
                tableRow.append('<td>' + (row.quantity !== null ? row.quantity : '--') + '</td>'); //quantity
                tableRow.append('<td>' + refrence_or_reciept_no(row) + '</td>');//attachment
                tableRow.append('<td>' + ((row.old_expiration !== null) ? row.old_expiration.split(' ')[0] : '--') + '</td>');
                tableRow.append('<td>' + ((row.ext_date !== null) ? row.ext_date.split(' ')[0] : '--') + '</td>');
                tableRow.append('<td>' + get_extension_html(row) + '</td>');
                tableRow.append('<td>' + ((row.ext_expiry_date !== null) ? row.ext_expiry_date.split(' ')[0] : '--') + '</td>');
                tableRow.append('<td>' + ((row.pay_ext_date !== null) ? row.pay_ext_date.split(' ')[0] : '--') + '</td>');
                tableRow.append('<td>' + (row.portal_extension !== null ? row.portal_extension : '--') + '</td>');
                tableRow.append('<td>' + ((row.pay_ext_expiry_date !== null) ? row.pay_ext_expiry_date.split(' ')[0] : '--') + '</td>');
                tableRow.append('<td>' + (row.created_at !== null ? row.created_at : '--') + '</td>');
                tableRow.append('<td>' + ((row.new_expiration !== null) ? row.new_expiration.split(' ')[0] : '--') + '</td>');
                tableRow.append('<td>' +get_approved_pending_label(row.status, row.temp_status, row.extend_till) + '</td>');
                tableRow.append('<td>' + getExtensionStatus(row.extension_status) + '</td>');
                tableRow.append('<td>' +  get_actions_html(row) + '</td>');
                tableBody.append(tableRow);
            });


            $('#payment_records').DataTable({
                "paging": true,
                "searching": true
            });
        }



        function getExtensionStatus(extensionStatus) {
            if (extensionStatus === 'pending') {
                return '<label class="status-label label-ticket-status-3">pending</label>';
            } else {
                return '<label class="status-label label-ticket-status-2">confirmed</label>';
            }
        }



        function get_approved_pending_label(status, tempStatus, extendTill) {
            var label = false;
            if (status === 'pending') {
                if (tempStatus === 'approved') {
                    if (extendTill != null) {
                        label = $('<label>', { class: 'status-label label-info', text: 'Approved' });
                    } else {
                        label = $('<label>', { class: 'status-label label-ticket-status-3', text: 'Approved' });
                    }
                } else if (tempStatus === 'pending review') {
                    label = $('<label>', { class: 'status-label label-danger', text: 'Pending Review' });
                } else {
                    if (extendTill != null) {
                        label = $('<label>', { class: 'status-label label-info', text: 'pending' });
                    } else {
                        label = $('<label>', { class: 'status-label label-ticket-status-3', text: 'pending' });
                    }
                }
            } else {
                label = $('<label>', { class: 'status-label label-ticket-status-2', text: 'confirmed' });
            }

            if(label){
                var html = $('<div>').append(label).html();
                return html;
            }

            return '';

        }


        function get_extension_html(row) {
            var a = row.extension;
            if (row.free_extension != null) {
                var b = row.extension + row.free_extension;
                a = b + ' (F:' + row.free_extension + ')';
            }

            return a !== null ? a:'--';
        }



        function refrence_or_reciept_no(row) {
            var a = row.reference != null ? '<br>[ Ref- ' + row.reference + ' ]' : '';
            var b = row.receipt_no != null ? '<br>[ Receipt No. - ' + row.receipt_no + ' ]' : '';
            if (row.attachment) {
                var filename = JSON.parse(row.attachment).filename;
                var link = JSON.parse(row.attachment).link;
                return '<a href="#" onclick="preview(`' + link + '`)">' + filename + '</a>' + a + b;
            } else {
                return a + b;
            }
        }



        function get_index_label_html(row) {
            if (row.status === "pending") {
                return '<input type="checkbox" form="bulk_confirm_form" class="form-control filled-in" name="checked[]" value="' + row.id + '" id="checkbox' + row.id + '"><label for="checkbox' + row.id + '" class="custom-control-label"></label>';
            }
            return '';
        }


        function get_actions_html(row) {
            var result_html = '';
                @if(\Auth::check() && \Auth::user()->role && \Auth::user()->role->roleName->role == 'admin')

                if(row.temp_status == 'pending review'){
                    var extension_route = "{{url('/')}}/admin/pay-extenion-mng/review-payment/" + row.id;
                    result_html += '<a onclick="reviewpayment(`' + extension_route + '`)" class="a-orange" title="Review Payment"><i class="fa fa-fw fa-check-circle"></i></a>';
                }

            if(row.status == 'pending' && row.extension_status == 'confirmed') {

                    result_html += '<a onclick="confirmPayment(`' + row.id + '`, `' + row.status + '`)" title="Confirm Payment"><i class="fa fa-fw fa-check"></i></a>';
                result_html += '<a onclick="editDig(this)"';
                result_html += ' title="edit" class="edit-btn"';
                result_html += ' data-id="' + row.id + '"';
                result_html += ' data-username="' + row.username + '"';
                result_html += ' data-paymethod="' + row.pay_method + '';
                result_html += ' data-type="' + row.type + '"';
                result_html += ' data-quantity="' + row.quantity + '"';
                result_html += ' data-reference="' + row.reference + '"';
                result_html += ' data-receipt="' + row.receipt_no + '"';
                result_html += ' data-amount="' + row.amount + '" data-extendtill="' + row.extend_till + '"><i class="fa fa-fw fa-edit"></i></a>';
                result_html += '<a onclick="editExpiration(this)"';
                result_html += ' title="edit Expiration" class="edit-btn"';
                result_html += ' data-old-expiration="' + convert_database_date_to_js_date(row.old_exp) + '"';
                result_html += ' data-new-expiration="' + convert_database_date_to_js_date(row.estimation_exp) + '"';
                result_html += ' data-id="' + row.id + '"';
                result_html += ' data-username="' + row.username + '"><i class="fa fa-fw fa-calendar"></i></a>';
                var remove_payment_url = '/remove-payments/{id}';
                result_html += '<a onclick="deletePayOrExtension(`' + remove_payment_url + '`,`' + row.ext + '`)"';
                result_html += ' class="a-red" title="Delete"><i class="fa fa-fw fa-trash-alt"></i></a>';

            }else {
                result_html += '<small>No action for you</small>';
            }
            @endif

                return result_html;
        }



        function convert_database_date_to_js_date(oldExp){
            if(oldExp){
                var dateParts = oldExp.split(" ")[0].split("-");
                var formattedDate = dateParts[0] + "-" + dateParts[1] + "-" + dateParts[2];
                return formattedDate;
            }

            return '';
        }






        ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////





      var table2 = $('#extension_record').DataTable({
          processing: true,
          serverSide: true,
          deferRender: true,
          pageLength: 10,
          stateSave: true,
          ajax: "{{ route('pay-extension.extlist') }}" ,
          language: {
            searchPlaceholder: "Search Extensions ..."
          },
          columns: [
              {data: 'DT_RowIndex', name: 'DT_RowIndex', searchable : false, orderable : false},
              {data : 'username', name : 'portal_extensions.username'},
              {data : 'extensions', name : 'portal_extensions.extensions'},
              {data : 'status', name : 'portal_extensions.status'},
              {data : 'created_at', name : 'portal_extensions.created_at'},
              {data : 'action', name : 'action', orderable : false, searhable : false},
          ],
          dom : 'lBfrtip',
          buttons : [
            'csv','excel','pdf','print','copy'
          ],
          order : [[0,'DESC']]
      });

});

</script>


<script>
    $( "#new_expiration" ).datepicker({
            dateFormat : 'yy-mm-dd'
        });
     $( ".download_date" ).datepicker({
            dateFormat : 'yy-mm-dd'
        });
    function reviewpayment(link){
        $.confirm({
            title: "Please confirm!",
            content: 'Are u sure u want to allow this Payment?',
            buttons: {
                OK: {
                    text: 'OK',
                    action: function() {
                        location.href = link;
                    },
                },
                close: {
                    text: 'Cancel',
                },
            }
        });
    }
    function deletePayOrExtension(link,ext){
        console.log(ext);
        if(ext > 0){
          toastr.error('Delete extension first.');
          return 1;
        }
        $.confirm({
            title: "Please confirm!",
            content: 'Are you sure to delete this item?',
            buttons: {
                OK: {
                    text: 'OK',
                    action: function() {
                        location.href = link;
                    },
                },
                close: {
                    text: 'Cancel',
                },
            }
        });
    }

    var click_time = 0;
    function confirmPayment(id, status) {
        click_time++;
        if (click_time > 1) {
            $.alert('processing is doing now');
            return;
        }
        if (status != 'pending') {
            $.alert({
                title: '<i class="fa fa-fw fa-key"></i>',
                content:'This Payment is already confirmed'
            });
            return;
        }
        $.confirm({
            title: "Please confirm!",
            content: 'Did you confirm this payment?',
            buttons: {
                OK: {
                    text: 'OK',
                    action: function() {
                        axios.post('{{route('pay-extension.confirm.payment')}}', {payment_id: id}).then((res) => {
                            location.reload();
                        }).catch(function (error) {
                                    if (error.response) {
                                      // Request made and server responded
                                      console.log(error.response.data);
                                      console.log(error.response.status);
                                      console.log(error.response.headers);
                                    } else if (error.request) {
                                      // The request was made but no response was received
                                      console.log(error.request);
                                    } else {
                                      // Something happened in setting up the request that triggered an Error
                                      console.log('Error', error.message);
                                    }

                                  });
                    },
                },
                close: {
                    text: 'Cancel',
                    action: function() {
                        click_time--;
                    },
                },
            }
        });
    }


    var dialog, dialog1;

    $('.select2').select2();

   function editDig(ele) {
    var username = $(ele).data('username');
        dialog.find('input#username').val(username);
        var id = $(ele).data('id');
        dialog.find('input#portal_payment_id').val(id);

        var quantity = $(ele).data('quantity');
        dialog.find('input#quantity').val(quantity);

        var amount = $(ele).data('amount');
        dialog.find('input#amount').val(amount);

        var ref = $(ele).data('reference');
        dialog.find('input#reference').val(ref);

        var rec = $(ele).data('receipt');
        dialog.find('input#receipt_no').val(rec);

        var extend = $(ele).data('extendtill');
        dialog.find('input#extend_till').val(extend);

        var type = $(ele).data('type');
        dialog.find('select#type').val(type).trigger('change');
        dialog.find('select#type').val(type).attr('selected',true);


        var payemthod = $(ele).data('paymethod');
        dialog.find('select#pay_method').val(payemthod).trigger('change');

        dialog.dialog( "open" );

   }

    dialog = $( "#portal-payment-form" ).dialog({
      autoOpen: false,
      height: 500,
      width: 350,
      modal: true,
      buttons: {
        "Update": update,
        Cancel: function() {
          dialog.dialog( "close" );
        }
      },
      close: function() {
      }
    });

    function update() {

        var portal_pay_id = dialog.find('input#portal_payment_id').val();
        var pay_method = dialog.find('select#pay_method').val();
        var type = dialog.find('select#type').val();
        var quantity = dialog.find('input#quantity').val();
        var amount = dialog.find('input#amount').val();
        var reference = dialog.find('input#reference').val();
        var receipt_no = dialog.find('input#receipt_no').val();
        var extend = dialog.find('input#extend_till').val();

        if (amount < 1 || quantity < 1) {
            toastr.error('Please check amount or quantity');
            return false;
        }

        var data = {
            portal_pay_id: portal_pay_id,
            pay_method: pay_method,
            type: type,
            quantity: quantity,
            amount: amount,
            reference: reference,
            receipt_no: receipt_no,
            extend_till: extend,
        }

        axios.post('{{route('pay-extension.update.payment')}}', data).then((res) => {
            if (res.data) {
                toastr.success('Successfully updated');
                dialog.dialog( "close" );
                location.reload();
            } else {
                toastr.error('Some error happens');
            }
        })

    }

    dialog1 = $( "#reset-expiration-form" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
        "Reset": reset,
        Cancel: function() {
          dialog1.dialog( "close" );
        }
      },
      close: function() {
      }
    });

    function editExpiration(ele) {

        var id = $(ele).data('id');
        dialog1.find('input#id').val(id);
        var username = $(ele).data('username');
        dialog1.find('input#username').val(username);

        var old_expiratio = $(ele).data('old-expiration');
        dialog1.find('input#old_expiration').val(old_expiratio);

        var new_expiratio = $(ele).data('new-expiration');
        dialog1.find('input#new_expiration').val(new_expiratio);
        dialog1.dialog( "open" );

   }
    function reset() {
        var id = dialog1.find('input#id').val();
        var username = dialog1.find('input#username').val();
        var old_expiration = dialog1.find('input#old_expiration').val();
        var new_expiration = dialog1.find('input#new_expiration').val();
        var data = {
            id: id,
            username: username,
            new_expiration: new_expiration,
            old_expiration: old_expiration,
        }

        axios.post('{{route('pay-extension.reset.expiration')}}', data).then((res) => {
            if (res.data) {
                toastr.success('Successfully updated');
                dialog.dialog( "close" );
                location.reload();
            } else {
                toastr.error('Some error happens');
            }
        })
    }
</script>
@endpush