@extends('layouts.app')
@section('title','Order Servis')
@section('page-title','Order Servis')

@section('content')
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4">
    <form method="GET" class="flex flex-wrap gap-2">
        <input type="search" name="q" value="{{ request('q') }}" placeholder="No. SRV / pelanggan..."
               class="border border-gray-300 rounded-lg px-3 py-2 text-sm w-52 focus:outline-none focus:ring-2 focus:ring-blue-500">
        <select name="status" class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
            <option value="">Semua Status</option>
            @foreach(['menunggu'=>'Menunggu','didiagnosa'=>'Didiagnosa','dalam_perbaikan'=>'Dalam Perbaikan','menunggu_sparepart'=>'Menunggu Sparepart','siap_diambil'=>'Siap Diambil','selesai'=>'Selesai','dibatalkan'=>'Dibatalkan'] as $val=>$lbl)
            <option value="{{ $val }}" {{ request('status')===$val?'selected':'' }}>{{ $lbl }}</option>
            @endforeach
        </select>
        <button type="submit" class="bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium px-4 py-2 rounded-lg">Cari</button>
        @if(request('q')||request('status'))<a href="{{ route('service-orders.index') }}" class="bg-gray-100 text-gray-500 text-sm px-3 py-2 rounded-lg">✕</a>@endif
    </form>
    <a href="{{ route('service-orders.create') }}" class="bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium px-4 py-2 rounded-lg transition whitespace-nowrap">+ Order Baru</a>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <table class="w-full text-sm">
        <thead class="bg-gray-50 border-b border-gray-100">
            <tr>
                <th class="text-left px-4 py-3 text-gray-500 font-medium">No. SRV</th>
                <th class="text-left px-4 py-3 text-gray-500 font-medium">Pelanggan</th>
                <th class="text-left px-4 py-3 text-gray-500 font-medium hidden md:table-cell">Perangkat</th>
                <th class="text-left px-4 py-3 text-gray-500 font-medium hidden lg:table-cell">Teknisi</th>
                <th class="text-left px-4 py-3 text-gray-500 font-medium hidden md:table-cell">Masuk</th>
                <th class="text-center px-4 py-3 text-gray-500 font-medium">Status</th>
                <th class="px-4 py-3 text-center text-gray-500 font-medium w-28">Aksi</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-50">
            @forelse($orders as $order)
            @php
                $rPhone = preg_replace('/[^0-9]/', '', $order->customer?->phone ?? '');
                if ($rPhone && str_starts_with($rPhone, '0')) $rPhone = '62' . substr($rPhone, 1);
                elseif ($rPhone && str_starts_with($rPhone, '+62')) $rPhone = substr($rPhone, 1);
                $rStatus  = $order->status_label;
                $rAppName = \App\Models\Setting::get('app_name', 'GMComp');
                $rMsg = implode("\n", [
                    "Halo {$order->customer?->name},",
                    "",
                    "Berikut update status servis perangkat Anda di {$rAppName}:",
                    "",
                    "No. Nota  : {$order->order_number}",
                    "Perangkat : {$order->device_type} {$order->device_brand}",
                    "Status    : {$rStatus}",
                    "",
                    "Silakan hubungi kami jika ada pertanyaan.",
                    "Terima kasih.",
                ]);
            @endphp
            <tr class="hover:bg-gray-50">
                <td class="px-4 py-3 font-mono text-xs text-gray-600">{{ $order->order_number }}</td>
                <td class="px-4 py-3">
                    <p class="font-medium text-gray-800">{{ $order->customer?->name }}</p>
                    @if($order->wa_sent_at)<p class="text-xs text-green-600 mt-0.5">WA {{ $order->wa_sent_at->format('d/m H:i') }}</p>@endif
                </td>
                <td class="px-4 py-3 text-gray-600 hidden md:table-cell text-xs">{{ $order->device_type }} {{ $order->device_brand }}</td>
                <td class="px-4 py-3 text-gray-500 text-xs hidden lg:table-cell">{{ $order->technician?->name ?? '-' }}</td>
                <td class="px-4 py-3 text-gray-500 hidden md:table-cell">{{ $order->received_at->format('d/m/Y') }}</td>
                <td class="px-4 py-3 text-center">
                    @php $c=$order->status_color @endphp
                    <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-{{ $c }}-100 text-{{ $c }}-700">{{ $order->status_label }}</span>
                </td>
                <td class="px-4 py-3 text-center">
                    <div class="flex items-center justify-center gap-2">
                        <a href="{{ route('service-orders.show',$order) }}" class="text-blue-600 hover:text-blue-800 text-xs font-medium">Detail</a>
                        @if($rPhone)
                        <a href="https://wa.me/{{ $rPhone }}?text={{ rawurlencode($rMsg) }}" target="_blank"
                           title="{{ $order->wa_sent_at ? 'WA terkirim '.$order->wa_sent_at->format('d/m/Y H:i') : 'Kirim WhatsApp' }}"
                           onclick="fetch('{{ route('service-orders.whatsapp',$order) }}',{method:'POST',headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}','Content-Type':'application/json'}})"
                           class="text-{{ $order->wa_sent_at ? 'gray-400' : 'green-600' }} hover:text-green-700 text-base leading-none" title="Kirim WA">📲</a>
                        @endif
                    </div>
                </td>
            </tr>
            @empty
            <tr><td colspan="7" class="px-4 py-10 text-center text-gray-400">Belum ada order servis.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
@if($orders->hasPages())<div class="mt-4">{{ $orders->links() }}</div>@endif
@endsection