@section('title')
    {{ $type === 'add-on' ? ($isEditMode ? 'Edit Add-on' : 'Add Add-on') : ($isEditMode ? 'Edit Product' : 'Add Product') }}
@endsection
@section('heading')
    {{ $type === 'add-on' ? ($isEditMode ? 'Edit Add-on' : 'Add Add-on') : ($isEditMode ? 'Edit Product' : 'Add Product') }}
@endsection
@section('top-menu-items')
    <x-partials.top-menu-item name="Products" route="products" />
@endsection
<!--begin::Container-->
<div>
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-xxl">
            <!--begin::Form-->
            <form class="form" wire:submit.prevent="{{ $isEditMode ? 'update' : 'store' }}">
                <!--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">
                                <x-input-label customClass="custom-label" for="productImage" :value="__($type === 'add-on' ? 'Add-On Image' : 'Product Image')" />
                                <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 Product available and ready for purchase?</small> <br>
                             <input wire:model.defer="availability" id="availability" type="checkbox"
                                class="form-check-input"   {{ $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" wire:ignore>
                                <x-input-label customClass="custom-label" for="selectedTaxes" :value="__('Select Taxes')" />
                                      <br><small class="text-muted">Select the taxes that apply to this Product at the time
                                 of payment.</small>
                                <select wire:model="selectedTaxes" class="form-select form-control-solid border-0" id="selectedT"
                                    data-control="select2" data-placeholder="Select taxes" data-allow-clear="true"
                                    multiple="multiple">
                                    <option></option>
                                    @foreach ($taxes as $tax)
                                        <option value="{{ $tax->id }}"
                                            @if (in_array($tax->id, $selectedTaxes)) selected @endif>
                                            {{ $tax->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                           @if($type === 'add-on')
                                <div class="fv-row mb-7" wire:ignore>
                                    <x-input-label customClass="custom-label" for="applicableProducts" :value="__('Applicable Products')" />
                                    <br><small class="text-muted">Select the taxes that apply to this Product at the time of payment.</small>
                                    <select wire:model="selectedProducts" class="form-select form-control-solid border-0" id="applicableProducts"
                                        data-control="select2" data-placeholder="Select products" data-allow-clear="true" multiple="multiple">                                     
                                        @foreach ($products as $product)
                                            <option value="{{ $product->id }}"
                                                @if (in_array($product->id, $selectedProducts)) selected @endif>
                                                {{ $product->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            @endif                        

                            {{-- <div class="fv-row mb-7">
                                <x-input-label customClass="custom-label" for="type" :value="__('Product Type')" />
                                <div class="btn-group-vertical d-flex">
                                    <x-partials.select-button type="{{ $type }}" buttonType="add-on" />
                                    <x-partials.select-button type="{{ $type }}" buttonType="merchandise" />
                                </div>
                                <x-input-error :messages="$errors->get('type')" 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
                                 Product?</small>
                                <x-text-input wire:model.defer="name" id="name"
                                    class="form-control form-control-solid" type="text"
                                    placeholder="{{ $type === 'add-on' ? 'Enter addon description' : 'Enter product description' }}" />
                                <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 Product to your Customers so that
                                 they know they selected the correct Product.</small>
                                <x-text-input wire:model.defer="description" id="description"
                                    class="form-control form-control-solid" type="textarea"
                                    placeholder="{{ $type === 'add-on' ? 'Enter addon description' : 'Enter product 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 Product?</small>
                                <x-text-input wire:model.defer="price" id="price"
                                    class="form-control form-control-solid" type="number"
                                    min="1" step="0.01"
                                    placeholder="{{ $type === 'add-on' ? 'Enter addon price' : 'Enter product price' }}" />
                                <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 Product
                                 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 Product?</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 Products 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 Product?</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 Product?</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(request()->query('type') == 'add-on' ? 'product.addons' : 'products') }}">
                Cancel
                </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>
</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>
    <!--end::Page Custom Javascript--> --}}

        <script>
          document.addEventListener('livewire:navigated', () => {
             setTimeout(() => {               
                 $('#applicableProducts').on('change', function(e) {
                     @this.set('selectedProducts', $(this).val());
                 });
               
             }, 1000);
         }, {
             once: true
         })
            document.getElementById('price').addEventListener('wheel', function (e) {
            e.preventDefault();  
            this.blur(); 
        });
        document.addEventListener('livewire:navigated', () => {
            setTimeout(() => {
                $('#selectedT').select2({
                    placeholder: 'Select taxes',
                    allowClear: true
                }).on('change', function(e) {
                    @this.set('selectedTaxes', $(this).val());
                });
            }, 1000); // (1 second)
        }, { once: true })
        </script>
@endpush