@php($order = $order ?? null)

<style>
.form-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}
.form-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 18px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 10px;
}
.form-card-title svg {
    color: var(--color-brand);
}
.form-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.form-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 992px) {
    .form-grid-3, .form-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .form-grid-2, .form-grid-3, .form-grid-4 { grid-template-columns: 1fr; }
}

.form-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-muted);
}
.form-label span.req {
    color: var(--color-danger);
    margin-left: 2px;
}
.form-control {
    width: 100%;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    padding: 10px 12px;
    font-size: 0.9rem;
    color: var(--color-text);
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px var(--color-brand-soft);
}
select.form-control:not([multiple]) {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 32px;
}

.form-actions-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
}
</style>

<div style="max-width: 1200px; margin: 0 auto;">

    {{-- Card 1: Order & Project Information --}}
    <div class="form-card">
        <div class="form-card-title">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
            Order Information
        </div>
        <div class="form-grid-3">
            <label class="form-label">
                <span>Project<span class="req">*</span></span>
                <select name="project_id" id="project_select" class="form-control @error('project_id') field-invalid @enderror" required>
                    @foreach ($projects as $project)
                        <option value="{{ $project->id }}" data-products="{{ $project->product_name ?? '' }}" data-amount="{{ $project->amount ?? '0.00' }}" @selected((string) old('project_id', $order->project_id ?? '') === (string) $project->id)>{{ $project->name }}</option>
                    @endforeach
                </select>
                @error('project_id')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <label class="form-label">
                <span>Order Number<span class="req">*</span></span>
                <input class="form-control @error('order_number') field-invalid @enderror" type="text" name="order_number" value="{{ old('order_number', $order->order_number ?? '') }}" placeholder="e.g. ORD-2026-1001" required>
                @error('order_number')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <label class="form-label">
                <span>Order Date<span class="req">*</span></span>
                <input class="form-control @error('order_date') field-invalid @enderror" type="date" name="order_date" value="{{ old('order_date', isset($order->order_date) ? \Illuminate\Support\Carbon::parse($order->order_date)->format('Y-m-d') : date('Y-m-d')) }}" required>
                @error('order_date')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <label class="form-label">
                <span>Order Item<span class="req">*</span></span>
                <select name="items[0][product_name]" id="product_select" class="form-control @error('items.0.product_name') field-invalid @enderror" required>
                    <!-- Populated dynamically by JS -->
                </select>
                @error('items.0.product_name')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <label class="form-label">
                <span>Order Amount (₹)<span class="req">*</span></span>
                <input class="form-control @error('amount') field-invalid @enderror" type="number" step="0.01" name="amount" id="amount_input" value="{{ old('amount', isset($order->amount) ? floatval($order->amount) : '') }}" placeholder="e.g. 1000.00" required min="0">
                @error('amount')<small class="input-error">{{ $message }}</small>@enderror
            </label>
        </div>

        {{-- Hidden Item Inputs --}}
        <input type="hidden" name="items[0][sku]" value="">
        <input type="hidden" name="items[0][quantity]" value="1">
        <input type="hidden" name="items[0][unit_price]" id="item_unit_price" value="0.00">
        <input type="hidden" name="items[0][line_total]" id="item_line_total" value="0.00">
    </div>

    {{-- Card 2: Customer Information --}}
    <div class="form-card">
        <div class="form-card-title">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
            Customer Details
        </div>
        <div class="form-grid-3">
            <label class="form-label">
                <span>Customer Name<span class="req">*</span></span>
                <input class="form-control @error('customer_name') field-invalid @enderror" type="text" name="customer_name" value="{{ old('customer_name', $order->customer_name ?? '') }}" placeholder="e.g. John Doe" required>
                @error('customer_name')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <label class="form-label">
                <span>Customer Email</span>
                <input class="form-control @error('customer_email') field-invalid @enderror" type="email" name="customer_email" value="{{ old('customer_email', $order->customer_email ?? '') }}" placeholder="customer@example.com">
                @error('customer_email')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <label class="form-label">
                <span>Customer Phone</span>
                <input class="form-control @error('customer_phone') field-invalid @enderror" type="text" name="customer_phone" value="{{ old('customer_phone', $order->customer_phone ?? '') }}" placeholder="+91 9876543210">
                @error('customer_phone')<small class="input-error">{{ $message }}</small>@enderror
            </label>
        </div>
    </div>

    {{-- Card 3: Parcel & Dimensions --}}
    <div class="form-card">
        <div class="form-card-title">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
            Parcel & Dimensions
        </div>
        <div class="form-grid-4">
            <label class="form-label">
                <span>Length (cm)<span class="req">*</span></span>
                <input class="form-control @error('length') field-invalid @enderror" type="number" step="0.01" name="length" value="{{ old('length', $order->length ?? '') }}" placeholder="e.g. 10.00" required min="0.01">
                @error('length')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <label class="form-label">
                <span>Width (cm)<span class="req">*</span></span>
                <input class="form-control @error('width') field-invalid @enderror" type="number" step="0.01" name="width" value="{{ old('width', $order->width ?? '') }}" placeholder="e.g. 10.00" required min="0.01">
                @error('width')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <label class="form-label">
                <span>Height (cm)<span class="req">*</span></span>
                <input class="form-control @error('height') field-invalid @enderror" type="number" step="0.01" name="height" value="{{ old('height', $order->height ?? '') }}" placeholder="e.g. 10.00" required min="0.01">
                @error('height')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <label class="form-label">
                <span>Weight (grams)<span class="req">*</span></span>
                <input class="form-control @error('weight') field-invalid @enderror" type="number" step="1" name="weight" value="{{ old('weight', $order->weight ?? '') }}" placeholder="e.g. 500" required min="1">
                @error('weight')<small class="input-error">{{ $message }}</small>@enderror
            </label>
        </div>
    </div>

    {{-- Card 4: Delivery & Address --}}
    <div class="form-card">
        <div class="form-card-title">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
            Delivery & Address
        </div>
        <div class="form-grid-2" style="margin-bottom: 16px;">
            <label class="form-label">
                <span>City</span>
                <input class="form-control @error('city') field-invalid @enderror" type="text" name="city" value="{{ old('city', $order->city ?? '') }}" placeholder="e.g. Mumbai">
                @error('city')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <label class="form-label">
                <span>Pincode</span>
                <input class="form-control @error('pincode') field-invalid @enderror" type="text" name="pincode" value="{{ old('pincode', $order->pincode ?? '') }}" placeholder="e.g. 400001">
                @error('pincode')<small class="input-error">{{ $message }}</small>@enderror
            </label>
        </div>
        <div class="form-grid-2">
            <label class="form-label">
                <span>Shipping Address</span>
                <textarea class="form-control @error('shipping_address') field-invalid @enderror" name="shipping_address" rows="3" placeholder="Full street address, building, landmark...">{{ old('shipping_address', $order->shipping_address ?? '') }}</textarea>
                @error('shipping_address')<small class="input-error">{{ $message }}</small>@enderror
            </label>

            <label class="form-label">
                <span>Billing Address</span>
                <textarea class="form-control @error('billing_address') field-invalid @enderror" name="billing_address" rows="3" placeholder="Billing address if different from shipping address...">{{ old('billing_address', $order->billing_address ?? '') }}</textarea>
                @error('billing_address')<small class="input-error">{{ $message }}</small>@enderror
            </label>
        </div>
    </div>

    {{-- Card 5: Notes --}}
    <div class="form-card">
        <div class="form-card-title">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5Z"/></svg>
            Special Instructions & Notes
        </div>
        <label class="form-label">
            <span>Notes</span>
            <textarea class="form-control @error('notes') field-invalid @enderror" name="notes" rows="3" placeholder="Additional remarks or special handling instructions...">{{ old('notes', $order->notes ?? '') }}</textarea>
            @error('notes')<small class="input-error">{{ $message }}</small>@enderror
        </label>
    </div>

    {{-- Bottom Action Buttons --}}
    <div class="form-actions-card">
        <button class="btn btn-primary" type="submit" style="padding: 10px 24px; font-weight: 600;">
            {{ isset($order) ? 'Update Order' : 'Save Order' }}
        </button>
        <a class="btn" href="{{ route('orders.index') }}" style="padding: 10px 20px;">Cancel</a>
    </div>

</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const projectSelect = document.getElementById('project_select');
        const productSelect = document.getElementById('product_select');
        const initialSelected = "{{ old('items.0.product_name', isset($order) ? ($order->items->first()->product_name ?? '') : '') }}";
        let isInitialLoad = true;

        function updateProducts() {
            const selectedOption = projectSelect.options[projectSelect.selectedIndex];
            const productsStr = selectedOption ? (selectedOption.getAttribute('data-products') || '') : '';
            const amount = selectedOption ? (selectedOption.getAttribute('data-amount') || '0.00') : '0.00';
            
            const unitPriceInput = document.getElementById('item_unit_price');
            const lineTotalInput = document.getElementById('item_line_total');
            if (unitPriceInput) unitPriceInput.value = amount;
            if (lineTotalInput) lineTotalInput.value = amount;

            const amountInput = document.getElementById('amount_input');
            if (amountInput && (!isInitialLoad || amountInput.value === '')) {
                amountInput.value = amount;
            }
            
            productSelect.innerHTML = '';
            
            if (productsStr.trim() === '') {
                const opt = document.createElement('option');
                opt.value = '';
                opt.textContent = '-- No products configured for this project --';
                productSelect.appendChild(opt);
                return;
            }

            const products = productsStr.split(',').map(p => p.trim()).filter(p => p !== '');
            products.forEach(product => {
                const opt = document.createElement('option');
                opt.value = product;
                opt.textContent = product;
                if (product === initialSelected) {
                    opt.selected = true;
                }
                productSelect.appendChild(opt);
            });
        }

        if (projectSelect && productSelect) {
            projectSelect.addEventListener('change', updateProducts);
            updateProducts();
            isInitialLoad = false;
        }
    });
</script>