<div class="">

    <div class=" card">
        <div class="card-body">
            <form action="{{ route('CustomerPaymentDadeline') }}" method="POST" id="submitFrom">
                @csrf
                <div class="row">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="myTable">
                            <thead style="background: #78716C;color:white;">
                                <tr>
                                    <th class="text-center">
                                        @can('customer-recharge-batch')
                                            <input type="checkbox" id="allSelect">
                                        @endcan
                                    </th>
                                    <th class="">ID</th>
                                    <th>User name</th>
                                    <th>Status</th>
                                    <th>Expire Date</th>
                                    <th>Extended Day</th>
                                    <th>Bill Cycle</th>
                                    <th>Package</th>
                                    <th>Package price</th>
                                    <th>POP</th>
                                    <th>Name</th>
                                    <th style="min-width: 200px;">Address</th>
                                    <th>Contact No</th>
                                    <th>Connection Date</th>

                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @foreach ($clients as $r)
                                    <tr>

                                        <td class="text-center">
                                            <input type="checkbox" value="{{ $r->id }}" class="checkbox"
                                                id="row_id" name="ids[]">
                                        </td>
                                        <td>
                                            {{ $r->id }}
                                        </td>
                                        <td>
                                            <span class="text-dark lead" style="font-weight: 400;">
                                                {{ $r->userid }}</span>
                                            @can('ppp-password')
                                                <br>
                                                {{ $r->password }}
                                            @endcan
                                            <br>
                                            <br>
                                            <span class="text-danger p-1">Due Amount :
                                                {{ $r->customerAccount->dueAmount ?? 0 }} </span>

                                        </td>

                                        @if ($r->clients_status == 'expired')
                                            <td class="deactive bg-danger">
                                                Expired
                                            @elseif($r->clients_status == 'deactive')
                                            <td class="deactive bg-danger">
                                                Deactive
                                            @elseif($r->clients_status == 'disable')
                                            <td class="bg-warning">
                                                Disable
                                            @elseif($r->clients_status == 'active')
                                            <td class="bg-success">
                                                Active
                                            @elseif($r->client_approval == 'pending')
                                            <td>
                                                Pending
                                        @endif
                                        </td>



                                        @if ($r->clients_status == 'expired')
                                            <td class="bg-danger whitespace-nowrap">
                                                {{ date('d-M-Y', strtotime($r->expire_date)) }}
                                            </td>
                                        @else
                                            <td class="bg-success whitespace-nowrap">
                                                {{ date('d-M-Y', strtotime($r->expire_date)) }}
                                            </td>
                                        @endif
                                        <td>
                                            {{ $r->payment_dadeline }}
                                        </td>
                                        <td>
                                            {{ $r->billing_cycle }}
                                        </td>

                                        <td>

                                            @can('show-sub-package')
                                                <span class="badge badge-info p-2">{{ $r->subpack->name ?? '' }}</span>
                                            @endcan

                                            @can('show-mother-package')
                                                <span class="badge badge-info p-2">
                                                    {{ $r->packages->package_name ?? '' }}</span>
                                            @endcan


                                        </td>

                                        <td>
                                            @can('show-sub-package-rate')
                                                <span class="badge badge-info p-2">{{ $r->subpack->rate ?? 0 }}</span>
                                            @endcan

                                            @can('show-motherpackage-rate')
                                                <span
                                                    class="badge badge-info p-2">{{ $r->packages->package_rate ?? 0 }}</span>
                                            @endcan



                                        </td>


                                        <td>

                                            {{ $r->pop->popname }}

                                        </td>

                                        <td>
                                            <p class="p-1" style="font-weight: 400">
                                                {{ $r->clientsinfo->clients_name ?? '' }}</p>
                                        </td>

                                        <td style="max-width:250px;">

                                            <div class="w-100">
                                                <p style="font-size:12px;">
                                                    @if (!empty($r->clientsinfo->flat_no))
                                                        <b>Flat No :</b> {{ $r->clientsinfo->flat_no ?? '' }} ,
                                                    @endif
                                                    @if (!empty($r->clientsinfo->building_name))
                                                        <b>Building Name :</b>
                                                        {{ $r->clientsinfo->building_name ?? '' }} ,
                                                    @endif
                                                    @if (!empty($r->clientsinfo->road_no))
                                                        <b>Road No :</b> {{ $r->clientsinfo->road_no ?? '' }} ,
                                                    @endif
                                                    @if (!empty($r->clientsinfo->block_sector))
                                                        <b>Block/Sector :</b> {{ $r->clientsinfo->block_sector ?? '' }}
                                                        ,
                                                    @endif
                                                    @if (!empty($r->clientsinfo->area))
                                                        <b>Area :</b> {{ $r->clientsinfo->area ?? '' }},
                                                    @endif
                                                    @if (!empty($r->clientsinfo->box))
                                                        <b>Box :</b> {{ $r->clientsinfo->box ?? '' }}
                                                </p>
                                            </div>
                                @endif
                                </td>

                                <td>
                                    {{ $r->clientsinfo->contact_no ?? '' }}
                                </td>

                                <td class="whitespace-nowrap">
                                    {{-- {{ date('d-M-Y', strtotime($r->created_at)) }} --}}
                                    <strong>CD:</strong> {{ date('d-M-Y h:i:sa', strtotime($r->created_at)) }}<br>
                                    @if ($r->clientsinfo->joinDate)
                                        <strong>JD:</strong> {{ date('d-M-Y', strtotime($r->clientsinfo->joinDate)) }}
                                    @endif
                                </td>

                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>


                </div>
                <div class="row">
                    <table class="table">
                        <tr>

                            <td>
                                <div class="col-md-3 float-right">

                                    <label for="day" class="float-right form-control">Day</label>
                                    <input type="number" name="day" id="day" required class="form-control"  min="0" max="{{ $company_information->max_extended_day }}">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <button class="btn btn-primary float-right" id="submitBtn" type="submit">Submit</button>
                            </td>
                        </tr>
                    </table>
                </div>

            </form>

        </div>
    </div>
</div>

<style>
    #balanceHints {
        position: fixed;
        width: 200px;
        z-index: 99;
        background: skyblue;
        bottom: 10px
    }
</style>

<script>
    $(function() {
        total = 0;
        $('#allSelect').on('click', function() {
            total = 0;
            resellerBalance = $('#resellerBalance').text();
            if (this.checked) {
                $('.checkbox').each(function() { //loop through each checkbox
                    $(this).prop('checked', true); //check
                    let price = $(this).parent('td').find('.current_price').val();
                    total += parseInt(price);
                });
            } else {
                $('.checkbox').each(function() { //loop through each checkbox
                    $(this).prop('checked', false); //uncheck
                    let price = $(this).parent('td').find('.current_price').val();
                    total -= parseInt(price);
                });
                total = 0;
            }
            $('#selected_user_price').text(total);
        });
        $('.checkbox').on('change', function() {
            // var id = $(this).val();
            if (this.checked) {
                //$(this).prop('checked', true);
                let price = $(this).parent('td').find('.current_price').val();
                total += parseInt(price);
                $('#selected_user_price').text(total);
            } else {
                //$(this).prop('checked', false);
                let price = $(this).parent('td').find('.current_price').val();
                total -= parseInt(price);
                $('#selected_user_price').text(total);
            }
        });
    });
</script>


<script>
    $(document).ready(function() {
        var total = 0;
        $('.checkbox').on('click', function() {
            // var id = $(this).val();
            var currentRow = $(this).closest("tr");
            var package_rate = currentRow.find("td:eq(7)").text();
            if (this.checked) {
                $('#selected_user_price').each(function() { //loop through each checkbox
                    // $(this).val(id); //check
                    total += parseInt(package_rate);
                    $(this).val(total);
                });
            } else {
                $('#selected_user_price').each(function() { //loop through each checkbox
                    // $(this).val(id); //check
                    total -= parseInt(package_rate);
                    $(this).val(total);
                });
            }
        });

        $('#submitBtn').on('click', function(e) {
            e.preventDefault();
            var day = $('#day').val();
            if(day == ''){
                toastr.error('Please Enter Day');
                return ;
            }

            $('#submitFrom').submit();


        });
    });
</script>
