@php
    $isGuest = !auth()->check();
    $readonly = $isGuest ? 'readonly' : null;
    $disabled = $isGuest ? 'disabled' : null;
    $deviceOptions = $devices ?? [];
    $existingPurchaseDevices = $purchaseDevices ?? [];
@endphp

<div class="purchase-pos-container">
    <div class="table-responsive">
        <table class="table table-bordered" id="purchaseDeviceTable">
            <thead class="thead-light">
                <tr>
                    <th width="40%">Product</th>
                    <th width="20%">Unit Price/month</th>
                    <th width="15%">Qty</th>
                    <th width="20%">Cost</th>
                    <th width="5%">Action</th>
                </tr>
            </thead>
            <tbody id="purchaseDeviceTableBody">
                @if (!empty($existingPurchaseDevices))
                    @foreach ($existingPurchaseDevices as $idx => $existingDevice)
                        <tr class="purchase-device-row" data-device-idx="{{ $idx }}">
                            <td>
                                <select name="purchase_devices[{{ $idx }}][device_id]"
                                    class="form-control purchase-device-select select2"
                                    id="purchase_device_{{ $idx }}_select" {{ $readonly }}
                                    {{ $disabled }}>
                                    <option value="">Select Product</option>
                                    @if (!empty($deviceOptions))
                                        @foreach ($deviceOptions as $device)
                                            @if (!empty($device['options']))
                                                @foreach ($device['options'] as $opt)
                                                    @if ($opt['price'] > 0)
                                                        @php
                                                            $optionText = $opt['text'] ?? '';
                                                            $cleanText = preg_replace(
                                                                '/\s+-\s+\$[\d\.]+$/',
                                                                '',
                                                                $optionText,
                                                            );
                                                            $isSelected = $opt['id'] == $existingDevice['device_id'];
                                                        @endphp
                                                        <option value="{{ $opt['id'] }}"
                                                            data-price="{{ $opt['price'] ?? 0 }}"
                                                            {{ $isSelected ? 'selected' : '' }}>
                                                            {{ $cleanText }}
                                                        </option>
                                                    @endif
                                                @endforeach
                                            @endif
                                        @endforeach
                                    @endif
                                </select>
                            </td>
                            <td>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text dollar-input-white-bg">$</span>
                                    </div>
                                    <input type="number" name="purchase_devices[{{ $idx }}][price]"
                                        class="form-control purchase-device-price"
                                        id="purchase_device_{{ $idx }}_price" min="0" step="0.01"
                                        placeholder="0.00"
                                        value="{{ number_format($existingDevice['price'], 2, '.', '') }}"
                                        {{ $readonly }} {{ $disabled }}>
                                </div>
                            </td>
                            <td>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <button type="button" class="btn btn-outline-secondary qty-decrease"
                                            {{ $disabled }}>-</button>
                                    </div>
                                    <input type="number" name="purchase_devices[{{ $idx }}][quantity]"
                                        class="form-control purchase-device-qty text-center"
                                        id="purchase_device_{{ $idx }}_qty" min="0"
                                        value="{{ $existingDevice['quantity'] }}" {{ $readonly }}
                                        {{ $disabled }}>
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-outline-secondary qty-increase"
                                            {{ $disabled }}>+</button>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div class="form-control-plaintext purchase-device-cost"
                                    id="purchase_device_{{ $idx }}_cost">
                                    ${{ number_format($existingDevice['price'] * $existingDevice['quantity'], 2) }}
                                </div>
                            </td>
                            <td>
                                @if (!$isGuest)
                                    <button type="button" class="btn btn-danger btn-sm remove-purchase-device"
                                        title="Remove">
                                        <i class="mdi mdi-delete"></i>
                                    </button>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                @elseif (!empty($deviceOptions))
                    {{-- Show one empty row with device options if no existing data --}}
                    <tr class="purchase-device-row" data-device-idx="0">
                        <td>
                            <select name="purchase_devices[0][device_id]"
                                class="form-control purchase-device-select select2" id="purchase_device_0_select"
                                {{ $readonly }} {{ $disabled }}>
                                <option value="">Select Product</option>
                                @foreach ($deviceOptions as $device)
                                    @if (!empty($device['options']))
                                        @foreach ($device['options'] as $opt)
                                            @if ($opt['price'] > 0)
                                                @php
                                                    $optionText = $opt['text'] ?? '';
                                                    $cleanText = preg_replace('/\s+-\s+\$[\d\.]+$/', '', $optionText);
                                                @endphp
                                                <option value="{{ $opt['id'] }}"
                                                    data-price="{{ $opt['price'] ?? 0 }}">
                                                    {{ $cleanText }}
                                                </option>
                                            @endif
                                        @endforeach
                                    @endif
                                @endforeach
                            </select>
                        </td>
                        <td>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text dollar-input-white-bg">$</span>
                                </div>
                                <input type="number" name="purchase_devices[0][price]"
                                    class="form-control purchase-device-price" id="purchase_device_0_price"
                                    min="0" step="0.01" placeholder="0.00" {{ $readonly }}
                                    {{ $disabled }}>
                            </div>
                        </td>
                        <td>
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <button type="button" class="btn btn-outline-secondary qty-decrease"
                                        {{ $disabled }}>-</button>
                                </div>
                                <input type="number" name="purchase_devices[0][quantity]"
                                    class="form-control purchase-device-qty text-center" id="purchase_device_0_qty"
                                    min="0" value="1" {{ $readonly }} {{ $disabled }}>
                                <div class="input-group-append">
                                    <button type="button" class="btn btn-outline-secondary qty-increase"
                                        {{ $disabled }}>+</button>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="form-control-plaintext purchase-device-cost" id="purchase_device_0_cost">
                                $0.00
                            </div>
                        </td>
                        <td>
                            @if (!$isGuest)
                                <button type="button" class="btn btn-danger btn-sm remove-purchase-device"
                                    title="Remove">
                                    <i class="mdi mdi-delete"></i>
                                </button>
                            @endif
                        </td>
                    </tr>
                @else
                    <tr>
                        <td colspan="5" class="text-center">No devices available</td>
                    </tr>
                @endif
            </tbody>
            <tfoot>
                <tr class="table-info">
                    <td colspan="3"><strong>Total Monthly Cost:</strong></td>
                    <td><strong id="totalMonthlyCost">$0.00</strong></td>
                    <td></td>
                </tr>
            </tfoot>
        </table>
    </div>

    @if (!$isGuest)
        <div class="mt-3">
            <button type="button" class="btn btn-outline-primary add-purchase-device" id="addPurchaseDevice">
                <i class="mdi mdi-plus"></i> Add Device
            </button>
        </div>
    @endif
</div>