@section('title', __('Products Offers'))
<div>
  <x-baseview title="{{ __('Products Offers') }}" :showNew="true">
    <livewire:tables.products-offers-table />
  </x-baseview>


  {{-- new form --}}
  <div x-data="{ open: @entangle('showCreate') }">
    <x-modal confirmText="{{ __('Save') }}" action="save" :clickAway="false">
      <p class="text-xl font-semibold">{{ __('Create Offer') }}</p>
      <x-media-upload title="{{ __('Photo') }}" name="photo" preview="{{ $selectedModel->photo ?? '' }}"
        :photo="$photo" :photoInfo="$photoInfo" types="PNG or JPEG" rules="image/*" />

      <x-input title="{{ __('Name') }}" name="name" />
      <x-textarea title="{{ __('Description') }}" name="description" />

      <x-input title="{{ __('Discount') }}" name="discount" />
      <div class="grid gap-4 md:grid-cols-2">
        {{-- <x-input title="{{ __('Code') }}" name="code" /> --}}
        <div>
          <x-input title="{{ __('Times Per Customer') }}" name="times" type="number" />
          <p class="mt-1 text-sm font-light text-gray-400">{{ __('Empty for unlimited times') }}</p>
        </div>
        <x-input title="{{ __('Expires On') }}" name="expires_on" type="date" />

        <x-checkbox title="{{ __('Is Percentage?') }}" name="percentage" :defer="false" />

        <x-checkbox title="{{ __('Active') }}" name="isActive" :defer="false" />

      </div>

      {{-- products --}}
      <livewire:component.autocomplete-input title="{{ __('Products') }}" emitFunction="autocompleteProductSelected"
        :customQuery="$customQuery" :clear="false" :queryClause="$productSearchClause" onclearCalled="clearAutocompleteFieldsEvent" />

      {{-- selected products --}}
      <x-item-chips :items="$this->selectedProductsNames ?? []" onRemove="removeSelectedProduct" />

    </x-modal>
  </div>


  {{-- details moal --}}
  <div x-data="{ open: @entangle('showDetails') }">
    <x-modal-lg>

      <p class="text-xl font-semibold">{{ __('Offer Details') }}</p>
      <x-details.item title="{{ __('Photo') }}" text="">
        <div class="flex flex-wrap space-x-3 space-y-3">
          <a href="{{ $selectedModel?->photo }}" target="_blank"><img src="{{ $selectedModel?->photo }}"
              class="mx-2 h-24 w-24 rounded-sm" /></a>
        </div>
      </x-details.item>
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">


        <x-details.item title="{{ __('Name') }}" text="{{ $selectedModel->name ?? '' }}" />
        <x-details.item title="{{ __('Description') }}" text="{{ $selectedModel->description ?? '' }}" />

        {{-- discount --}}
        <div>
          <x-label title="{{ __('Discount') }}" />
          @if ($selectedModel)
            @include('components.table.coupon_discount_price', [
                'model' => $selectedModel,
            ])
          @endif
        </div>
        <x-details.item title="{{ __('Expires On') }}" text="{{ $selectedModel->formatted_expires_on ?? '' }}" />
        <x-details.item title="{{ __('Useable Times') }}" text="{{ $selectedModel->times ?? 'Unlimited' }}" />
        <div>
          <x-label title="{{ __('Status') }}" />
          <x-table.active :model="$selectedModel" />
        </div>
      </div>

      <div>
        <x-label title="{{ __('Products') }}" />
        <x-coupon.prices :prices='$selectedModel?->products_prices' />
      </div>
    </x-modal-lg>
  </div>


  {{-- update form --}}
  <div x-data="{ open: @entangle('showEdit') }">
    <x-modal confirmText="{{ __('Update') }}" action="update" :clickAway="false">
      <p class="text-xl font-semibold">{{ __('Update Offer') }}</p>

      <x-media-upload title="{{ __('Photo') }}" name="photo" preview="{{ $selectedModel->photo ?? '' }}"
        :photo="$photo" :photoInfo="$photoInfo" types="PNG or JPEG" rules="image/*" />

      <x-input title="{{ __('Name') }}" name="name" />
      <x-input title="{{ __('Description') }}" name="description" />
      <x-input title="{{ __('Discount') }}" name="discount" />

      <div class="grid gap-4 md:grid-cols-2">
        <div>
          <x-input title="{{ __('Times Per Customer') }}" name="times" type="number" />
          <p class="mt-1 text-sm font-light text-gray-400">{{ __('Empty for unlimited times') }}</p>
        </div>
        <x-input title="{{ __('Expires On') }}" name="expires_on" type="date" />

        <x-checkbox title="{{ __('Is Percentage?') }}" name="percentage" :defer="false" />

        <x-checkbox title="{{ __('Active') }}" name="isActive" :defer="false" />

      </div>

      {{-- products --}}
      <livewire:component.autocomplete-input title="{{ __('Products') }}" column="name" model="Product"
        emitFunction="autocompleteProductSelected" :customQuery="$customQuery" :clear="true" :queryClause="$productSearchClause"
        onclearCalled="clearAutocompleteFieldsEvent" />

      {{-- selected products --}}
      <x-item-chips :items="$this->selectedProductsNames ?? []" onRemove="removeSelectedProduct" />
    </x-modal>
  </div>
</div>