<x-app-layout>
    @section('page_css')
    <link rel="stylesheet" type="text/css"
        href="{{ asset('app-assets/vendors/css/tables/datatable/datatables.min.css') }}">
    <link rel="stylesheet" type="text/css"
        href="{{ asset('app-assets/vendors/css/tables/datatable/extensions/dataTables.checkboxes.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/css/pages/data-list-view.css') }}">

    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-8 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <h2 class="content-header-title float-left mb-0">Client Billing</h2>
                            <div class="breadcrumb-wrapper">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="{{ $home_url }}">Home</a></li>
                                    <li class="breadcrumb-item active">Client Billing</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-header-right text-md-right col-md-4 col-12">
                    <div class="form-group breadcrum-right">
                        <div class="buttons-section">
                            @if (Session::has('msg'))
                                <div class="alert alert-success" role="alert">
                                    <p class="mb-0">
                                        {{ Session::get('msg') }}
                                    </p>
                                </div>
                            @endif    
                        </div>

                    </div>
                </div>

            </div>
            <div class="content-body">
                <section id="data-list-view" class="data-list-view-header">
                    <!-- @include('banner.partials._filter') -->

                    <!-- filters start -->
                    <!-- <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Filters</h4>
                            <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>
                            <div class="heading-elements">
                                <ul class="list-inline mb-0">
                                    <li><a data-action="collapse"><i class="feather icon-chevron-down"></i></a></li>
                                    <li><a data-action=""><i class="feather icon-rotate-cw users-data-filter"></i></a>
                                    </li>
                                    <li><a data-action="close"><i class="feather icon-x"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="card-content collapse show">
                            <div class="card-body">
                                <div class="users-list-filter">
                                    <form>
                                        <div class="row">
                                            <div class="col-12 col-sm-6 col-lg-3">
                                                <label for="users-list-role">Role</label>
                                                <fieldset class="form-group">
                                                    <select class="form-control" id="users-list-role">
                                                        <option value="">All</option>
                                                        <option value="user">User</option>
                                                        <option value="staff">Staff</option>
                                                    </select>
                                                </fieldset>
                                            </div>
                                            <div class="col-12 col-sm-6 col-lg-3">
                                                <label for="users-list-status">Status</label>
                                                <fieldset class="form-group">
                                                    <select class="form-control" id="users-list-status">
                                                        <option value="">All</option>
                                                        <option value="Active">Active</option>
                                                        <option value="Blocked">Blocked</option>
                                                        <option value="deactivated">Deactivated</option>
                                                    </select>
                                                </fieldset>
                                            </div>
                                            <div class="col-12 col-sm-6 col-lg-3">
                                                <label for="users-list-verified">Verified</label>
                                                <fieldset class="form-group">
                                                    <select class="form-control" id="users-list-verified">
                                                        <option value="">All</option>
                                                        <option value="true">Yes</option>
                                                        <option value="false">No</option>
                                                    </select>
                                                </fieldset>
                                            </div>
                                            <div class="col-12 col-sm-6 col-lg-3">
                                                <label for="users-list-department">Department</label>
                                                <fieldset class="form-group">
                                                    <select class="form-control" id="users-list-department">
                                                        <option value="">All</option>
                                                        <option value="Sales">Sales</option>
                                                        <option value="Devlopment">Devlopment</option>
                                                        <option value="Management">Management</option>
                                                    </select>
                                                </fieldset>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div> -->
                    <!-- filters end -->

                    <!-- DataTable starts -->
                    <div class="table-responsive">
                        <?php $i=1; ?>
                        @if(isset($records) && !empty($records) && count($records))
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Action</th>
                                        <!-- <th>Sl No.</th> -->
                                        <th>Invoice No</th>
                                        <th>CWO Name</th>
                                        <th>Contact Number</th>
                                        <th>Email Address</th>
                                        <th>Signed Up Date</th>
                                        <th>Subscription Package</th>
                                        <th>WhatsApp Settings</th>
                                        <th>Payment Status</th>
                                        <th>Subscription Amount</th>
                                        <th>WhatsApp Charges</th>
                                        <th>Total Amount</th>
                                        <th>Bill Date</th>
                                        <th>Due Date</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($records as $index =>$singleData)
                                    <tr style="background-color:#ffffff;">
                                        <td>
                                            <a href="{{ route('admin.clientbill.download', ['invoice_id' => $singleData->id]) }}" title="Download Invoice"><i class="fa fa-download"></i></a>
                                            <!-- <a href="{{ route('admin.clientbill.paidoffline', ['account_no' => $singleData->account_no ?? '','invoice_id'=>$singleData->id ?? '','invoice_type'=>3 ]) }}" title="Paid Offline">Offline</a> -->
                                        </td>
                                        <!-- <td>{{$index + $records->firstItem()}}</td> -->
                                        <td>{{$singleData->invoice_no}}</td>
                                        <td>{{$singleData->cwo_company}}</td>
                                        <td>
                                            @if($singleData->cwo_phone != '')
                                            +{{$singleData->cwo_isd}}{{$singleData->cwo_phone}}
                                            @endif
                                        </td>
                                        <td>{{$singleData->cwo_email}}</td>
                                        <td>{{date("d-m-Y", strtotime($singleData->created_at))}}</td>
                                        <td>
                                            @if($singleData->type == 1)
                                                Monthly
                                            @endif
                                            @if($singleData->type == 2)
                                                Yearly
                                            @endif
                                            @if($singleData->type == 3)
                                                Quarterly
                                            @endif
                                            @if($singleData->type == 0)
                                                <!-- Only WhatsApp Charge -->
                                                @if($singleData->cwo_subscription_id == 0)
                                                    Custom
                                                @else
                                                    {{getCwoSubscription($singleData->cwo_subscription_id)}}
                                                @endif    
                                            @endif
                                        </td>
                                        <td>
                                            {{getWhatsAppSettings($singleData->cwo_id)}}
                                        </td>
                                        <td>
                                            @if($singleData->is_paid == 1)
                                                Paid
                                            @else
                                                @if($singleData->is_subscription_paid == 1)
                                                    Subscription Paid <br>
                                                @endif
                                                @if($singleData->is_subscription_paid == 0)
                                                    Subscription Not Paid <br>
                                                @endif
                                                @if($singleData->is_whatsapp_paid == 1)
                                                    WhatsApp Paid <br>
                                                @endif
                                                @if($singleData->is_whatsapp_paid == 0)
                                                    WhatsApp Not Paid
                                                @endif
                                            @endif
                                        </td>
                                        <td>R{{$singleData->amount}}</td>
                                        <td>R{{$singleData->whatsapp_amount}}</td>
                                        <td>R{{$singleData->total_amount}}</td>
                                        <td>
                                            @if($singleData->bill_date != '')
                                                {{date("Y/m/d", strtotime($singleData->bill_date))}}
                                            @endif
                                        </td>
                                        <td>
                                            @if($singleData->due_date != '')
                                                {{date("Y/m/d", strtotime($singleData->due_date))}}
                                            @endif
                                        </td>
                                        <td>
                                            <a class="btn btn-info" href="{{ route('admin.clientbill.paidoffline', ['account_no' => $singleData->account_no ?? '','invoice_id'=>$singleData->id ?? '','invoice_type'=>3 ]) }}" title="Click on this if client has paid offline">Paid Offline</a>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                                <!-- <tfoot>
                                    <tr>
                                        <th>Sl No.</th>
                                        <th>Banner Image</th>
                                        <th>Action</th>
                                    </tr>
                                </tfoot> -->

                            </table>
                        @endif
                    </div>
                    <!-- DataTable ends -->

                    <div class="row">
                        <div class="col-12 col-sm-12">
                            <div class="float-right">
                                <!-- @if(isset($records) && count($records)) {{ $records->links('pagination::bootstrap-4') }} @endif -->
                                @if(isset($records) && count($records)) {{ $records->appends($_GET)->links('pagination::bootstrap-4') }} @endif
                            </div>
                        </div>
                    </div>


                </section>

            </div>
        </div>
    </div>
    @section('page_scripts')
    <script src="{{ asset('app-assets/vendors/js/extensions/dropzone.min.js')}}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/pdfmake.min.js')}}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/vfs_fonts.js')}}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.min.js')}}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.buttons.min.js')}}"></script>
    {{-- <script src="{{ asset('app-assets/vendors/js/tables/datatable/buttons.html5.min.js')}}"></script> --}}
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/buttons.print.min.js')}}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/buttons.bootstrap.min.js')}}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.bootstrap4.min.js')}}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/dataTables.select.min.js')}}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js')}}"></script>

    
    <script src="{{ asset('app-assets/js/scripts/ui/data-list-view.js') }}"></script>
    <script type="text/javascript">
        $('.table-responsive').scroll(function (){
            var cols = 4 // how many columns should be fixed
            var container = $(this)
            var offset = container.scrollLeft()
            container.add(container.prev()).find('tr').each(function (index,row){ // .add(container.prev()) to include the header
                $(row).find('td, th').each(function (index,cell){
                    if(index>=cols) return
                    $(cell).css({position:'relative',left:offset+'px'})
                    $(cell).css("background-color", "#ffffff");
                })
            })
        });
    </script>

    @endsection

</x-app-layout>