@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 ($supplier_id)
        Manage {{ $suppliername }}
        @else 
        Create  Supplier
        @endif
    </h2>
    </div>
    <div class="md:text-right">
    <a class="group" href="/supplier-grid" title="View Supplier Grid" alt="View Supplier Grid">Back to Grid</a>
    </div>
    </div>
        
</x-slot>

    <x-body>
        <form wire:submit.prevent="submit">
            <div>
            @if($isOpen)

                @if($templateType == 1)
                @include('livewire.supplier.contact-create') 
                @elseif($templateType == 2)
                @include('livewire.inventory.order-create') 
                @elseif($templateType == 3)
                @include('livewire.inventory.delivery-create') 
                @else
                
                
                @endif

            @endif
            </div>  
    <div class="text-right md:hidden">
    <x-button.nav class="bg-green-500" wire:click="store('supplier')">{{ $crud }}</x-button.nav>
    <x-button.nav class="bg-green-500" wire:click="store('supplier','grid')">{{ $crud }} and Return</x-button.nav>
    </div>
    
            <div class="flex" x-data="{ sidebarOpen: false, detailShow : true, inventoryShow : false, tab: window.location.hash ? window.location.hash.substring(1) : 'description'  }" @keydown.window.escape="sidebarOpen = false">
    
    
        <div class="hidden md:flex md:flex-shrink-0">
            <div class="flex flex-col w-64 bg-gray-50">
                <div class="h-0 flex-1 flex flex-col pt-0 pb-4 overflow-y-auto">
            <div>
            <!-- The tabs navigation -->
            <nav>
                
                <x-button.vertical-tab tab="description">Supplier Details</x-button.vertical-tab>
                
            @if ($supplier_id)
                <x-button.vertical-tab tab="inventory">Inventory Orders</x-button.vertical-tab>
                <x-button.vertical-tab tab="products">Products</x-button.vertical-tab>
            @endif
            </nav>
            </div>
    
            <div class="mb-4"></div>
    
                    <div class="text-center">
    <x-button.nav class="bg-green-500" wire:click="store('supplier')">{{ $crud }}</x-button.nav>
    <x-button.nav class="bg-green-500" wire:click="store('supplier','grid')">{{ $crud }} and Return</x-button.nav>
    </div>
                
                </div>

            </div>
        </div>
    
    
        <div class="flex flex-col w-0 flex-1">
    
    
    
                <x-html.title class="md:hidden">
                    <div class="flex">
                        <div class="flex-1">Supplier Details</div>
                        <div>
                        <a x-on:click.prevent="tab='description'"><x-icon.down x-show="tab != 'description'" class="w-6 h-6" /><x-icon.up x-show="tab == 'description'" class="w-6 h-6" /></a>
                        </div>
                    </div>
                </x-html.title>
            <div x-show="tab == 'description'" x-cloak class="ml-2">
            <x-html.subtitle class="hidden md:block">Supplier Details</x-html.subtitle>
                    
            <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">

             <div class="mb-4">
                  
                  <x-input.text label="Supplier Name" placeholder="Enter Supplier Name" wire:model.defer="suppliername" />

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

              </div>
              <div class="mb-4 grid grid-cols-1 gap-4 md:grid-cols-3">
                <div>
                  <x-input.text label="Address" placeholder="Enter Address" wire:model.defer="address1" />

                  @error('address1')
                  <x-input.error>{{ $message }}</x-input.error>
                  @enderror
                </div>
                <div>
                  <x-input.text label="Address 2" placeholder="Enter Second Line of Address" wire:model.defer="address2" />

                  @error('address2') 
                  <x-input.error>{{ $message }}</x-input.error>
                  @enderror
                </div>
                <div>
                  <x-input.text label="Address 3" placeholder="Enter Third Line of Address" wire:model.defer="address3" />

                  @error('address3') 
                  <x-input.error>{{ $message }}</x-input.error>
                  @enderror
                </div>
              </div>
              <div class="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
                <div>
                  <x-input.text leadingAddOn="Town" placeholder="Enter Town" wire:model.defer="town" />

                  @error('town')
                  <x-input.error>{{ $message }}</x-input.error>
                  @enderror
                </div>
                <div>
                  <x-input.text leadingAddOn="Post Code" placeholder="Enter Post Code" wire:model.defer="post_code" />
                  
                  @error('post_code')
                  <x-input.error>{{ $message }}</x-input.error>
                  @enderror
                </div>
              </div>
              
          
              <div class="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
                <div>
                  <x-input.text leadingAddOn="County" placeholder="Enter County" wire:model.defer="county" />

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

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

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

              <div class="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
                <div>
                  <x-input.text label="Email" placeholder="Enter Email" wire:model.defer="email" />

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

               </div>
                <div>
                  <x-input.text label="Alternative Email" placeholder="Enter Alternative Email" wire:model.defer="email_alt" />

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

               </div>
              </div>
              <div class="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">
                <div>
                  <x-input.text label="Contact Name" placeholder="Enter Contact Name" wire:model.defer="contact_name" />
                  
                  @error('contact_name')
                  <x-input.error>{{ $message }}</x-input.error>
                  @enderror
               </div>
                <div>
                  <x-input.text label="Website" placeholder="Enter Website" wire:model.defer="website" />
                  
                  @error('website')
                  <x-input.error>{{ $message }}</x-input.error>
                  @enderror
               </div>
              </div>
              <div class="mb-4 grid grid-cols-1 gap-4 md:grid-cols-3">
                <div>
                  <x-input.text label="Telephone Number" placeholder="Enter Telephone" wire:model.defer="tel" />

                  @error('tel')
                  <x-input.error>{{ $message }}</x-input.error>
                  @enderror
               </div>
                <div>
                  <x-input.text label="Mobile Number" placeholder="Enter Mobile" wire:model.defer="mobile" />

                  @error('mobile')
                  <x-input.error>{{ $message }}</x-input.error>
                  @enderror
               </div>
                <div>
                  <x-input.text label="Fax" placeholder="Enter Fax" wire:model.defer="fax" />

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

              </div>
              <div class="mb-4 grid grid-cols-1 gap-4 md:grid-cols-2">

                <div>
                  <x-input.text leadingAddOn="Business #" placeholder="Enter Business Number" wire:model.defer="business_number" />

                  @error('business_number')
                  <x-input.error>{{ $message }}</x-input.error>
                  @enderror
               </div>
                <div>
                  <x-input.text leadingAddOn="Account #" placeholder="Enter Account Number" wire:model.defer="account_number" />

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

              </div>
            
            </div>
            
            <div class="bg-white px-4 pt-2 pb-4 sm:p-2 sm:pb-4">
                
                
            <div class="mb-4" wire:ignore>
                <x-input.select label="Supplier Categories" multiple="multiple" id="suppliercategorySelect" placeholder="Select a Category">
                            @foreach($supplier_category_list as $supplier_category)
                             @php
                            $spacer ="";
                            $path = array();
                            $path = explode('/',$supplier_category->path);
                            foreach ($path as $node){
                            $spacer .="-";
                            }
                            $spacer = substr($spacer,0,-1);
                            @endphp
                            
                            
                            <option value="{{ $supplier_category->id }}" 
                            
                            @if ((is_array($this->supplier_category_id)) && (in_array($supplier_category->id,$this->supplier_category_id)))
                            selected="selected"
                            @endif
                            > {{ $spacer }}{{ $supplier_category->name }} - {{ $supplier_category->rank }} </option>
                            @endforeach 
                </x-input.select>
        <input name="values" type="hidden" id="supplier_category_id" wire:model.defer="supplier_category_id">
      
      
        <script>

        $(document).ready(function() {

            $('#suppliercategorySelect').select2({width: '100%', });

            $('#suppliercategorySelect').on('change', function (e) {


            var element = document.getElementById('supplier_category_id');
            var data = $('#suppliercategorySelect').select2("val");
            $('#supplier_category_id').val(data);
            element.dispatchEvent(new Event('input'));
            });

        });

        </script>
      
            </div>


  

        
        
              <div class="mb-4">
                  <x-input.textarea label="Notes" wire:model.defer="notes" rows="9" />
               </div>
                
                
            @if ($supplier_id)
                        <div class="flex">
                            <div class="flex-1">
                            <x-html.h4title>Additional Contacts</x-html.h4title>
                            </div>
                            <div class="mt-4 mb-2 pb-1">
                            <a wire:click="create('contact')" alt="add new contact" title="add new contact"><x-icon.add /></a>
                            </div>
                        </div>
                        <x-table>
                        <x-slot name="head">

                        <x-table.heading class="text-center">Name</x-table.heading>
                        <x-table.heading class="text-center">Email</x-table.heading>
                        <x-table.heading>Phone</x-table.heading>
                        <x-table.heading class="w-20">Action</x-table.heading>
                                    
                        </x-slot>
                        <x-slot name="body">
                        @foreach($supplier->contacts as $contact)

                        <x-table.row>
                        <x-table.cell class="text-center">{{ $contact->name }}</x-table.cell>
                        <x-table.cell class="text-center">{{ $contact->email }}</x-table.cell>
                        <x-table.cell class="text-center">{{ $contact->tel }}</x-table.cell>
                        
                                    
                        <x-table.cell>
                        <x-icon.group>
                        <a wire:click="edit({{ $contact->id }},'contact')" alt="edit Contact" title="edit Contact"><x-icon.edit /></a>
                        
                        <a wire:click="delete({{ $contact->id }},'contact')" alt="delete Contact" title="Delete Contact"><x-icon.bin /></a>
                        </x-icon.group>
                        </x-table.cell>
                        </x-table.row>
                        @endforeach
                            
                        </x-slot>
                        </x-table>
                
            @endif
            </div>
            </div>
            </div>
            
            @if ($supplier_id)
                    <x-html.title class="md:hidden"><div class="flex">
                            <div class="flex-1">Inventory</div>
                            <div>
                        <a x-on:click.prevent="tab='inventory'"><x-icon.down x-show="tab != 'inventory'" class="w-6 h-6" /><x-icon.up x-show="tab == 'inventory'" class="w-6 h-6" /></a>
                        </div>
                        </div></x-html.title>
            <div x-show="tab == 'inventory'" x-cloak class="ml-2">
                <x-html.subtitle class="hidden md:block">Inventory</x-html.subtitle>
                    
            <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">
                    
                    <div>
                        <div class="flex">
                            <div class="flex-1">
                            <x-html.h4title>On Order</x-html.h4title>
                            </div>
                            <div class="mt-4 mb-2 pb-1">
                            <a wire:click="create('inventoryorder')" alt="add new inventory Order" title="add new inventory Order"><x-icon.add /></a>
                            </div>
                        </div>
                    
                        <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>Product</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($supplier->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->product->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="edit({{ $inventory->id }},'inventoryorder')" alt="edit inventory Order" title="edit inventory Order"><x-icon.edit /></a>
                        
                        <a wire:click="delete({{ $inventory->id }},'inventoryorder')" alt="delete inventory Order" title="delete inventory Order"><x-icon.bin /></a>
                        <a wire:click="create('inventorydelivery', {{ $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="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="edit({{ $inventorydelivery->id }},'inventorydelivery')" alt="edit inventory Delivery" title="edit inventory Delivery"><x-icon.edit /></a>
                        
                            <a wire:click="delete({{ $inventorydelivery->id }},'inventorydelivery')" alt="delete inventory Delivery" title="delete inventory Delivery"><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>
                        
                    </div>
                    

              
            </div>
            </div>
            </div>
            
            
            <div x-show="tab == 'products'" x-cloak class="ml-2">
            <x-html.subtitle class="hidden md:block">Supplier Items</x-html.subtitle>
            
            
                        <x-table>
                        <x-slot name="head">

                        <x-table.heading class="text-center">Name</x-table.heading>
                        <x-table.heading class="text-center">Sku</x-table.heading>
                        <x-table.heading>Sort Code</x-table.heading>
                        <x-table.heading>Cost</x-table.heading>
                        <x-table.heading class="w-20">Action</x-table.heading>
                                    
                        </x-slot>
                        <x-slot name="body">
                        @foreach($supplier->products as $product)

                        <x-table.row>
                        <x-table.cell class="text-center">{{ $product->name }}</x-table.cell>
                        <x-table.cell class="text-center">{{ $product->sku }}</x-table.cell>
                        <x-table.cell class="text-center">{{ $product->sortcode }}</x-table.cell>
                        <x-table.cell class="text-center">{{ $product->cost }}</x-table.cell>
                        
                                    
                        <x-table.cell>
                        <x-icon.group>
                        <a href="/item-detail/{{ $product->id }}" alt="view Item" title="view Item"><x-icon.edit /></a>
                        
                        </x-icon.group>
                        </x-table.cell>
                        </x-table.row>
                        @endforeach
                            
                        </x-slot>
                        </x-table>
                    
            <div>
                
                
            </div>
            </div>
            
            
            @else
                        
            <x-html.subtitle class="ml-2">Please Save Supplier before entering Inventory</x-html.subtitle>
            @endif
            
            
            
        </div>
        
        </div>
            <!--
            <div class="bg-gray-50 px-4 sm:flex sm:flex-row-reverse">
            <x-button.primary class="bg-green-700 hover:bg-green-500" wire:click.prevent="store('product','grid')">{{ $crud }} and Return</x-button.primary>
            <x-button.primary class="bg-green-600 hover:bg-green-500" wire:click.prevent="store('product')">{{ $crud }}</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