@section('title', $isEditMode ? 'Edit Add-On' : 'Add Add-On')
 @section('heading', $isEditMode ? 'Edit Add-On' : 'Add Add-On')

 @section('top-menu-items')
     <x-partials.top-menu-item name="Tours" route="tours" />
     <x-partials.top-menu-item name="Addons" route="addons" />
 @endsection
 <!--begin::Container-->
 <div>
     <div id="kt_content_container" class="container-xxl">
         <!--begin::Form-->
         <form class="form" wire:submit.prevent="{{ $isEditMode ? 'update' : 'store' }}" id="kt_modal_add_customer_form">
             <!--begin::Modal body-->
             <div class="modal-body py-10 px-lg-17" style="padding-bottom: 0 !important;">
                 <div class="row">
                     <div class="col-4">
                         <div class="fv-row mb-7">
                             <label class="product-label mb-2">Addon Image</label>
                             <div class="image-upload-box position-relative text-left">
                                 <img src="/assets/media/products/Rectangle 9 (1).png"
                                     class="img-fluid custom_w h-80 rounded" alt="Product Image">
                                 <button class="btn btn-light btn-upload position-absolute top-50 translate-middle"
                                     style="left: 42%;">Upload</button>
                             </div>
                         </div>

                         <div class="fv-row mb-7">
                             <x-input-label customClass="custom-label" for="availability" :value="__('Availability')" />
                             <br><small class="text-muted">Is this Tour Add-On available and ready for purchase?</small>
                             <br>
                             <input wire:model.defer="availability" id="availability" type="checkbox"
                                 class="form-check-input" @if ($isPrivateFlightFee) disabled @endif
                                 {{ $availability ? 'checked' : '' }} />
                             {{-- <label for="availability" class="form-check-label ms-2">Availability</label> --}}
                             <x-input-error :messages="$errors->get('availability')" class="mt-2" />
                         </div>
                         <div class="fv-row mb-7">
                             <x-input-label customClass="custom-label" for="online_booking" :value="__('Online Bookings')" />
                             <br><small class="text-muted"> Would you like this Tour Add-On added to the Online Booking
                                 Form where your Customers can purchase it?</small><br>
                             <input wire:model="online_booking" id="online_booking" type="checkbox"
                                 class="form-check-input" />
                             {{-- <label for="online_booking" class="form-check-label ms-2">Online Booking</label> --}}
                             <x-input-error :messages="$errors->get('online_booking')" class="mt-2" />
                         </div>

                         <div class="fv-row mb-7" wire:ignore>
                             <label class="product-label mb-2">Applicable Tours</label>
                             <br><small class="text-muted"> Select each Tour that this Tour Add-On applies to.</small>
                             <select wire:model="selectedTours" class="form-select form-control-solid border-0"
                                 id="selectedT" data-control="select2" data-placeholder="Select tours"
                                 data-allow-clear="true" @if ($isPrivateFlightFee) disabled @endif
                                 multiple="multiple">
                                 @foreach ($tours as $tour)
                                     <option value="{{ $tour->id }}"
                                         @if (in_array($tour->id, $selectedTours)) selected @endif>
                                         {{ $tour->name }}
                                     </option>
                                 @endforeach
                             </select>
                             <x-input-error :messages="$errors->get('selectedTours')" class="mt-2" />
                         </div>

                         <div class="fv-row mb-7" wire:ignore>
                             <x-input-label customClass="custom-label" for="selectedTaxes" :value="__('Applicable Taxes')" />
                             <br><small class="text-muted">Select the taxes that apply to this Tour Add-On at the time
                                 of payment.</small>
                             <select wire:model="selectedTaxes" class="form-select form-control-solid border-0"
                                 id="selectedTo" data-control="select2" data-placeholder="Select taxes"
                                 data-allow-clear="true" multiple="multiple">
                                 @foreach ($taxes as $tax)
                                     <option value="{{ $tax->id }}"
                                         @if (in_array($tax->id, $selectedTaxes)) selected @endif>
                                         {{ $tax->name }}
                                     </option>
                                 @endforeach
                             </select>
                             <x-input-error :messages="$errors->get('selectedTaxes')" class="mt-2" />
                         </div>
                     </div>

                     <div class="col-8">
                         <div class="fv-row mb-7">
                             <x-input-label customClass="custom-label" for="name" :value="__('Name')" />
                             <br><small class="text-muted">What name would you like displayed to your Customers for this
                                 Tour Add-On?</small>
                             <x-text-input wire:model.defer="name" id="name"
                                 class="form-control form-control-solid form-field" type="text" :readonly="$isPrivateFlightFee"
                                 placeholder="Enter addon name" />
                             <x-input-error :messages="$errors->get('name')" class="mt-2" />
                         </div>

                         <div class="fv-row mb-7">
                             <x-input-label customClass="custom-label" for="description" :value="__('Description')" />
                             <br><small class="text-muted">Briefly describe the Tour Add-On to your Customers so that
                                 they know they selected the correct Tour Add-On.</small>
                             <x-text-input wire:model.defer="description" id="description"
                                 class="form-control form-control-solid form-field" type="textarea"
                                 placeholder="Enter addon description" />
                             <x-input-error :messages="$errors->get('description')" class="mt-2" />
                         </div>

                         <div class="fv-row mb-7">
                             <x-input-label customClass="custom-label" for="price" :value="__('Price')" />
                             <br><small class="text-muted">What is the cost of this Tour Add-On?</small>
                             <x-text-input wire:model.defer="price" id="price" :readonly="$isPrivateFlightFee"
                                 class="form-control form-control-solid form-field" type="number" min="1"
                                 step="0.01" placeholder="Enter addon price" min="0" onwheel="this.blur()" />
                             <x-input-error :messages="$errors->get('price')" class="mt-2" />
                         </div>

                         <div class="fv-row mb-7">
                             <x-input-label customClass="custom-label" for="revenue_type" :value="__('Revenue Type')" />
                             <br><small class="text-muted">What Revenue Type would you like applied to this Tour Add-On
                                 for Report purposes?</small>
                             <select wire:model="revenue_type" id="revenue_type"
                                 class="form-select form-control-solid form-field  border-0">
                                 <option value="Tour Sales">{{ __('Tour Sales') }}</option>
                                 <option value="Merchandise Product Sales">{{ __('Merchandise Product Sales') }}
                                 </option>
                                 <option value="Tour Add-On Sales">{{ __('Tour Add-On Sales') }}</option>
                                 <option value="Merchandise Add-On Sales">{{ __('Merchandise Add-On Sales') }}</option>
                                 @if ($fuelSales)
                                     <option value="Fuel Sales">{{ __('Fuel Sales') }}</option>
                                 @endif
                             </select>
                             <x-input-error :messages="$errors->get('revenue_type')" class="mt-2" />
                         </div>

                         <div class="fv-row mb-7">
                             <x-input-label customClass="custom-label" for="sku" :value="__('SKU')" />
                             <br><small class="text-muted">What is the SKU of this Tour Add-On?</small>
                             <x-text-input wire:model="sku" id="sku" class="form-control form-control-solid"
                                 type="text" placeholder="Enter SKU" />
                             <x-input-error :messages="$errors->get('sku')" class="mt-2" />
                         </div>

                         <div class="fv-row mb-7">
                             <x-input-label customClass="custom-label" for="warehouse" :value="__('Warehouse')" />
                             <br><small class="text-muted">What is the name of the location where the surplus Tour
                                 Add-Ons are stored?</small>
                             <x-text-input wire:model="warehouse" id="warehouse"
                                 class="form-control form-control-solid" type="text"
                                 placeholder="Enter warehouse" />
                             <x-input-error :messages="$errors->get('warehouse')" class="mt-2" />
                         </div>

                         <div class="fv-row mb-7">
                             <x-input-label customClass="custom-label" for="barcode" :value="__('Barcode')" />
                             <br><small class="text-muted">What is the barcode of this Tour Add-On?</small>
                             <x-text-input wire:model="barcode" id="barcode"
                                 class="form-control form-control-solid" type="text"
                                 placeholder="Enter barcode" />
                             <x-input-error :messages="$errors->get('barcode')" class="mt-2" />
                         </div>

                         <div class="fv-row mb-7">
                             <x-input-label customClass="custom-label" for="wp_id" :value="__('WP ID')" />
                             <br><small class="text-muted">What is the WP ID of this Tour Add-On?</small>
                             <x-text-input wire:model="wp_id" id="wp_id" class="form-control form-control-solid"
                                 type="text" placeholder="Enter WP ID" />
                             <x-input-error :messages="$errors->get('wp_id')" class="mt-2" />
                         </div>

                     </div>

                 </div>
             </div>
             <!--end::Modal body-->
             <!--begin::Modal footer-->
             <div class="modal-footer flex-right" style="border-top: 0; padding-right: 4.5rem;">
                 <!--begin::Button-->
                 <button type="button" id="kt_modal_add_customer_cancel_btn" class="btn btn-cancel me-3"
                     href="{{ route('addons') }}">
                     Cancel
                 </button>
                 <!--end::Button-->
                 <!--begin::Button-->
                 <button type="submit" id="kt_modal_add_customer_submit" class="btn add-btn">
                     <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>
                 <!--end::Button-->
             </div>
             <!--end::Modal footer-->
         </form>
         <!--end::Form-->
     </div>
 </div>
 @push('styles')
     <link rel="stylesheet" href="/assets/css/custom/addons.css" type="text/css">
 @endpush

 @push('scripts')
     <!--begin::Page Custom Javascript(used by this page)-->
     <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 src="/assets/js/custom/addons.js"></script>
     <!--end::Page Custom Javascript-->
     <script>
         document.getElementById('price').addEventListener('wheel', function(e) {
             e.preventDefault();
             this.blur();
         });
         document.addEventListener('livewire:navigated', () => {
             setTimeout(() => {
                 // alert('')
                 $('#selectedT').on('change', function(e) {
                     @this.set('selectedTours', $(this).val());
                 });
                 $('#selectedTo').on('change', function(e) {
                     @this.set('selectedTaxes', $(this).val());
                 });
             }, 1000); // (1 second)
         }, {
             once: true
         })
     </script>
 @endpush