@section('title', 'Add-Ons')

@section('top-menu-items')
<div class="menu-item here show menu-lg-down-accordion me-lg-1">
    <a class="menu_link py-3 " style="background: #F3F3F3; color: #F4404B" href="/tours" wire:navigate>
        <span class="menu-title">Tours</span>
        <span class="menu-arrow d-lg-none"></span>
    </a>
</div>
<x-partials.top-menu-item name="Merchandise" route="products" />
<x-partials.top-menu-item name="Discounts" route="discounts" />
@endsection
@section('sub-menu-items')
<x-partials.sub-menu-item name="Tours" route="tours" />
<x-partials.sub-menu-item name="Tour Add-Ons" route="addons" />
@endsection

<!--begin::Content-->
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Container-->
    <div id="kt_content_container" class="container-xxl">
        <!--begin::Card-->
        <div class="card" style="background-color: #F3F3F3;">
            <!--begin::Card header-->
            <div class="col-12 m-2 pb-0 mb-0 p-3 mr-5">
                <p class="text-muted">
                    Tour Add-Ons can be products, fees, or donations that are applied to specified Tours. Tour Add-Ons can be made available only to your team to add to Customer bookings made on the Schedule, or they can be made available to your Customers to select through the Online Booking Form. Pro Tip: Augment your Customer journey through the Online Booking Form by providing Tour specific Add-Ons for purchase.
                </p>
            </div>
            <div class="card-header border-0">
                <!--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"
                            wire:model.live="query"
                            class="form-control form-control-solid bg-white w-250px ps-15"
                            placeholder="Search Add-On" />
                    </div>
                    <!--end::Search-->
                </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">
                        <!--end::Export-->
                        <!--begin::Add customer-->
                        @can('write_add-ons')
                        <a href="{{ route('addons.create') }}" class="btn add-btn" wire:navigate>Add Add-On</a>
                        @endcan
                        <!--end::Add customer-->
                    </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>
            <!--end::Card header-->
            <!--begin::Card body-->
            <div class="card-body pt-0">
                <!--begin::Table-->
                <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_products_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_products_table .form-check-input" value="1" />
                                </div>
                            </th>
                            <th class="min-w-125px th-color">ADD-ON NAME</th>
                            <th class="min-w-125px th-color">APPLICABLE TOURS</th>
                            <th class="min-w-75px th-color">Price</th>
                            <th class="min-w-75px th-color">AVAILABLE</th>
                            <th class="min-w-75px th-color">Online Booking</th>
                            @can('write_add-ons')
                            <th class="min-w-70px th-color">Actions</th>
                            @endcan
                        </tr>
                        <!--end::Table row-->
                    </thead>
                    <!--end::Table head-->
                    <!--begin::Table body-->
                    @php
                    $sortedAddOns = $addOns->sortByDesc(function ($addOn) {
                    return Str::startsWith($addOn->name, 'Private Flight Fee') ? 1 : 0;
                    });
                    @endphp

                    <tbody class="fw-bold text-gray-600">
                        @foreach ($sortedAddOns as $addOn)
                        <tr data-id="{{ $addOn->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 class="td-color">{{ $addOn->name }}</td>

                            @php $tourNames = $addOn->tours; @endphp
                            <td class="d-flex flex-wrap" style="width: 200px">
                                @foreach($tourNames as $tour)
                                <span class="rounded-pill text-dark me-2 mb-2 d-flex flex-wrap"
                                    style="padding: 2px 10px; background-color: {{ $tour->schedule_colour }};">
                                    {{ $tour->name }}
                                </span>
                                @endforeach

                                @if(count($tourNames) === 0)
                                <span class="p-0"> N/A </span>
                                @endif
                            </td>

                            <td class="td-color">{{ $addOn->price }}</td>
                            <td class="td-color">{{ $addOn->availability ? 'Yes' : 'No' }}</td>
                            <td class="td-color">{{ $addOn->online_booking ? 'Yes' : 'No' }}</td>

                            @can('write_add-ons')
                            <td>
                                <a href="#" class="btn btn-sm btn-light custom-action d-inline-flex align-items-center"
                                    data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">Actions
                                    <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>

                                <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 
                                menu-state-bg-light-primary fw-bold fs-7 w-125px py-4" data-kt-menu="true">
                                    <div class="menu-item px-3">
                                        <a href="{{ route('addons.edit', $addOn->id) }}" wire:navigate
                                            class="menu-link act-btn px-3"
                                            onclick="event.stopPropagation();">Edit</a>
                                    </div>

                                    @if (!Str::startsWith($addOn->name, 'Private Flight Fee'))
                                    <div class="menu-item px-3">
                                        <a href="#" class="menu-link px-3" data-kt-customer-table-filter="delete_row">Delete</a>
                                    </div>
                                    @endif
                                </div>
                            </td>
                            @endcan
                        </tr>
                        @endforeach
                    </tbody>

                    <!--end::Table body-->
                </table>
                <div class="d-flex justify-content-center mt-3">
                    {{ $addOns->onEachSide(1)->links('livewire::bootstrap') }}
                </div>
                <!--end::Table-->
            </div>
            <!--end::Card body-->
        </div>
        <!--end::Card-->

    </div>

    <!--end::Container-->
</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')
<!--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('click', function(e) {
        if (e.target.matches('[data-kt-customer-table-filter="delete_row"]')) {
            e.preventDefault();

            // Select parent row
            let parent = e.target.closest('tr');
            if (!parent) {
                parent = e.target.closest('.card-view');
            }

            const tourId = parent.getAttribute('data-id');
            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.value) {
                    // Call the Livewire delete method and pass the tour ID
                    Livewire.dispatch('delete', {
                        id: tourId
                    });

                    // Success message after deletion
                    Swal.fire({
                        text: "Deleted.",
                        icon: "success",
                        buttonsStyling: false,
                        confirmButtonText: "Ok, got it!",
                        customClass: {
                            confirmButton: "btn fw-bold btn-primary",
                        }
                    }).then(() => {
                        // Optionally remove the row from the DOM
                        parent.remove();
                    });
                }
            });
        }
    });
</script>
<!--end::Page Custom Javascript-->
@endpush