@extends('frontend::layouts.master')

@php
    $pageError = $pageError ?? session('error');
@endphp

@push('styles')
    <style>
        .pharmacist-assisted-qty input[type="number"] {
            text-align: center !important;
            line-height: 2rem !important;
            height: 2rem;
            padding: 0 !important;
        }

        .pharmacist-assisted-qty input[type="number"]::-webkit-inner-spin-button,
        .pharmacist-assisted-qty input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .pharmacist-assisted-qty input[type="number"] {
            -moz-appearance: textfield;
        }
    </style>
@endpush

@section('content')
    <div class="bg-med-gray min-h-screen">
        <div class="container mx-auto px-6 py-12">
            <div class="max-w-4xl mx-auto space-y-6">
                <div class="text-center">
                    <h1 class="text-2xl md:text-3xl font-bold text-gray-800">{{ __('frontend::lang.pharmacist_assisted.title') }}</h1>
                    <p class="text-gray-500 mt-2">{{ __('frontend::lang.pharmacist_assisted.desc') }}</p>
                </div>

                @if (!empty($pageError))
                    <div class="bg-red-50 border border-red-200 text-red-700 rounded-xl px-4 py-4 text-sm md:text-base text-center font-medium" role="alert">
                        {{ $pageError }}
                    </div>
                    <div class="flex justify-center">
                        <a class="inline-flex items-center justify-center px-8 py-3 rounded-full border border-gray-300 text-gray-600 font-semibold hover:bg-gray-50 transition-colors" href="{{ mwz_route('frontend.index') }}">
                            {{ __('frontend::lang.btn.back') }}
                        </a>
                    </div>
                @else
                    @if (!empty($link->notes))
                        <div class="bg-blue-50 border border-blue-100 text-blue-800 rounded-xl px-4 py-3 text-sm">
                            {{ $link->notes }}
                        </div>
                    @endif

                    <div id="pharmacist-assisted-inline-error" class="hidden bg-red-50 border border-red-200 text-red-700 rounded-xl px-4 py-3 text-sm text-center font-medium" role="alert"></div>

                    <form id="pharmacist-assisted-form" action="{{ mwz_route('frontend.pharmacist_assisted_add_to_cart', ['token' => $token]) }}" method="POST">
                        @csrf
                        <input id="items_json" name="items_json" type="hidden" value="">

                        <div class="space-y-4" id="pharmacist-assisted-items">
                            @foreach ($items as $index => $item)
                                <div class="bg-med-white p-4 rounded-xl shadow-sm border border-transparent hover:border-med-secondary transition-all flex flex-col sm:flex-row items-center gap-4 pharmacist-assisted-row" data-index="{{ $index }}">
                                    <div class="w-24 h-24 bg-gray-100 rounded-md flex items-center justify-center text-gray-400 flex-shrink-0 overflow-hidden">
                                        @if (!empty($item['image']))
                                            <img class="w-full h-full object-cover" src="{{ asset($item['image']) }}" alt="{{ $item['name'] }}">
                                        @else
                                            <i class="fa-solid fa-box text-2xl"></i>
                                        @endif
                                    </div>
                                    <div class="flex-grow text-center sm:text-left">
                                        <h3 class="font-bold text-lg">{{ $item['name'] }}</h3>
                                        @if (!empty($item['sku']))
                                            <p class="text-sm text-gray-500">{{ $item['sku'] }}</p>
                                        @endif
                                        <div class="mt-1">
                                            <span class="text-med-primary font-bold">{{ $item['price'] }} {{ __('frontend::lang.label.baht') }}</span>
                                        </div>
                                        <p class="text-xs text-gray-400 mt-0.5">{{ __('frontend::lang.label.remaining') }}: {{ $item['stock'] }}</p>
                                    </div>
                                    <div class="flex items-center gap-3">
                                        <div class="flex items-center border border-gray-300 rounded-lg pharmacist-assisted-qty">
                                            <button class="px-3 py-1 hover:bg-gray-100 rounded-l-lg js-qty-minus" type="button">-</button>
                                            <input class="w-12 h-8 text-center text-sm focus:outline-none js-qty-input" type="number" value="{{ $item['qty'] }}" min="1" max="{{ $item['stock'] }}" data-product-id="{{ $item['product_id'] }}" data-product-name="{{ $item['name'] }}" data-product-sku="{{ $item['sku'] }}" data-product-stock="{{ $item['stock'] }}">
                                            <button class="px-3 py-1 hover:bg-gray-100 rounded-r-lg js-qty-plus" type="button">+</button>
                                        </div>
                                        <button class="text-gray-400 hover:text-red-500 transition-colors js-remove-item" type="button" title="{{ __('frontend::lang.btn.delete') }}">
                                            <i class="fa-solid fa-trash-can"></i>
                                        </button>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <div class="mt-8 flex flex-col sm:flex-row gap-3 justify-center">
                            <a class="inline-flex items-center justify-center px-8 py-3 rounded-full border border-gray-300 text-gray-600 font-semibold hover:bg-gray-50 transition-colors" href="{{ mwz_route('frontend.index') }}">
                                {{ __('frontend::lang.btn.back') }}
                            </a>
                            <button class="inline-flex items-center justify-center px-8 py-3 rounded-full bg-med-primary hover:bg-med-secondary text-white font-bold shadow-md transition-colors" id="pharmacist-assisted-submit" type="submit">
                                {{ __('frontend::lang.pharmacist_assisted.add_to_cart') }}
                                <i class="fa-solid fa-cart-shopping ms-2"></i>
                            </button>
                        </div>
                    </form>
                @endif
            </div>
        </div>
    </div>
@endsection

@if (empty($pageError))
@push('scripts')
    <script>
        (function () {
            const form = document.getElementById('pharmacist-assisted-form');
            const itemsJsonInput = document.getElementById('items_json');
            const itemsContainer = document.getElementById('pharmacist-assisted-items');
            const inlineError = document.getElementById('pharmacist-assisted-inline-error');
            const noItemsMessage = @json(__('frontend::lang.pharmacist_assisted.no_items_selected'));

            function showInlineError(message) {
                if (!inlineError) {
                    return;
                }
                inlineError.textContent = message;
                inlineError.classList.remove('hidden');
            }

            function hideInlineError() {
                if (!inlineError) {
                    return;
                }
                inlineError.textContent = '';
                inlineError.classList.add('hidden');
            }

            function collectItems() {
                const items = [];
                itemsContainer.querySelectorAll('.pharmacist-assisted-row').forEach((row) => {
                    const input = row.querySelector('.js-qty-input');
                    if (!input) {
                        return;
                    }

                    const qty = parseInt(input.value || '0', 10);
                    if (qty <= 0) {
                        return;
                    }

                    items.push({
                        product_id: parseInt(input.dataset.productId || '0', 10),
                        qty: qty,
                    });
                });

                return items;
            }

            function syncItemsInput() {
                itemsJsonInput.value = JSON.stringify(collectItems());
            }

            function clampQty(input, delta = 0) {
                const stock = parseInt(input.dataset.productStock || '0', 10);
                const next = parseInt(input.value || '1', 10) + delta;
                const clamped = Math.max(1, Math.min(stock, next));
                input.value = clamped;
                syncItemsInput();
            }

            itemsContainer.addEventListener('click', (event) => {
                const row = event.target.closest('.pharmacist-assisted-row');
                if (!row) {
                    return;
                }

                const input = row.querySelector('.js-qty-input');

                if (event.target.closest('.js-qty-minus')) {
                    clampQty(input, -1);
                    return;
                }

                if (event.target.closest('.js-qty-plus')) {
                    clampQty(input, 1);
                    return;
                }

                if (event.target.closest('.js-remove-item')) {
                    row.remove();
                    if (!itemsContainer.querySelector('.pharmacist-assisted-row')) {
                        itemsContainer.innerHTML = `<div class="bg-med-white p-8 rounded-xl text-center text-gray-500">${noItemsMessage}</div>`;
                    }
                    syncItemsInput();
                }
            });

            itemsContainer.addEventListener('input', (event) => {
                if (!event.target.classList.contains('js-qty-input')) {
                    return;
                }

                clampQty(event.target, 0);
            });

            form.addEventListener('submit', (event) => {
                hideInlineError();
                syncItemsInput();
                const items = collectItems();
                if (!items.length) {
                    event.preventDefault();
                    showInlineError(noItemsMessage);
                }
            });

            syncItemsInput();
        })();
    </script>
@endpush
@endif