@extends('public.layout.app')
@section('title','Online Order | PACHA PAINTS')

@section('body')
<section class="hero">
    <div class="container">
        <div class="d-flex flex-wrap justify-content-between align-items-end gap-2 mb-3">
            <div>
                <div class="pill"><i class="fa-solid fa-bag-shopping brand-dot"></i> Online Order</div>
                <h2 class="fw-bold mt-2 mb-0">Place your order</h2>
                <div class="muted">Choose products and quantities. We’ll confirm by phone.</div>
            </div>
            <a class="btn btn-outline-brand" href="{{ route('front.products') }}">
                <i class="fa-solid fa-bucket me-1"></i> Browse Products
            </a>
        </div>

        @if(session('success'))
            <div class="alert alert-success cardx p-3 border-0">{{ session('success') }}</div>
        @endif

        <div class="row g-3">
            <div class="col-lg-7">
                <div class="cardx p-3">
                    <div class="fw-bold mb-2">Select Items</div>

                    <div class="row g-2">
                        @foreach($products as $p)
                            <div class="col-md-6">
                                <div class="cardx p-3 h-100" style="box-shadow:none">
                                    <div class="d-flex gap-2">
                                        <img src="{{ $p['img'] }}" style="width:84px;height:84px;object-fit:cover;border-radius:14px;border:1px solid rgba(37,32,34,.12)" alt="">
                                        <div class="flex-grow-1">
                                            <div class="fw-semibold">{{ $p['title'] }}</div>
                                            <div class="muted small">{{ $p['code'] }} • {{ $p['sizes'] }}</div>

                                            <div class="d-flex align-items-center gap-2 mt-2">
                                                <label class="small muted mb-0">Qty</label>
                                                <input class="form-control form-control-sm qty"
                                                       data-slug="{{ $p['slug'] }}"
                                                       data-title="{{ $p['title'] }}"
                                                       type="number" min="0" value="0" style="max-width:110px">
                                                <button class="btn btn-outline-brand btn-sm addBtn"
                                                        type="button"
                                                        data-slug="{{ $p['slug'] }}"
                                                        data-title="{{ $p['title'] }}">
                                                    <i class="fa-solid fa-plus"></i>
                                                </button>
                                                <a class="btn btn-outline-secondary btn-sm" href="{{ route('front.products.show',$p['slug']) }}">
                                                    Details
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="muted small mt-3">
                        * Qty د لیټر/ډبه/بالټۍ په اساس تنظیم کړئ (ستاسو د سیستم مطابق).
                    </div>
                </div>
            </div>

            <div class="col-lg-5">
                <div class="cardx p-3">
                    <div class="fw-bold mb-2">Customer Details</div>

                    <form method="POST" action="{{ route('front.order.store') }}" id="orderForm">
                        @csrf

                        <input type="hidden" name="items_json" id="items_json">

                        <div class="row g-2">
                            <div class="col-12">
                                <label class="small muted">Full Name</label>
                                <input class="form-control" name="customer_name" required value="{{ old('customer_name') }}">
                            </div>
                            <div class="col-12">
                                <label class="small muted">Phone</label>
                                <input class="form-control" name="phone" required value="{{ old('phone') }}">
                            </div>
                            <div class="col-12">
                                <label class="small muted">Address</label>
                                <textarea class="form-control" name="address" rows="3" required>{{ old('address') }}</textarea>
                            </div>

                            <div class="col-12">
                                <div class="cardx p-3" style="box-shadow:none">
                                    <div class="fw-semibold">Order Summary</div>
                                    <div class="muted small">Selected items will appear here.</div>
                                    <div id="summary" class="mt-2"></div>
                                </div>
                            </div>

                            <div class="col-12 d-flex gap-2">
                                <button class="btn btn-brand w-100" type="submit">
                                    <i class="fa-solid fa-check me-1"></i> Submit Order
                                </button>
                                <button class="btn btn-outline-secondary w-100" type="button" id="clearBtn">
                                    Clear
                                </button>
                            </div>

                            <div class="col-12 muted small">
                                * Payment integration وروسته اضافه کېدای شي (Cash on delivery / bank transfer).
                            </div>
                        </div>
                    </form>

                    {{-- Hidden real inputs for items --}}
                    <div id="hiddenItems"></div>
                </div>
            </div>
        </div>
    </div>
</section>

@push('scripts')
<script>
(function(){
    const summary = document.getElementById('summary');
    const hiddenItems = document.getElementById('hiddenItems');
    const clearBtn = document.getElementById('clearBtn');
    const orderForm = document.getElementById('orderForm');

    function rebuild(){
        summary.innerHTML = '';
        hiddenItems.innerHTML = '';

        const qtyInputs = document.querySelectorAll('.qty');
        let items = [];

        qtyInputs.forEach(inp=>{
            const qty = parseInt(inp.value || 0,10);
            if(qty > 0){
                items.push({slug: inp.dataset.slug, title: inp.dataset.title, qty});
            }
        });

        if(items.length === 0){
            summary.innerHTML = `<div class="muted small">No items selected.</div>`;
        }else{
            items.forEach((it,idx)=>{
                summary.innerHTML += `
                    <div class="d-flex justify-content-between align-items-center border-bottom py-2">
                        <div>
                            <div class="fw-semibold">${it.title}</div>
                            <div class="muted small">${it.slug}</div>
                        </div>
                        <div class="pill"><i class="fa-solid fa-box brand-dot"></i> Qty: ${it.qty}</div>
                    </div>
                `;

                hiddenItems.innerHTML += `
                    <input type="hidden" name="items[${idx}][slug]" value="${it.slug}">
                    <input type="hidden" name="items[${idx}][qty]" value="${it.qty}">
                `;
            });
        }
    }

    document.querySelectorAll('.qty').forEach(inp=>{
        inp.addEventListener('input', rebuild);
    });

    document.querySelectorAll('.addBtn').forEach(btn=>{
        btn.addEventListener('click', ()=>{
            const inp = document.querySelector(`.qty[data-slug="${btn.dataset.slug}"]`);
            inp.value = (parseInt(inp.value||0,10) + 1);
            rebuild();
        });
    });

    clearBtn.addEventListener('click', ()=>{
        document.querySelectorAll('.qty').forEach(i=>i.value=0);
        rebuild();
    });

    orderForm.addEventListener('submit', (e)=>{
        const hasAny = Array.from(document.querySelectorAll('.qty')).some(i => parseInt(i.value||0,10) > 0);
        if(!hasAny){
            e.preventDefault();
            alert('مهرباني وکړئ لږ تر لږه یو محصول انتخاب کړئ.');
        }
    });

    rebuild();
})();
</script>
@endpush
@endsection