@extends('admin.layouts.app')

@section('title', 'Add order')
@section('crumbs')
    <a href="{{ route('admin.orders.index') }}">Orders</a>
    <span>New</span>
@endsection

@section('content')
    @php
        // validation fail hole ager row gula, na hole ekta faka row
        $rows = old('items', [['product_id' => '', 'qty' => 1]]);
        $area = old('area', 'inside');
    @endphp
    <form method="POST" action="{{ route('admin.orders.store') }}" id="orderForm">
        @csrf

        <div class="grid-2">
            <div>
                <div class="card">
                    <div class="card-head"><h2>Products</h2></div>
                    <div class="card-body">
                        @if ($products->isEmpty())
                            <p class="muted">Stock ache emon kono active product nei. Age product add koro.</p>
                        @endif
                        <div class="order-rows" id="orderRows">
                            @foreach ($rows as $i => $row)
                                <div class="order-row">
                                    <select name="items[{{ $i }}][product_id]" required class="{{ $errors->has("items.$i.product_id") ? 'is-invalid' : '' }}">
                                        <option value="">— Select product —</option>
                                        @foreach ($products as $p)
                                            <option value="{{ $p->id }}" data-price="{{ (float) $p->price }}" data-stock="{{ $p->stock }}" @selected($row['product_id'] == $p->id)>
                                                {{ $p->name }}@if ($p->sku) ({{ $p->sku }})@endif · ৳{{ number_format($p->price) }} · stock {{ $p->stock }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <input type="number" name="items[{{ $i }}][qty]" value="{{ $row['qty'] ?? 1 }}" min="1" required aria-label="Quantity">
                                    <span class="line-total">৳0</span>
                                    <button type="button" class="btn btn-ghost btn-sm" data-row-remove aria-label="Remove">✕</button>
                                </div>
                            @endforeach
                        </div>
                        <button type="button" class="btn btn-ghost btn-sm" id="rowAdd" style="margin-top:10px">+ Add product</button>
                        @error('items') <div class="err" style="margin-top:8px">{{ $message }}</div> @enderror
                        @foreach ($errors->get('items.*') as $msgs) <div class="err">{{ $msgs[0] }}</div> @endforeach
                    </div>
                </div>

                <div class="card">
                    <div class="card-head"><h2>Customer</h2></div>
                    <div class="card-body form-grid">
                        @include('admin.partials.field', ['name' => 'name', 'label' => 'Customer name', 'required' => true])
                        @include('admin.partials.field', ['name' => 'phone', 'label' => 'Phone', 'required' => true, 'placeholder' => '01XXXXXXXXX'])
                        @include('admin.partials.field', ['name' => 'phone_alt', 'label' => 'Alternative phone', 'placeholder' => '01XXXXXXXXX'])
                        <div class="field">
                            <label for="f_area">Delivery area <span class="req">*</span></label>
                            <select id="f_area" name="area" required>
                                <option value="inside" @selected($area === 'inside')>Inside Dhaka</option>
                                <option value="outside" @selected($area === 'outside')>Outside Dhaka</option>
                            </select>
                        </div>
                        <div class="field">
                            <label for="f_city">City (জেলা) <span class="req">*</span></label>
                            @include('partials.bd-location', ['cityId' => 'f_city', 'zoneId' => 'f_zone', 'city' => old('city'), 'part' => 'city', 'class' => $errors->has('city') ? 'is-invalid' : ''])
                            @error('city') <div class="err">{{ $message }}</div> @enderror
                        </div>
                        <div class="field">
                            <label for="f_zone">Zone (থানা) <span class="req">*</span></label>
                            @include('partials.bd-location', ['cityId' => 'f_city', 'zoneId' => 'f_zone', 'zone' => old('zone'), 'part' => 'zone', 'class' => $errors->has('zone') ? 'is-invalid' : ''])
                            @error('zone') <div class="err">{{ $message }}</div> @enderror
                        </div>
                        @include('admin.partials.field', ['name' => 'address', 'label' => 'Full address', 'type' => 'textarea', 'required' => true, 'full' => true, 'rows' => 3])
                        @include('admin.partials.field', ['name' => 'note', 'label' => 'Note', 'type' => 'textarea', 'full' => true, 'rows' => 2, 'placeholder' => 'Size, color ba onno kichu'])
                    </div>
                </div>
            </div>

            <div>
                <div class="card">
                    <div class="card-head"><h2>Payment</h2></div>
                    <div class="card-body form-grid">
                        <div class="field span-2">
                            <label for="f_payment_method">Payment method</label>
                            <select id="f_payment_method" name="payment_method">
                                @foreach (\App\Models\Order::PAYMENT_METHODS as $k => $v)
                                    <option value="{{ $k }}" @selected(old('payment_method', 'cod') === $k)>{{ $v }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="field span-2">
                            <label for="f_payment_status">Payment status</label>
                            <select id="f_payment_status" name="payment_status">
                                <option value="unpaid" @selected(old('payment_status', 'unpaid') === 'unpaid')>Unpaid</option>
                                <option value="paid" @selected(old('payment_status') === 'paid')>Paid</option>
                            </select>
                        </div>
                        @include('admin.partials.field', ['name' => 'shipping', 'label' => 'Delivery charge (৳)', 'type' => 'number', 'value' => $shipping[$area], 'required' => true, 'attrs' => 'min="0" step="1"'])
                        @include('admin.partials.field', ['name' => 'discount', 'label' => 'Discount (৳)', 'type' => 'number', 'value' => 0, 'attrs' => 'min="0" step="1"'])
                    </div>
                    <div class="card-body"><div class="totals" style="max-width:none">
                        <div><span class="muted">Subtotal</span><span id="sumSub">৳0</span></div>
                        <div><span class="muted">Delivery</span><span id="sumShip">৳0</span></div>
                        <div><span class="muted">Discount</span><span id="sumDisc">−৳0</span></div>
                        <div class="grand"><span>Total</span><span id="sumTotal">৳0</span></div>
                    </div>
                    </div>
                    <div class="form-actions">
                        <a href="{{ route('admin.orders.index') }}" class="btn btn-ghost">Cancel</a>
                        <button type="submit" class="btn btn-primary">💾 Create order</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

@push('scripts')
<script>
    // row add / remove + live total (shudhu dekhanor jonno; asol hisab server e)
    (function () {
        var rows = document.getElementById('orderRows');
        var ship = document.getElementById('f_shipping');
        var disc = document.getElementById('f_discount');
        var fees = @json($shipping);
        var next = rows.children.length;
        var tk = function (n) { return '৳' + Math.round(n).toLocaleString('en-US'); };

        function recalc() {
            var sub = 0;
            rows.querySelectorAll('.order-row').forEach(function (r) {
                var opt = r.querySelector('select').selectedOptions[0];
                var qty = r.querySelector('input').value;
                var line = (opt && opt.dataset.price ? +opt.dataset.price : 0) * (+qty || 0);
                r.querySelector('.line-total').textContent = tk(line);
                sub += line;
            });
            var s = +ship.value || 0, d = +disc.value || 0;
            document.getElementById('sumSub').textContent = tk(sub);
            document.getElementById('sumShip').textContent = tk(s);
            document.getElementById('sumDisc').textContent = '−' + tk(d);
            document.getElementById('sumTotal').textContent = tk(Math.max(0, sub + s - d));
        }

        document.getElementById('rowAdd').addEventListener('click', function () {
            var row = rows.querySelector('.order-row').cloneNode(true);
            row.querySelector('select').name = 'items[' + next + '][product_id]';
            row.querySelector('select').value = '';
            row.querySelector('select').classList.remove('is-invalid');
            row.querySelector('input').name = 'items[' + next + '][qty]';
            row.querySelector('input').value = 1;
            next++;
            rows.appendChild(row);
            recalc();
        });
        rows.addEventListener('click', function (e) {
            if (!e.target.closest('[data-row-remove]')) return;
            if (rows.children.length > 1) e.target.closest('.order-row').remove();
            recalc();
        });
        rows.addEventListener('change', function (e) {
            // qty stock er beshi na
            var r = e.target.closest('.order-row'), opt = r.querySelector('select').selectedOptions[0];
            if (opt && opt.dataset.stock) r.querySelector('input').max = opt.dataset.stock;
            recalc();
        });
        rows.addEventListener('input', recalc);
        document.getElementById('f_area').addEventListener('change', function () { ship.value = fees[this.value]; recalc(); });
        ship.addEventListener('input', recalc);
        disc.addEventListener('input', recalc);
        recalc();
    })();
</script>
@endpush