{{-- Commission Shipment Schedule Row Component --}}
<tbody wire:loading.class="opacity-75">
    @foreach($drops as $drop)
        <tr class="@if($drop['complete'] ?? false) shipped @endif align-middle" wire:key="drop-{{ $drop['id'] }}">
            {{-- Drop# --}}
            <td style="white-space: nowrap; background-color: #eaf3ff;" class="text-center align-middle">
                <div class="d-flex flex-column align-items-center text-center">
                    <div class="fw-bold text-primary mb-3 fs-5">{{ $drop['id'] }}</div>
                    <div class="form-check mb-3 d-flex justify-content-center">
                        <input type="checkbox"
                               class="form-check-input"
                               style="transform: scale(1.2);"
                               wire:model.live="selected.{{$drop['id']}}">
                    </div>
                    @can('order:create')
                        <button class="btn btn-sm btn-outline-primary" 
                                x-data 
                                x-on:click="$dispatch('open-modal', {name:'split-drop'}); Livewire.dispatch('open-split-drop-modal', {dropId: {{ $drop['id'] }}})"
                                title="Split this drop into multiple drops">
                            <i class="fas fa-cut me-1"></i>Split
                        </button>
                    @endcan
                </div>
            </td>

            {{-- Season --}}
            @if($this->columns['Season'])
                <td style="white-space: nowrap;" class="text-center">
                    <span class="fw-bold">{{ $drop['season'] ?? '' }}</span>
                </td>
            @endif

            {{-- Factory --}}
            @if($this->columns['Factory'])
                <td style="white-space: nowrap;" class="text-center">
                    <span class="fw-semibold">{{ $drop['factory'] ?? '' }}</span>
                </td>
            @endif

            {{-- Customer --}}
            @if($this->columns['Customer'])
                <td style="white-space: nowrap;" class="text-center">
                    <span class="fw-bold text-dark">{{ $drop['customer'] ?? '' }}</span>
                </td>
            @endif

            {{-- Order Issued --}}
            @if($this->columns['Order Issued'])
                <td style="white-space: nowrap;" class="text-center">
                    @if(!empty($drop['order_issued']))
                        {{ date("M-d", strtotime($drop['order_issued'])) }}
                    @endif
                </td>
            @endif

            {{-- Order No --}}
            @if($this->columns['Order No'])
                <td class="text-center align-middle" role="button" 
                    style="background-color: #fff3cd; border-radius: 6px;"
                    x-data 
                    x-on:click="$dispatch('open-modal', {name:'edit-order'})" 
                    wire:click="$dispatch('edit-order', {order: {{ $drop['customer_orders_id'] ?? 0 }}})">
                    {{ $drop['customer_po'] ?? '' }}
                </td>
            @endif

            {{-- Style --}}
            @if($this->columns['Style'])
                <td class="text-center align-middle" role="button" 
                    x-data 
                    x-on:click="$dispatch('open-modal', {name:'edit-style'})" 
                    wire:click="$dispatch('edit-style', {style: {{ $drop['styles_id'] ?? 0 }}})">
                    <div class="d-flex flex-wrap gap-1 mb-1 justify-content-center">
                        <div class="badge bg-primary">{{ $drop['designs_id'] ?? '' }}</div>
                        @if(!empty($drop['style_version_name']))
                            <div class="badge bg-secondary">{{ $drop['style_version_name'] }}</div>
                        @endif
                    </div>
                    @if(!empty($drop['customer_ref']))
                        <div class="text-muted small">{{ $drop['customer_ref'] }}</div>
                    @endif
                </td>
            @endif

            {{-- Description --}}
            @if($this->columns['Description'])
                <td style="min-width: 150px" class="text-center align-middle">
                    <div class="text-muted">{{ Str::title($drop['description'] ?? '') }}</div>
                </td>
            @endif

            {{-- Colour --}}
            @if($this->columns['Colour'])
                <td class="text-center align-middle">
                    <span class="fw-bold">{{ Str::title($drop['colour'] ?? '') }}</span>
                </td>
            @endif

            

            {{-- Sizes --}}
            @if($this->columns['Sizes'])
                <td class="align-middle">
                    
                    @if(!empty($drop['shipment_line_sizes']))
                        {{-- Tidied Table Layout --}}
                        <table class="table table-sm table-borderless mb-0" style="width: auto; margin: 0 auto; font-size: 0.85rem;">
                            {{-- Header Row --}}
                            <thead>
                                <tr>
                                    <th class="p-1 text-start" style="width: 70px;"></th>
                                    @foreach($drop['shipment_line_sizes'] as $size)
                                        <th class="p-1 text-center fw-bold" style="min-width: 45px;">{{ $size['sizes']['name'] ?? '' }}</th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody>
                                {{-- Ordered Row --}}
                                <tr>
                                    <td class="p-1 text-start fw-semibold text-dark">Ordered</td>
                                    @foreach($drop['shipment_line_sizes'] as $s => $size)
                                        <td class="p-1 text-center">
                                            @if((Gate::check('order:update') || Gate::check('finance:update')))
                                                <div contenteditable="true"
                                                    class="fw-semibold"
                                                    style="display: inline-block; min-width: 20px; outline: none;"
                                                    id="qty_{{ $drop['id'] }}_{{ $size['sls_id'] ?? '' }}"
                                                    wire:key="qty_{{ $drop['id'] }}_{{ $size['sls_id'] ?? '' }}"
                                                    x-data="{ 
                                                        fieldValue: @js($size['qty'] ?? 0),
                                                        originalValue: @js($size['qty'] ?? 0),
                                                        init() {
                                                            this.$el.textContent = this.fieldValue;
                                                        }
                                                    }"
                                                    x-on:focus="originalValue = $el.textContent"
                                                    x-on:blur="
                                                        let newValue = $el.textContent.trim();
                                                        if (newValue !== originalValue) {
                                                            fieldValue = newValue;
                                                            Livewire.dispatch('updateQty', { sizeId: {{ $size['sls_id'] ?? 0 }}, value: newValue });
                                                            $wire.$refresh();
                                                        } else {
                                                            $el.textContent = fieldValue;
                                                        }
                                                    "
                                                    x-on:keydown.enter.prevent="$el.blur()"
                                                    x-on:keydown.escape.prevent="$el.textContent = fieldValue; $el.blur()"
                                                >{{ $size['qty'] ?? 0 }}</div>
                                            @else
                                                <span class="fw-semibold">{{ $size['qty'] ?? 0 }}</span>
                                            @endif
                                        </td>
                                    @endforeach
                                </tr>
                                
                                {{-- Shipped Row --}}
                                <tr>
                                    <td class="p-1 text-start fw-semibold text-dark">Shipped</td>
                                    @foreach($drop['shipment_line_sizes'] as $s => $size)
                                        <td class="p-1 text-center">
                                            @if((Gate::check('order:update') || Gate::check('finance:update')))
                                                <div contenteditable="true"
                                                    class="fw-semibold"
                                                    style="display: inline-block; min-width: 20px; outline: none;"
                                                    id="shipped_qty_{{ $drop['id'] }}_{{ $size['sls_id'] ?? 0 }}"
                                                    wire:key="shipped_qty_{{ $drop['id'] }}_{{ $size['sls_id'] ?? 0 }}"
                                                    x-data="{
                                                        fieldValue: {{ $size['shipped_qty'] ?? 0 }},
                                                        originalValue: {{ $size['shipped_qty'] ?? 0 }},
                                                        dropId: {{ $drop['id'] }},
                                                        init() {
                                                            this.$el.textContent = this.fieldValue;
                                                        },
                                                        handlePaste(event) {
                                                            event.preventDefault();
                                                            let clipboardData = event.clipboardData || window.clipboardData;
                                                            let pastedValues = clipboardData.getData('text').split('\t').map(val => val.trim()).filter(val => val !== '');
                                                            
                                                            let editableElements = document.querySelectorAll(`div[id^='shipped_qty_${this.dropId}_']`);
                                                            editableElements.forEach((element, index) => {
                                                                if (pastedValues[index] !== undefined) {
                                                                    let newValue = pastedValues[index];
                                                                    let sizeId = element.id.split('_').pop();
                                                                    
                                                                    // Update the element content
                                                                    element.textContent = newValue;
                                                                    
                                                                    // Update Alpine.js reactive data
                                                                    if (element._x_dataStack && element._x_dataStack[0]) {
                                                                        element._x_dataStack[0].fieldValue = newValue;
                                                                    }
                                                                    
                                                                    // Call the method directly on the row component
                                                                    $wire.updateShippedQty(parseInt(sizeId), newValue);
                                                                }
                                                            });
                                                        }
                                                    }"
                                                    x-on:focus="originalValue = $el.textContent"
                                                    x-on:blur="
                                                        let newValue = $el.textContent.trim();
                                                        if (newValue !== originalValue) {
                                                            fieldValue = newValue;
                                                            Livewire.dispatch('updateShippedQty', { sizeId: {{ $size['sls_id'] ?? 0 }}, value: newValue });
                                                            $wire.$refresh();
                                                        } else {
                                                            $el.textContent = fieldValue;
                                                        }
                                                    "
                                                    x-on:keydown.enter.prevent="$el.blur()"
                                                    x-on:keydown.escape.prevent="$el.textContent = fieldValue; $el.blur()"
                                                    x-on:paste.prevent="handlePaste($event)"
                                                >{{ $size['shipped_qty'] ?? 0 }}</div>
                                            @else
                                                <span class="fw-semibold">{{ $size['shipped_qty'] ?? 0 }}</span>
                                            @endif
                                        </td>
                                    @endforeach
                                </tr>
                                
                                {{-- Price Row --}}
                                @if(!empty($drop['customer_order_lines']['customer_order_line_quantities']))
                                    @php
                                        $quantities = $drop['customer_order_lines']['customer_order_line_quantities'];
                                        $sizeCount = count($quantities);
                                        $prices = array_column($quantities, 'price');
                                        $discounts = array_column($quantities, 'discount');
                                        $commissions = array_column($quantities, 'commission');
                                        
                                        $allPricesSame = count(array_unique($prices)) <= 1;
                                        $allDiscountsSame = count(array_unique($discounts)) <= 1;
                                        $allCommissionsSame = count(array_unique($commissions)) <= 1;
                                    @endphp
                                    
                                    <tr class="border-top">
                                        <td class="p-1 text-start fw-semibold text-success">Price</td>
                                        @if($allPricesSame)
                                            @php $firstPrice = $quantities[0]['price'] ?? 0; @endphp
                                            <td class="text-center small text-success fw-bold" colspan="{{ $sizeCount }}">
                                                <div style="display: flex; align-items: center; justify-content: center; padding: 2px 0;">
                                                    @if(Gate::check('order:update'))
                                                        <div style="display: flex; align-items: center; width: 100%;">
                                                            <div style="flex: 1; height: 2px; background: #28a745; margin-right: 8px;"></div>
                                                            <div contenteditable="true"
                                                                style="white-space: nowrap; outline: none; font-size: 0.75rem;"
                                                                x-data="{ 
                                                                    fieldValue: @js($firstPrice),
                                                                    originalValue: @js($firstPrice),
                                                                    displayText: '{{ $drop['cust_currency'] ?? 'USD' }}{{ number_format($firstPrice, 2) }}'
                                                                }"
                                                                x-on:focus="
                                                                    originalValue = fieldValue;
                                                                    $el.textContent = fieldValue;
                                                                "
                                                                x-on:blur="
                                                                    let newValue = $el.textContent.trim();
                                                                    if (newValue !== originalValue) {
                                                                        fieldValue = newValue;
                                                                        @foreach($quantities as $qty)
                                                                            $wire.updatePrice({{ $qty['id'] ?? 0 }}, newValue);
                                                                        @endforeach
                                                                        $wire.$refresh();
                                                                    } else {
                                                                        $el.textContent = displayText;
                                                                    }
                                                                "
                                                                x-on:keydown.enter.prevent="$el.blur()"
                                                                x-on:keydown.escape.prevent="$el.textContent = displayText; $el.blur()"
                                                                x-init="$el.textContent = displayText"
                                                            >{{ $drop['cust_currency'] ?? 'USD' }}{{ number_format($firstPrice, 2) }}</div>
                                                            <div style="flex: 1; height: 2px; background: #28a745; margin-left: 8px;"></div>
                                                        </div>
                                                    @else
                                                        <div style="display: flex; align-items: center; width: 100%;">
                                                            <div style="flex: 1; height: 2px; background: #28a745; margin-right: 8px;"></div>
                                                            <span style="white-space: nowrap;">{{ $drop['cust_currency'] ?? 'USD' }}{{ number_format($firstPrice, 2) }}</span>
                                                            <div style="flex: 1; height: 2px; background: #28a745; margin-left: 8px;"></div>
                                                        </div>
                                                    @endif
                                                </div>
                                            </td>
                                        @else
                                            @foreach($quantities as $qty)
                                                <td class="p-1 text-center">
                                                    @if(Gate::check('order:update'))
                                                        <div contenteditable="true"
                                                            style="display: inline-block; min-width: 30px; outline: none; font-size: 0.75rem;"
                                                            x-data="{ 
                                                                fieldValue: @js($qty['price'] ?? 0),
                                                                originalValue: @js($qty['price'] ?? 0)
                                                            }"
                                                            x-on:focus="originalValue = $el.textContent"
                                                            x-on:blur="
                                                                let newValue = $el.textContent.trim();
                                                                if (newValue !== originalValue) {
                                                                    fieldValue = newValue;
                                                                    $wire.updatePrice({{ $qty['id'] ?? 0 }}, newValue);
                                                                    $wire.$refresh();
                                                                } else {
                                                                    $el.textContent = fieldValue;
                                                                }
                                                            "
                                                            x-on:keydown.enter.prevent="$el.blur()"
                                                            x-on:keydown.escape.prevent="$el.textContent = fieldValue; $el.blur()"
                                                            x-init="$el.textContent = fieldValue"
                                                        >{{ $drop['cust_currency'] ?? 'USD' }}{{ $qty['price'] ?? 0 }}</div>
                                                    @else
                                                        <small>{{ $drop['cust_currency'] ?? 'USD' }}{{ $qty['price'] ?? 0 }}</small>
                                                    @endif
                                                </td>
                                            @endforeach
                                        @endif
                                    </tr>
                                    
                                    {{-- Discount Row --}}
                                    <tr>
                                        <td class="p-1 text-start fw-semibold text-warning">Discount</td>
                                        @if($allDiscountsSame)
                                            @php $firstDiscount = $quantities[0]['discount'] ?? 0; @endphp
                                            <td class="text-center small text-warning fw-bold" colspan="{{ $sizeCount }}">
                                                <div style="display: flex; align-items: center; justify-content: center; padding: 2px 0;">
                                                    @if(Gate::check('order:update'))
                                                        <div style="display: flex; align-items: center; width: 100%;">
                                                            <div style="flex: 1; height: 2px; background: #fd7e14; margin-right: 8px;"></div>
                                                            <div contenteditable="true"
                                                                style="white-space: nowrap; outline: none; font-size: 0.75rem;"
                                                                x-data="{ 
                                                                    fieldValue: @js($firstDiscount),
                                                                    originalValue: @js($firstDiscount),
                                                                    displayText: '{{ $firstDiscount }}%'
                                                                }"
                                                                x-on:focus="
                                                                    originalValue = fieldValue;
                                                                    $el.textContent = fieldValue;
                                                                "
                                                            x-on:blur="
                                                                let newValue = $el.textContent.trim().replace('%', '');
                                                                if (newValue !== originalValue) {
                                                                    fieldValue = newValue;
                                                                    @foreach($quantities as $qty)
                                                                        $wire.updateDiscount({{ $qty['id'] ?? 0 }}, newValue);
                                                                    @endforeach
                                                                    $wire.$refresh();
                                                                } else {
                                                                    $el.textContent = displayText;
                                                                }
                                                            "
                                                                x-on:keydown.enter.prevent="$el.blur()"
                                                                x-on:keydown.escape.prevent="$el.textContent = displayText; $el.blur()"
                                                                x-init="$el.textContent = displayText"
                                                            >{{ $firstDiscount }}%</div>
                                                            <div style="flex: 1; height: 2px; background: #fd7e14; margin-left: 8px;"></div>
                                                        </div>
                                                    @else
                                                        <div style="display: flex; align-items: center; width: 100%;">
                                                            <div style="flex: 1; height: 2px; background: #fd7e14; margin-right: 8px;"></div>
                                                            <span style="white-space: nowrap;">{{ $firstDiscount }}%</span>
                                                            <div style="flex: 1; height: 2px; background: #fd7e14; margin-left: 8px;"></div>
                                                        </div>
                                                    @endif
                                                </div>
                                            </td>
                                        @else
                                            @foreach($quantities as $qty)
                                                <td class="p-1 text-center">
                                                    @if(Gate::check('order:update'))
                                                        <div contenteditable="true"
                                                            style="display: inline-block; min-width: 25px; outline: none; font-size: 0.75rem;"
                                                            x-data="{ 
                                                                fieldValue: @js($qty['discount'] ?? 0),
                                                                originalValue: @js($qty['discount'] ?? 0),
                                                                displayText: '{{ $qty['discount'] }}%'

                                                            }"
                                                            x-on:focus="originalValue = $el.textContent"
                                                            x-on:blur="
                                                                let newValue = $el.textContent.trim().replace('%', '');
                                                                if (newValue !== originalValue) {
                                                                    fieldValue = newValue;
                                                                    $wire.updateDiscount({{ $qty['id'] ?? 0 }}, newValue);
                                                                    $wire.$refresh();
                                                                } else {
                                                                    $el.textContent = fieldValue;
                                                                }
                                                            "
                                                            x-on:keydown.enter.prevent="$el.blur()"
                                                            x-on:keydown.escape.prevent="$el.textContent = fieldValue; $el.blur()"
                                                            x-init="$el.textContent = fieldValue"
                                                        >{{ $qty['discount'] ?? 0 }}%</div>
                                                    @else
                                                        <small>{{ $qty['discount'] ?? 0 }}%</small>
                                                    @endif
                                                </td>
                                            @endforeach
                                        @endif
                                    </tr>
                                    
                                    {{-- Commission Row --}}
                                    <tr>
                                        <td class="p-1 text-start fw-semibold text-primary">Commission</td>
                                        @if($allCommissionsSame)
                                            @php $firstCommission = $quantities[0]['commission'] ?? 0; @endphp
                                            <td class="text-center small text-primary fw-bold" colspan="{{ $sizeCount }}">
                                                <div style="display: flex; align-items: center; justify-content: center; padding: 2px 0;">
                                                    @if(Gate::check('order:update'))
                                                        <div style="display: flex; align-items: center; width: 100%;">
                                                            <div style="flex: 1; height: 2px; background: #0d6efd; margin-right: 8px;"></div>
                                                            <div contenteditable="true"
                                                                style="white-space: nowrap; outline: none; font-size: 0.75rem;"
                                                                x-data="{ 
                                                                    fieldValue: @js($firstCommission),
                                                                    originalValue: @js($firstCommission),
                                                                    displayText: '{{ $firstCommission }}%'
                                                                }"
                                                                x-on:focus="
                                                                    originalValue = fieldValue;
                                                                    $el.textContent = fieldValue;
                                                                "
                                                                x-on:blur="
                                                                    let newValue = $el.textContent.trim().replace('%', '');
                                                                    if (newValue !== originalValue) {
                                                                        fieldValue = newValue;
                                                                        @foreach($quantities as $qty)
                                                                            $wire.updateCommission({{ $qty['id'] ?? 0 }}, newValue);
                                                                        @endforeach
                                                                        $wire.$refresh();
                                                                    } else {
                                                                        $el.textContent = displayText;
                                                                    }
                                                                "
                                                                x-on:keydown.enter.prevent="$el.blur()"
                                                                x-on:keydown.escape.prevent="$el.textContent = displayText; $el.blur()"
                                                                x-init="$el.textContent = displayText"
                                                            >{{ $firstCommission }}%</div>
                                                            <div style="flex: 1; height: 2px; background: #0d6efd; margin-left: 8px;"></div>
                                                        </div>
                                                    @else
                                                        <div style="display: flex; align-items: center; width: 100%;">
                                                            <div style="flex: 1; height: 2px; background: #0d6efd; margin-right: 8px;"></div>
                                                            <span style="white-space: nowrap;">{{ $firstCommission }}%</span>
                                                            <div style="flex: 1; height: 2px; background: #0d6efd; margin-left: 8px;"></div>
                                                        </div>
                                                    @endif
                                                </div>
                                            </td>
                                        @else
                                            @foreach($quantities as $qty)
                                                <td class="p-1 text-center text-primary">
                                                    @if(Gate::check('order:update'))
                                                        <div contenteditable="true"
                                                            style="display: inline-block; min-width: 25px; outline: none; font-size: 0.75rem;"
                                                            x-data="{ 
                                                                fieldValue: @js($qty['commission'] ?? 0),
                                                                originalValue: @js($qty['commission'] ?? 0)
                                                            }"
                                                            x-on:focus="originalValue = $el.textContent"
                                                            x-on:blur="
                                                                let newValue = $el.textContent.trim().replace('%', '');
                                                                if (newValue !== originalValue) {
                                                                    fieldValue = newValue;
                                                                    $wire.updateCommission({{ $qty['id'] ?? 0 }}, newValue);
                                                                    $wire.$refresh();
                                                                } else {
                                                                    $el.textContent = fieldValue;
                                                                }
                                                            "
                                                            x-on:keydown.enter.prevent="$el.blur()"
                                                            x-on:keydown.escape.prevent="$el.textContent = fieldValue; $el.blur()"
                                                            x-init="$el.textContent = fieldValue"
                                                        >{{ $qty['commission'] ?? 0 }}%</div>
                                                    @else
                                                        <small>{{ $qty['commission'] ?? 0 }}%</small>
                                                    @endif
                                                </td>
                                            @endforeach
                                        @endif
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    @endif
                </td>
            @endif

            {{-- Total Qty --}}
            @if($this->columns['Total Qty'])
                <td class="text-center align-middle" style="background-color: #f3e5f5;"><span class="fw-bold">{{ $drop['total_qty'] ?? 0 }}</span></td>
            @endif

            {{-- Total Shipped --}}
            @if($this->columns['Total Shipped'])
                <td class="text-center"><span class="fw-bold">{{ $drop['total_shipped'] ?? 0 }}</span></td>
            @endif

            {{-- Commission --}}
            @if($this->columns['Commission'])
                <td class="text-center"><span class="fw-bold">{{ $drop['cust_currency'] ?? 'USD' }}{{ number_format($drop['commission'] ?? 0, 2) }}</span></td>
            @endif

            {{-- Value With Discount --}}
            @if($this->columns['Value With Discount'])
                <td class="text-center"><span class="fw-bold">{{ $drop['cust_currency'] ?? 'USD' }}{{ number_format($drop['value'] ?? 0, 2) }}</span></td>
            @endif

            {{-- Value Without Discount --}}
            @if($this->columns['Value Without Discount'])
                <td class="text-center"><span class="fw-bold">{{ $drop['cust_currency'] ?? 'USD' }}{{ number_format($drop['valueDiscount'] ?? 0, 2) }}</span></td>
            @endif

            {{-- ExFty --}}
            @if($this->columns['ExFty'])
                <td style="min-width: 100px;" class="text-center align-middle">
                    @if(!empty($drop['first_exfty']) && $drop['first_exfty'] !== false && $drop['first_exfty'] !== 'false')
                        @php $firstExftyDate = date_create($drop['first_exfty']); @endphp
                        @if($firstExftyDate)
                            <div class="fw-bold fs-4 text-dark">{{ date_format($firstExftyDate, "d") }}</div>
                            <div class="fw-bold text-dark">{{ date_format($firstExftyDate, "M") }}</div>
                            <small class="text-muted">{{ date_format($firstExftyDate, "Y") }}</small>
                        @else
                            <span class="text-muted">-</span>
                        @endif
                    @else
                        <span class="text-muted">-</span>
                    @endif
                </td>
            @endif

            {{-- Revised ExFty --}}
            @if($this->columns['Revised ExFty'])
                <td class="text-center align-middle" style="min-width: 100px; background-color: #eefaf0; border-radius: 6px;" x-data="{ showInput: false, fieldValue: @js(!empty($drop['revised_exfty']) ? date('Y-m-d', strtotime($drop['revised_exfty'])) : '') }" x-on:click.away="showInput = false">
                    <div x-show="!showInput" @can('order:update') x-on:click="showInput = true" class="cursor-pointer" @endcan>
                        @php
                            $isAfterCustomerExfty = false;
                            if (!empty($drop['revised_exfty']) && !empty($drop['factory_cust_date'])) {
                                $isAfterCustomerExfty = strtotime($drop['revised_exfty']) > strtotime($drop['factory_cust_date']);
                            }
                        @endphp
                        @if(!empty($drop['revised_exfty']))
                            @php $revisedExftyDate = date_create($drop['revised_exfty']); @endphp
                            @if($revisedExftyDate)
                                <div class="fw-bold fs-4 {{ $isAfterCustomerExfty ? 'text-danger' : 'text-success' }}">{{ date_format($revisedExftyDate, "d") }}</div>
                                <div class="fw-bold {{ $isAfterCustomerExfty ? 'text-danger' : 'text-success' }}">{{ date_format($revisedExftyDate, "M") }}</div>
                                <small class="text-muted">{{ date_format($revisedExftyDate, "Y") }}</small>
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        @else
                            <span class="text-muted">-</span>
                        @endif
                    </div>
                    @can('order:update')
                        <div x-show="showInput">
                            <input type="date"
                                   class="form-control form-control-sm text-center"
                                   x-model="fieldValue"
                                   x-on:change.debounce.300ms="$wire.updateRevisedExfty({{ $drop['id'] }}, fieldValue); showInput = false"
                                   x-on:blur.debounce.400ms="showInput = false"
                                   x-on:keydown.enter="$event.target.blur()"
                                   x-on:keydown.escape="showInput = false"
                                   style="min-width: 120px;">
                        </div>
                    @endcan
                </td>
            @endif

            {{-- Shipped --}}
            @if($this->columns['Shipped'])
                <td class="text-center">
                    @can('order:update')
                        <input type="checkbox"
                            class="form-check-input"
                            x-data="{ fieldValue: @js($drop['shipped'] ?? false) }"
                            x-model="fieldValue"
                            x-on:change="$wire.updateShipmentComplete({{ $drop['id'] }}, fieldValue)"
                        >
                    @else
                        <input type="checkbox" class="form-check-input" disabled {{ ($drop['shipped'] ?? false) ? 'checked' : '' }}>
                    @endcan
                </td>
            @endif

            {{-- Notes For Finance --}}
            @if($this->columns['Notes For Finance'])
                <td class="text-center align-middle" style="width: 100px; min-width: 100px; padding: 0.5rem;">
                    @if(Gate::check('style:update') || Gate::check('order:update') || Gate::check('finance:update'))
                        <textarea
                            class="form-control form-control-sm bg-white border"
                            style="width: 100%; height: 100%; min-height: 120px; resize: none;"
                            x-data="{ fieldValue: @js($drop['fn_notes'] ?? '') }"
                            x-model="fieldValue"
                            x-on:change.debounce.500ms="$wire.updateShipmentLine({{ $drop['id'] }}, 'fn_notes', fieldValue)"
                        ></textarea>
                    @else
                        <div class="text-muted small text-truncate" style="max-width: 100px;" title="{{ $drop['fn_notes'] ?? '' }}">
                            {{ $drop['fn_notes'] ?? '' }}
                        </div>
                    @endif
                </td>
            @endif

            {{-- Finance (RT Invoice, Qty Invoiced, Factory Invoice, Finance Complete) --}}
            @if($this->columns['Finance'])
                <td class="align-middle" style="min-width: 220px;">
                    <div class="d-flex flex-column gap-1 align-items-start">
                        <div class="w-100 d-flex align-items-center gap-2">
                            <label class="small text-muted mb-0" style="width: 95px; text-align: right;">RT Inv</label>
                            @can('finance:update')
                                <input type="text" class="form-control form-control-sm bg-white border" style="max-width: 120px" x-data="{ fieldValue: @js($drop['rt_invoice'] ?? '') }" x-model="fieldValue" x-on:change.debounce.500ms="$wire.updateShipmentLine({{ $drop['id'] }}, 'rt_invoice', fieldValue)">
                            @else
                                <span class="small">{{ $drop['rt_invoice'] ?? '' }}</span>
                            @endcan
                        </div>
                        <div class="w-100 d-flex align-items-center gap-2">
                            <label class="small text-muted mb-0" style="width: 95px; text-align: right;">Qty Inv</label>
                            @can('finance:update')
                                <input type="text" class="form-control form-control-sm bg-white border" style="max-width: 120px" x-data="{ fieldValue: @js($drop['no_invoiced'] ?? 0) }" x-model="fieldValue" x-on:change.debounce.500ms="$wire.updateShipmentLine({{ $drop['id'] }}, 'no_invoiced', fieldValue)">
                            @else
                                <span class="small">{{ $drop['no_invoiced'] ?? 0 }}</span>
                            @endcan
                        </div>
                        <div class="w-100 d-flex align-items-center gap-2">
                            <label class="small text-muted mb-0" style="width: 95px; text-align: right;">Factory Inv</label>
                            @can('finance:update')
                                <input type="text" class="form-control form-control-sm bg-white border" style="max-width: 120px" x-data="{ fieldValue: @js($drop['factory_invoice'] ?? '') }" x-model="fieldValue" x-on:change.debounce.500ms="$wire.updateShipmentLine({{ $drop['id'] }}, 'factory_invoice', fieldValue)">
                            @else
                                <span class="small">{{ $drop['factory_invoice'] ?? '' }}</span>
                            @endcan
                        </div>
                        <div class="w-100 d-flex align-items-center gap-2">
                            <label class="small text-muted mb-0" style="width: 95px; text-align: right;">Complete</label>
                            <div class="finance-input-slot" style="width: 120px; display: flex; align-items: center; height: calc(1.5em + .5rem + 2px);">
                                @can('finance:update')
                                    <input type="checkbox" class="form-check-input" style="margin: 0;" x-data="{ fieldValue: @js($drop['finance_complete'] ?? false) }" x-model="fieldValue" x-on:change="$wire.updateShipmentLine({{ $drop['id'] }}, 'invoiced', fieldValue)">
                                @else
                                    <input type="checkbox" class="form-check-input" style="margin: 0;" disabled {{ ($drop['finance_complete'] ?? false) ? 'checked' : '' }}>
                                @endcan
                            </div>
                        </div>
                    </div>
                </td>
            @endif
        </tr>
    @endforeach
</tbody>