@section('styles')
  <style media="screen">
    .index {
      margin-top: 2px !important;
    }
  </style>
@stop
@section('title', __('Products'))
<div>

  <x-baseview title="{{ __('Products') }}" :showNew="true">
    <livewire:tables.product-table />
  </x-baseview>

  {{-- new form --}}
  <div x-data="{ open: @entangle('showCreate') }">
    <x-modal-lg confirmText="{{ __('Save') }}" action="save" :clickAway="false">
      <p class="text-xl font-semibold">{{ __('Create Product') }}</p>

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

      <livewire:component.multiple-media-upload title="{{ __('Image') }}" name="photos" types="PNG or JPEG"
        fileTypes="image/*" emitFunction="photoSelected" />

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

      @foreach ($prices as $index => $value)
        <x-product.price-input :index='$index' />
      @endforeach

      <x-box class="p-1" />
      <x-buttons.plain wireClick="newPrice()"> {{ __('Add Price') }} </x-buttons.plain>

      <div class="flex">
        <x-checkbox title="{{ __('Show Slicing Methods') }}" name="showSlicingMethods" :defer="false" />
        <x-checkbox title="{{ __('Active') }}" name="isActive" :defer="false" />
      </div>

    </x-modal-lg>
  </div>


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

      <p class="text-xl font-semibold">{{ $selectedModel?->name ?? '' }} {{ __('Details') }}</p>
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
        <x-details.item title="{{ __('Name') }}" text="{{ $selectedModel->name ?? '' }}" />
        <x-input title="{{ __('Sort') }}" name="sort" />
        <x-details.item title="{{ __('Description') }}" text="{{ $selectedModel->description ?? '' }}" />
      </div>
      <x-details.item title="{{ __('Photos') }}" text="">
        <div class="flex flex-wrap space-x-3 space-y-3">
          @foreach ($selectedModel->photos ?? [] as $photo)
            <a href="{{ $photo }}" target="_blank"><img src="{{ $photo }}"
                class="mx-2 h-24 w-24 rounded-sm" /></a>
          @endforeach
        </div>
      </x-details.item>
      <div class="mt-4 grid grid-cols-1 gap-4 border-t pt-4 md:grid-cols-2 lg:grid-cols-3">

        <div>
          <x-label title="{{ __('Active') }}" />
          <x-table.active :model="$selectedModel" />
        </div>

        <div>
          <x-label title="{{ __('Show Slicing Methods') }}" />
          <x-table.active :isActive="$selectedModel?->show_slicing_methods" />
        </div>

      </div>
      <x-box class="p-2" />
      <x-product.prices :prices="$selectedModel?->prices" />
    </x-modal-lg>
  </div>



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

      <x-input title="{{ __('Name') }}" name="name" />
      <x-input title="{{ __('Sort') }}" name="sort" />

      <livewire:component.multiple-media-upload title="{{ __('Image') }}" name="photos" types="PNG or JPEG"
        fileTypes="image/*" emitFunction="photoSelected" :preview="$photos" />

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

      @foreach ($prices as $index => $value)
        <x-product.price-input :index='$index' />
      @endforeach

      <x-box class="p-1" />
      <x-buttons.plain wireClick="newPrice()"> {{ __('Add Price') }} </x-buttons.plain>

      <div class="flex">
        <x-checkbox title="{{ __('Show Slicing Methods') }}" name="showSlicingMethods" :defer="false" />
        <x-checkbox title="{{ __('Active') }}" name="isActive" :defer="false" />
      </div>

    </x-modal-lg>
  </div>

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

      @foreach ($optionGroups as $index => $value)
        <x-product.option-group-input :optionGroups='$optionGroups' :index='$index' />
      @endforeach

      <x-box class="p-1" />
      <x-buttons.plain wireClick="newOptionGroup()"> {{ __('Add Option Group') }} </x-buttons.plain>

    </x-modal-lg>
  </div>
</div>