@extends('admin.layouts.app')

@section('title', 'Add Manual Order')
@section('page-title', 'Add Manual Order')

@section('breadcrumbs')
    <li class="breadcrumb-item"><a href="{{ route('admin.orders.index') }}">Orders</a></li>
    <li class="breadcrumb-item active" aria-current="page">Add Manual Order</li>
@endsection

@section('content')
<form method="POST" action="{{ route('admin.orders.store') }}" class="space-y-6">
    @csrf

    <div class="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-950">
        <div class="mb-5 border-b border-gray-200 pb-4 dark:border-gray-800">
            <h2 class="mb-1 text-lg font-semibold text-gray-900 dark:text-white">Customer details</h2>
            <p class="mb-0 text-sm text-gray-500 dark:text-gray-400">Create a backend order for phone, chat, or in-store purchases.</p>
        </div>

        <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
            <x-admin.text-input name="customer_name" label="Customer name" required placeholder="Customer full name" />
            <x-admin.text-input name="customer_phone" label="Phone" required placeholder="+855..." />
            <x-admin.text-input name="customer_email" type="email" label="Email" placeholder="customer@example.com" />
            <x-admin.select-input name="payment_method" label="Payment method" placeholder="Select method" :options="['cod' => 'Cash on delivery', 'aba' => 'ABA', 'bank_transfer' => 'Bank transfer']" />
            <x-admin.textarea name="shipping_detail" label="Shipping detail" rows="3" placeholder="Address, delivery note, or map link" class="md:col-span-2" />
            <x-admin.textarea name="note" label="Internal note" rows="3" placeholder="Staff notes for this order" class="md:col-span-2" />
        </div>
    </div>

    <div class="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-950">
        <div class="mb-5 flex flex-col gap-3 border-b border-gray-200 pb-4 sm:flex-row sm:items-center sm:justify-between dark:border-gray-800">
            <div>
                <h2 class="mb-1 text-lg font-semibold text-gray-900 dark:text-white">Order items</h2>
                <p class="mb-0 text-sm text-gray-500 dark:text-gray-400">Choose products and quantities. Prices are captured from the catalog.</p>
            </div>
            <button type="button" id="addItemRow" class="btn-secondary"><i class="fas fa-plus"></i>Add item</button>
        </div>

        <div id="orderItems" class="space-y-3">
            @php($oldItems = old('items', [['product_id' => '', 'quantity' => 1]]))
            @foreach($oldItems as $index => $item)
                <div class="order-item-row grid grid-cols-1 gap-3 rounded-lg border border-slate-200 p-3 md:grid-cols-[1fr_8rem_auto] dark:border-slate-800">
                    <x-admin.select-input name="items[{{ $index }}][product_id]" label="Product" required placeholder="Select product" :value="$item['product_id'] ?? ''" class="mb-0">
                        @foreach($products as $product)
                            <option value="{{ $product->id }}" @selected((string) ($item['product_id'] ?? '') === (string) $product->id)>
                                {{ $product->name }} - ${{ number_format((float) $product->price, 2) }}
                            </option>
                        @endforeach
                    </x-admin.select-input>
                    <x-admin.number-input name="items[{{ $index }}][quantity]" label="Quantity" required min="1" :value="$item['quantity'] ?? 1" class="mb-0" />
                    <button type="button" class="remove-item-row btn-secondary self-end" data-bs-toggle="tooltip" title="Remove item"><i class="fas fa-trash"></i></button>
                </div>
            @endforeach
        </div>

        <x-admin.validation-error name="items" class="mt-3" />
    </div>

    <div class="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-950">
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
            <x-admin.select-input name="order_status" label="Order status" required :value="old('order_status', 'pending')" :options="[
                'pending' => 'Pending',
                'confirmed' => 'Confirmed',
                'processing' => 'Processing',
                'delivering' => 'Delivering',
                'completed' => 'Completed',
                'cancelled' => 'Cancelled',
                'returned' => 'Returned',
            ]" />
            <x-admin.select-input name="payment_status" label="Payment status" required :value="old('payment_status', 'pending')" :options="[
                'pending' => 'Pending',
                'paid' => 'Paid',
                'failed' => 'Failed',
                'cancelled' => 'Cancelled',
                'refunded' => 'Refunded',
            ]" />
            <x-admin.number-input name="shipping_fee" label="Shipping fee" step="0.01" min="0" :value="old('shipping_fee', 0)" />
            <x-admin.number-input name="discount" label="Discount" step="0.01" min="0" :value="old('discount', 0)" />
        </div>

        <x-admin.action-buttons :back="route('admin.orders.index')" submit="Create Order" />
    </div>
</form>

<template id="orderItemTemplate">
    <div class="order-item-row grid grid-cols-1 gap-3 rounded-lg border border-slate-200 p-3 md:grid-cols-[1fr_8rem_auto] dark:border-slate-800">
        <div class="mb-0">
            <label class="form-label text-sm font-medium text-slate-700 dark:text-slate-300">Product <span class="text-danger">*</span></label>
            <select name="__PRODUCT_NAME__" required class="form-select rounded-lg border-slate-200 text-sm shadow-sm focus:border-emerald-500 focus:ring-emerald-500 dark:border-slate-700 dark:bg-slate-900 dark:text-white">
                <option value="">Select product</option>
                @foreach($products as $product)
                    <option value="{{ $product->id }}">{{ $product->name }} - ${{ number_format((float) $product->price, 2) }}</option>
                @endforeach
            </select>
        </div>
        <div class="mb-0">
            <label class="form-label text-sm font-medium text-slate-700 dark:text-slate-300">Quantity <span class="text-danger">*</span></label>
            <input type="number" min="1" value="1" required name="__QUANTITY_NAME__" class="form-control rounded-lg border-slate-200 text-sm shadow-sm focus:border-emerald-500 focus:ring-emerald-500 dark:border-slate-700 dark:bg-slate-900 dark:text-white">
        </div>
        <button type="button" class="remove-item-row btn-secondary self-end" data-bs-toggle="tooltip" title="Remove item"><i class="fas fa-trash"></i></button>
    </div>
</template>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    const items = document.getElementById('orderItems');
    const template = document.getElementById('orderItemTemplate');
    const addButton = document.getElementById('addItemRow');
    let nextIndex = items.querySelectorAll('.order-item-row').length;

    function syncRemoveButtons() {
        const rows = items.querySelectorAll('.order-item-row');
        rows.forEach(row => row.querySelector('.remove-item-row').disabled = rows.length === 1);
    }

    addButton.addEventListener('click', () => {
        const html = template.innerHTML
            .replace('__PRODUCT_NAME__', `items[${nextIndex}][product_id]`)
            .replace('__QUANTITY_NAME__', `items[${nextIndex}][quantity]`);
        items.insertAdjacentHTML('beforeend', html);
        nextIndex += 1;
        syncRemoveButtons();
    });

    items.addEventListener('click', event => {
        const button = event.target.closest('.remove-item-row');
        if (!button || items.querySelectorAll('.order-item-row').length === 1) return;
        button.closest('.order-item-row').remove();
        syncRemoveButtons();
    });

    syncRemoveButtons();
});
</script>
@endpush