@extends('layouts.admin')

@section('content')
<div class="space-y-3 pb-20" x-data="{
    showModal: false,
    items: [{ product_id: '', slot_no: '', quantity: 1 }],
    addItem() { this.items.push({ product_id: '', slot_no: '', quantity: 1 }); },
    removeItem(i) { if (this.items.length > 1) this.items.splice(i, 1); },
}">
    {{-- Header --}}
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h1 class="text-3xl font-black text-slate-800 dark:text-white font-display tracking-tight">{{ __('Machine Replenishment') }}</h1>
            <p class="text-sm font-bold text-slate-500 dark:text-slate-400 mt-1 uppercase tracking-widest">{{ __('Create and manage replenishment orders from warehouse to machines') }}</p>
        </div>
        <button @click="showModal = true; items = [{ product_id: '', slot_no: '', quantity: 1 }]" class="btn-luxury-primary">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /></svg>
            <span>{{ __('New Replenishment') }}</span>
        </button>
    </div>

    {{-- Filters --}}
    <div class="luxury-card rounded-3xl p-8 animate-luxury-in">
        <form action="{{ route('admin.warehouses.replenishments') }}" method="GET" class="mb-8">
            <div class="flex items-center p-1 bg-slate-100/50 dark:bg-slate-900/50 backdrop-blur-md rounded-2xl border border-slate-200/50 dark:border-slate-700/50 w-fit">
                <a href="{{ route('admin.warehouses.replenishments') }}"
                    class="px-5 py-2 text-xs font-black tracking-widest uppercase transition-all duration-300 rounded-xl {{ !request()->filled('status') ? 'bg-white dark:bg-slate-800 text-cyan-600 shadow-lg shadow-cyan-500/10' : 'text-slate-400 hover:text-slate-600' }}">
                    {{ __('All') }}
                </a>
                @foreach(['pending' => 'Pending', 'prepared' => 'Prepared', 'delivering' => 'Delivering', 'completed' => 'Completed'] as $key => $label)
                <a href="{{ route('admin.warehouses.replenishments', ['status' => $key]) }}"
                    class="px-5 py-2 text-xs font-black tracking-widest uppercase transition-all duration-300 rounded-xl {{ request('status') === $key ? 'bg-white dark:bg-slate-800 text-cyan-600 shadow-lg shadow-cyan-500/10' : 'text-slate-400 hover:text-slate-600' }}">
                    {{ __($label) }}
                </a>
                @endforeach
            </div>
        </form>

        <div class="overflow-x-auto">
            <table class="w-full text-left border-separate border-spacing-y-0">
                <thead>
                    <tr class="bg-slate-50/50 dark:bg-slate-900/10">
                        <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">{{ __('Order No.') }}</th>
                        <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">{{ __('Machine') }}</th>
                        <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">{{ __('Warehouse') }}</th>
                        <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Items') }}</th>
                        <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-center">{{ __('Status') }}</th>
                        <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800">{{ __('Created By') }}</th>
                        <th class="px-6 py-4 text-xs font-bold text-slate-500 uppercase tracking-[0.15em] border-b border-slate-100 dark:border-slate-800 text-right">{{ __('Actions') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50 dark:divide-slate-800/80">
                    @forelse($orders as $order)
                    <tr class="group hover:bg-slate-50/80 dark:hover:bg-slate-800/40 transition-all duration-300">
                        <td class="px-6 py-5"><span class="font-mono font-extrabold text-slate-800 dark:text-slate-100">{{ $order->order_no }}</span></td>
                        <td class="px-6 py-5">
                            <div class="flex flex-col">
                                <span class="font-bold text-slate-700 dark:text-slate-200">{{ $order->machine?->name }}</span>
                                <span class="text-xs font-mono text-slate-400">{{ $order->machine?->serial_no }}</span>
                            </div>
                        </td>
                        <td class="px-6 py-5"><span class="font-bold text-slate-600 dark:text-slate-300">{{ $order->warehouse?->name }}</span></td>
                        <td class="px-6 py-5 text-center"><span class="font-black text-slate-800 dark:text-white">{{ $order->items_count }}</span></td>
                        <td class="px-6 py-5 text-center">
                            @php $sColor = match($order->status) { 'pending' => 'amber', 'prepared' => 'cyan', 'delivering' => 'indigo', 'completed' => 'emerald', 'cancelled' => 'slate', default => 'slate' }; @endphp
                            <span class="inline-flex items-center px-3 py-1.5 rounded-xl text-[10px] font-black bg-{{ $sColor }}-500/10 text-{{ $sColor }}-500 border border-{{ $sColor }}-500/20 tracking-widest uppercase">{{ __(ucfirst($order->status)) }}</span>
                        </td>
                        <td class="px-6 py-5"><span class="text-sm font-bold text-slate-500">{{ $order->creator?->name ?? '-' }}</span></td>
                        <td class="px-6 py-5 text-right">
                            @if(in_array($order->status, ['pending', 'prepared', 'delivering']))
                            <form action="{{ route('admin.warehouses.replenishments.confirm', $order->id) }}" method="POST" class="inline" onsubmit="return confirm('{{ __('Confirm replenishment completed?') }}')">
                                @csrf @method('PATCH')
                                <button type="submit" class="px-4 py-2 rounded-xl text-xs font-black bg-emerald-500/10 text-emerald-500 border border-emerald-500/20 hover:bg-emerald-500 hover:text-white transition-all">{{ __('Complete') }}</button>
                            </form>
                            @else
                            <span class="text-xs font-bold text-slate-400">{{ $order->completed_at?->format('Y-m-d H:i') }}</span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="7" class="px-6 py-20 text-center text-slate-400 font-bold">{{ __('No replenishment orders found') }}</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="mt-6 py-6 border-t border-slate-50 dark:border-slate-800/50">{{ $orders->links('vendor.pagination.luxury') }}</div>
    </div>

    {{-- New Replenishment Modal --}}
    <div x-show="showModal" class="fixed inset-0 z-[100] overflow-y-auto" x-cloak>
        <div class="flex items-center justify-center min-h-screen px-4">
            <div x-show="showModal" x-transition class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm" @click="showModal = false"></div>
            <div x-show="showModal" x-transition class="relative inline-block px-8 py-10 luxury-card rounded-3xl shadow-2xl sm:max-w-2xl w-full z-10">
                <h3 class="text-2xl font-black text-slate-800 dark:text-white font-display tracking-tight mb-8">{{ __('New Replenishment') }}</h3>
                <form action="{{ route('admin.warehouses.replenishments.store') }}" method="POST" class="space-y-6">
                    @csrf
                    <div class="grid grid-cols-2 gap-4">
                        <div class="space-y-2">
                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Source Warehouse') }}</label>
                            <select name="warehouse_id" required class="luxury-select w-full">
                                <option value="">{{ __('Select Warehouse') }}</option>
                                @foreach($warehouses as $wh)
                                <option value="{{ $wh->id }}">{{ $wh->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="space-y-2">
                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Target Machine') }}</label>
                            <select name="machine_id" required class="luxury-select w-full">
                                <option value="">{{ __('Select Machine') }}</option>
                                @foreach($machines as $m)
                                <option value="{{ $m->id }}">{{ $m->name }} ({{ $m->serial_no }})</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <input type="text" name="note" class="luxury-input w-full" placeholder="{{ __('Note (optional)') }}">
                    {{-- Items --}}
                    <div class="space-y-3">
                        <div class="flex items-center justify-between">
                            <label class="text-xs font-black text-slate-500 uppercase tracking-widest pl-1">{{ __('Replenishment Items') }}</label>
                            <button type="button" @click="addItem()" class="text-xs font-black text-cyan-500 hover:text-cyan-400 uppercase tracking-widest">+ {{ __('Add Item') }}</button>
                        </div>
                        <template x-for="(item, index) in items" :key="index">
                            <div class="flex items-center gap-3 p-4 bg-slate-50 dark:bg-slate-900/50 rounded-xl border border-slate-100 dark:border-slate-800">
                                <input type="number" :name="'items['+index+'][slot_no]'" x-model="item.slot_no" min="1" required class="luxury-input w-20 text-center" placeholder="{{ __('Slot') }}">
                                <select :name="'items['+index+'][product_id]'" x-model="item.product_id" required class="luxury-select flex-1">
                                    <option value="">{{ __('Select Product') }}</option>
                                    @foreach($machines->count() > 0 ? \App\Models\Product\Product::orderBy('name')->get(['id', 'name']) : [] as $p)
                                    <option value="{{ $p->id }}">{{ $p->name }}</option>
                                    @endforeach
                                </select>
                                <input type="number" :name="'items['+index+'][quantity]'" x-model="item.quantity" min="1" required class="luxury-input w-20 text-center" placeholder="{{ __('Qty') }}">
                                <button type="button" @click="removeItem(index)" class="p-2 text-slate-400 hover:text-rose-500 transition-colors" x-show="items.length > 1">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
                                </button>
                            </div>
                        </template>
                    </div>
                    <div class="flex justify-end gap-4 pt-6">
                        <button type="button" @click="showModal = false" class="btn-luxury-ghost px-8">{{ __('Cancel') }}</button>
                        <button type="submit" class="btn-luxury-primary px-12">{{ __('Create') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection