@extends('admin.layouts.app')

@section('title', 'Order Details')

@section('content')
<div class="mb-6 flex justify-between items-center">
    <a href="{{ route('admin.orders.index') }}" class="text-blue-600 hover:text-blue-900">← Back to Orders</a>
    <a href="{{ route('admin.orders.invoice', $order) }}" class="px-4 py-2 bg-orange-500 hover:bg-orange-600 text-white rounded-lg transition font-medium flex items-center gap-2" target="_blank">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2H3l9-2m0-18v18m0-18L3 7m9-4l9 4M3 7l9 4m0 0l9-4m-9 4v10m0-10L3 7"></path></svg>
        Download Invoice PDF
    </a>
</div>

@if(session('success'))
    <div class="mb-6 p-4 bg-green-100 text-green-800 rounded-lg">
        {{ session('success') }}
    </div>
@endif

<div class="bg-white p-6 rounded-lg shadow">
        <h3 class="text-lg font-bold text-gray-900 mb-4">Order Information</h3>
        <form method="POST" action="{{ route('admin.orders.update', $order) }}" class="space-y-4">
            @csrf
            @method('PUT')
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <p class="text-sm text-gray-600 mb-2"><strong>Order Number:</strong> {{ $order->order_number }}</p>
                    <p class="text-sm text-gray-600 mb-2"><strong>Date:</strong> {{ $order->created_at->format('d M Y H:i') }}</p>
                    <div class="mb-3">
                        <label for="status" class="block text-sm font-medium text-gray-700 mb-1">Status:</label>
                        <select name="status" id="status" class="w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500">
                            <option value="pending" {{ $order->status === 'pending' ? 'selected' : '' }}>Pending</option>
                            <option value="processing" {{ $order->status === 'processing' ? 'selected' : '' }}>Processing</option>
                            <option value="shipped" {{ $order->status === 'shipped' ? 'selected' : '' }}>Shipped</option>
                            <option value="delivered" {{ $order->status === 'delivered' ? 'selected' : '' }}>Delivered</option>
                            <option value="cancelled" {{ $order->status === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                        </select>
                    </div>
                    <p class="text-sm text-gray-600"><strong>Payment Method:</strong> {{ strtoupper($order->payment_method) }}</p>
                </div>
            </div>
            <div class="flex space-x-2">
                <button type="submit" class="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600 transition">Update Status</button>
            </div>
        </form>
    </div>

    <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="text-lg font-bold text-gray-900 mb-4">Customer Information</h3>
        <form method="POST" action="{{ route('admin.orders.update', $order) }}" class="space-y-4">
            @csrf
            @method('PUT')
            <div class="grid grid-cols-1 gap-4">
                <div>
                    <label for="customer_name" class="block text-sm font-medium text-gray-700 mb-1">Name:</label>
                    <input type="text" name="customer_name" id="customer_name" value="{{ $order->customer_name }}" class="w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500">
                </div>
                <div>
                    <label for="customer_email" class="block text-sm font-medium text-gray-700 mb-1">Email:</label>
                    <input type="email" name="customer_email" id="customer_email" value="{{ $order->customer_email }}" class="w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500">
                </div>
                <div>
                    <label for="customer_phone" class="block text-sm font-medium text-gray-700 mb-1">Phone:</label>
                    <input type="text" name="customer_phone" id="customer_phone" value="{{ $order->customer_phone }}" class="w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500">
                </div>
                <div>
                    <label for="address" class="block text-sm font-medium text-gray-700 mb-1">Address:</label>
                    <input type="text" name="address" id="address" value="{{ $order->address }}" class="w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500">
                </div>
                <div class="grid grid-cols-3 gap-4">
                    <div>
                        <label for="city" class="block text-sm font-medium text-gray-700 mb-1">City:</label>
                        <input type="text" name="city" id="city" value="{{ $order->city }}" class="w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500">
                    </div>
                    <div>
                        <label for="postal_code" class="block text-sm font-medium text-gray-700 mb-1">Postal Code:</label>
                        <input type="text" name="postal_code" id="postal_code" value="{{ $order->postal_code }}" class="w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500">
                    </div>
                    <div>
                        <label for="country" class="block text-sm font-medium text-gray-700 mb-1">Country:</label>
                        <input type="text" name="country" id="country" value="{{ $order->country }}" class="w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500">
                    </div>
                </div>
            </div>
            <div class="flex space-x-2">
                <button type="submit" class="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600 transition">Update Customer Info</button>
            </div>
        </form>
    </div>
</div>

<div class="bg-white p-6 rounded-lg shadow mb-6">
    <h3 class="text-lg font-bold text-gray-900 mb-4">Order Items & Serial Numbers</h3>
    <form method="POST" action="{{ route('admin.orders.update', $order) }}" class="space-y-4">
        @csrf
        @method('PUT')

        <div class="space-y-6">
            @foreach ($order->items as $item)
                <div class="border border-gray-200 rounded-lg p-4">
                    <div class="mb-4">
                        <h4 class="text-md font-semibold text-gray-900">{{ $item->product->name }}</h4>
                        <p class="text-sm text-gray-600">Price: {{ format_price($item->price) }} × {{ $item->quantity }} = {{ format_price($item->total) }}</p>
                    </div>

                    <div class="space-y-2">
                        @php
                            $itemSerials = $serialNumbers[$item->id] ?? collect();
                        @endphp

                        @for ($q = 1; $q <= $item->quantity; $q++)
                            @php
                                $existingSerial = $itemSerials->firstWhere('item_quantity_index', $q);
                                $serialValue = old("serial_numbers.{$item->id}." . ($q - 1), $existingSerial?->serial_number ?? '');
                            @endphp

                            <div class="flex items-center gap-2">
                                <label for="serial_{{ $item->id }}_{{ $q }}" class="w-24 text-sm font-medium text-gray-700">
                                    Unit {{ $q }}/{{ $item->quantity }}:
                                </label>
                                <input
                                    type="text"
                                    id="serial_{{ $item->id }}_{{ $q }}"
                                    name="serial_numbers[{{ $item->id }}][{{ $q - 1 }}]"
                                    value="{{ $serialValue }}"
                                    class="flex-1 rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500"
                                    placeholder="Enter serial number for unit {{ $q }}"
                                >
                                @error("serial_numbers.{$item->id}." . ($q - 1))
                                    <p class="text-xs text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        @endfor
                    </div>
                </div>
            @endforeach
        </div>

        <div class="flex items-center justify-between gap-4 pt-4">
            <p class="text-lg font-bold text-gray-900">Total: {{ format_price($order->total_amount) }}</p>
            <button type="submit" class="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600 transition">Update Serial Numbers</button>
        </div>
    </form>
</div>

<div class="bg-white p-6 rounded-lg shadow">
    <h3 class="text-lg font-bold text-gray-900 mb-4">Notes</h3>
    <form method="POST" action="{{ route('admin.orders.update', $order) }}" class="space-y-4">
        @csrf
        @method('PUT')
        <div>
            <textarea name="notes" rows="4" class="w-full rounded-md border-gray-300 shadow-sm focus:border-orange-500 focus:ring-orange-500">{{ $order->notes ?? '' }}</textarea>
        </div>
        <div class="flex space-x-2">
            <button type="submit" class="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600 transition">Update Notes</button>
        </div>
    </form>
</div>
@endsection