<x-owner-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') }}">
    <link href="{{ asset('app-assets/css/bootstrap-datepicker.min.css') }}" rel="stylesheet">
    <style>
        .datepicker {
            z-index: 1000 !important;
        }

        /* Styling the tabs */
        .nav-pills .nav-link {
            font-size: 1.2rem;
            padding: 10px 20px;
        }

        /* Styling the accordion */
        .card {
            border: 1px solid #ddd;
            margin-bottom: 10px;
            border-radius: 5px;
        }

        .card-header {
            background-color: #f8f9fa !important;
        }

        .card .card-header {
            padding: 10px 20px;
            border-bottom: 2px solid #e9e9e9;
        }
        span.h6.price {
    margin-right: 30px;
    display: flex
;
    align-items: center;
}
    </style>
    <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">Billing Services</h2>
                            <div class="breadcrumb-wrapper">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="{{ $home_url }}">Home</a></li>
                                    <li class="breadcrumb-item active">Billing Services</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">
                                @include('owner.prebooking.partials._action_buttons')
                            </div>

                        </div>
                    </div> -->

            </div>
                        @if(!empty($checkInvoice->due_date) && $checkInvoice->due_date < date('Y-m-d'))
                <div class="alert alert-danger" role="alert">
                    Your subscription has expired. Please Renew Your Subscription
                </div>
                         @endif

            @if(!empty($checkInvoice))
            <div class="content-body">
                <section id="data-list-view" class="data-list-view-header">
                    {{-- @include('owner.carwashowner.partials._filter') --}}

                    <!-- DataTable starts -->
                    <div class="table-responsive">
                        <table class="table">
                        <thead>
    <tr>
        <th>Invoice No</th>
        <th>Bill Date</th>
        <th>Due Date</th>
        <th>Total</th>
        
    </tr>
</thead>
<tbody>

    <tr style="background-color:#ffffff;">
        <td>{{$checkInvoice->invoice_no??''}}</td>
        @if(!empty($checkInvoice->bill_date))
        <td>{{ $checkInvoice->bill_date ? \Carbon\Carbon::parse($checkInvoice->bill_date)->format('jS F, Y') : 'N/A' }}</td>
        @else
        <td>N.A</td>
        @endif
        @if(!empty($checkInvoice->due_date))
        <td>{{ $checkInvoice->due_date ? \Carbon\Carbon::parse($checkInvoice->due_date)->format('jS F, Y') : 'N/A' }}</td>
        @else
        <td>N.A</td>
        @endif
         <td>R {{ ($checkInvoice->total_amount ?? 0) }}</td> 


       
    </tr>
</tbody>

                            <tfoot>
                                <!-- <tr>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Phone</th>
                                    <th>Company</th>
                                </tr> -->
                            </tfoot>

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


                </section>

            </div>
            @else
             <h5>You have nothing to pay</h5>
            @endif
            <div class="mt-4">
                <div class="row">
                    <div class="col-12">
                        <!-- Nav Pills -->
                        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="pills-bill-tab" data-toggle="pill" href="#pills-bill" role="tab" aria-controls="pills-bill" aria-selected="true">Current Billing</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="pills-paid-tab" data-toggle="pill" href="#pills-paid" role="tab" aria-controls="pills-paid" aria-selected="false">Previous Billing Information</a>
                            </li>
                            <li class="nav-item" style="display:none">
                                <a class="nav-link" id="pills-whatsapp-tab" data-toggle="pill" href="#pills-whatsapp" role="tab" aria-controls="pills-whatsapp" aria-selected="false">Opt In/Out of WhatsApp</a>
                            </li>
             <!-- Move Button to the Extreme Right -->
   
                        </ul>
                 
                        <div class="d-flex justify-content-end mb-2">
                        <a class="btn btn-primary ag-grid-export-btn waves-effect waves-light" href="{{ route('owner.billing.getSubscription') }}">
                            <i class=""></i>
                            WhatsApp Settings
                        </a>
                    </div>
                        <!-- Tab Content -->
                      <!-- Tab Content -->
<div class="tab-content p-2 border border-secondary" id="pills-tabContent">
    <!-- Bill Details Content -->
    <div class="tab-pane fade show active" id="pills-bill" role="tabpanel" aria-labelledby="pills-bill-tab">
        <div id="accordion">
            <!-- Subscription Fee Section -->
            @if(!empty($checkInvoice))
                <div class="card">
                    <div class="card-header" id="headingOne">
                        <span class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                            <span class="h6 mr-3">Subscription Fee:</span>
                            @if(!empty($checkInvoice) && $records->type==1)
                                <span class="h6 mr-5">
                                ({{ \Carbon\Carbon::parse($checkInvoice->due_date)->addDays(1)->format('jS F, Y') }} - 
                                {{ \Carbon\Carbon::parse($checkInvoice->due_date)->addMonth()->format('jS F, Y') }})

                                </span>
                            @endif
                            @if(!empty($records->start_date) && $records->type==2)
                                <span class="h6 mr-5">
                                ({{ \Carbon\Carbon::parse($checkInvoice->due_date)->addDays(1)->format('jS F, Y') }} - 
                                {{ \Carbon\Carbon::parse($checkInvoice->due_date)->addYear()->format('jS F, Y') }})
                                </span>
                            @endif
                            @if(!empty($records->start_date) && $records->type==3)
                                <span class="h6 mr-5">
                                ({{ \Carbon\Carbon::parse($checkInvoice->due_date)->addDays(1)->format('jS F, Y') }} - 
                                {{ \Carbon\Carbon::parse($checkInvoice->due_date)->addDays(89)->format('jS F, Y') }})
                                </span>
                            @endif
                        </span>
                      
                        <div class="d-flex justify-content-end ">
                        @if(!empty($records->amount))
                            <span class="h6 price">R {{ number_format($records->amount ?? 0.00, 2) }}</span>
                        @endif
                        @if($checkInvoice->is_subscription_paid == 0)
                            <a href="{{ route('billing.total', ['account_no' => $cwo_master->account_no ?? '','invoice_id'=>$checkInvoice->id ?? '','total_subscription_amount'=>number_format($checkInvoice->amount ?? 0.00, 2) ]) }}" class="btn btn-primary" id="payNowBtn">Pay Subscription</a>
                        @endif    
        </div>
                    </div>
                    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-5">
                                    <p><strong>Currently your subscription is:</strong> 
                                        @if(!empty($records->type))
                                            {{ $records->type == 1 ? 'monthly' : ($records->type == 2 ? 'yearly' : 'quarter') }}
                                        @endif
                                    </p>
                                </div>
                                @if(!empty($checkInvoice) && $records->type==1)
                                <div class="col-md-4">
                                    <p><strong>Start Date:</strong>
                                    {{ \Carbon\Carbon::parse($checkInvoice->due_date)->addDays(1)->format('jS F, Y') }}
                                    </p>
                                </div>
                                <div class="col-md-3">
                                    <p><strong>End Date:</strong>
                                    {{ \Carbon\Carbon::parse($checkInvoice->due_date)->addMonth()->format('jS F, Y') }}
                                    </p>
                                </div>
                                @endif
                                @if(!empty($checkInvoice) && $records->type==2)
                                <div class="col-md-4">
                                    <p><strong>Start Date:</strong>
                                    {{ \Carbon\Carbon::parse($checkInvoice->due_date)->addDays(1)->format('jS F, Y') }}
                                    </p>
                                </div>
                                <div class="col-md-3">
                                    <p><strong>End Date:</strong>
                                    {{ \Carbon\Carbon::parse($checkInvoice->due_date)->addYear()->format('jS F, Y') }}
                                    </p>
                                </div>
                                @endif
                                @if(!empty($checkInvoice) && $records->type==3)
                                <div class="col-md-4">
                                    <p><strong>Start Date:</strong>
                                    {{ \Carbon\Carbon::parse($checkInvoice->due_date)->addDays(1)->format('jS F, Y') }}
                                    </p>
                                </div>
                                <div class="col-md-3">
                                    <p><strong>End Date:</strong>
                                    {{ \Carbon\Carbon::parse($checkInvoice->due_date)->addDays(90)->format('jS F, Y') }}
                                    </p>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <!-- WhatsApp Charges Section -->
                <div class="card">
                    <div class="card-header" id="headingTwo">
                        <span class="btn btn-link" data-toggle="collapse" data-target="#collapseTwo" aria-controls="collapseTwo">
                            <span class="h6 mr-3">WhatsApp Charges:</span>
                            @if(!empty($checkInvoice->whatsapp_start_date))
                                <span class="h6 mr-5">
                                    ({{ \Carbon\Carbon::parse($checkInvoice->whatsapp_start_date)->format('jS F, Y') }} - 
                                    {{ \Carbon\Carbon::parse($checkInvoice->whatsapp_end_date)->format('jS F, Y') }})
                                </span>
                            @endif
                        </span>
                     
                   
                        <div class="d-flex justify-content-end ">
                        @if(!empty($checkInvoice->whatsapp_amount))
                            <span class="h6 price">R {{ number_format($checkInvoice->whatsapp_amount ?? 0.00, 2) }}</span>
                        @endif
                        @if($checkInvoice->is_whatsapp_paid == 0)
                            <a href="{{ route('billing.total', ['account_no' => $cwo_master->account_no ?? '','invoice_id'=>$checkInvoice->id ?? '','total_whatsapp_amount'=>number_format($checkInvoice->whatsapp_amount ?? 0.00, 2) ]) }}" class="btn btn-primary" id="payNowBtn">Pay WhatsApp</a>
                        @else
                            Already Paid    
                        @endif    
        </div>
                    </div>
                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <p><strong>Cars Washed:</strong> {{ $washedDataCount }}</p>
                                </div>
                                <!-- temporary -->
                                <div class="col-md-4">
                                    <p><strong>Sent Notifications:</strong> {{ $checkInvoice->total_notifications_count??0}}</p>
                                </div>
                                <div class="col-md-4">
                                    <p><strong>Transactions With Phone#</strong> {{ $checkInvoice->total_notifications_count??0}}</p>
                                </div>
                                <div class="col-md-4">
                                    <p><strong>Billing Start Date:</strong> 
                                        {{ \Carbon\Carbon::parse($checkInvoice->whatsapp_start_date)->format('d-m-Y') }}
                                    </p>
                                </div>
                                <div class="col-md-4">
                                    <p><strong>Billing End Date:</strong> 
                                        {{ \Carbon\Carbon::parse($checkInvoice->whatsapp_end_date)->format('d-m-Y') }}
                                    </p>
                                </div>
                                <!-- temporary -->
                                <div class="col-md-6">
                                    <p><strong>Total Charges:</strong> 
                                        {{ $checkInvoice->total_notifications_count }} x 0.3 = 
                                        R {{ number_format($checkInvoice->total_notifications_count  * 0.3, 2) }}
                                    </p>
                                </div>
                                <div class="col-md-12">
                                    <p><strong>*</strong> Charges are calculated at 30 cents per WhatsApp Notification.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <h5>You currently have nothing to pay</h5>
            @endif
        </div>
        <!-- Action Buttons -->
        @if(!empty($checkInvoice))
        <div class="d-flex justify-content-end mt-3 align-items-center">
            <a href="{{ route('owner.billing.downloadInvoice', ['invoice_id' => $checkInvoice->id ?? '']) }}" id="downloadInvoice" class="btn btn-primary mr-2">Download Invoice</a>
            @if($checkInvoice->is_paid == 0)
                <a href="{{ route('billing.total', ['account_no' => $cwo_master->account_no ?? '','invoice_id'=>$checkInvoice->id ?? '','total_subscription_amount'=>number_format($checkInvoice->amount ?? 0.00, 2) ,'total_whatsapp_amount'=>number_format($checkInvoice->whatsapp_amount ?? 0.00, 2)]) }}" class="btn btn-primary" id="payNowBtn">Pay All</a>
            @endif
        </div>
        @else
        @endif
    </div>

    <!-- Paid Details Content -->
    <div class="tab-pane fade" id="pills-paid" role="tabpanel" aria-labelledby="pills-paid-tab">
        <div id="accordion">
            @if(isset($previousBill) && $previousBill->isNotEmpty())
                @foreach ($previousBill as $key => $bill)
                    <div class="card">
                        <div class="card-header" id="headingOne_{{ $key }}">
                            <span class="btn btn-link" data-toggle="collapse" data-target="#collapseOne_{{ $key }}" aria-expanded="false" aria-controls="collapseOne_{{ $key }}">
                                <span class="h6">Payment for {{ \Carbon\Carbon::parse($bill->bill_date)->format('F, Y') }}</span>
                            </span>
                            <span class="h6" style="cursor: pointer;" data-toggle="tooltip" title="Download receipt">
                                {{ \Carbon\Carbon::parse($bill->bill_date)->format('F, Y') }} 
                                <a class="feather icon-download" href="{{ route('owner.billing.downloadInvoice', ['invoice_id' => $bill->id ?? '']) }}"></a>
                            </span>
                        </div>
                        <div id="collapseOne_{{ $key }}" class="collapse" aria-labelledby="headingOne_{{ $key }}" data-parent="#accordion">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4">
                                        <p><strong>Subscription Charge:</strong> R {{ $bill->amount }}</p>
                                    </div>
                                    <div class="col-md-4">
                                        <p><strong>Subscription Start Date:</strong> 
                                            {{ \Carbon\Carbon::parse($bill->bill_date)->format('d-m-Y') }}
                                        </p>
                                    </div>
                                    <div class="col-md-4">
                                        <p><strong>Subscription End Date:</strong> 
                                            {{ \Carbon\Carbon::parse($bill->due_date)->format('d-m-Y') }}
                                        </p>
                                    </div>
                                    <div class="col-md-4">
                                        <p><strong>WhatsApp Charge:</strong> R {{ $bill->whatsapp_amount ?? '0.00' }}</p>
                                    </div>
                                    <div class="col-md-4">
                                        <p><strong>Total:</strong> 
                                            R {{ number_format(($bill->amount ?? 0) + ($bill->whatsapp_amount ?? 0), 2) }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            @else
                <h5>Nothing to show here</h5>
            @endif
        </div>
    </div>

 




</div>

                        </div>
                       
                   
                    </div>
                </div>
            </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>
        // Ensure the accordion resets when switching between tabs
$('#pills-tab a').on('shown.bs.tab', function (e) {
    // Reset the accordion when tab changes
    var activeTab = $(e.target).attr('href'); // Get the target tab ID
    $(activeTab).find('.collapse').collapse('hide'); // Hide all collapses in the active tab
});

    </script> -->
    <!-- <script>
        $(document).ready(function() {
            $('#downloadInvoice').on('click', function() {
                // Create a link element
                const link = document.createElement('a');
                link.href = 'https://autoclick.karmickdev.com/public/ed-billing.pdf'; // Replace with your PDF file's URL
                link.download = 'Invoice.pdf'; // File name for download
                link.click(); // Trigger the download
            });
        });
    </script> -->
   
<!-- <script>
    
    $(document).ready(function() {
        $('.change_status').on('change', function() {
            var statusInQueue = $('#customSwitch_502').is(':checked') ? 1 : 0;
            var statusCompleted = $('#customSwitch_503').is(':checked') ? 1 : 0;
            var currentmasterstatus = $('#customSwitch_501').is(':checked') ? 1 : 0;
            
            $.ajax({
                url: "{{ route('optInOutWhatsapp') }}", // Laravel route
                type: 'POST',
                data: { 
                    cwo_id: "{{ $cwo_master->id }}", // Use Blade echoing correctly
                    currentmasterstatus: currentmasterstatus,
                    status_in_queue: statusInQueue,
                    status_completed: statusCompleted,
                },
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}" // Add CSRF token for Laravel security
                },
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        alert('Status updated successfully!');
                        window.location.reload();
                    } else {
                        alert('Failed to update status.');
                    }
                },
                error: function(xhr, status, error) {
                    console.error(error);
                    alert('An error occurred.');
                }
            });
        });
    });


</script>
<script>
    $(document).ready(function() {
        // When the master checkbox changes state
        $('.change_status_master').on('change', function() {
            var currentmasterstatus = $(this).is(':checked') ? 1 : 0;
            var statusInQueue = $('#customSwitch_502').is(':checked') ? 1 : 0;
            var statusCompleted = $('#customSwitch_503').is(':checked') ? 1 : 0;

            // Collapse logic based on checkbox state
            if ($(this).prop('checked')) {
                // If checked, add the 'show' class to display the collapse
                $('#collapseOne_').addClass('show');
            } else {
                // If unchecked, remove the 'show' class to hide the collapse
                $('#collapseOne_').removeClass('show');
            }

            // Ajax request to update status
            $.ajax({
                url: "{{ route('optInOutWhatsapp') }}", // Laravel route
                type: 'POST',
                data: { 
                    cwo_id: "{{ $cwo_master->id }}", // Use Blade echoing correctly
                    currentmasterstatus: currentmasterstatus,
                    status_in_queue: statusInQueue,
                    status_completed: statusCompleted,
                },
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}" // Add CSRF token for Laravel security
                },
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        alert('Status updated successfully!');
                        window.location.reload();
                    } else {
                        alert('Failed to update status.');
                    }
                },
                // error: function(xhr, status, error) {
                //     console.error(error);
                //     alert('An error occurred.');
                // }
            });
        });

        // Initial check to set collapse state based on checkbox
        if ($('.change_status_master').prop('checked')) {
            $('#collapseOne_').addClass('show');
        } else {
            $('#collapseOne_').removeClass('show');
        }
    });
</script> -->
<script>
   $(document).ready(function() {
        // Initialize the DataTable with buttons, checkbox plugin, and other settings
        $('#exampleTable').DataTable({
          
            responsive: true,   // Enable responsive layout
            paging: true,       // Enable pagination
            searching: true,    // Enable searching/filtering
            ordering: true,     // Enable sorting
            info: true,         // Enable info display like "Showing 1 to 5 of 5 entries"
            lengthChange: false // Disable changing the number of rows per page
        });
    });

</script>
    @endsection

</x-owner-layout>