@section('title', 'Invoices')
@section('heading', 'Invoices')

@section('top-menu-items')
    <x-partials.top-menu-item name="Orders" route="orders" /> 
    <x-partials.top-menu-item name="Block Bookings" route="block-booking" />     
    <x-partials.top-menu-item name="Invoices" route="invoices" />
    <x-partials.top-menu-item name="Reports" route="reports.daily-sales" />
@endsection
<div>
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-xxl">

            <div class="card" style="background-color: #F3F3F3;">

                <div class="card-header border-0 pt-6">
                    <!--begin::Card title-->
                    <div class="card-title">
                        <!--begin::Search-->
                        <div class="d-flex align-items-center position-relative my-1">
                            <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
                            <span class="svg-icon svg-icon-1 position-absolute ms-6">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none">
                                    <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546" height="2"
                                        rx="1" transform="rotate(45 17.0365 15.1223)" fill="black" />
                                    <path
                                        d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
                                        fill="black" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                   <input type="text" 
                        data-kt-customer-table-filter="search" 
                        wire:model.live="query"
                        class="form-control form-control-solid bg-white w-250px ps-15" 
                        placeholder="Search Invoices" />

                        </div>
                        <!--end::Search-->
                        <!--begin::Filters-->
                        <div class="d-flex align-items-center gap-3 ms-4">
                            <!--begin::Status Filter-->
                            <select wire:model.live="statusFilter" 
                                class="form-select form-select-solid bg-white w-150px">
                                <option value="">All Status</option>
                                <option value="Open">Open</option>
                                <option value="Closed">Closed</option>
                                <option value="Sent">Sent</option>
                                <option value="Paid">Paid</option>
                            </select>
                            <!--end::Status Filter-->
                            <!--begin::Partner Filter-->
                            <select wire:model.live="partnerFilter"
                                class="form-select form-select-solid bg-white w-200px">
                                <option value="">All Partners</option>
                                @foreach(($partners ?? []) as $partner)
                                    <option value="{{ $partner->id }}">{{ $partner->organization_name }}</option>
                                @endforeach
                            </select>
                            <!--end::Partner Filter-->
                            <!--begin::Date Range Filters-->
                            <input type="date" 
                                wire:model.live="dateFrom"
                                class="form-control form-control-solid bg-white w-150px" 
                                placeholder="From Date" />
                            <input type="date" 
                                wire:model.live="dateTo"
                                class="form-control form-control-solid bg-white w-150px" 
                                placeholder="To Date" />
                            <!--end::Date Range Filters-->
                            <!--begin::Clear Filters Button-->
                            @if($query || $statusFilter || $dateFrom || $dateTo || $partnerFilter)
                          <button type="button" 
                                wire:click="clearFilters"
                                class="btn btn-light btn-sm"
                                style="background-color: #ffffff;">
                            Clear Filters
                        </button>

                            @endif
                            <!--end::Clear Filters Button-->
                        </div>
                        <!--end::Filters-->
                    </div>
                    <!--begin::Card title-->
                    <!--begin::Card toolbar-->
                    <div class="card-toolbar">
                        <!--begin::Toolbar-->
                        <div class="d-flex justify-content-end" data-kt-customer-table-toolbar="base">
                            <!--begin::Add customer-->
                            {{-- @can('write_billing')
                                <button type="button" class="btn add-btn js-add-btn" data-title="Partner"
                                    data-bs-toggle="modal" data-bs-target="#kt_modal_create_app">
                                    New Invoice
                                </button>
                            @endcan --}}
                        </div>
                        <!--end::Toolbar-->
                        <!--begin::Group actions-->
                        <div class="d-flex justify-content-end align-items-center d-none"
                            data-kt-customer-table-toolbar="selected">
                            <div class="fw-bolder me-5">
                                <span class="me-2" data-kt-customer-table-select="selected_count"></span>Selected
                            </div>
                            <button type="button" class="btn btn-danger"
                                data-kt-customer-table-select="delete_selected">Delete Selected</button>
                        </div>
                        <!--end::Group actions-->
                    </div>
                    <!--end::Card toolbar-->
                </div>


                
                    <div class="card-body pt-0">
                        <!--begin::Table-->
                        <div wire:loading.class="opacity-50" wire:target="statusFilter,query,dateFrom,dateTo">
                        <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_customers_table">
                            <!--begin::Table head-->
                            <thead>
                                <tr class="text-start text-gray-400 fw-bolder fs-7 text-uppercase gs-0">
                                    <!--begin::Table row-->
                                    <th class="min-w-125px th-color">Invoice ID</th>                            
                                    <th class="min-w-125px th-color">Partner Org</th>                                                                
                                    <th class="min-w-125px th-color">Open Date</th>                                                                                     
                                    <th class="min-w-125px th-color">Closed Date</th>
                                    <th class="min-w-125px th-color">Paid Date</th>
                                    <th class="min-w-125px th-color">Status</th>    
                                    @can('write_billing')
                                    <th class="text-canter min-w-70px th-color">Actions</th>
                                    @endcan
                                </tr>
                                <!--end::Table row-->
                            </thead>
                            <!--end::Table head-->
                            <!--begin::Table body-->
                        <tbody class="fw-bold text-gray-600" style="color: #3E3D3D !important;">
                                @php
                                    $returnParams = array_filter([
                                        'query' => $query ?? '',
                                        'statusFilter' => $statusFilter ?? '',
                                        'dateFrom' => $dateFrom ?? '',
                                        'dateTo' => $dateTo ?? '',
                                    ]);
                                    $returnQuery = !empty($returnParams) ? '?' . http_build_query($returnParams) : '';
                                @endphp
                                @forelse($invoices as $invoice)
                                    <tr>
                                        <td>
                                            <a href="{{ route('invoices.view', ['id' => $invoice->id]) }}{{ $returnQuery }}"
                                                class="text-gray-800 text-hover-primary mb-1">Invoice
                                                #{{ $invoice->id }}</a>
                                        </td>                                        
                                        <td>
                                            <span class="text-gray-800 text-hover-primary mb-1">{{ $invoice->partner?->organization_name ?? 'N/A'}}</span>
                                        </td>                                      
                                        <td>{{ $invoice->created_at?->format('d M, Y') ?? 'NULL' }}</td>
                                                                    
                                        <td>{{ $invoice->closed_at?->format('d M, Y') ?? 'NULL' }}</td>
                                         <td>{{ $invoice->paid_at?->format('d M, Y') ?? 'NULL' }}</td>
                                            <td>
                                            <div class="badge badge-light-success">{{ $invoice->status }}
                                            </div>
                                        </td>   
                                        @can('write_billing')
                                        <td class="text-center">
                                            <a href="#" class="btn btn-light btn-active-light-primary btn-sm bg-white custom-action"
                                                data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">
                                                Actions
                                                <i class="ki-duotone ki-down fs-5 m-0"></i> </a>
                                            <!--begin::Menu-->
                                            <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4"
                                                data-kt-menu="true">
                                                <!--begin::Menu item-->
                                                <div class="menu-item px-3">
                                                    <a href="{{ route('invoices.view', ['id' => $invoice->id]) }}{{ $returnQuery }}" class="menu-link px-3">
                                                        Edit 
                                                    </a>
                                                </div>
                                            @if($invoice->status == 'Open')
                                             <div class="menu-item px-3">
                                                        <a href="#"
                                                        class="menu-link px-3"    data-id="{{ $invoice->id }}"
                                                        onclick="bookingDelete(event, {{ $invoice->id }})">
                                                        Delete
                                                        </a>
                                                    </div>

                                            @endif
                                                <!--end::Menu item-->
                                            </div>
                                            <!--end::Menu-->
                                        </td>
                                        @endcan
                                    </tr>
                                @empty
                                    <tr>
                                        <td class="td-color">
                                        </td>
                                        <td class="td-color">
                                        </td>
                                        <td class="td-color">
                                        </td>
                                        <td class="text-center  extra-bold text-dark fs-5">No Invoices
                                        </td>
                                        <td></td>
                                        <td class="td-color text-end">
                                        </td>
                                  
                                    </tr>
                                @endforelse
                            </tbody>
                            <!--end::Table body-->
                        </table>
                        </div>
                        <!--end::Table-->
                    </div>
              

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

@push('scripts')
<!--begin::Page Vendors Javascript(used by this page)-->
<script src="assets/plugins/custom/datatables/datatables.bundle.js"></script>
<!--end::Page Vendors Javascript-->
<!--begin::Page Custom Javascript(used by this page)-->
<script src="assets/js/custom/apps/customers/list/export.js"></script>
<script src="/assets/js/custom/apps/customers/list/list.js"></script>
<script src="assets/js/custom/apps/customers/add.js"></script>
<script src="assets/js/custom/widgets.js"></script>
<script src="assets/js/custom/apps/chat/chat.js"></script>
<script src="assets/js/custom/modals/create-app.js"></script>
<script src="assets/js/custom/modals/upgrade-plan.js"></script>
<!--end::Page Custom Javascript-->

<!--end::Content-->
<script>
      function bookingDelete(event, bookingId) {  
            event.stopPropagation(); // prevent other click actions

            Swal.fire({
                text: "Are you sure you want to delete it?",
                icon: "warning",
                showCancelButton: true,
                buttonsStyling: false,
                confirmButtonText: "Yes, delete",
                cancelButtonText: "No, cancel",
                customClass: {
                    confirmButton: "btn fw-bold btn-danger",
                    cancelButton: "btn fw-bold btn-active-light-primary",
                },
            }).then(function(result) {
                if (result.isConfirmed) {
                    Livewire.dispatch("delete", {
                        id: bookingId
                    });
                }
            });
        }
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize select2
        $('#invoice_status').select2();

        // Listen for changes
        $('#invoice_status').on('change', function(e) {
            console.log('here');
            let value = $(this).val();
            // Emit the value to Livewire
            Livewire.dispatch('statusChanged', {
                status: value
            });
        });
    });
</script>
<script>
    $(document).ready(function () {
        // When "Select All" checkbox is clicked
        $('[data-kt-check="true"]').on('change', function () {
            let isChecked = $(this).is(':checked');
            $('.row-checkbox').prop('checked', isChecked);
        });
    });

    window.addEventListener('show-customer-modal', () => {
            $('#customerModal').modal('show');
        });
</script>

@endpush
</div>