{{-- shipment-schedule-dev.blade.php --}}
<div id="page-content">
    {{-- Title Bar --}}
    <x-title-bar>
        <x-slot:title>
            Wholesale Shipment Schedule
        </x-slot:title>
        <x-slot:end>
            {{-- Save Indicators --}}
            <button id="saved" class="btn btn-success" style="display: none">Saved</button>
            <button id="saving" class="btn btn-danger" style="display: none">Saving Changes...</button>

            @can('finance:update')
                {{-- Invoice Button --}}
                <button class="btn btn-light" x-data x-on:click="$dispatch('open-modal', {name:'invoices'})">Invoice</button>
            @endcan

            {{-- Other Actions --}}
            <button class="btn btn-light" x-data x-on:click="$dispatch('open-modal', {name:'totals'})" wire:click="$dispatch('calcTotals')">Page Totals</button>
            <button class="btn btn-light" wire:click.prevent="$toggle('borders')">Borders</button>
            {{-- <a class="btn btn-light" wire:click="selectAll" @if($this->hasMorePages()) onclick="confirm('This will select every item matching the filters, even if they are not yet loaded on this page. Continue?') || event.stopImmediatePropagation()" @endif>Select All</a> --}}
            <button class="btn btn-light" x-data x-on:click="$dispatch('open-modal', {name:'edit-ss'})" wire:click="edit">Edit Selected</button>
        </x-slot:end>
        <x-slot:sub>
            {{-- Filters --}}
            <div class="row mt-2 d-xl-none">
                <div class="col text-end">
                    <button class="btn btn-primary" wire:click="$toggle('hideFilters')">{{ $hideFilters ? 'Show' : 'Hide' }}</button>
                </div>
            </div>
            @if(!$hideFilters)
                <div class="row mt-2 mx-1">
                    <div class="col-xl col-6 mb-2 px-1">
                        <div class="form-floating form-outline">
                            <select class="form-select" style="height: calc(3.5rem + 2px);" wire:model.live="view">
                                <option value="">All</option>
                                <option value="unshipped">Unshipped</option>
                                <option value="financeNC">Finance Not Complete</option>
                                <option value="noRTInvoice">Not Invoiced Out</option>
                                <option value="cashflow">Cashflow</option>
                            </select>
                            <label>View</label>
                        </div>
                    </div>
                    @if(empty($this->view))
                        <div class="col-xl col-6 mb-2 px-1">
                            <div class="form-floating form-outline">
                                <input type="date" style="height: calc(3.5rem + 2px);" class="form-control" wire:model.live.lazy="fromDate">
                                <label>From</label>
                            </div>
                        </div>
                    @endif
                    <div class="col-xl col-6 mb-2 px-1">
                        <div class="form-floating form-outline">
                            <input type="date" style="height: calc(3.5rem + 2px);" class="form-control" wire:model.live.lazy="toDate">
                            <label>To</label>
                        </div>
                    </div>
                    <div class="col-xl col-6 mb-2 px-1">
                        <div x-data="{ open: $wire.entangle('showSeasonDropdown') }">
                            <button class="btn w-100  border border-primary bg-white" style="height: calc(3.5rem + 2px);" x-on:click="open = true">Seasons @if(empty($season)) (All) @else() ({{count($season)}} Selected) @endif</button>

                            <ul class="dropdown-menu show mt-2" style="max-height: 50vh; overflow-y: auto; scrollbar-width: thin; display:none;" x-show="open" x-on:click.outside="open = false">
                                <li class="px-3 py-1">
                                    <button class="btn btn-primary w-100" wire:click="select('season')">All</button>
                                </li>
                                @foreach($this->seasons as $i=>$c)
                                    <li class="px-3 py-1 @if($season[$c->id] ?? 0) bg-good @endif">
                                        <span style="cursor: pointer;" wire:click="select('season', {{$c->id}})">{{ $c->description }}</span><br>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <div class="col-xl col-6 mb-2 px-1">
                        <div x-data="{ open: $wire.entangle('showCustomerDropdown') }">
                            <button class="btn w-100  border border-primary bg-white" style="height: calc(3.5rem + 2px);" x-on:click="open = true">Customers @if(empty($customer)) (All) @else() ({{count($customer)}} Selected) @endif</button>

                            <ul class="dropdown-menu show mt-2" style="max-height: 50vh; overflow-y: auto; scrollbar-width: thin; display:none;" x-show="open" x-on:click.outside="open = false">
                                <li class="px-3 py-1">
                                    <button class="btn btn-primary w-100" wire:click="select('customer')">All</button>
                                </li>
                                <li class="px-3 py-1">
                                    <button class="btn btn-primary w-100" wire:click="$toggle('hideMabli')">@if(!$hideMabli)Hide @else Show @endif Mabli</button>
                                </li>
                                @foreach($this->customers as $i=>$c)
                                    <li class="px-3 py-1 @if($customer[$c->id] ?? 0) bg-good @endif">
                                        <span style="cursor: pointer;" wire:click="select('customer', {{$c->id}})">{{ $c->name }}</span><br>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>

                    <div class="col-xl col-6 mb-2 px-1">
                        <div x-data="{ open: $wire.entangle('showFactoryDropdown') }">
                            <button class="btn w-100  border border-primary bg-white" style="height: calc(3.5rem + 2px);" x-on:click="open = true">Factories @if(empty($factory)) (All) @else() ({{count($factory)}} Selected) @endif</button>

                            <ul class="dropdown-menu show mt-2" style="max-height: 50vh; overflow-y: auto; scrollbar-width: thin; display:none;" x-show="open" x-on:click.outside="open = false">
                                <li class="px-3 py-1">
                                    <button class="btn btn-primary w-100" wire:click="select('factory')">All</button>
                                </li>
                                @foreach($this->factories as $i=>$c)
                                    <li class="px-3 py-1 @if($factory[$c->id] ?? 0) bg-good @endif">
                                        <span style="cursor: pointer;" wire:click="select('factory', {{$c->id}})">{{ $c->name }}</span><br>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>

                    <div class="col-xl col-6 mb-2 px-1">
                        <div x-data="{ open: $wire.entangle('showCooDropdown') }">
                            <button class="btn w-100  border border-primary bg-white" style="height: calc(3.5rem + 2px);" x-on:click="open = true">COO @if(empty($coo)) (All) @else() ({{count($coo)}} Selected) @endif</button>

                            <ul class="dropdown-menu show mt-2" style="max-height: 50vh; overflow-y: auto; scrollbar-width: thin; display:none;" x-show="open" x-on:click.outside="open = false">
                                <li class="px-3 py-1">
                                    <button class="btn btn-primary w-100" wire:click="select('coo')">All</button>
                                </li>
                                @foreach($this->factories->unique('countries_id') as $i=>$c)
                                    <li class="px-3 py-1 @if($coo[$c->countries->id] ?? 0) bg-good @endif">
                                        <span style="cursor: pointer;" wire:click="select('coo', {{$c->countries->id}})">{{ $c->countries->country }}</span><br>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <div class="col-xl col-6 mb-2 px-1">
                        <div x-data="{ open: $wire.entangle('showTruckDropdown') }">
                            <button class="btn w-100  border border-primary bg-white" style="height: calc(3.5rem + 2px);" x-on:click="open = true">Department @if(empty($department)) (All) @else() ({{count($department)}} Selected) @endif</button>

                            <ul class="dropdown-menu show mt-2" style="max-height: 50vh; overflow-y: auto; scrollbar-width: thin; display:none;" x-show="open" x-on:click.outside="open = false">
                                <li class="px-3 py-1">
                                    <button class="btn btn-primary w-100" wire:click="select('department')">All</button>
                                </li>
                                @foreach($this->departments as $i=>$c)
                                    <li class="px-3 py-1 @if($department[$c->id] ?? 0) bg-good @endif">
                                        <span style="cursor: pointer;" wire:click="select('department', {{$c->id}})">{{ $c->description }}</span><br>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                    <div class="col-xl col-6 mb-2 px-1">
                        <div x-data="{ open: $wire.entangle('showCatDropdown') }">
                            <button class="btn w-100  border border-primary bg-white" style="height: calc(3.5rem + 2px);" x-on:click="open = true">Category @if(empty($category)) (All) @else() ({{count($category)}} Selected) @endif</button>

                            <ul class="dropdown-menu show mt-2" style="max-height: 50vh; overflow-y: auto; scrollbar-width: thin; display:none;" x-show="open" x-on:click.outside="open = false">
                                <li class="px-3 py-1">
                                    <button class="btn btn-primary w-100" wire:click="select('category')">All</button>
                                </li>
                                <li class="px-3 py-1 @if($category['mens'] ?? 0) bg-good @endif">
                                    <span style="cursor: pointer;" wire:click="select('category', 'mens')">Mens</span><br>
                                </li>
                                <li class="px-3 py-1 @if($category['ladies'] ?? 0) bg-good @endif">
                                    <span style="cursor: pointer;" wire:click="select('category', 'ladies')">Ladies</span><br>
                                </li>
                                <li class="px-3 py-1 @if($category['childrens'] ?? 0) bg-good @endif">
                                    <span style="cursor: pointer;" wire:click="select('category', 'childrens')">Chidrens</span><br>
                                </li>
                                <li class="px-3 py-1 @if($category['accessories'] ?? 0) bg-good @endif">
                                    <span style="cursor: pointer;" wire:click="select('category', 'accessories')">Accessories</span><br>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row mx-1">
                    <div class="col-xl col-6 mb-2 px-1">
                        <div class="form-floating form-outline">
                            <input type="text" placeholder="Truck" class="form-control" wire:model.live.debounce.500ms="truck">
                            <label>Truck</label>
                            <div class="invalid-feedback">@error('search') {{ $message }} @enderror</div>
                        </div>
                    </div>
                    <livewire:column-selector :columns="$columns" columnsVersion="{{$this->columnsVersion()}}" filterKey="{{ $this->getFilterKeyString() }}" />
                    <div class="col-xl col-6 mb-2 px-1">
                        <div class="form-floating form-outline">
                            <input type="text" placeholder="Quantity" class="form-control" wire:model.live.debounce.500ms="search">
                            <label>Search</label>
                            <div class="invalid-feedback">@error('search') {{ $message }} @enderror</div>
                        </div>
                    </div>
                    <div class="col-xl col-6 mb-2 px-1">
                        <button class="btn w-100 btn-outline bg-white border-primary" style="height: calc(3.5rem + 2px);" type="button" wire:click="clearFilters">
                            Clear
                        </button>
                    </div>
                </div>
            @endif
        </x-slot:sub>
    </x-title-bar>

    {{-- Main Content --}}
    <div id="page-content-container" class="container-fluid">
        {{-- Alert Messages --}}
        <div class="row">
            <div class="col">
                @if (Session::get('message'))
                    <div class="alert {{ Session::get('alert-class') }}" role="alert">
                        {{ Session::get('message') }}
                    </div>
                @endif
                @if($errors->all())
                    <div class="alert alert-dark" role="alert">
                        @foreach ($errors->all() as $error)
                            {{ $error }}<br>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

        {{-- Data Table --}}
        <div class="row">
            <div class="col">
                <form method="POST" id="ss-form">
                    @csrf
                    <table id="tableSort" class="mt-2 table rounded @if($borders) table-bordered @endif">
                        <thead style="position: sticky; top:0; z-index:100" class="bg-white">
                            <tr class="border">
                                                                            <th class="box-shaddow-border-y-2">Drop#</th>
                                @if($this->columns['Season'])				<th class="box-shaddow-border-y-2">Season</th>					                        @endif
                                @if($this->columns['Factory'])				<th class="box-shaddow-border-y-2">Factory</th>				                        @endif
                                @if($this->columns['Customer'])				<th class="box-shaddow-border-y-2">Customer</th>				                        @endif
                                {{-- @if($this->columns['Order Issued'])			<th class="box-shaddow-border-y-2">Order Issued</th>			                        @endif --}}
                                @if($this->columns['Order No'])				<th class="box-shaddow-border-y-2">Order No</th>				                        @endif
                                @if($this->columns['Style'])				<th class="box-shaddow-border-y-2">Style</th>					                        @endif
                                @if($this->columns['Description'])			<th class="box-shaddow-border-y-2">Description</th>			                        @endif
                                @if($this->columns['Colour'])				<th class="box-shaddow-border-y-2">Colour</th>					                        @endif
                                @if($this->columns['Image'])				<th class="box-shaddow-border-y-2">Image</th>					                        @endif
                                @if($this->columns['Sizes'])				<th class="box-shaddow-border-y-2">Sizes</th>					                        @endif
                                @if($this->columns['Total Qty'])			<th class="box-shaddow-border-y-2">Total Qty</th>				                        @endif
                                @if($this->columns['Total Shipped'])		<th class="box-shaddow-border-y-2">Total Shipped</th>			                        @endif
                                @if($this->columns['Sealer Sample'])		<th class="box-shaddow-border-y-2" style="min-width: 130px;">Sealer Sample</th>		@endif
                                @if($this->columns['Shipment Sample'])		<th class="box-shaddow-border-y-2" style="min-width: 130px;">Shipment Sample</th>		@endif
                                @if($this->columns['ExFty'])				<th class="box-shaddow-border-y-2">ExFty</th>					                        @endif
                                @if($this->columns['Revised ExFty'])		<th class="box-shaddow-border-y-2">Revised ExFty</th>			                        @endif
                                @if($this->columns['Customer exFty'])		<th class="box-shaddow-border-y-2">Customer exFty</th>			                        @endif
                                @if($this->columns['Customer Into w/h'])	<th class="box-shaddow-border-y-2">Customer Into w/h</th>		                        @endif
                                {{-- @if($this->columns['CMT'])					<th class="box-shaddow-border-y-2">CMT</th>					                        @endif --}}
                                @if($this->columns['Total CMT'])			<th class="box-shaddow-border-y-2">Total Cost</th>				                        @endif
                                {{-- @if($this->columns['Quote'])				<th class="box-shaddow-border-y-2">Quote</th>					                        @endif --}}
                                @if($this->columns['Total Sale'])			<th class="box-shaddow-border-y-2">Total Sale</th>				                        @endif
                                @if($this->columns['Transport Budget'])		<th class="box-shaddow-border-y-2">Transport Budget</th>		                        @endif
                                @if($this->columns['Incoterms'])			<th class="box-shaddow-border-y-2">Incoterms</th>				                        @endif
                                @if($this->columns['Truck'])				<th class="box-shaddow-border-y-2">Truck</th>					                        @endif
                                @if($this->columns['Collection'])			<th class="box-shaddow-border-y-2">Collection</th>				                        @endif
                                @if($this->columns['Customs ERN'])			<th class="box-shaddow-border-y-2">Customs ERN</th>			                        @endif
                                @if($this->columns['Shipped'])				<th class="box-shaddow-border-y-2" style="min-width: 160px;">Shipped</th>				                        @endif
                                @if($this->columns['ASOS 3% Discount Price'])<th class="box-shaddow-border-y-2">ASOS 3% Discount Price</th>				        @endif
                                @if($this->columns['RT Invoice'])			<th class="box-shaddow-border-y-2">RT Invoice</th>				                        @endif
                                @if($this->columns['Factory Invoice'])		<th class="box-shaddow-border-y-2">Factory Invoice</th>		                        @endif
                                @if($this->columns['Customs Invoice'])		<th class="box-shaddow-border-y-2">Customs Invoice</th>		                        @endif
                                @if($this->columns['Transporter Invoice'])	<th class="box-shaddow-border-y-2">Transporter Invoice</th>	                        @endif
                                @if($this->columns['Finance Complete'])		<th class="box-shaddow-border-ey-2">Finance Complete</th>		                        @endif
                            </tr>
                        </thead>
                        @if(!empty($rows))
                            @foreach ($rows as $d=>$drop)
                                {{-- @if($this->chunk[$d]['is_first_in_shipment'])
                                    <tr>
                                        <td colspan="100%" style="height: 35px"></td>
                                    </tr>
                                @endif --}}
                                <tr id="{{$drop->id}}"
                                    class="
                                        @if($drop->flag_issue) bg-issue
                                        @elseif($drop->cancelled) bg-red
                                        @elseif($drop->complete) shipped
                                        {{-- @elseif(($drop['shipment_status'] ?? $drop['shipment_sample']['status']) == 'approved' || ($drop['shipment_sample']['status'] == "Not Required" && $drop['sealer_sample']['status'] == "Not Required")) bg-good
                                        @elseif($drop['shipment_sample']['status'] == 'rejected') bg-red --}}
                                        @endif

                                        {{-- @if($drop['customer_order_lines']['colourways']['style_versions']['styles']['cancelled'] || $drop['customer_order_lines']['colourways']['cancelled']) ss_cancelled @endif --}}
                                    "
                                    style="
                                               {{-- @if($this->chunk[$d]['is_first_in_shipment']) border-top: 3px solid black; @endif --}}
                                                border-left: 3px solid black;
                                                border-right: 3px solid black;

                                            "
                                    >

                                    <td style="min-width:100px" rowspan="2">
                                        <input type="checkbox"
                                            class="form-check-input"
                                        >
                                        {{$drop->id}}<br>
                                                                                <input type="checkbox"
                                            class="form-check-input"
                                            wire:model="rows.{{$d}}.flag_issue"
                                        >
                                        Issue



                                    </td>
                                    @if($columns['Season'])
                                        <td style="border-bottom: 0; min-width: 150px">{{ $drop->season_description }}</td>
                                    @endif
                                    @if($columns['Factory'])
                                        <td style="border-bottom: 0; min-width: 150px">{{ $drop->factory_name }}</td>
                                    @endif
                                    @if($columns['Customer'])
                                        <td style="border-bottom: 0; min-width: 150px"><b>{{ $drop->customer_name }}</td>
                                    @endif
                                    @if($columns['Order No'])
                                        <td role="button" style="border-bottom: 0;" x-data x-on:click="$dispatch('open-modal', {name:'edit-order'})" wire:click="$dispatch('edit-order', {order: {{$drop->order_id}}})" >
                                            <b>{{ $drop->customer_po }}</b><br>
                                            @if($drop->order_date)
                                                {{ date("d-M", strtotime($drop->order_date)) }}
                                            @endif
                                        </td>
                                    @endif
                                    @if($columns['Style'])
                                        <td role="button" style="border-bottom: 0; " x-data x-on:click="$dispatch('open-modal', {name:'edit-style'})" wire:click="$dispatch('edit-style', {style: {{$drop->style_id}}})" style="position: sticky; left: 0; z-index: 10;">
                                            <b>{{ $drop->design_id }} ({{$drop->style_version_name}})</b><br>
                                            {{ $drop->customer_ref ?? "" }}<br><br>
                                        </td>
                                    @endif
                                    @if($columns['Description'])
                                        <td style="border-bottom: 0; min-width: 150px">{{ Str::title($drop->description) }}</td>
                                    @endif
                                    @if($columns['Colour'])
                                        <td style="border-bottom: 0; ">{{ Str::title($drop->colourway_name) }}</td>
                                    @endif
                                    @if($columns['Image'])
                                        <td rowspan="2">
                                            @if(!empty($drop->img_thumb))
                                                <img style="max-width: 150px; max-height: 150px;" class="img-fluid pb-3 rounded"
                                                src="{{ url(asset('storage/' . $drop->img_thumb)) }}">
                                            @endif
                                        </td>
                                    @endif

                                    @if($columns['Sizes'])
                                        <td rowspan="2"
                                            x-data="sizesTable({{ json_encode($drop->size_breakdown) }}, {{ json_encode(1) }})"
                                            x-init="render()"
                                            wire:ignore>
                                            <div x-ref="holder"></div>
                                        </td>
                                    @endif
                                    {{-- @if($columns['Total Qty'])
                                        <td rowspan="2">{{ $drop['total_pieces'] }}</td>
                                    @endif
                                    @if($columns['Total Shipped'])
                                        <td rowspan="2">{{ $drop['total_pieces_shipped'] }}</td>
                                    @endif
                                    @if($columns['Sealer Sample'])
                                        <td rowspan="2">
                                            <b>{{Illuminate\Support\Str::title($drop['sealer_sample']['status'])}}</b><br>
                                            @if($drop['sealer_sample']['date_sent'])
                                                {{date("d-M", strtotime($drop['sealer_sample']['date_sent']))}}
                                            @endif
                                            {{$drop['sealer_sample']['note']}}<br>
                                            <p>{{$drop['sealer_sample']['comments']}}</p>

                                        </td>
                                    @endif
                                    @if($columns['Shipment Sample'])
                                        <td rowspan="2">
                                            <b>{{Illuminate\Support\Str::title($drop['shipment_sample']['status'])}}</b><br>
                                            @if($drop['shipment_sample']['date_sent'])
                                                {{date("d-M", strtotime($drop['shipment_sample']['date_sent']))}}
                                            @endif
                                            {{$drop['shipment_sample']['note']}}<br>
                                            <p>{{$drop['shipment_sample']['comments']}}</p>

                                        </td>
                                    @endif
                                    @if($columns['ExFty'])
                                        <td rowspan="2" style="white-space: nowrap;">
                                            <b>
                                                @if(!empty($drop['first_exfty'])){{ date_format(date_create($drop['first_exfty']), "d-M") }}@endif
                                            </b><br>
                                            @if(!empty($drop['first_exfty'])){{ date_format(date_create($drop['first_exfty']), "Y") }}@endif
                                        </td>
                                    @endif
                                    @if($columns['Revised ExFty'])
                                        <td rowspan="2" style="white-space: nowrap;">
                                            <b>
                                                @if(!empty($drop['exfty'])){{ date_format(date_create($drop['exfty']), "d-M") }}@endif
                                            </b><br>
                                            @if(!empty($drop['exfty'])){{ date_format(date_create($drop['exfty']), "Y") }}@endif
                                        </td>
                                    @endif
                                    @if($columns['Customer exFty'])
                                        <td rowspan="2" style="white-space: nowrap;">
                                            <b>
                                                @if(!empty($drop['customer_order_lines']['factory_cust_date'])){{ date_format(date_create($drop['customer_order_lines']['factory_cust_date']), "d-M") }}@endif
                                            </b><br>
                                            @if(!empty($drop['customer_order_lines']['factory_cust_date'])){{ date_format(date_create($drop['customer_order_lines']['factory_cust_date']), "Y") }}@endif
                                        </td>
                                    @endif
                                    @if($columns['Customer Into w/h'])
                                        <td rowspan="2" style="white-space: nowrap;">
                                            <b>
                                                @if(!empty($drop['customer_order_lines']['wh_cust_date'])){{ date_format(date_create($drop['customer_order_lines']['wh_cust_date']), "d-M") }}@endif
                                            </b><br>
                                            @if(!empty($drop['customer_order_lines']['wh_cust_date'])){{ date_format(date_create($drop['customer_order_lines']['wh_cust_date']), "Y") }}@endif
                                        </td>
                                    @endif
                                    @if($columns['Total CMT'])
                                        <td rowspan="2">
                                            {{$drop['customer_order_lines']['colourways']['style_versions']['factories']['currency']}}{{$drop['total_prices']['subtotal']}}
                                        </td>
                                    @endif
                                    @if($columns['Total Sale'])
                                        <td rowspan="2">
                                            {{$drop['customer_order_lines']['customer_orders']['customers']['currency']}}{{$drop['total_prices']['quote']}}
                                        </td>
                                    @endif
                                    @if($columns['Transport Budget'])
                                        <td rowspan="2">
                                            £{{number_format($drop['total_prices']['transport_budget'], 2)}}
                                        </td>
                                    @endif
                                    @if($columns['Incoterms'])
                                        <td rowspan="2">
                                            {{$drop['customer_order_lines']['customer_orders']['incoterms']}}
                                        </td>
                                    @endif
                                    @if($columns['Truck'])
                                        <td rowspan="2" style="cursor: pointer" x-data x-on:click="$dispatch('open-modal', {name:'edit-shipment'})" wire:click="$dispatch('edit-shipment', {shipment: {{$drop['shipment_id']}}})" >
                                            {{$drop['shipment_id'] ?? ""}}<br>
                                            {{$drop['shipments']['transporters']['name'] ?? ""}}<br>
                                            ({{$drop['shipments']['organiser'] ?? ""}})<br>
                                            {{$drop['shipments']['transporters']['currency'] ?? ""}}{{$drop['shipments']['cost'] ?? ""}}
                                        </td>
                                    @endif
                                    @if($columns['Collection'])
                                        <td rowspan="2">
                                            <b>
                                                @if(!empty($drop['collection_date'])){{ date_format(date_create($drop['collection_date']), "d-M") }}@endif
                                            </b><br>
                                            {{$drop['collection_date'] ? date_format(date_create($drop['collection_date']), "Y") : ""}}
                                            <br>
                                            <label>Net</label>
                                            <input class="form-control form-input-no-bg" type="text" wire:model.blur="drops.{{$d}}.net_weight">
                                            <label>Gross</label>
                                            <input class="form-control form-input-no-bg" type="text" wire:model.blur="drops.{{$d}}.gross_weight">
                                            <label>Cartons</label>
                                            <input class="form-control form-input-no-bg" type="text" wire:model.blur="drops.{{$d}}.no_cartons">
                                        </td>
                                    @endif
                                    @if($columns['Customs ERN'])
                                        <td rowspan="2">
                                            {{$drop['shipments']['customs_submitted_text'] ?? ""}}
                                        </td>
                                    @endif
                                    @if($columns['Shipped'])
                                        <td rowspan="2">
                                            {{$drop['complete'] ? 'Y' : 'N'}}
                                        </td>
                                    @endif
                                    @if($columns['ASOS 3% Discount Price'])
                                        <td rowspan="2">
                                            <div class="input-group">
                                                @if($drop['customer_order_lines']['customer_orders']['customers_id'] == 6)
                                                    {{$drop['customer_order_lines']['customer_orders']['customers']['currency']}}{{number_format($drop['customer_order_lines']['customer_order_line_quantities'][0]['price_model']['quote'] ?? 0 * 0.97,2)}}
                                                @endif
                                            </div>
                                        </td>
                                    @endif
                                    @if($columns['RT Invoice'])
                                        <td  style="min-width: 100px; border-bottom: 0;">
                                            @can('finance:update')
                                                <input class="form-control form-input-no-bg" type="text" wire:model.blur="drops.{{$d}}.rt_invoice">
                                            @else
                                                @can('finance:read')
                                                    {{$drop['rt_invoice']}}
                                                @endcan
                                            @endcan
                                        </td>
                                    @endif
                                    @if($columns['Factory Invoice'])
                                        <td  style="min-width: 100px; border-bottom: 0;">
                                            @can('finance:update')
                                                <input class="form-control form-input-no-bg" type="text" wire:model.blur="drops.{{$d}}.factory_invoice">
                                            @else
                                                @can('finance:read')
                                                    {{$drop['factory_invoice']}}
                                                @endcan
                                            @endcan
                                        </td>
                                    @endif
                                    @if($columns['Customs Invoice'])
                                        <td  style="min-width: 100px; border-bottom: 0;">
                                            @can('finance:update')
                                                <input class="form-control form-input-no-bg" type="text" wire:model.blur="drops.{{$d}}.customs_agency_invoice">
                                            @else
                                                @can('finance:read')
                                                    {{$drop['customs_agency_invoice']}}
                                                @endcan
                                            @endcan
                                        </td>
                                    @endif
                                    @if($columns['Transporter Invoice'])
                                        <td  style="min-width: 100px; border-bottom: 0;">
                                            @if($drop['shipments'])
                                            @can('finance:update')
                                                    <input class="form-control form-input-no-bg" type="text" wire:model.blur="drops.{{$d}}.shipments.transporter_invoice">
                                                @else
                                                    @can('finance:read')
                                                        {{$drop['shipments']['transporter_invoice']}}
                                                    @endcan
                                                @endcan
                                            @endif
                                        </td>
                                    @endif
                                    @if($columns['Finance Complete'])
                                        <td style="border-bottom: 0;">
                                            <div class="form-check">
                                                @can('finance:update')
                                                    <input class="form-check-input" type="checkbox" wire:model.blur="drops.{{$d}}.invoiced">
                                                @else
                                                    @can('finance:read')
                                                        {{$drop['invoiced']}}
                                                    @endcan
                                                @endcan
                                            </div>
                                        </td>
                                    @endif --}}
                                </tr>
                                <tr
                                    class="
                                        {{-- @if($drop['flag_issue']) bg-issue
                                        @elseif($drop['customer_order_lines']['cancelled']) bg-red
                                        @elseif($drop['complete']) shipped
                                        @elseif(($drop['shipment_status'] ?? $drop['shipment_sample']['status']) == 'approved' || ($drop['shipment_sample']['status'] == "Not Required" && $drop['sealer_sample']['status'] == "Not Required")) bg-good
                                        @elseif($drop['shipment_sample']['status'] == 'rejected') bg-red
                                        @endif

                                        @if($drop['customer_order_lines']['colourways']['style_versions']['styles']['cancelled'] || $drop['customer_order_lines']['colourways']['cancelled']) ss_cancelled @endif --}}
                                    "
                                    style="
                                        {{-- @if($this->chunk[$d]['is_last_in_shipment']) border-bottom: 3px solid black; @endif --}}
                                        border-left: 3px solid black;
                                        border-right: 3px solid black;
                                    " >
                                    {{-- @if($this->notesColsCount() != 0)
                                        <td colspan="{{$this->notesColsCount()}}">
                                            @if(Gate::check('style:update') || Gate::check('order:update'))
                                                <textarea
                                                    rows="2"
                                                    class="form-control form-input-no-bg fw-bold"
                                                    style="color: red"
                                                    wire:model.blur="drops.{{$d}}.notes">
                                                </textarea>
                                            @else
                                                <p style="color:red">{{$drop['notes']}}</p>
                                            @endif
                                        </td>
                                    @endif
                                    @if($this->fnNotesColsCount() != 0)
                                        <td colspan="{{$this->fnNotesColsCount()}}">
                                            @if(Gate::check('finance:update'))
                                                <textarea
                                                    rows="2"
                                                    class="form-control form-input-no-bg fw-bold"
                                                    style="color: red"
                                                    wire:model.blur="drops.{{$d}}.fn_notes">
                                                </textarea>
                                            @else
                                                <p style="color:red">{{$drop['fn_notes']}}</p>
                                            @endif
                                        </td>
                                    @endif --}}
                                </tr>
                            @endforeach
                        @endif
                    </table>
                </form>
            </div>
        </div>
    </div>

    <x-modal name="edit-style" title="Edit Style">
		<x-slot:body>
				<livewire:development.styles.style-edit wire:key='editStyle'>
		</x-slot:body>
	</x-modal>
    <x-modal name="edit-order" title="Edit Order" size="modal-fullscreen">
		<x-slot:body>
            @can('order:create')
			    <livewire:sales.orders.orders-edit-dev wire:key="orderEditDev">
            @endcan
		</x-slot:body>
	</x-modal>
	<x-modal name="edit-ss" title="Bulk Edit Drops" size="modal-lg">
		<x-slot:body>
				<livewire:production.reports.shipment-schedule-edit wire:key='editBulk'>
		</x-slot:body>
	</x-modal>
	<x-modal name="view-audit-log" title="Audit Log" size="modal-lg">
		<x-slot:body>
				<livewire:view-audit-log wire:key='auditLog'>
		</x-slot:body>
	</x-modal>
    <x-modal name="edit-sample" title="Edit Sample" size="modal-lg">
        <x-slot:body>
                <livewire:development.samples.samples-edit wire:key="sampleEdit">
        </x-slot:body>
    </x-modal>
    <x-modal name="edit-shipment" title="Edit Shipment">
		<x-slot:body>
			<livewire:production.shipments.shipments-edit wire:key="shipmentEdit">
		</x-slot:body>
	</x-modal>

    {{-- <x-modal name="totals" title="Page Totals" size="modal-sm">
		<x-slot:body>
            <div class="modal-body">
                <livewire:production.reports.shipment-schedule-totals :chunks="$chunks" :key="$refreshKey">
            </div>
		</x-slot:body>
	</x-modal> --}}

    <x-modal name="invoices" title="Invoices" size="modal-sm">
        <x-slot:body>
            <livewire:zoho.zoho-invoice-manager :selectedDrops="array_keys($selected)" />
        </x-slot:body>
    </x-modal>


    {{-- Footer --}}
    {{-- <x-footer>
        <x-slot:center>
            {{ $drops->links() }}
        </x-slot:center>
    </x-footer> --}}

    <script>
        function calculateTotalOrdered(dropId) {
            console.log('calcd');
            let total = 0;
            const inputs = document.querySelectorAll(`input[id^='qty_${dropId}_']`);
            inputs.forEach(input => {
                total += parseInt(input.value) || 0;
            });
            return total;
        }
        function calculateTotalShipped(dropId) {
            let total = 0;
            const inputs = document.querySelectorAll(`input[id^='shipped_${dropId}_']`);
            inputs.forEach(input => {
                total += parseInt(input.value) || 0;
            });
            return total;
        }
    </script>
<script>
document.addEventListener("alpine:init", () => {
    Alpine.data("shipmentHandler", (dropId, initialValue) => ({
        fieldValue: initialValue, // Set the initial value from the Blade template

        handlePaste(event, dropId) {
    event.preventDefault(); // Prevent default paste behavior

    let clipboardData = event.clipboardData || window.clipboardData;
    let pastedValues = clipboardData.getData("text").split("\t").map(val => val.trim()).filter(val => val !== "");

    const pastedValuess = event.clipboardData.getData('text').split('\t');
    const inputss = document.querySelectorAll(`input[id^=shipped_qty_${dropId}]`);

    // Get all inputs matching this drop ID
    let inputs = document.querySelectorAll(`input[id^="shipped_qty_${dropId}_"]`);

    inputs.forEach((input, index) => {
        console.log('foreach...');
        if (pastedValues[index] !== undefined) {
            let newValue = pastedValues[index];

            // Update input visually
            input.value = newValue;

            // Dispatch event to update Alpine's reactivity
            input.dispatchEvent(new Event("input", { bubbles: true }));

            // Extract size ID from data attribute
            let sizeId = input.id.split("_").pop(); // Gets the last part of the ID (which should be `size_id`)

            // Get Livewire component
            let livewireComponent = Livewire.find(input.closest("[wire\\:id]").getAttribute("wire:id"));

            // Call Livewire method to update DB
            livewireComponent.call("updateShippedQty", sizeId, newValue);
        }
    });
}
    }));
});
</script>
<script>
function sizesTable(data, canEdit) {

    // small helper – turns null / undefined into ''
    const show = v => (v ?? '') === null ? '' : v ?? '';

    return {
        render() {

            let header  = '<tr style="background: inherit !important"><td></td>';
            let ordered = '<tr style="background: inherit !important"><td>Ordered</td>';
            let shipped = '<tr style="background: inherit !important"><td>Shipped</td>';
            let price = '<tr style="background: inherit !important"><td>Price</td>';

            data.forEach(s => {
                header += `<td><b>${show(s.size_name)}</b></td>`;

                if (canEdit) {
                    ordered += `<td>
                                   <input type="text"
                                          class="form-control form-input-no-bg text-center"
                                          style="width:50px;padding:0"
                                          value="${show(s.ordered_qty)}"
                                          @change.debounce.200ms="Livewire.dispatch('updateQty',{
                                              sizeId:${s.size_id},
                                              value : $event.target.value
                                          })">
                                </td>`;

                    shipped += `<td>
                                   <input type="text"
                                          class="form-control form-input-no-bg text-center"
                                          style="width:50px;padding:0"
                                          value="${show(s.shipped_qty)}"
                                          @change.debounce.200ms="Livewire.dispatch('updateShippedQty',{
                                              sizeId:${s.size_id},
                                              value : $event.target.value
                                          })">
                                </td>`;
                } else {
                    ordered += `<td>${show(s.ordered_qty)}</td>`;
                    shipped += `<td>${show(s.shipped_qty)}</td>`;
                }
            });

            header  += '<td></td></tr>';
            ordered += '</tr>';
            shipped += '</tr>';
            price += '</tr>';

            this.$refs.holder.innerHTML = `
                <table class="table table-sm text-center table-borderless" style="width:unset;margin:auto;">
                    ${header}
                    ${ordered}
                    ${shipped}
                    ${price}
                </table>`;
        }
    }
}
</script>


</div>