@extends('admin.layouts.app')

@section('title', 'Return Request #' . $return->id)

@section('content')
    <div class="max-w-5xl mx-auto">
        <div class="flex items-center gap-4 mb-6">
            <a href="{{ route('admin.order-returns.index') }}" class="w-10 h-10 rounded-xl bg-slate-800 flex items-center justify-center hover:bg-slate-700 transition-colors">
                <i data-lucide="arrow-left" class="w-5 h-5 text-slate-400"></i>
            </a>
            <div>
                <h1 class="text-2xl font-bold text-white tracking-tight">Return Request #{{ $return->id }}</h1>
                <p class="text-slate-400 text-sm">Created on {{ optional($return->created_at)->format('M d, Y H:i') ?? 'N/A' }}</p>
            </div>
            
            <div class="ml-auto">
                @php
                    $statusClasses = [
                        'pending' => 'bg-yellow-500/10 text-yellow-500 border-yellow-500/20',
                        'approved' => 'bg-blue-500/10 text-blue-500 border-blue-500/20',
                        'received' => 'bg-purple-500/10 text-purple-500 border-purple-500/20',
                        'refund_initiated' => 'bg-orange-500/10 text-orange-500 border-orange-500/20',
                        'refunded' => 'bg-green-500/10 text-green-500 border-green-500/20',
                        'rejected' => 'bg-red-500/10 text-red-500 border-red-500/20',
                    ];
                @endphp
                <span class="{{ $statusClasses[$return->status] ?? 'bg-slate-500/10 text-slate-500' }} px-4 py-2 rounded-xl text-sm font-bold border">
                    {{ ucfirst(str_replace('_', ' ', $return->status)) }}
                </span>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div class="lg:col-span-2 space-y-6">
                <!-- Return Details -->
                <div class="glass-card rounded-2xl p-6">
                    <h3 class="text-lg font-bold text-white mb-4">Return Reason</h3>
                    <div class="bg-slate-900/50 p-4 rounded-xl border border-white/5">
                        <p class="text-slate-300 italic">"{{ $return->reason }}"</p>
                    </div>

                    @if($return->admin_note)
                        <h3 class="text-lg font-bold text-white mt-6 mb-4">Admin Note</h3>
                        <div class="bg-blue-900/20 p-4 rounded-xl border border-blue-500/20">
                            <p class="text-blue-300">{{ $return->admin_note }}</p>
                        </div>
                    @endif
                </div>

                <!-- Create/Update Status -->
                <div class="glass-card rounded-2xl p-6">
                    <h3 class="text-lg font-bold text-white mb-6">Update Status</h3>
                    <form action="{{ route('admin.order-returns.update', $return) }}" method="POST">
                        @csrf
                        @method('PUT')
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-400 mb-2">Status</label>
                                <select name="status" class="bg-slate-900/50 border border-white/10 text-white text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                                    <option value="pending" {{ $return->status == 'pending' ? 'selected' : '' }}>Pending</option>
                                    <option value="approved" {{ $return->status == 'approved' ? 'selected' : '' }}>Approved</option>
                                    <option value="received" {{ $return->status == 'received' ? 'selected' : '' }}>Received</option>
                                    <option value="refund_initiated" {{ $return->status == 'refund_initiated' ? 'selected' : '' }}>Refund Initiated</option>
                                    <option value="refunded" {{ $return->status == 'refunded' ? 'selected' : '' }}>Refunded</option>
                                    <option value="rejected" {{ $return->status == 'rejected' ? 'selected' : '' }}>Rejected</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-400 mb-2">Admin Note</label>
                                <input type="text" name="admin_note" value="{{ $return->admin_note }}" placeholder="Internal note..."
                                    class="bg-slate-900/50 border border-white/10 text-white text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                            </div>
                        </div>

                        <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2.5 rounded-xl transition-all shadow-lg shadow-blue-500/20">
                            Update Status
                        </button>
                    </form>
                </div>

                <!-- Refund Processing -->
                @if($return->status == 'refund_initiated' || $return->status == 'received')
                    <div class="glass-card rounded-2xl p-6 border-l-4 border-l-green-500">
                        <h3 class="text-lg font-bold text-white mb-4">Process Refund</h3>
                        <p class="text-slate-400 text-sm mb-6">Order Total: 
                            <span class="text-white font-bold">
                                {{ $return->order ? '₹' . number_format($return->order->total, 2) : 'N/A' }}
                            </span>
                        </p>

                        <form action="{{ route('admin.return-refund.process', $return->id) }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                                <div>
                                    <label class="block text-sm font-medium text-slate-400 mb-2">Deduction Amount (₹)</label>
                                    <input type="number" step="0.01" name="deduction_amount" placeholder="0.00"
                                        class="bg-slate-900/50 border border-white/10 text-white text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                                </div>
                                <div>
                                    <label class="block text-sm font-medium text-slate-400 mb-2">Deduction Reason</label>
                                    <input type="text" name="deduction_reason" placeholder="e.g. Broken packaging"
                                        class="bg-slate-900/50 border border-white/10 text-white text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                                </div>
                                <div class="md:col-span-2">
                                    <label class="block text-sm font-medium text-slate-400 mb-2">Refund Proof (Screenshot/Receipt)</label>
                                    <input type="file" name="refund_proof"
                                        class="block w-full text-sm text-slate-400 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-slate-800 file:text-blue-400 hover:file:bg-slate-700 transition">
                                </div>
                            </div>
                            <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-2.5 rounded-xl transition-all shadow-lg shadow-green-500/20">
                                Confirm & Mark Refunded
                            </button>
                        </form>
                    </div>
                @endif
            </div>

            <div class="space-y-6">
                <!-- User Info -->
                <div class="glass-card rounded-2xl p-6">
                    <h3 class="text-sm uppercase font-bold text-slate-500 tracking-wider mb-4">Customer</h3>
                    <div class="flex items-center gap-4 mb-4">
                        <div class="w-12 h-12 rounded-full bg-slate-800 flex items-center justify-center text-lg font-bold text-slate-400">
                            {{ substr($return->user->name, 0, 1) }}
                        </div>
                        <div>
                            <p class="text-white font-bold">{{ $return->user->name }}</p>
                            <p class="text-slate-500 text-xs">{{ $return->user->email }}</p>
                        </div>
                    </div>
                    <div class="pt-4 border-t border-white/5 space-y-2 text-sm">
                        <div class="flex justify-between">
                            <span class="text-slate-400">Total Orders</span>
                            <span class="text-white ">{{ $return->user->orders->count() }}</span>
                        </div>
                    </div>
                </div>

                <!-- Order Info -->
                <div class="glass-card rounded-2xl p-6">
                    <h3 class="text-sm uppercase font-bold text-slate-500 tracking-wider mb-4">Original Order</h3>
                    @if($return->order)
                        <div class="space-y-4">
                            <div class="flex justify-between items-center bg-slate-900/50 p-3 rounded-lg">
                                 <a href="{{ route('admin.orders.show', $return->order_id) }}" class="text-blue-400 font-bold hover:underline">
                                    #{{ $return->order->order_number }}
                                </a>
                                <span class="text-xs text-slate-500">{{ $return->order->created_at->format('M d, Y') }}</span>
                            </div>
                            
                            <div class="space-y-2">
                                 @foreach($return->order->items as $item)
                                    <div class="flex gap-3 text-sm">
                                        <div class="w-10 h-10 rounded bg-slate-800 flex-shrink-0 overflow-hidden">
                                            @if($item->product && $item->product->images && count($item->product->images) > 0)
                                                <img src="{{ asset('storage/' . $item->product->images[0]) }}" class="w-full h-full object-cover">
                                            @else
                                                <div class="w-full h-full flex items-center justify-center bg-slate-700 text-[10px] text-slate-400">N/A</div>
                                            @endif
                                        </div>
                                        <div class="flex-1">
                                            <p class="text-slate-300 line-clamp-1">{{ $item->product->name ?? 'Unknown Product' }}</p>
                                            <p class="text-xs text-slate-500">Qty: {{ $item->quantity }}</p>
                                        </div>
                                    </div>
                                 @endforeach
                            </div>
                        </div>
                    @else
                        <div class="p-4 bg-red-500/10 border border-red-500/20 rounded-xl text-center">
                            <p class="text-red-400 text-sm font-bold">Original order has been deleted.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection