@extends('layouts.app')
@php
    $editing = $order->exists;
    // Rows to render: what was just submitted (after an error) or the saved items.
    $rows = old('items') ?? $items->map(fn ($i) => [
        'design_name' => $i->design_name, 'material' => $i->material, 'color' => $i->color,
        'length' => $i->length !== null ? (float) $i->length : null, 'width' => $i->width !== null ? (float) $i->width : null,
        'dimension_unit' => $i->dimension_unit ?: 'ft', 'quantity' => (int) $i->quantity, 'pricing' => $i->pricing ?: 'piece', 'unit_price' => $i->unit_price + 0,
        // legacy rows that only have an area and no length × width
        'legacy_area' => ($i->length === null && $i->area_sqft !== null) ? (float) $i->area_sqft : null,
    ])->all();
    $rows = array_values($rows);
    $formData = [
        'rows' => $rows,
        'designs' => $designs,
        'errors' => $errors->messages(),
        'isEdit' => $editing,
        'originalClient' => $editing ? $order->client_id : null,
        'originalTotal' => $editing && ! $order->isCancelled() ? (float) $order->total : 0,
        'creditError' => $errors->has('confirm_credit'),
        'units' => \App\Models\OrderItem::DIMENSION_UNITS,
    ];
    $presets = ['3x5' => '3 × 5 ft', '4x6' => '4 × 6 ft', '5x8' => '5 × 8 ft', '6x9' => '6 × 9 ft', '8x10' => '8 × 10 ft', '9x12' => '9 × 12 ft', '2.5x10' => '2.5 × 10 ft (runner)', '2x6' => '2 × 6 ft (runner)'];
@endphp
@section('title', $editing ? 'Edit '.$order->order_no : 'New order')

@section('content')
<x-page-header :title="$editing ? 'Edit order '.$order->order_no : 'New order'" :subtitle="$editing ? $order->client->name : 'Create an order for a client'" />

<form method="POST" action="{{ $editing ? route('orders.update', $order) : route('orders.store') }}" id="order-form" data-validate novalidate>
    @csrf
    @if ($editing) @method('PUT') @endif
    @include('partials.error-summary')

    <x-form-section title="Order details" icon="bag-check">
        <x-field name="order_no" data-live label="Order no." :value="$order->order_no" col="3" required maxlength="50" />
        <div class="col-12 col-md-5 field">
            <div class="d-flex justify-content-between align-items-baseline">
                <label for="client_id" class="form-label">Client<span class="req" aria-hidden="true">*</span></label>
                @can('clients.create')
                <button type="button" class="btn btn-link btn-sm p-0 mb-1 text-decoration-none fw-semibold" data-quick-add="client" data-target="#client_id" data-no-lock aria-label="Add a new client"><i class="bi bi-plus-circle" aria-hidden="true"></i> New</button>
                @endcan
            </div>
            <select id="client_id" name="client_id" required data-ts data-placeholder="Search clients…" data-label="Client" class="form-select {{ $errors->has('client_id') ? 'is-invalid' : '' }}">
                <option value="">Select client…</option>
                @foreach ($clients as $c)
                    <option value="{{ $c->id }}" data-name="{{ $c->name }}" data-address="{{ $c->shipping_address ?: $c->billing_address }}"
                            data-balance="{{ round($c->balance(), 2) }}" data-credit="{{ (float) $c->credit_limit }}"
                            @selected(old('client_id', $order->client_id) == $c->id)>{{ $c->name }}{{ $c->city ? ' · '.$c->city : '' }}</option>
                @endforeach
            </select>
            <div class="form-text" id="client-hint" aria-live="polite"></div>
            <div class="invalid-feedback {{ $errors->has('client_id') ? 'is-visible' : '' }}">{{ $errors->first('client_id') }}</div>
        </div>
        <x-select name="status" label="Status" col="4" required>
            @foreach (\App\Models\Order::STATUSES as $key => [$label])<option value="{{ $key }}" @selected(old('status', $order->status) === $key)>{{ $label }}</option>@endforeach
        </x-select>
        <x-field name="order_date" type="date" label="Order date" col="3" :value="$order->order_date?->format('Y-m-d')" required />
        <x-field name="delivery_date" type="date" label="Expected delivery" col="3" :value="$order->delivery_date?->format('Y-m-d')"
                 data-not-before="#order_date" data-not-before-message="Delivery date cannot be earlier than the order date." />
        <x-textarea name="shipping_address" label="Shipping address" col="6" rows="2" :value="$order->shipping_address" maxlength="1000" hint="Filled from the client's address — change it if this order ships elsewhere." />

        <div class="col-12" id="credit-box" hidden>
            <div class="confirm-box d-flex gap-3 align-items-start">
                <i class="bi bi-exclamation-triangle-fill text-warning fs-5" aria-hidden="true"></i>
                <div class="flex-grow-1">
                    <div class="fw-semibold">Credit limit exceeded</div>
                    <div class="small mb-2" id="credit-text">{{ $errors->first('confirm_credit') }}</div>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="confirm_credit" name="confirm_credit" value="1" @checked(old('confirm_credit'))>
                        <label class="form-check-label" for="confirm_credit">I understand — create this order anyway</label>
                    </div>
                </div>
            </div>
        </div>
    </x-form-section>

    <section class="card form-section">
        <div class="card-header flex-wrap">
            <div>
                <span class="card-title"><i class="bi bi-grid-3x3-gap section-icon" aria-hidden="true"></i>Items</span>
                <div class="card-sub">Size is length × width in feet (change the unit if you need to). Price each item per piece or per sq ft.</div>
            </div>
            <div class="items-summary" aria-live="polite">
                <span class="chip-stat"><i class="bi bi-layers" aria-hidden="true"></i><b id="s-items">0</b> items</span>
                <span class="chip-stat"><i class="bi bi-box-seam" aria-hidden="true"></i><b id="s-pieces">0</b> pcs</span>
                <span class="chip-stat"><i class="bi bi-bounding-box" aria-hidden="true"></i><b id="s-area">0</b> sq ft</span>
            </div>
        </div>
        <div class="card-body">
            <div id="items-body"></div>
            @error('items')<div class="text-danger small mb-2"><i class="bi bi-exclamation-circle me-1"></i>{{ $message }}</div>@enderror
            <button type="button" class="add-item-btn" id="add-item" data-no-lock><i class="bi bi-plus-lg" aria-hidden="true"></i> Add another item</button>
        </div>
    </section>

    <div class="row g-3">
        <div class="col-lg-7">
            <x-form-section title="Notes" icon="journal-text">
                <x-textarea name="notes" label="Internal notes" col="12" rows="4" :value="$order->notes" maxlength="2000" />
            @include('partials.assign-to', ['value' => $order->assigned_to])
            </x-form-section>
        </div>
        <div class="col-lg-5">
            <section class="card form-section">
                <div class="card-header"><span class="card-title"><i class="bi bi-calculator section-icon" aria-hidden="true"></i>Summary</span></div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-1 text-muted small"><span>Pieces · total area</span><span><span id="t-pieces" class="tabular">0</span> pcs · <span id="t-area" class="tabular">0</span> sq ft</span></div>
                    <div class="d-flex justify-content-between mb-2 mt-2"><span class="text-muted">Subtotal</span><span id="t-subtotal" class="num tabular">0.00</span></div>
                    <div class="d-flex justify-content-between align-items-start gap-3 mb-2 field">
                        <label for="discount" class="form-label mb-0 pt-2 text-muted fw-normal">Discount</label>
                        <div style="width:170px">
                            <div class="input-group input-group-sm {{ $errors->has('discount') ? 'has-invalid' : '' }}">
                                <span class="input-group-text">{{ config('erp.currency') }}</span>
                                <input type="text" id="discount" name="discount" data-money data-min="0" data-label="Discount" value="{{ old('discount', $order->discount + 0) }}" class="form-control text-end {{ $errors->has('discount') ? 'is-invalid' : '' }}">
                            </div>
                            <div class="invalid-feedback {{ $errors->has('discount') ? 'is-visible' : '' }}">{{ $errors->first('discount') }}</div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center gap-3 mb-2 field">
                        <label for="tax_percent" class="form-label mb-0 text-muted fw-normal">{{ config('erp.tax_label') }} rate</label>
                        <div class="input-group input-group-sm" style="width:170px">
                            <input type="number" step="0.01" min="0" max="100" id="tax_percent" name="tax_percent" data-label="{{ config('erp.tax_label') }} rate" value="{{ old('tax_percent', $order->tax_percent + 0) }}" class="form-control text-end {{ $errors->has('tax_percent') ? 'is-invalid' : '' }}">
                            <span class="input-group-text">%</span>
                        </div>
                    </div>
                    <div class="d-flex justify-content-between text-muted mb-1"><span>Discount applied</span><span id="t-discount" class="num tabular">0.00</span></div>
                    <div class="d-flex justify-content-between text-muted"><span>{{ config('erp.tax_label') }}</span><span id="t-tax" class="num tabular">0.00</span></div>
                    <hr>
                    <div class="d-flex justify-content-between align-items-baseline"><span class="fw-semibold">Total</span><span id="t-total" class="stat-value">0.00</span></div>
                </div>
            </section>
        </div>
    </div>

    <div class="form-actions">
        <a href="{{ $editing ? route('orders.show', $order) : route('orders.index') }}" class="btn btn-ghost">Cancel</a>
        <span class="dirty-note"><i class="bi bi-circle-fill text-warning" style="font-size:.5rem"></i> Unsaved changes</span>
        <span class="spacer"></span>
        <button class="btn btn-primary">{{ $editing ? 'Save changes' : 'Create order' }}</button>
    </div>
</form>

<template id="item-template">
    <div class="item-card item-row">
        <div class="item-head">
            <span class="item-no">Item <span class="row-no">1</span></span>
            <span class="item-filled small text-primary" hidden><i class="bi bi-magic" aria-hidden="true"></i> Filled from your last order of this design</span>
            <div class="ms-auto d-flex gap-1">
                <button type="button" class="icon-btn duplicate-item" aria-label="Duplicate this item" title="Duplicate" data-no-lock><i class="bi bi-copy" aria-hidden="true"></i></button>
                <button type="button" class="icon-btn remove-item" aria-label="Remove this item" title="Remove" data-no-lock><i class="bi bi-x-lg" aria-hidden="true"></i></button>
            </div>
        </div>

        <div class="row g-3">
            <div class="col-12 col-lg-5 field">
                <label class="form-label">Design<span class="req" aria-hidden="true">*</span></label>
                <input type="text" data-f="design_name" data-label="Design name" class="form-control" list="designs" maxlength="255" required autocomplete="off" placeholder="e.g. Persian Medallion">
                <div class="invalid-feedback"></div>
            </div>
            <div class="col-6 col-lg-3 field">
                <label class="form-label">Material</label>
                <input type="text" data-f="material" data-label="Material" class="form-control" list="materials" maxlength="100" placeholder="Wool, silk…">
                <div class="invalid-feedback"></div>
            </div>
            <div class="col-6 col-lg-4 field">
                <label class="form-label">Colour</label>
                <input type="text" data-f="color" data-label="Colour" class="form-control" maxlength="100">
                <div class="invalid-feedback"></div>
            </div>

            <div class="col-12 col-lg-5 field">
                <div class="d-flex justify-content-between align-items-baseline">
                    <label class="form-label">Size <span class="text-muted fw-normal">(length × width)</span></label>
                    <select class="quick-size" aria-label="Pick a common size" data-no-lock>
                        <option value="">Common sizes…</option>
                        @foreach ($presets as $v => $l)<option value="{{ $v }}">{{ $l }}</option>@endforeach
                    </select>
                </div>
                <div class="input-group size-group">
                    <input type="number" data-f="length" data-label="Length" class="form-control" step="0.01" min="0.01" max="100000" inputmode="decimal" placeholder="Length" aria-label="Length">
                    <span class="input-group-text px-2">×</span>
                    <input type="number" data-f="width" data-label="Width" class="form-control" step="0.01" min="0.01" max="100000" inputmode="decimal" placeholder="Width" aria-label="Width">
                    <select data-f="dimension_unit" data-label="Unit" class="form-select unit-select" aria-label="Size unit">
                        @foreach (array_keys(\App\Models\OrderItem::DIMENSION_UNITS) as $u)<option value="{{ $u }}" @selected($u === 'ft')>{{ $u }}</option>@endforeach
                    </select>
                </div>
                <div class="form-text area-note" aria-live="polite">Add length and width to get the area.</div>
                <div class="invalid-feedback"></div>
            </div>
            <div class="col-4 col-lg-2 field">
                <label class="form-label">Pieces<span class="req" aria-hidden="true">*</span></label>
                <input type="number" data-f="quantity" data-label="Pieces" class="form-control" step="1" min="1" max="99999" required inputmode="numeric">
                <div class="invalid-feedback"></div>
            </div>
            <div class="col-8 col-lg-2 field">
                <label class="form-label">Priced</label>
                <select data-f="pricing" data-label="Pricing" class="form-select">
                    @foreach (\App\Models\OrderItem::PRICING as $k => $l)<option value="{{ $k }}">{{ ucfirst($l) }}</option>@endforeach
                </select>
            </div>
            <div class="col-12 col-lg-3 field">
                <label class="form-label">Rate<span class="req" aria-hidden="true">*</span></label>
                <div class="input-group">
                    <span class="input-group-text">{{ config('erp.currency') }}</span>
                    <input type="number" data-f="unit_price" data-label="Rate" class="form-control" step="0.01" min="0" required inputmode="decimal">
                    <span class="input-group-text rate-suffix">/ pc</span>
                </div>
                <div class="invalid-feedback"></div>
            </div>
        </div>

        <div class="item-foot">
            <div class="line-note text-muted small"></div>
            <div class="line-total tabular">0.00</div>
        </div>
    </div>
</template>
<datalist id="materials"><option value="Wool"><option value="Silk"><option value="Wool-Silk"><option value="Cotton"><option value="Jute"><option value="Polyester"><option value="Viscose"></datalist>
<datalist id="designs">@foreach ($designs as $d)<option value="{{ $d['design_name'] }}">@endforeach</datalist>
<script type="application/json" id="order-data">@json($formData)</script>
@endsection

@push('modals') @include('partials.quick-add', ['type' => 'client']) @endpush