@section('title', 'Partners')
@section('heading', 'Partner Organization')

@section('top-menu-items')
<x-partials.top-menu-item name="Partners" route="partners" />
@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;">
            @if ($status)
            <div class="alert alert-success w-25 m-auto d-flex justify-content-center mt-4">
                {{ $status }}
            </div>
            @endif
            <!--begin::Card header-->
            <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 w-250px ps-15 search" placeholder="Search Partner" />
                    </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">
                        <!--begin::Add customer-->
                        @can('write_partner')
                        <button type="button" class="btn add-btn js-add-btn" data-bs-toggle="modal"
                            data-title="Partner"
                            data-bs-target="#kt_modal_add_customer"
                            wire:click="resetFields">
                            Add Partner
                        </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>
            <!--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_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-150px th-color">Organization Name</th>
                            <th class="th-color" style="width: 120px !important;">Partnership Billing</th>
                            <th class="min-w-200px th-color">Customer Payment Required</th>
                            <th class="min-w-200px th-color">Online Booking Login Access</th>
                            <th class="min-w-150px th-color">Private Tours</th>
                            @can('write_partner')
                            <th class="text-end 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">
                        @foreach ($partners as $partner)
                        <tr data-id="{{ $partner->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">{{ $partner->organization_name ?? 'N/A'}}</td>
                            <td class="td-color">
                                @if(!is_null($partner->commission_percentage))
                                Commission
                                @elseif(!is_null($partner->discount_percentage))
                                Discount
                                @else
                                N/A
                                @endif
                            </td>

                            <td class="td-color">{{ $partner->payment_required? 'Yes' : 'No'  }}</td>
                            <td class="td-color">{{ $partner->online_booking_access ? 'Yes' : 'No' }}</td>
                            <td class="td-color">No</td>
                            @can('write_partner')
                            <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>
                                    <!--end::Svg Icon-->
                                </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 w-125px py-4"
                                    data-kt-menu="true">
                                    <!--begin::Menu item-->
                                    <div class="menu-item px-3">
                                        <a href="#" class="menu-link act-btn px-3"
                                            wire:click.prevent="edit({{ $partner->id }})" data-bs-toggle="modal"
                                            data-bs-target="#kt_modal_add_customer">Edit</a>
                                    </div>
                                    <!--end::Menu item-->
                                    <!--begin::Menu item-->
                                    <div class="menu-item px-3">
                                        <a href="#" class="menu-link delete px-3"
                                            data-kt-customer-table-filter="delete_row">Delete</a>
                                    </div>
                                    <div class="menu-item px-3">
                                        <a href="#" class="menu-link act-btn px-3" wire:click.prevent="viewPartner({{ $partner->id }})">View</a>
                                    </div>
                                    @can('read_billing')
                                    <div class="menu-item px-3">
                                        <a href="{{ route('orders', ['partner_id' => $partner->id]) }}" class="menu-link  act-btn px-3">View Orders</a>
                                    </div>
                                    @endcan
                                    @if($partner->online_booking_access)
                                        <div class="menu-item px-0">
                                            <a href="javascript:void(0);" wire:click="sendResetLink({{ $partner->id }})" class="menu-link text-start">
                                                Send reset password link
                                            </a>
                                        </div>
                                    @endif
                                    <!--end::Menu item-->
                                </div>
                                <!--end::Menu-->
                            </td>
                            @endcan
                            <!--end::Action=-->
                        </tr>
                        @endforeach
                    </tbody>
                    <!--end::Table body-->
                </table>
                <div class="d-flex justify-content-center">
                    {{ $partners->onEachSide(1)->links('livewire::bootstrap') }}
                </div>
                <!--end::Table-->
            </div>

            <!--end::Card body-->
        </div>
        <!--end::Card-->
        <!--begin::Modals-->
        <!--begin::Modal - Customers - Add-->

        <div class="modal fade" id="kt_modal_add_customer" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true" wire:ignore.self>
            <!--begin::Modal dialog-->
            <div class="modal-dialog modal-dialog-centered mw-650px">
                <!--begin::Modal content-->
                <div class="modal-content">
                    <!--begin::Form-->
                    <form class="form" wire:submit.prevent="{{ $isEditMode ? 'update' : 'store' }}"
                        id="kt_modal_add_customer_form">
                        <!--begin::Modal header-->
                        <div class="modal-header" id="kt_modal_add_customer_header">
                            <!--begin::Modal title-->
                            <h2 class="fw-bolder">{{ $isEditMode ? 'Edit Partner' : 'Add Partner Organization' }}</h2>
                            <!--end::Modal title-->
                            <!--begin::Close-->
                            <div id="kt_modal_add_customer_close" class="btn btn-icon btn-sm btn-active-icon-primary" wire:click="resetFields">
                                <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>
                            </div>
                            <!--end::Close-->
                        </div>
                        <!--end::Modal header-->
                        <!--begin::Modal body-->
                        <div class="modal-body py-10 px-lg-17">
                            <!--begin::Scroll-->
                            <div class="scroll-y me-n7 pe-7" id="kt_modal_add_customer_scroll" data-kt-scroll="true"
                                data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-max-height="auto"
                                data-kt-scroll-dependencies="#kt_modal_add_customer_header"
                                data-kt-scroll-wrappers="#kt_modal_add_customer_scroll" data-kt-scroll-offset="300px">

                                <!-- Partner Organization Name -->
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold mb-2">Partner Organization Name</label><br>
                                    <span class="text-muted">What is the name of the organization you have partnered with?</span>
                                    <input type="text" class="form-control form-control-solid"
                                        placeholder="Enter partner organization name"
                                        wire:model.defer="organization_name" />
                                    @error('organization_name')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>

                                <!-- Partner Phone Number -->
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-bold mb-2">Phone Number</label><br>
                                    <span class="text-muted">What is the phone number of the organization?</span>
                                    <input type="text" class="form-control form-control-solid"
                                        placeholder="Enter phone number"
                                        wire:model.defer="phone_number" />
                                    @error('phone_number')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div>
                                    <label class="fs-6 fw-bold mb-2">Mailing Address</label><br>
                                    <span class="text-muted">What is the mailing address of the organization?</span>
                                    <div class="fv-row mb-7">
                                        <label class="form-label">Address Line 1</label>
                                        <input type="text" class="form-control form-control-solid" wire:model="address_line1" placeholder="Enter address line 1">
                                        @error('address_line1') <span class="text-danger">{{ $message }}</span> @enderror
                                    </div>

                                    <div class="fv-row mb-7">
                                        <label class="fs-6 fw-bold mb-2">Address Line 2</label>
                                        <input type="text" class="form-control form-control-solid" wire:model="address_line2" placeholder="Enter address line 2">
                                        @error('address_line2') <span class="text-danger">{{ $message }}</span> @enderror
                                    </div>

                                    <div class="fv-row mb-7">
                                        <label class="fs-6 fw-bold mb-2">City</label>
                                        <input type="text" class="form-control form-control-solid" wire:model="city" placeholder="Enter city">
                                        @error('city') <span class="text-danger">{{ $message }}</span> @enderror
                                    </div>

                                    <div class="fv-row mb-7">
                                        <label class="fs-6 fw-bold mb-2">Province</label>
                                        <input type="text" class="form-control form-control-solid" wire:model="province" placeholder="Enter province">
                                        @error('province') <span class="text-danger">{{ $message }}</span> @enderror
                                    </div>

                                    <div class="fv-row mb-7">
                                        <label class="fs-6 fw-bold mb-2">Country</label>
                                        <input type="text" class="form-control form-control-solid" wire:model="country" placeholder="Enter country">
                                        @error('country') <span class="text-danger">{{ $message }}</span> @enderror
                                    </div>

                                    <div class="fv-row mb-7">
                                        <label class="fs-6 fw-bold mb-2">Postal Code</label>
                                        <input type="text" class="form-control form-control-solid" wire:model="postal_code" placeholder="Enter postal code">
                                        @error('postal_code') <span class="text-danger">{{ $message }}</span> @enderror
                                    </div>
                                </div>


                                <div class="fv-row mb-7">
                                    <!-- Label -->
                                    <label class="fs-6 fw-bold mb-2">Partnership Billing</label>
                                    <div class="text-muted fs-7 mb-3">Does this Partner receive Discounts or Commissions for selling your Tours?</div>

                                    <!-- Radio Tabs -->
                                    <ul class="nav nav-tabs border-0" id="billingTab" role="tablist">
                                        <li class="nav-item form-check-inline" role="presentation">
                                            <input class="form-check-input" type="radio" name="accessType"
                                                id="discount-tab" data-bs-toggle="tab" data-bs-target="#discount"
                                                value="discount" wire:model="accessType" checked>
                                            <label class="form-check-label" for="discount-tab">Discount</label>
                                        </li>
                                        <li class="nav-item form-check-inline" role="presentation">
                                            <input class="form-check-input" type="radio" name="accessType"
                                                id="commission-tab" data-bs-toggle="tab" data-bs-target="#commission"
                                                value="compensation" wire:model="accessType">
                                            <label class="form-check-label" for="commission-tab">Commission</label>
                                        </li>
                                    </ul>

                                    <!-- Tab Content -->
                                    <div class="tab-content mt-3" id="billingTabContent">
                                        <!-- Discount -->
                                        <div class="tab-pane fade @if($accessType == 'discount') show active @endif bg-transparent" id="discount">
                                            <label class="fs-6 fw-bold mb-2 d-block">Discount Percentage</label>
                                            <input type="number" class="form-control form-control-solid"
                                                wire:model="discount_percentage"
                                                placeholder="Discount percentage" min="0" max="100" onwheel="this.blur()">
                                            @error('discount_percentage')
                                            <span class="text-danger fw-normal">{{ $message }}</span>
                                            @enderror
                                        </div>

                                        <!-- Commission -->
                                        <div class="tab-pane fade @if($accessType == 'compensation') show active @endif bg-transparent" id="commission">
                                            <label class="fs-6 fw-bold mb-2 d-block">Commission Percentage</label>
                                            <input type="number" class="form-control form-control-solid"
                                                wire:model="commission_percentage"
                                                placeholder="Commission percentage" min="0" max="100" onwheel="this.blur()">
                                            @error('commission_percentage')
                                            <span class="text-danger fw-normal">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>


                                <div class="fv-row mb-7">
                                    <label class="required fs-6 fw-bold mb-2">Customer Payment Required</label><br>
                                    <span class="text-muted">Do you require the participants to pay for their order upon arrival? Selecting 'No' will allow Invoices to be created for this Partner only when Partnership Billing is Discount.</span>
                                    <div class="col-6 mb-5">
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="payment_required" id="yesOption"
                                                wire:model.defer="payment_required" value="1" {{ $payment_required ? 'checked' : '' }}>
                                            <label class="form-check-label" for="yesOption">Yes</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="payment_required" id="noOption"
                                                wire:model.defer="payment_required" value="0" {{ !$payment_required ? 'checked' : '' }}>
                                            <label class="form-check-label" for="noOption">No</label>
                                        </div>
                                    </div>
                                    @error('payment_required')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="fv-row mb-7">
                                    <!--begin::Label-->
                                    <label class="required fs-6 fw-bold mb-2">Online Booking Login Access</label><br>
                                    <span class="text-muted">Would you like the Partner's employees to login and place orders for participants?</span>
                                    <!--end::Label-->

                                    <!--begin::Input-->

                                    <div class="d-flex gap-3">
                                        <div>
                                            <input class="form-check-input" type="radio" name="online_booking_access"
                                                id="yes-tab" value="1" wire:model="online_booking_access"
                                                @if($online_booking_access==1) checked @endif
                                                wire:click="showLoginAccess">
                                            <label class="form-check-label" for="yes-tab">Yes</label>
                                        </div>

                                        <div>
                                            <input class="form-check-input" type="radio" name="online_booking_access"
                                                id="no-tab" value="0" wire:model="online_booking_access"
                                                @if($online_booking_access==0) checked @endif
                                                wire:click="showLoginAccessNo">
                                            <label class="form-check-label" for="no-tab">No</label>
                                        </div>

                                    </div>

                                    @error('online_booking_access')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror

                                    <div class="fv-row mb-7 mt-2" id="pass-field" style="{{ $online_booking_access ? '' : 'display:none' }}">
                                        @if($isEditMode)
                                        <span class="text-dark">Set the passcode used at login by the Partner's employees.</span>
                                        @endif
                                        <input type="password" class="form-control form-control-solid" name="password"
                                            placeholder="Enter Password" wire:model="password" />
                                        @error('password') <span class="text-danger d-block">{{ $message }}</span> @enderror
                                    </div>
                                    <div class="tab-content mt-3" id="myTabContent">

                                        @if(!$online_booking_access)
                                        <div class="tab-pane fade active show bg-white " role="tabpanel" aria-labelledby="no-tab">
                                            <div class="fv-row mb-7">
                                                <input type="hidden" wire:model="accessNo" class="form-control form-control-solid rounded" placeholder="Enter fixed" min="1" max="100" step="0.01" />
                                                <span class="text-danger d-block mt-2">@error('accessNo'){{ $message }}@enderror</span>
                                            </div>
                                        </div>
                                        @endif
                                    </div>
                                    <!--end::Input-->
                                </div>

                                <!-- Sales Contact Section -->
                                <div>
                                    <label class="fs-6 fw-bold mb-2">Sales Contact</label><br>
                                    <span class="text-muted">Contact information for the primary Sales Representative of the Partner Organization.</span>
                                    <div class="fv-row mb-7">
                                        <label class="required fs-6 fw-bold mb-2">Sales Rep First Name</label>
                                        <input type="text" class="form-control form-control-solid"
                                            placeholder="Enter sales rep first name"
                                            wire:model.defer="first_name" />
                                        @error('first_name')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <!-- Operator Last Name -->
                                    <div class="fv-row mb-7">
                                        <label class="required fs-6 fw-bold mb-2">Sales Rep Last Name</label>
                                        <input type="text" class="form-control form-control-solid"
                                            placeholder="Enter sales rep first name" wire:model.defer="last_name" />
                                        @error('last_name')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <!-- Email -->
                                    <div class="fv-row mb-7">
                                        <label class="required fs-6 fw-bold mb-2">Sales Rep Email</label>
                                        <input type="email" class="form-control form-control-solid"
                                            placeholder="Enter sales rep email" wire:model.defer="email" />
                                        @error('email')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <!-- Sales Contact Section -->
                                <div>
                                    <label class="fs-6 fw-bold mb-2">Accounting Contact</label><br>
                                    <span class="text-muted">Contact information for the primary Accountant of the Partner Organization.</span>
                                    <!-- Accountant First Name -->
                                    <div class="fv-row mb-7">
                                        <label class="required fs-6 fw-bold mb-2">Accountant First Name</label>
                                        <input type="text" class="form-control form-control-solid"
                                            placeholder="Enter accountant first name"
                                            wire:model.defer="accountant_first_name" />
                                        @error('accountant_first_name') <span class="text-danger">{{ $message }}</span> @enderror
                                    </div>

                                    <!-- Accountant Last Name -->
                                    <div class="fv-row mb-7">
                                        <label class="required fs-6 fw-bold mb-2">Accountant Last Name</label>
                                        <input type="text" class="form-control form-control-solid"
                                            placeholder="Enter accountant last name"
                                            wire:model.defer="accountant_last_name" />
                                        @error('accountant_last_name') <span class="text-danger">{{ $message }}</span> @enderror
                                    </div>

                                    <!-- Billing Email Address -->
                                    <div class="fv-row mb-7">
                                        <label class="required fs-6 fw-bold mb-2">Accountant Email</label>
                                        <input type="email" class="form-control form-control-solid"
                                            placeholder="Enter billing email" wire:model.defer="billing_email_address" />
                                        @error('billing_email_address')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="fv-row mb-7">
                                        <label class="fs-6 fw-bold mb-2">Additional Accountant Email Addresses</label>
                                        <textarea class="form-control form-control-solid"
                                            rows="3"
                                            placeholder="Enter one or more additional emails (comma, semicolon, or new line separated)"
                                            wire:model.defer="additional_billing_emails"></textarea>
                                        <span class="text-muted">Example: ap@partner.com, finance@partner.com</span>
                                        @error('additional_billing_emails')
                                        <span class="text-danger d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="mb-7">
                                    <label class="fs-6 fw-bold mb-2">Private Tours</label><br>
                                    <span class="text-muted">When employees of this Partner book Tours, are the Tours primarily private for their participants only?</span>
                                    <select class="form-control form-control-solid" wire:model="private_tours">
                                        <option value="0">No</option>
                                        <option value="1">Yes</option>
                                    </select>
                                    @error('private_tours') <span class="text-danger">{{ $message }}</span> @enderror
                                </div>

                                <div class="mb-3">
                                    <label class="fs-6 fw-bold mb-2">Favourite Partner</label><br>
                                    <select class="form-control form-control-solid" wire:model="is_favourite">
                                        <option value="0">No</option>
                                        <option value="1">Yes</option>
                                    </select>
                                    @error('private_tours') <span class="text-danger">{{ $message }}</span> @enderror
                                </div>
                            
                               <div class="mb-7" wire:ignore.self>
                                <label class="fs-6 fw-bold mb-2">Tour Tax Exempt</label><br>
                                <span class="text-muted">Select taxes that will NOT be applied to Tour bookings for this Partner.</span>
                                <select wire:model="selectedTourTaxIds" class="form-control form-control-solid border-0" id="selectedPartnerTourTaxes"
                                    data-control="select2" data-placeholder="Select tour taxes" data-allow-clear="true"
                                    multiple="multiple">
                                    <option></option>
                                    @foreach ($tourTaxes as $tax)
                                        <option value="{{ $tax->id }}"
                                            @if (in_array($tax->id, $selectedTourTaxIds ?? [])) selected @endif>
                                            {{ $tax->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('selectedTourTaxIds') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>

                            <div class="mb-7" wire:ignore.self>
                                <label class="fs-6 fw-bold mb-2">Merchandise Tax Exempt</label><br>
                                <span class="text-muted">Select taxes that will NOT be applied to Products for this Partner.</span>
                                <select wire:model="selectedMerchandiseTaxIds" class="form-control form-control-solid border-0" id="selectedPartnerMerchandiseTaxes"
                                    data-control="select2" data-placeholder="Select merchandise taxes" data-allow-clear="true"
                                    multiple="multiple">
                                    <option></option>
                                    @foreach ($merchandiseTaxes as $tax)
                                        <option value="{{ $tax->id }}"
                                            @if (in_array($tax->id, $selectedMerchandiseTaxIds ?? [])) selected @endif>
                                            {{ $tax->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('selectedMerchandiseTaxIds') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>
                      @if(in_array(tenancy()->tenant->id, ['canmore', 'stoneynakoda', 'heliadventures']))
                              <div class="mb-7">
                                    <label class="fs-6 fw-bold mb-2">Sync To Other Tenants</label><br>
                                    <span class="text-muted">Check tenants that should receive this Partner after save.</span>
                                    <div class="mt-3">
                                        @forelse($availableTenants as $tenantOption)
                                            <div class="form-check mb-2">
                                                <input class="form-check-input"
                                                    type="checkbox"
                                                    id="partner-tenant-{{ $tenantOption['id'] }}"
                                                    value="{{ $tenantOption['id'] }}"
                                                    wire:model="selectedTenantIds">
                                                <label class="form-check-label" for="partner-tenant-{{ $tenantOption['id'] }}">
                                                    {{ $tenantOption['id'] }}@if(!empty($tenantOption['domain'])) ({{ $tenantOption['domain'] }}) @endif
                                                </label>
                                            </div>
                                        @empty
                                            <div class="text-muted">No other tenants available.</div>
                                        @endforelse
                                    </div>
                                    @error('selectedTenantIds') <span class="text-danger">{{ $message }}</span> @enderror
                                </div>
                            </div>
                            <!--end::Scroll-->
                        </div>
                             @endif
                        <!--end::Modal body-->
                        <!--begin::Modal footer-->
                        <div class="modal-footer flex-center">
                            <button type="reset" id="kt_modal_add_customer_cancel"
                                class="btn btn-light me-3" wire:click="resetFields">Cancel</button>
                            <button type="submit" id="kt_modal_add_customer_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::Modal footer-->
                    </form>
                    <!--end::Form-->
                    @if (session()->has('message'))
                    <div class="alert alert-success">{{ session('message') }}</div>
                    @endif
                    @if (session()->has('error'))
                    <div class="alert alert-danger">{{ session('error') }}</div>
                    @endif
                </div>
            </div>
        </div>
        <!--end::Modal - Customers - Add-->

        <!--end::Modals-->
    </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/customers.css" type="text/css">


@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>
<!--end::Page Custom Javascript-->

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const modal = document.getElementById('kt_modal_add_customer');
        const passField = document.getElementById('pass-field');
        const yesTab = document.getElementById('yes-tab');
        const noTab = document.getElementById('no-tab');

        // Handle password field visibility
        if (yesTab && noTab && passField) {
            yesTab.addEventListener('click', function() {
                passField.style.display = 'block';
                const input = passField.querySelector('input');
                if (input) input.setAttribute('type', 'password');
            });

            noTab.addEventListener('click', function() {
                passField.style.display = 'none';
                const input = passField.querySelector('input');
                if (input) input.setAttribute('type', 'hidden');
            });
        }

        // Handle modal close event
        if (modal) {
            modal.addEventListener('hidden.bs.modal', function() {
                Livewire.dispatch('resetForm');
            });
        }
    });

    // Handle completion event to close modal
    Livewire.on('handleCompletion', () => {
        const modal = bootstrap.Modal.getInstance(document.getElementById('kt_modal_add_customer'));
        if (modal) {
            modal.hide();
        }
    });

    // Initialize Select2 for taxes
    function initializeTaxSelect() {
        const selectors = [
            { id: '#selectedPartnerTourTaxes', model: 'selectedTourTaxIds' },
            { id: '#selectedPartnerMerchandiseTaxes', model: 'selectedMerchandiseTaxIds' },
        ];

        selectors.forEach((config) => {
            const selectElement = $(config.id);
            if (!selectElement.length)
                return;

            if (selectElement.hasClass('select2-hidden-accessible'))
                selectElement.select2('destroy');

            selectElement.select2({
                placeholder: selectElement.data('placeholder') || 'Select taxes',
                allowClear: true
            }).on('change', function(e) {
                const selectedValues = $(this).val() || [];
                const intValues = selectedValues.map(val => parseInt(val)).filter(val => !isNaN(val));
                @this.set(config.model, intValues);
            });

            const currentValues = @this.get(config.model) || [];
            if (currentValues.length > 0)
                selectElement.val(currentValues).trigger('change');
        });
    }

    // Re-initialize when modal is shown
    document.addEventListener('DOMContentLoaded', function() {
        const modal = document.getElementById('kt_modal_add_customer');
        if (modal) {
            modal.addEventListener('shown.bs.modal', function() {
                setTimeout(initializeTaxSelect, 300);
            });
        }
    });

    // Handle Livewire updates
    Livewire.hook('morph.updated', () => {
        setTimeout(() => {
            const tourSelectElement = $('#selectedPartnerTourTaxes');
            const merchandiseSelectElement = $('#selectedPartnerMerchandiseTaxes');
            if (tourSelectElement.hasClass('select2-hidden-accessible'))
                tourSelectElement.val(@this.get('selectedTourTaxIds') || []).trigger('change');
            if (merchandiseSelectElement.hasClass('select2-hidden-accessible'))
                merchandiseSelectElement.val(@this.get('selectedMerchandiseTaxIds') || []).trigger('change');
            if (!tourSelectElement.hasClass('select2-hidden-accessible') || !merchandiseSelectElement.hasClass('select2-hidden-accessible'))
                initializeTaxSelect();
        }, 200);
    });

window.addEventListener('reloadPage', event => {
    window.location.reload();
});

    // Sync Select2 values before form submission
document.addEventListener('livewire:init', () => {
    const initSelect2 = () => {
        initializeTaxSelect();
    };

    // Initialize on first load
    initSelect2();

    // Re-initialize after Livewire updates (important for modals/re-renders)
    Livewire.on('reinit-select2', () => {
        initSelect2();
    });
});
</script>

@endpush