@push('styles')    
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
        @endpush

<x-slot name="header">
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
    <div>
    <h2 class="font-semibold text-xl text-gray-800 leading-tight">
        @if ($product_id)
        Manage {{ Str::singular($product_type_title) }} - {{ $name }}
        @else 
        Create  {{ Str::singular($product_type_title) }}
        @endif

    </h2>
    </div>
    <div class="md:text-right">
    
    @if (in_array($product_type_id, [1,3]) && ($product_id))
                        <a class="group" href="/item-builder/{{ $product_id }}" title="View {{ Str::singular($product_type_title) }} Builder" alt="View {{ Str::singular($product_type_title) }} Builder">{{ Str::singular($product_type_title) }} Builder</a>
             |  
                        @endif
                        
                        
    <a class="group" href="/item-grid/{{ $product_type_id }}" title="View {{ Str::singular($product_type_title) }} Grid" alt="View {{ Str::singular($product_type_title) }} Grid">Back to Grid</a>
        
</x-slot>

            @if($isOpen)

                @if($templateType == 1)
                @include('livewire.tag-create')
                @elseif($templateType == 2)
                @include('livewire.inventory.create') 
                @elseif($templateType == 3)
                @include('livewire.inventory.order-create') 
                @elseif($templateType == 4)
                @include('livewire.inventory.delivery-create') 
                @elseif($templateType == 5)
                @include('livewire.brand-create') 
                @else
                
                @include('livewire.media.upload')
                
                @endif

            @endif
            

    <x-body>
                <form wire:submit.prevent="submit">
    <div class="text-right">
    <x-button.nav class="bg-green-500" wire:click="store('product')">{{ $crud }}</x-button.nav>
    <x-button.nav class="bg-green-500" wire:click="store('product','grid')">{{ $crud }} and Return</x-button.nav>
    </div>
            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">

            <div class="bg-white px-4 pt-2 pb-4 sm:p-2 sm:pb-4">

            <x-html.title>{{ Str::singular($product_type_title) }} Details</x-html.title>
            <div class="mb-4">

                  
                  <x-input.text leadingAddOn="{{ Str::singular($product_type_title) }} Name" placeholder="Enter Name" wire:model.defer="name"></x-input.text>

                  @error('name')
                  <x-input.error>{{ $message }}</x-input.error>
                  @enderror


              </div>
            <div class="mb-4 flex">
                <div class="flex-1">
                  <x-input.text leadingAddOn="{{ Str::singular($product_type_title) }} Sku" placeholder="Enter {{ Str::singular($product_type_title) }} Sku" wire:model.defer="sku"></x-input.text>

                  @error('sku')
                  <x-input.error>{{ $message }}</x-input.error>
                  @enderror
                  
                  </div>
                  <div class="flex-1">
                  <x-input.text leadingAddOn="Sort Code" placeholder="Enter Sort Code" wire:model.defer="sortcode"></x-input.text>
                 </div>
              </div>
              <!--
            <div class="mb-4">
    
            <style>
                [x-cloak] {
              display: none;
                }
            </style>
                <div class="flex">
                    <div class="flex-1">
                        <x-input.label>Item Tags</x-input.label>
                    </div>
                    <div>
                        <a wire:click="addtag()" alt="Add Tag" title="Add Tag"><x-icon.add /></a>
                    </div>
                </div>
                  
                  
      <x-input.select x-cloak multiple id="tagSelect">
                            <option value="-1">Select Tags</option>
                            @foreach($tag_list as $tag)
                             @php
                            $spacer ="";
                            @endphp
                            @if ($tag->parent > 0)
                             @php
                            $spacer ="--";
                            @endphp
                            @endif
                            
                            <option value="{{ $tag->id }}" 
                            
                            @if ((is_array($this->tag_id)) && (in_array($tag->id,$this->tag_id)))
                            selected="selected"
                            @endif
                            > {{ $spacer }}{{ $tag->name }} </option>
                            @endforeach 
      </x-input.select>
                    @error('tag_id')
                  <x-input.error>{{ $message }}</x-input.error>
                  @enderror
 <div x-data="tagdropdown()" x-init="loadOptions()" class="w-full flex flex-col items-center mx-auto">
        <input name="values" type="hidden" x-bind:value="selectedValues()" id="tag_id" wire:model.defer="tag_id">
        <div class="inline-block relative w-full">
            <div class="flex flex-col items-center relative">
                <div x-on:click="open" class="w-full  svelte-1l8159u">
                    <div class="my-2 p-1 flex border border-gray-200 bg-white rounded svelte-1l8159u">
                        <div class="flex flex-auto flex-wrap">
                            <template x-for="(option,index) in selected" :key="options[option].value">
                                <div
                                    class="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-blue-700 bg-blue-100 border border-blue-300 ">
                                    <div class="text-xs font-normal leading-none max-w-full flex-initial" x-model="
                                        options[option]" x-text="options[option].text"></div>
                                    <div class="flex flex-auto flex-row-reverse">
                                        <div x-on:click="remove(index,option)">
                                            <svg class="fill-current h-6 w-6 " role="button" viewBox="0 0 20 20">
                                                <path d="M14.348,14.849c-0.469,0.469-1.229,0.469-1.697,0L10,11.819l-2.651,3.029c-0.469,0.469-1.229,0.469-1.697,0
                                           c-0.469-0.469-0.469-1.229,0-1.697l2.758-3.15L5.651,6.849c-0.469-0.469-0.469-1.228,0-1.697s1.228-0.469,1.697,0L10,8.183
                                           l2.651-3.031c0.469-0.469,1.228-0.469,1.697,0s0.469,1.229,0,1.697l-2.758,3.152l2.758,3.15
                                           C14.817,13.62,14.817,14.38,14.348,14.849z" />
                                            </svg>

                                        </div>
                                    </div>
                                </div>
                            </template>
                            <div x-show="selected.length    == 0" class="flex-1">
                                <input placeholder="Select a tag"
                                    class="bg-transparent p-1 px-2 appearance-none outline-none h-full w-full text-gray-800"
                                    x-bind:value="selectedValues()"
                                >
                            </div>
                        </div>
                        <div
                            class="text-gray-300 w-8 py-1 pl-2 pr-1 border-l flex items-center border-gray-200 svelte-1l8159u">

                            <button type="button" x-show="isOpen() === true" x-on:click="open"
                                class="cursor-pointer w-6 h-6 text-gray-600 outline-none focus:outline-none">
                                <svg version="1.1" class="fill-current h-4 w-4" viewBox="0 0 20 20">
                                    <path d="M17.418,6.109c0.272-0.268,0.709-0.268,0.979,0s0.271,0.701,0,0.969l-7.908,7.83
	c-0.27,0.268-0.707,0.268-0.979,0l-7.908-7.83c-0.27-0.268-0.27-0.701,0-0.969c0.271-0.268,0.709-0.268,0.979,0L10,13.25
	L17.418,6.109z" />
                                </svg>

                            </button>
                            <button type="button" x-show="isOpen() === false" @click="close"
                                class="cursor-pointer w-6 h-6 text-gray-600 outline-none focus:outline-none">
                                <svg class="fill-current h-4 w-4" viewBox="0 0 20 20">
                                    <path d="M2.582,13.891c-0.272,0.268-0.709,0.268-0.979,0s-0.271-0.701,0-0.969l7.908-7.83
	c0.27-0.268,0.707-0.268,0.979,0l7.908,7.83c0.27,0.268,0.27,0.701,0,0.969c-0.271,0.268-0.709,0.268-0.978,0L10,6.75L2.582,13.891z
	" />
                                </svg>

                            </button>
                        </div>
                    </div>
                </div>
                <div class="w-full px-4">
                    <div x-show.transition.origin.top="isOpen()"
                        class="absolute shadow top-100 bg-white z-40 w-full lef-0 rounded max-h-select overflow-y-auto svelte-5uyqqj"
                        x-on:click.away="close">
                        <div class="flex flex-col w-full">
                            <template x-for="(option,index) in options" :key="option">
                                <div>
                                    <div class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-blue-100"
                                        @click="select(index,$event)">
                                        <div x-bind:class="option.selected ? 'border-blue-600' : ''"
                                            class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative">
                                            <div class="w-full items-center flex">
                                                <div class="mx-2 leading-6" x-model="option" x-text="option.text"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        

        <script>
            function tagdropdown() {
                // livewire needs to be triggered on load, select and remove!!
                return {
                    options: [],
                    selected: [{{ implode(',',$this->tag_id) }}],
                    show: false,
                    open() { this.show = true },
                    close() { this.show = false },
                    isOpen() { return this.show === true },
                    select(index, event) {
                        
                        
                        // trigger livewire
                        var element = document.getElementById('tag_id');
                        element.dispatchEvent(new Event('input'));

                        if (!this.options[index].selected) {

                            this.options[index].selected = true;
                            this.options[index].element = event.target;
                            this.selected.push(index);

                        } else {
                            this.selected.splice(this.selected.lastIndexOf(index), 1);
                            this.options[index].selected = false
                        }
                    },
                    remove(index, option) {
                        
                        // trigger livewire
                        var element = document.getElementById('tag_id');
                        element.dispatchEvent(new Event('input'));
                        this.options[option].selected = false;
                        this.selected.splice(index, 1);


                    },
                    loadOptions() {
                        const options = document.getElementById('tagSelect').options;
                        for (let i = 0; i < options.length; i++) {
                            this.options.push({
                                value: options[i].value,
                                text: options[i].innerText,
                                selected: options[i].getAttribute('selected') != null ? options[i].getAttribute('selected') : false
                            });
                        }
                        // trigger livewire
                        var element = document.getElementById('tag_id');
                        element.dispatchEvent(new Event('input'));


                    },
                    selectedValues(){
                        return this.selected.map((option)=>{
                            return this.options[option].value;
                        })
                    }
                }
            }
        </script>
  </div>

              </div>
              -->
              
              <div class="mb-4">

                  <x-input.textarea label="{{ Str::singular($product_type_title) }} Description" placeholder="Enter {{ Str::singular($product_type_title) }} Description" wire:model.defer="product_description"></x-input.textarea>

              </div>
              
            @if (in_array($product_type_id, [1,5]))
              
              <div class="mb-4">


                <div class="flex">
                    <div class="flex-1">
                        <x-input.label>{{ Str::singular($product_type_title) }} Brand</x-input.label>
                    </div>
                    <div>
                        <a wire:click="addbrand()" alt="Add Brand" title="Add Brand"><x-icon.add /></a>
                    </div>
                </div>
                  
                  <x-input.select placeholder="Select a Brand" wire:model.defer="brand_id">

                            @foreach($brand_list as $brand)
                            <option value="{{ $brand->id }}"> {{ $brand->name }} </option>
                            @endforeach 
                    </x-input.select>
                    
                  @error('product_type_id')
                  <x-input.error>{{ $message }}</x-input.error>
                  @enderror

              </div>
              @endif
              
              <div class="mb-4">


        <div>
    
      <style>
          [x-cloak] {
              display: none;
          }
      </style>
      
      <x-input.select label="{{ Str::singular($product_type_title) }} Categories" multiple="multiple" x-cloak id="productcategorySelect">
          
                            <option value="-1">Select Categories</option>
                            @foreach($product_category_list as $product_category)
                             @php
                            $spacer ="";
                            @endphp
                            @if ($product_category->parent > 0)
                             @php
                            $spacer ="--";
                            @endphp
                            @endif
                            
                            <option value="{{ $product_category->id }}" 
                            
                            @if ((is_array($this->product_category_id)) && (in_array($product_category->id,$this->product_category_id)))
                            selected="selected"
                            @endif
                            > {{ $spacer }}{{ $product_category->name }} </option>
                            @endforeach 
      </x-input.select>
                @error('product_category_id')
                  <x-input.error>{{ $message }}</x-input.error>
                  @enderror
            <div x-data="categorydropdown()" x-init="loadOptions()" class="w-full flex flex-col items-center mx-auto">
        <input name="values" type="hidden" x-bind:value="selectedValues()" id="product_category_id" wire:model.defer="product_category_id">
        <div class="inline-block relative w-full">
            <div class="flex flex-col items-center relative">
                <div x-on:click="open" class="w-full  svelte-1l8159u">
                    <div class="my-2 p-1 flex border border-gray-200 bg-white rounded svelte-1l8159u">
                        <div class="flex flex-auto flex-wrap">
                            <template x-for="(option,index) in selected" :key="options[option].value">
                                <div
                                    class="flex justify-center items-center m-1 font-medium py-1 px-2 bg-white rounded-full text-blue-700 bg-blue-100 border border-blue-300 ">
                                    <div class="text-xs font-normal leading-none max-w-full flex-initial" x-model="
                                        options[option]" x-text="options[option].text"></div>
                                    <div class="flex flex-auto flex-row-reverse">
                                        <div x-on:click="remove(index,option)">
                                            <svg class="fill-current h-6 w-6 " role="button" viewBox="0 0 20 20">
                                                <path d="M14.348,14.849c-0.469,0.469-1.229,0.469-1.697,0L10,11.819l-2.651,3.029c-0.469,0.469-1.229,0.469-1.697,0
                                           c-0.469-0.469-0.469-1.229,0-1.697l2.758-3.15L5.651,6.849c-0.469-0.469-0.469-1.228,0-1.697s1.228-0.469,1.697,0L10,8.183
                                           l2.651-3.031c0.469-0.469,1.228-0.469,1.697,0s0.469,1.229,0,1.697l-2.758,3.152l2.758,3.15
                                           C14.817,13.62,14.817,14.38,14.348,14.849z" />
                                            </svg>

                                        </div>
                                    </div>
                                </div>
                            </template>
                            <div x-show="selected.length == 0" class="flex-1">
                                <input placeholder="Select a Category"
                                    class="bg-transparent p-1 px-2 appearance-none outline-none h-full w-full text-gray-800"
                                    x-bind:value="selectedValues()"
                                >
                            </div>
                        </div>
                        <div
                            class="text-gray-300 w-8 py-1 pl-2 pr-1 border-l flex items-center border-gray-200 svelte-1l8159u">

                            <button type="button" x-show="isOpen() === true" x-on:click="open"
                                class="cursor-pointer w-6 h-6 text-gray-600 outline-none focus:outline-none">
                                <svg version="1.1" class="fill-current h-4 w-4" viewBox="0 0 20 20">
                                    <path d="M17.418,6.109c0.272-0.268,0.709-0.268,0.979,0s0.271,0.701,0,0.969l-7.908,7.83
	c-0.27,0.268-0.707,0.268-0.979,0l-7.908-7.83c-0.27-0.268-0.27-0.701,0-0.969c0.271-0.268,0.709-0.268,0.979,0L10,13.25
	L17.418,6.109z" />
                                </svg>

                            </button>
                            <button type="button" x-show="isOpen() === false" @click="close"
                                class="cursor-pointer w-6 h-6 text-gray-600 outline-none focus:outline-none">
                                <svg class="fill-current h-4 w-4" viewBox="0 0 20 20">
                                    <path d="M2.582,13.891c-0.272,0.268-0.709,0.268-0.979,0s-0.271-0.701,0-0.969l7.908-7.83
	c0.27-0.268,0.707-0.268,0.979,0l7.908,7.83c0.27,0.268,0.27,0.701,0,0.969c-0.271,0.268-0.709,0.268-0.978,0L10,6.75L2.582,13.891z
	" />
                                </svg>

                            </button>
                        </div>
                    </div>
                </div>
                <div class="w-full px-4">
                    <div x-show.transition.origin.top="isOpen()"
                        class="absolute shadow top-100 bg-white z-40 w-full lef-0 rounded max-h-select overflow-y-auto svelte-5uyqqj"
                        x-on:click.away="close">
                        <div class="flex flex-col w-full">
                            <template x-for="(option,index) in options" :key="option">
                                <div>
                                    <div class="cursor-pointer w-full border-gray-100 rounded-t border-b hover:bg-blue-100"
                                        @click="select(index,$event)">
                                        <div x-bind:class="option.selected ? 'border-blue-600' : ''"
                                            class="flex w-full items-center p-2 pl-2 border-transparent border-l-2 relative">
                                            <div class="w-full items-center flex">
                                                <div class="mx-2 leading-6" x-model="option" x-text="option.text"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        

        <script>
            function categorydropdown() {
                // livewire needs to be triggered on load, select and remove!!
                return {
                    options: [],
                    selected: [],
                    show: false,
                    open() { this.show = true },
                    close() { this.show = false },
                    isOpen() { return this.show === true },
                    select(index, event) {
                        
                        
                        // trigger livewire
                        var element = document.getElementById('product_category_id');
                        element.dispatchEvent(new Event('input'));

                        if (!this.options[index].selected) {

                            this.options[index].selected = true;
                            this.options[index].element = event.target;
                            this.selected.push(index);

                        } else {
                            this.selected.splice(this.selected.lastIndexOf(index), 1);
                            this.options[index].selected = false
                        }
                    },
                    remove(index, option) {
                        
                        // trigger livewire
                        var element = document.getElementById('product_category_id');
                        element.dispatchEvent(new Event('input'));
                        this.options[option].selected = false;
                        this.selected.splice(index, 1);


                    },
                    loadOptions() {
                        const options = document.getElementById('productcategorySelect').options;
                        
                        for (let i = 0; i < options.length; i++) {
                            
                            this.options.push({
                                value: options[i].value,
                                text: options[i].innerText,
                                selected: options[i].getAttribute('selected') != null ? options[i].getAttribute('selected') : false
                            });
                            if (options[i].getAttribute('selected') != null){
                            this.selected.push(i);
                            }
                        }
                        
                        // trigger livewire
                        var element = document.getElementById('product_category_id');
                        element.dispatchEvent(new Event('input'));


                    },
                    selectedValues(){
                        return this.selected.map((option)=>{
                            return this.options[option].value;
                        })
                    }
                }
            }
        </script>
  </div>
                </div>

              </div>
              <!--
              <div class="mb-4">

                  <x-input.select label="Item Type" placeholder="Select an Item Type" wire:model.defer="product_type_id">
                      
                            <option value="-1">Select an Item Type</option>
                            @foreach($product_type_list as $product_type)
                            <option value="{{ $product_type->id }}"> {{ $product_type->name }} </option>
                            @endforeach 
                    </x-input.select>
                    

              </div>
              -->
              @if (in_array($product_type_id,[2,3,4,5,6]))
              <div class="mb-4">

                  <x-input.select label="Supplier" multiple="multiple"  placeholder="Select a Supplier" wire:model.defer="supplier_id">

                            @foreach($supplier_list as $supplier)
                            <option value="{{ $supplier->id }}"> {{ $supplier->name }} </option>
                            @endforeach 
                    </x-input.select>
                    
                    
                  @error('supplier_id')
                  <x-input.error>{{ $message }}</x-input.error>
                  @enderror

              </div>
              @endif
              <div class="mb-4">
            <x-html.subtitle>Prices & Costs</x-html.subtitle>
              </div>
              <div class="mb-4">
            <div class="grid grid-cols-2 gap-4 md:grid-cols-5">
                <div class="">
                  <x-input.text label="Price" placeholder="Enter Price" wire:model.defer="price"></x-input.text>
                  </div>
                <div class="">

                  <x-input.text label="Trade Price" placeholder="Enter Trade Price" wire:model.defer="trade_price"></x-input.text>
                  </div>
                <div class="">

                  <x-input.text label="Promo Price" placeholder="Enter Promo Price" wire:model.defer="promo_price"></x-input.text>
                  </div>
                <div class="">

                  <label for="priceInput" class="block text-gray-700 text-sm font-bold mb-2">Cost:</label>

                  <span class="form-input border-cool-gray-300 block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5" >{{ $cost }}</span>

                  </div>
                <div class="">

                  <label for="priceInput" class="block text-gray-700 text-sm font-bold mb-2">Profit:</label>

                  <span class="form-input border-cool-gray-300 block w-full transition duration-150 ease-in-out sm:text-sm sm:leading-5" >{{ $price - $cost }}</span>

                  </div>
                  </div>
                  
                  

              </div>
              <div class="mb-4">


                  <x-input.text leadingAddOn="{{ Str::singular($product_type_title) }} Run Qty" placeholder="Enter Usual  Run Qty" wire:model.defer="product_run"></x-input.text>

              </div>
              
              @if (isset($product_type_id) && in_array($product_type_id, [4]))
              <div class="mb-4">

                  <x-input.text leadingAddOn="Material" placeholder="Enter Material" wire:model.defer="material"></x-input.text>

              </div>
             @endif
              
              <div class="mb-4">


                  <x-input.textarea label="{{ Str::singular($product_type_title) }} Notes" placeholder="Enter Notes" wire:model.defer="notes"></x-input.textarea>

              </div>

  

        </div>
            
            <div class="bg-white px-4 pt-2 pb-4 sm:p-2 sm:pb-4">
                    <x-html.title>Inventory & Media</x-html.title>
                    
                    <x-html.subtitle>Inventory</x-html.subtitle>
                    
                    
                    <div>
                        <div class="flex">
                            <div class="flex-1">
                        <x-html.h4title>In Stock : {{ $inventorytotal }}</x-html.h4title></div>
                            <div class="mt-4 mb-2 pb-1">
                        <a wire:click="createInventory()" alt="add new inventory location" title="add new inventory location"><x-icon.add /></a>
                        </div>
                        </div>
                        @if ($inventorytotal)
                        <x-table>
                        <x-slot name="head">

                        <x-table.heading class="text-center">Qty</x-table.heading>
                        <x-table.heading>Location</x-table.heading>
                        <x-table.heading>Info (Bin Number)</x-table.heading>
                        <x-table.heading class="w-20">Action</x-table.heading>
                                    
                        </x-slot>
                        <x-slot name="body">
                            @foreach($product->inventory as $inventory)

                        <x-table.row>
                        <x-table.cell class="text-center">{{ $inventory->qty }}</x-table.cell>
                                    
                        <x-table.cell>{{ $inventory->storage_location->name }}</x-table.cell>
                                    
                        <x-table.cell>{{ $inventory->storage_info }}</x-table.cell>
                        <x-table.cell>
                        <x-icon.group>
                        <a wire:click="editInventory({{ $inventory->id }})" alt="edit inventory location" title="edit inventory location"><x-icon.edit /></a>
                        
                        <a wire:click="deleteInventory({{ $inventory->id }})" alt="delete inventory location" title="delete inventory location"><x-icon.bin /></a>
                        </x-icon.group>
                        </x-table.cell>
                        </x-table.row>
                                
                            @endforeach
                            
                        </x-slot>
                        </x-table>
                        @else
                        <span>Please add an Inventory location</span>
                        @endif
                    </div>
                    
                    
                    <div>
                        <div class="flex">
                            <div class="flex-1">
                        <x-html.h4title>On Order : {{ $inventoryordered }}</x-html.h4title>
                        </div>
                            <div class="mt-4 mb-2 pb-1">
                        <a wire:click="createInventoryOrder()" alt="add new inventory location" title="add new inventory location"><x-icon.add /></a>
                        </div>
                        </div>
                    
                        @if ($inventoryordered > 0)
                        <x-table>
                        <x-slot name="head">

                        <x-table.heading class="text-center">Qty</x-table.heading>
                        <x-table.heading class="text-center">Qty Delivered</x-table.heading>
                        <x-table.heading>Supplier</x-table.heading>
                        <x-table.heading>Date Expected</x-table.heading>
                        <x-table.heading>Date Ordered</x-table.heading>
                        <x-table.heading class="w-20">Action</x-table.heading>
                                    
                        </x-slot>
                        <x-slot name="body">
                        @foreach($product->inventoryorders as $inventory)

                        <x-table.row>
                        <x-table.cell class="text-center">{{ $inventory->qty }}</x-table.cell>
                        <x-table.cell class="text-center">
                            @if (count($inventory->inventorydeliveries) > 0)
                            
                            
                            <button class="flex w-full justify-center items-center space-x-1 bg-cool-grey-50 font-bold"  
                             x-data
                             @click.stop
                            @click="$dispatch('open-delivery',{id: {{ $inventory->id }}})"
                             @click.prevent>
                            <span class="">{{ $inventory->inventorydelivered->first()->delivered }}</span>
                            <span class="relative flex items-center">
                            <x-icon.down  />
                            </span>

                            </button>
        
                            @else
                            0
                            @endif</x-table.cell>
                        
                                    
                        <x-table.cell>{{ $inventory->supplier->name }}</x-table.cell>
                                    
                        <x-table.cell>{{ optional($inventory->delivery_date)->format('d/m/Y') }}</x-table.cell>
                        <x-table.cell>{{ optional($inventory->created_at)->format('d/m/Y') }}</x-table.cell>
                        <x-table.cell>
                        <x-icon.group>
                        <a wire:click="editInventoryOrder({{ $inventory->id }})" alt="edit inventory Order" title="edit inventory Order"><x-icon.edit /></a>
                        
                        <a wire:click="deleteInventoryOrder({{ $inventory->id }})" alt="delete inventory Order" title="delete inventory Order"><x-icon.bin /></a>
                        <a wire:click="createInventoryDelivery({{ $inventory->id }})" alt="add a delivery for this order" title="add a delivery for this order"><x-icon.add /></a>
                        </x-icon.group>
                        </x-table.cell>
                        </x-table.row>
                            @if (count($inventory->inventorydeliveries) > 0)
                        <x-table.row 
                        x-data="{ open: false }"
                            @open-delivery.window="console.log($event.detail);if ($event.detail.id == {{$inventory->id}}) open = true"
                            @click.away="open = false">
                        <x-table.cell colspan="6" 
                        x-show="open" >
                            <x-html.h4title>Deliveries</x-html.h4title>
                            <x-table>
                            <x-slot name="head">

                            <x-table.heading class="text-center">Qty</x-table.heading>
                            <x-table.heading>Date Delivered</x-table.heading>
                            <x-table.heading>Added to Stock?</x-table.heading>
                            <x-table.heading class="w-20">Action</x-table.heading>
                                    
                            </x-slot>
                            <x-slot name="body">
                            
                            @foreach($inventory->inventorydeliveries as $inventorydelivery)
                            <x-table.row>
                            <x-table.cell class="text-center">{{ $inventorydelivery->qty }}</x-table.cell>
                            <x-table.cell>{{ optional($inventorydelivery->date_delivered)->format('d/m/Y') }}</x-table.cell>
                            <x-table.cell>{{ $inventorydelivery->inventory_updated }}</x-table.cell>
                            <x-table.cell>
                            <x-icon.group>
                            <a wire:click="editInventoryDelivery({{ $inventorydelivery->id }})" alt="edit inventory Delivery" title="edit inventory Delivery"><x-icon.edit /></a>
                        
                            <a wire:click="deleteInventoryDelivery({{ $inventorydelivery->id }})" alt="delete inventory Delivery" title="delete inventory Order"><x-icon.bin /></a>
                            </x-icon.group>
                            </x-table.cell>
                            </x-table.row>
                                
                            @endforeach
                            
                            </x-slot>
                            </x-table>
                        </x-table.cell>
                        </x-table.row>
                            @endif
                        @endforeach
                            
                        </x-slot>
                        </x-table>
                        @else
                        <span>Add an Inventory order</span>
                        @endif
                        
                    </div>
                    
               <x-html.subtitle>Packing Details</x-html.subtitle>
                    
              <div class="mb-4">
                 
                  <x-input.text leadingAddOn="Weight of product boxed kg" placeholder="Enter Weight in kg" wire:model.defer="box_weight"></x-input.text>
                  
              </div>
              <div class="mb-4">
                  <span>Dimensions in Cm</span>
                  <div class="grid grid-cols-1 gap-4  md:grid-cols-3">
                  <div class="">

                  <x-input.text label="Length" placeholder="Enter Length" wire:model.defer="product_length"></x-input.text>
                  
                  </div>
                  <div class="">

                  <x-input.text label="Width" placeholder="Enter Width" wire:model.defer="product_width"></x-input.text>
                  
                  </div>
                  <div class="">

                  <x-input.text label="Height" placeholder="Enter Height" wire:model.defer="product_height"></x-input.text>
                  
                  </div></div>
              </div>
                        @if ($product_id)
              <div class="mb-4">
                  <x-html.subtitle>Location</x-html.subtitle>
                  <h4 class="border-b-2 border-gray-50 mb-2 pb-1">Location Photos  <a class="inline-block" wire:click="addMedia('locations')" title="edit" alt="Add"><x-icon.add /></a></h4>
                        
                        <div class="flex mb-4">
                        @foreach($this->product->media->where('media_type_id','3') as $media)
                        <div class="flex-1"><img src="/{{ $media->path }}"><br>{{ $media->name }}</div><a class="inline-block" wire:click="deleteMedia({{ $media->id }})" title="delete" alt="Delete"><x-icon.bin /></a>
                        @endforeach
                        </div>
                  </div>
                  
              <div class="mb-4">
                  <x-html.subtitle>Media</x-html.subtitle>
                  
                  <h4 class="border-b-2 border-gray-50 mb-2 pb-1">{{ Str::singular($product_type_title) }} Photos <a class="inline-block" wire:click="addMedia('images')" title="edit" alt="Add"><x-icon.add /></a></h4>
                        <div class="flex mb-4">
                        @foreach($this->product->media->where('media_type_id','1') as $media)
                        <div class="flex-1"><img src="/{{ $media->path }}"><br>{{ $media->name }}</div><a class="inline-block" wire:click="deleteMedia({{ $media->id }})" title="delete" alt="delete"><x-icon.bin /></a>
                        @endforeach
                        </div>
                  </div>
              <div class="mb-4"> 
                  <h4  class="border-b-2 border-gray-50 mb-2 pb-1">{{ Str::singular($product_type_title) }} Documents <a class="inline-block" wire:click="addMedia('documents')" title="edit" alt="Add"><x-icon.add /></a></h4>
                        <ol class="mb-4 list-decimal px-10 py-5">
                        @foreach($this->product->media->where('media_type_id','2') as $media)
                        <li><a href="/{{ $media->path }}">{{ $media->name }}</a>
                        
                        <a class="inline-block" href="/{{ $media->path }}" target="_blank"><x-icon.link /> </a>
                        <a class="inline-block" wire:click="deleteMedia({{ $media->id }})" title="delete" alt="delete">
                        <x-icon.bin /></a>
                        </li>
                        @endforeach
                        </ol>
                  
              </div>
                        @endif
              
            </div>
            </div>
            <div class="bg-gray-50 px-4 sm:flex sm:flex-row-reverse">
            <x-button.primary class="bg-green-600 hover:bg-green-500" wire:click.prevent="store('product')">{{ $crud }}</x-button.primary>
            <x-button.primary class="bg-green-700 hover:bg-green-500" wire:click.prevent="store('product','grid')">{{ $crud }} and Return</x-button.primary>
            </div>
    
                </form>

    </x-body>
        @push('scripts')    
        <script src="https://unpkg.com/moment"></script>
        <script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
        @endpush