@extends('layouts.admin')

@section('title', 'Repairs & Warranty Claims')
@section('subtitle', 'Track customer returns, supplier repair processes, and pickup status')

@section('actions')
    <a href="{{ route('admin.repairs.create') }}"
        class="px-4 py-2 bg-blue-600 text-white rounded-xl font-medium hover:bg-blue-700 transition">
        ➕ Create Claim Ticket
    </a>
@endsection

@section('content')
    <div class="bg-white rounded-2xl shadow-sm border border-slate-200">
        {{-- Search and Filters --}}
        <div class="p-6 border-b border-slate-200">
            <form action="{{ route('admin.repairs.index') }}" method="GET" class="flex flex-wrap gap-4">
                <input type="text" name="search" value="{{ $search }}" placeholder="Search by customer, IMEI, or product..."
                    class="flex-1 min-w-[250px] px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none">
                
                <select name="status" class="px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none bg-white">
                    <option value="">All Statuses</option>
                    <option value="received" {{ $status === 'received' ? 'selected' : '' }}>Received from Customer</option>
                    <option value="sent_to_supplier" {{ $status === 'sent_to_supplier' ? 'selected' : '' }}>Sent to Supplier</option>
                    <option value="returned_from_supplier" {{ $status === 'returned_from_supplier' ? 'selected' : '' }}>Returned from Supplier</option>
                    <option value="completed" {{ $status === 'completed' ? 'selected' : '' }}>Completed / Pickup</option>
                </select>

                <button type="submit"
                    class="px-6 py-2 bg-blue-600 text-white rounded-xl font-medium hover:bg-blue-700 transition">
                    Filter
                </button>
            </form>
        </div>

        {{-- Table --}}
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="text-left text-sm text-slate-500 border-b border-slate-200">
                        <th class="px-6 py-4 font-medium">Customer & Contact</th>
                        <th class="px-6 py-4 font-medium">Product / IMEI</th>
                        <th class="px-6 py-4 font-medium">Supplier Handler</th>
                        <th class="px-6 py-4 font-medium">Status</th>
                        <th class="px-6 py-4 font-medium">Dates</th>
                        <th class="px-6 py-4 font-medium text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="text-sm">
                    @forelse($claims as $claim)
                        @php
                            $statusClasses = [
                                'received' => 'bg-slate-100 text-slate-700 border border-slate-200',
                                'sent_to_supplier' => 'bg-yellow-50 text-yellow-700 border border-yellow-200',
                                'returned_from_supplier' => 'bg-blue-50 text-blue-700 border border-blue-200',
                                'completed' => 'bg-green-50 text-green-700 border border-green-200'
                            ];
                            $statusLabels = [
                                'received' => 'Received from Customer',
                                'sent_to_supplier' => 'Sent to Supplier',
                                'returned_from_supplier' => 'Returned from Supplier',
                                'completed' => 'Claim Completed'
                            ];
                        @endphp
                        <tr class="border-b border-slate-100 hover:bg-slate-50 align-top">
                            <td class="px-6 py-4">
                                <p class="font-bold text-slate-800">{{ $claim->customer_name }}</p>
                                <p class="text-xs text-slate-500">{{ $claim->customer_phone ?? 'No Phone' }}</p>
                                @if($claim->invoice)
                                    <a href="{{ route('admin.invoices.show', $claim->invoice) }}" target="_blank"
                                        class="inline-block mt-1 text-[11px] text-blue-600 hover:underline">
                                        Inv: #{{ $claim->invoice->invoice_number }}
                                    </a>
                                @endif
                            </td>
                            <td class="px-6 py-4">
                                <p class="font-semibold text-slate-700">{{ $claim->product_name }}</p>
                                <p class="text-xs font-mono font-bold text-slate-500">IMEI: {{ $claim->imei_numbers }}</p>
                                <p class="text-xs text-red-500 mt-1 italic font-medium">Fault: {{ Str::limit($claim->issue_description, 50) }}</p>
                                @if($claim->is_replaced)
                                    <div class="mt-2 p-1.5 bg-blue-50 border border-blue-100 rounded text-[11px] text-blue-700">
                                        <strong>🔄 Replaced:</strong> {{ $claim->replacementProduct->name ?? 'Product' }}
                                        @if($claim->replacement_imei)
                                            <br><span class="font-mono">IMEI: {{ $claim->replacement_imei }}</span>
                                        @endif
                                        <br><span>Qty: {{ (float)$claim->replacement_qty }} ({{ $claim->replacementBranch->name ?? 'Branch' }})</span>
                                    </div>
                                @endif
                            </td>
                            <td class="px-6 py-4">
                                @if($claim->supplier)
                                    <p class="font-semibold text-slate-700">{{ $claim->supplier->name }}</p>
                                    <p class="text-xs text-slate-500">{{ $claim->supplier->company_name }}</p>
                                @else
                                    <span class="text-xs text-slate-400">In-house Repair</span>
                                @endif
                            </td>
                            <td class="px-6 py-4">
                                <span class="px-2.5 py-1 rounded-full text-xs font-bold {{ $statusClasses[$claim->status] ?? 'bg-slate-100 text-slate-700' }}">
                                    {{ $statusLabels[$claim->status] ?? ucfirst($claim->status) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-xs text-slate-600 space-y-1">
                                <p><strong>Logged:</strong> {{ $claim->created_at->format('Y-m-d') }}</p>
                                @if($claim->supplier_sent_date)
                                    <p><strong>Sent:</strong> {{ $claim->supplier_sent_date->format('Y-m-d') }}</p>
                                @endif
                                @if($claim->supplier_return_date)
                                    <p><strong>Returned:</strong> {{ $claim->supplier_return_date->format('Y-m-d') }}</p>
                                @endif
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex justify-end gap-2">
                                    <a href="{{ route('admin.repairs.edit', $claim) }}"
                                        class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition" title="Edit / Update Status">
                                        ✏️
                                    </a>
                                    <form action="{{ route('admin.repairs.destroy', $claim) }}" method="POST"
                                        onsubmit="return confirm('Delete this repair claim ticket?')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="p-2 text-red-600 hover:bg-red-50 rounded-lg transition" title="Delete">
                                            🗑️
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-12 text-center text-slate-400">
                                <p class="text-4xl mb-2">🔧</p>
                                <p>No repairs or claims found</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($claims->hasPages())
            <div class="p-6 border-t border-slate-200">
                {{ $claims->links() }}
            </div>
        @endif
    </div>
@endsection