@extends('layouts.admin')

@section('title', 'Process Refund')
@section('subtitle', 'Invoice: ' . $invoice->invoice_number)

@section('content')
    <div class="max-w-3xl">
        <form action="{{ route('admin.refunds.store') }}" method="POST" class="space-y-6">
            @csrf
            <input type="hidden" name="invoice_id" value="{{ $invoice->id }}">

            {{-- Invoice Summary --}}
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-slate-800">Invoice Summary</h3>
                    <span class="text-lg font-bold text-blue-600">LKR {{ number_format($invoice->total, 2) }}</span>
                </div>
                <div class="grid grid-cols-3 gap-4 text-sm">
                    <div>
                        <span class="text-slate-500">Date:</span>
                        <span class="text-slate-800 ml-2">{{ $invoice->created_at->format('M d, Y H:i') }}</span>
                    </div>
                    <div>
                        <span class="text-slate-500">Customer:</span>
                        <span class="text-slate-800 ml-2">{{ $invoice->customer_name ?? 'Walk-in' }}</span>
                    </div>
                    <div>
                        <span class="text-slate-500">Items:</span>
                        <span class="text-slate-800 ml-2">{{ $invoice->items->count() }} items</span>
                    </div>
                </div>
            </div>

            {{-- Refund Type --}}
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
                <h3 class="text-lg font-semibold text-slate-800 mb-4">Refund Type</h3>
                <div class="grid grid-cols-2 gap-4" x-data="{ refundType: 'full' }">
                    <label
                        class="flex items-center gap-3 p-4 border-2 rounded-xl cursor-pointer has-[:checked]:border-red-500 has-[:checked]:bg-red-50">
                        <input type="radio" name="refund_type" value="full" checked x-model="refundType"
                            class="accent-red-600">
                        <div>
                            <span class="font-medium text-slate-800">Full Refund</span>
                            <p class="text-xs text-slate-500">Refund the entire invoice amount</p>
                        </div>
                    </label>
                    <label
                        class="flex items-center gap-3 p-4 border-2 rounded-xl cursor-pointer has-[:checked]:border-orange-500 has-[:checked]:bg-orange-50">
                        <input type="radio" name="refund_type" value="partial" x-model="refundType"
                            class="accent-orange-600">
                        <div>
                            <span class="font-medium text-slate-800">Partial Refund</span>
                            <p class="text-xs text-slate-500">Select specific items to refund</p>
                        </div>
                    </label>

                    {{-- Partial Refund Items --}}
                    <div class="col-span-2 mt-4" x-show="refundType === 'partial'" x-cloak>
                        <h4 class="font-medium text-slate-700 mb-3">Select Items to Refund</h4>
                        <table class="w-full text-sm">
                            <thead>
                                <tr class="text-left text-slate-500 border-b border-slate-200">
                                    <th class="pb-2">Product</th>
                                    <th class="pb-2 text-center">Sold Qty</th>
                                    <th class="pb-2 text-center">Refund Qty</th>
                                    <th class="pb-2 text-right">Unit Price</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($invoice->items as $item)
                                    <tr class="border-b border-slate-100">
                                        <td class="py-3">{{ $item->product_name }}</td>
                                        <td class="py-3 text-center">{{ $item->quantity }}</td>
                                        <td class="py-3 text-center">
                                            <input type="number" name="items[{{ $item->id }}][quantity]" min="0"
                                                max="{{ $item->quantity }}" value="0" step="1"
                                                class="w-20 px-2 py-1 border border-slate-300 rounded-lg text-center focus:border-blue-500 outline-none">
                                        </td>
                                        <td class="py-3 text-right">LKR {{ number_format($item->unit_price, 2) }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- Reason --}}
            <div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-6">
                <h3 class="text-lg font-semibold text-slate-800 mb-4">Reason for Refund *</h3>
                <select name="reason" required
                    class="w-full px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none mb-3">
                    <option value="">Select reason...</option>
                    <option value="Customer returned items">Customer returned items</option>
                    <option value="Wrong items sold">Wrong items sold</option>
                    <option value="Damaged/Defective product">Damaged/Defective product</option>
                    <option value="Customer dissatisfied">Customer dissatisfied</option>
                    <option value="Price dispute">Price dispute</option>
                    <option value="Other">Other</option>
                </select>
                @error('reason')<p class="text-red-500 text-xs">{{ $message }}</p>@enderror
            </div>

            <div class="flex gap-4">
                <button type="submit"
                    class="px-8 py-3 bg-red-600 text-white rounded-xl font-medium hover:bg-red-700 transition">
                    ↩️ Process Refund
                </button>
                <a href="{{ route('admin.invoices.show', $invoice) }}"
                    class="px-8 py-3 bg-slate-100 text-slate-700 rounded-xl font-medium hover:bg-slate-200 transition">
                    Cancel
                </a>
            </div>
        </form>
    </div>
@endsection