@section('title', 'Orders')
@section('heading', 'Orders')
@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
<!--begin::Content-->
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <div class="ms-7 col-md-6 col-sm-12 d-flex align-items-center">
        <x-partials.vessel-filters colsize="col-6" :sellectedItem="$vesselsOfSelectedType" />
    </div>
    <!--begin::Container-->
    <div id="kt_content_container" class="container-xxl mt-5">
   
        <!--begin::Card-->
        <div class="card" style="background-color: #F3F3F3;">
            <!--begin::Card header-->
        <div class="card-header border-0 pt-6">
    <!-- Row 1 -->
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 w-100">
            
            <div class="d-flex align-items-center gap-3 flex-wrap">
                <div class="d-flex align-items-center position-relative">
                    <span class="svg-icon svg-icon-1 position-absolute ms-6">
                        </span>
                    <input type="text"
                        wire:model.live="query"
                        class="form-control form-control-solid bg-white w-250px ps-15"
                        placeholder="Search Orders" />
                </div>

                <select wire:model.live="statusFilter"
                    class="form-select form-select-solid bg-white w-150px">
                    <option value="">All Status</option>
                    <option value="Pending">Pending</option>
                    <option value="Completed">Completed</option>
                    <option value="Paid">Paid</option>
                    <option value="No Show">No Show</option>
                    <option value="Weathered">Weathered</option>
                    <option value="Refund Pending">Refund Pending</option>
                    <option value="Refund Complete">Refund Complete</option>
                    <option value="Refund Paid">Refund Paid</option>
                </select>

                <input type="date" wire:model.live="dateFrom"
                    class="form-control form-control-solid bg-white w-150px" />
                <input type="date" wire:model.live="dateTo"
                    class="form-control form-control-solid bg-white w-150px" />
            </div>

            <div class="ms-auto">
                @can('write_billing')
                    <button wire:click="createAndRedirect" class="btn btn-primary add-btn">
                        Add Order
                    </button>
                @endcan
            </div>

        </div>

    <!-- Row 2 : Checkboxes -->
    <div class="d-flex align-items-center gap-4 mt-5 mb-5 flex-wrap">
        <div class="form-check">
            <input class="form-check-input" type="checkbox"
                wire:model.live="onlineBookingFilter" id="onlineBookingCheck">
            <label class="form-check-label text-sm fw-normal" for="onlineBookingCheck">
                Online Booking Form Orders
            </label>
        </div>

        <div class="form-check">
            <input class="form-check-input" type="checkbox"
                wire:model.live="noPartnerFilter" id="noPartnerCheck">
            <label class="form-check-label text-sm fw-normal" for="noPartnerCheck">
                No Partner Organization
            </label>
        </div>

        @if($query || $statusFilter || $dateFrom || $dateTo || $partner_id)
            <button type="button"
                wire:click="clearFilters"
                class="btn btn-light btn-sm bg-white">
                Clear Filters
            </button>
        @endif
    </div>
</div>

            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body pt-0">
                @if (session()->has('ordercompleted'))
                <div class="alert alert-success mt-3">
                    {{ session('ordercompleted') }}
                </div>
                @endif
                <!--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>
                        <!--begin::Table row-->
                        <tr class="text-start text-gray-400 fw-bolder fs-7 text-uppercase gs-0">
                            <th class="w-10px pe-2">
                                <div class="form-check form-check-sm form-check-custom form-check-solid me-3">
                                    <input class="form-check-input" type="checkbox" data-kt-check="true"
                                        data-kt-check-target="#kt_customers_table .form-check-input" value="1" />
                                </div>
                            </th>
                            <th class="min-w-125px">Customer Name</th>
                            <th class="min-w-125px">Partner Organization</th>
                            <th class="min-w-125px">Status</th>
                            <th class="min-w-125px">Order ID</th>
                            <th class="min-w-125px">Order Date</th>
                            <th class="min-w-125px">Booking Date</th>
                            <th class="min-w-125px">Payment Method</th>                            
                            <th class="text-center min-w-70px">Actions</th>                            
                        </tr>
                        <!--end::Table row-->
                    </thead>              

                    <tbody class="fw-bold text-gray-600" style="color: #3E3D3D !important;">
                        @foreach ($orders as $order)
                        <tr data-id="{{ $order->id }}">
                            <td>
                                <div class="form-check form-check-sm form-check-custom form-check-solid">
                                    <input class="form-check-input" type="checkbox" value="1" />
                                </div>
                            </td>

                            <td>{{ $order->orderable->first_name ?? 'N/A' }} {{ $order->orderable->last_name ?? '' }}</td>
                            <td>{{ $order->orderable->partner->organization_name  ?? 'N/A'}}</td>
                            <td
                                class="badge text-light cust-td 
                                {{ $order->is_refund
                                    ? 'bg-maroon'
                                    : ($order->status === 'Completed'
                                        ? 'bg-primary'
                                        : ($order->status === 'Pending'
                                            ? 'bg-warning'
                                            : ($order->status === 'No Show'
                                                ? 'bg-danger'
                                                : ($order->status === 'Paid'
                                                    ? 'bg-success'
                                                     : ($order->status === 'Weathered'
                                                        ? 'bg-info'
                                                         : ''))))) }}">
                                @if ($order->is_refund)
                                Refund {{ $order->status ?? '' }}
                                @else
                                {{ $order->status ?? '' }}
                                @endif
                            </td>
                            <td>{{ $order->id }}</td>
                            <td>
                                {{ $order->order_date ? \Carbon\Carbon::parse($order->order_date)->format('Y-m-d') : 'N/A' }}
                            </td>
                            @php
                            $earliestBooking = $order->bookings->min('booking_date');
                            @endphp
                            <td>
                                @if($order->bookings->count() > 0)
                                {{ $earliestBooking ? \Carbon\Carbon::parse($earliestBooking)->format('Y-m-d') : 'N/A' }}
                                @else
                                N/A
                                @endif
                            </td>
                            <td>
                                {{ $order->payment_method }}
                            </td>
                            <!--begin::Action=-->                            
                            <td class="text-end">
                                <a href="#" class="btn btn-sm btn-light custom-action"
                                    data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">Actions
                                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr072.svg-->
                                    <span class="svg-icon svg-icon-5 m-0">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none">
                                            <path
                                                d="M11.4343 12.7344L7.25 8.55005C6.83579 8.13583 6.16421 8.13584 5.75 8.55005C5.33579 8.96426 5.33579 9.63583 5.75 10.05L11.2929 15.5929C11.6834 15.9835 12.3166 15.9835 12.7071 15.5929L18.25 10.05C18.6642 9.63584 18.6642 8.96426 18.25 8.55005C17.8358 8.13584 17.1642 8.13584 16.75 8.55005L12.5657 12.7344C12.2533 13.0468 11.7467 13.0468 11.4343 12.7344Z"
                                                fill="black" />
                                        </svg>
                                    </span>
                                </a>
                                <!--begin::Menu-->
                                <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 py-4 custom-w"
                                    data-kt-menu="true">

                                    @php
                                    $hasBookings = $order->bookings()->exists();
                                    $currentDate = now()->toDateString();

                                    if ($hasBookings) {
                                    $hasBookingToday = $order->bookings()->whereDate('booking_date', '>=', $currentDate)->exists();
                                    } else {
                                    $hasBookingToday = $order->order_date->format('Y-m-d') >= $currentDate;
                                    }
                                    @endphp
                                    @if ($order->status === 'Completed' || $order->status === 'Paid')
                                    <div class="menu-item px-3">
                                        <a href="{{ route('order.edit', $order->id) }}"
                                            class="menu-link act-btn px-3" onclick="event.stopPropagation();">
                                            Edit Order
                                        </a>
                                    </div>
                                    @endif                                    
        
                                        {{-- @if ($order->status == App\Enums\OrderStatus::COMPLETED->value || $order->status === 'Pending' && $hasBookingToday) --}}
                                        <div class="menu-item px-3">
                                            <a href="{{ route('orders.view', $order->id) }}"
                                                class="menu-link act-btn px-3" onclick="event.stopPropagation();">
                                                View Order
                                            </a>
                                        </div>
                                        {{-- @endif --}}
                                     @can('write_billing')
                                        @if ($order->status == 'Paid' && $order->balance <= 0)
                                        <div class="menu-item px-3">
                                            <a href="#" class="menu-link act-btn px-3"
                                                data-bs-toggle="modal" data-bs-target="#kt_modal_add_customer"
                                                wire:click="$dispatch('refund', {order: {{ $order->id }} })">
                                                Refund
                                            </a>
                                        </div>
                                        @endif
                                        @if ($order->status != App\Enums\OrderStatus::COMPLETED->value)
                                        <div class="menu-item px-3">
                                            <a href="{{ route('order.edit', $order->id) }}"
                                                class="menu-link act-btn px-3" onclick="event.stopPropagation();">
                                                Edit Order
                                            </a>
                                        </div>
                                        @endif  
                                         @php
                                            $partner = $order->orderable?->partner;
                                            $balance = $order->balance;
                                            $status = $order->status;
                                        @endphp

                                        @if (
                                               auth()->user()->hasAnyRole(['Owner', 'Administrator']) || !$partner && $balance <= 0 ||
                                            ($partner && ($partner->payment_required && $balance <= 0 || !$partner->payment_required && $balance != 0)
                                        ) )
                                        @if($status == 'Pending')                                    
                                            <div class="menu-item px-3">
                                                <a href="#" class="menu-link act-btn px-3"
                                                    wire:click.prevent="updateStatus({{ $order->id }}, 'Completed')">
                                                    Complete Order
                                                </a>
                                            </div>
                                        @endif   
                                       @endif        
                                        @if ($order->status == 'Completed' && $order->balance <= 0 )                                
                                        <div class="menu-item px-3">
                                            <a href="#" class="menu-link act-btn px-3"
                                                wire:click.prevent="updateStatus({{ $order->id }}, 'Paid')">
                                                Paid Order
                                            </a>
                                        </div>
                                        @endif                             
                                                                   
                                        @if (
                                        (!$order->orderable?->partner && $order->balance != 0 && $order->status == 'Pending') ||
                                        ($order->orderable?->partner?->payment_required && $order->balance != 0 && $order->status == 'Pending') &&
                                        !$order->is_refund)
                                        <div class="menu-item px-3">
                                            <a href="{{ route('order.edit', ['order' => $order->id, 'action' => 'payment']) }}#payment"
                                                class="menu-link act-btn px-3" onclick="event.stopPropagation();">
                                                Process Payment
                                            </a>
                                        </div>
                                        @endif
                                        @if ($order->status == App\Enums\OrderStatus::PENDING->value)
                                        <div class="menu-item px-3">
                                            <a href="#" class="menu-link delete px-3"
                                                data-kt-customer-table-filter="delete_row">Delete</a>
                                        </div>
                                        @endif
                                        <!--end::Menu item-->
                                        @endcan
                                </div>
                                <!--end::Menu-->
                            </td>
                            <!--end::Action=-->
                        </tr>                        
                        @endforeach
                    </tbody>
                    <!--end::Table body-->
                </table>
                </div>
                <!--end::Table-->
                <div class="d-flex justify-content-center mt-3">
                    {{ $orders->onEachSide(1)->links('livewire::bootstrap') }}
                </div>
                <!--end::Table-->
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Card-->
        <!--begin::Modals-->

        @livewire('modals.refund-modal', ['calledFrom' => 'orders'])
        @livewire('modals.payment-method-modal')

        <!--begin::Modal - Adjust Balance-->
        <div class="modal fade" id="kt_customers_export_modal" tabindex="-1" aria-hidden="true">
            <!--begin::Modal dialog-->
            <div class="modal-dialog modal-dialog-centered mw-650px">
                <!--begin::Modal content-->
                <div class="modal-content">
                    <!--begin::Modal header-->
                    <div class="modal-header">
                        <!--begin::Modal title-->
                        <h2 class="fw-bolder">Export Orders</h2>
                        <!--end::Modal title-->
                        <!--begin::Close-->
                        <div id="kt_customers_export_close" class="btn btn-icon btn-sm btn-active-icon-primary">
                            <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                            <span class="svg-icon svg-icon-1">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                    viewBox="0 0 24 24" fill="none">
                                    <rect opacity="0.5" x="6" y="17.3137" width="16" height="2"
                                        rx="1" transform="rotate(-45 6 17.3137)" fill="black" />
                                    <rect x="7.41422" y="6" width="16" height="2" rx="1"
                                        transform="rotate(45 7.41422 6)" fill="black" />
                                </svg>
                            </span>
                            <!--end::Svg Icon-->
                        </div>
                        <!--end::Close-->
                    </div>
                    <!--end::Modal header-->
                    <!--begin::Modal body-->
                    <div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
                        <!--begin::Form-->
                        <form id="kt_customers_export_form" class="form" action="#">
                            <!--begin::Input group-->
                            <div class="fv-row mb-10">
                                <!--begin::Label-->
                                <label class="fs-5 fw-bold form-label mb-5">Select Date Range:</label>
                                <!--end::Label-->
                                <!--begin::Input-->
                                <input class="form-control form-control-solid" placeholder="Pick a date"
                                    name="date" />
                                <!--end::Input-->
                            </div>
                            <!--end::Input group-->
                            <!--begin::Input group-->
                            <div class="fv-row mb-10">
                                <!--begin::Label-->
                                <label class="fs-5 fw-bold form-label mb-5">Select Export Format:</label>
                                <!--end::Label-->
                                <!--begin::Input-->
                                <select data-control="select2" data-placeholder="Select a format"
                                    data-hide-search="true" name="format" class="form-select form-select-solid">
                                    <option value="excell">Excel</option>
                                    <option value="pdf">PDF</option>
                                    <option value="cvs">CVS</option>
                                    <option value="zip">ZIP</option>
                                </select>
                                <!--end::Input-->
                            </div>
                            <!--end::Input group-->

                            <!--begin::Actions-->
                            <div class="text-center">
                                <button type="reset" id="kt_customers_export_cancel"
                                    class="btn btn-light me-3">Cancel</button>
                                <button type="submit" id="kt_customers_export_submit" class="btn btn-primary">
                                    <span class="indicator-label">Save</span>
                                    <span class="indicator-progress">Please wait...
                                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                </button>
                            </div>
                            <!--end::Actions-->
                        </form>
                        <!--end::Form-->
                    </div>
                    <!--end::Modal body-->
                </div>
                <!--end::Modal content-->
            </div>
            <!--end::Modal dialog-->
        </div>
        <!--end::Modal - New Card-->
        <!--end::Modals-->
    </div>
    <!--end::Container-->



    {{-- <div>
        <!-- Modal -->
        <div class="modal fade" id="kt_modal_add_paymethod" tabindex="-1" role="dialog"
            aria-labelledby="kt_modal_add_paymethod_label" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="kt_modal_add_paymethod_label">Payment Method</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form wire:submit.prevent="submitUpdate">
                            <div class="row">
                                <div class="col-6">
                                    <div class="form-check">
                                        <input class="form-check-input" wire:model="paymentMethod" type="radio"
                                            name="paymentMethod" id="giftCard" value="Gift card">
                                        <label class="form-check-label" for="giftCard">Gift card</label>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-check">
                                        <input class="form-check-input" wire:model="paymentMethod" type="radio"
                                            name="paymentMethod" id="americanExpress" value="American express">
                                        <label class="form-check-label" for="americanExpress">American express</label>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-2">
                                <div class="col-6">
                                    <div class="form-check">
                                        <input class="form-check-input" wire:model="paymentMethod" type="radio"
                                            name="paymentMethod" id="visa" value="Visa">
                                        <label class="form-check-label" for="visa">Visa</label>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-check">
                                        <input class="form-check-input" wire:model="paymentMethod" type="radio"
                                            name="paymentMethod" id="mastercard" value="Mastercard">
                                        <label class="form-check-label" for="mastercard">Mastercard</label>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-2">
                                <div class="col-6">
                                    <div class="form-check">
                                        <input class="form-check-input" wire:model="paymentMethod" type="radio"
                                            name="paymentMethod" id="debit" value="Debit">
                                        <label class="form-check-label" for="debit">Debit</label>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-check">
                                        <input class="form-check-input" wire:model="paymentMethod" type="radio"
                                            name="paymentMethod" id="cash" value="Cash">
                                        <label class="form-check-label" for="cash">Cash</label>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-2">
                                <div class="col-6">
                                    <div class="form-check">
                                        <input class="form-check-input" wire:model="paymentMethod" type="radio"
                                            name="paymentMethod" id="cheque" value="Cheque">
                                        <label class="form-check-label" for="cheque">Cheque</label>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <!-- Close button with reset functionality -->
                                <button type="button" class="btn btn-secondary rounded-pill" data-bs-dismiss="modal"
                                    wire:click="resetForm">
                                    Close
                                </button>
                                <!-- Submit button -->
                                <button type="button" class="btn btn-danger rounded-pill"
                                    wire:click.prevent="updateStatus({{ $order->id }}, 'Paid')"
    data-bs-dismiss="modal">
    Pay Now
    </button>
</div>
</form>
</div>

</div>
</div>
</div>
</div> --}}




</div>
<!--end::Content-->

@push('styles')
<!--begin::Page Vendor Stylesheets(used by this page)-->
<link href="assets/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/assets/css/custom/products.css" type="text/css">
<!--end::Page Vendor Stylesheets-->
@endpush

@push('scripts')
<script src="path-to-keenthemes/js/core.js"></script>
<script src="path-to-keenthemes/js/custom.js"></script>
<!--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>
<script>
    document.addEventListener('livewire:load', initKTMenu);
    document.addEventListener('DOMContentLoaded', initKTMenu);

    document.addEventListener('livewire:navigate', initKTMenu);
        function initKTMenu() {         
            document.querySelectorAll('[data-kt-menu-trigger="click"]').forEach(function(el) {
                if (!el.menuInitialized) {
                    new KTMenu(el);
                    el.menuInitialized = true;
                }
            });
        }

    document.addEventListener('livewire:load', function() {
        Livewire.hook('message.processed', () => {
            // Find all collapsibles and reinitialize them
            document.querySelectorAll('.accordion-collapse').forEach(el => {
                // Only re-init if not already initialized
                if (!bootstrap.Collapse.getInstance(el)) {
                    new bootstrap.Collapse(el, {
                        toggle: false
                    });
                }
            });
        });
    });
</script>

<!--end::Page Custom Javascript-->

@endpush