@extends('layouts.kurir_sidebar')

@section('title', 'Data Pelanggan')

@section('content')
<div class="space-y-4">

    {{-- Header --}}
    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-lg font-extrabold text-slate-800 tracking-tight">Daftar Pelanggan</h2>
            <p class="text-xs text-slate-400 font-medium mt-0.5">Total {{ count($pelanggan) }} pelanggan terdaftar</p>
        </div>
        <div class="w-10 h-10 bg-green-100 rounded-2xl flex items-center justify-center">
            <i data-lucide="users" class="w-5 h-5 text-green-600"></i>
        </div>
    </div>

    {{-- Search Box --}}
    <div class="relative">
        <i data-lucide="search" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none"></i>
        <input type="text" id="searchInput" placeholder="Cari nama atau alamat pelanggan..."
               class="w-full pl-10 pr-4 py-3 rounded-2xl border border-slate-200 bg-white text-sm font-medium focus:outline-none focus:ring-2 focus:ring-green-400/30 focus:border-green-400 transition-all shadow-sm"
               oninput="filterPelanggan(this.value)">
    </div>

    {{-- === DESKTOP: Table View (hidden on mobile) === --}}
    <div class="hidden md:block bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
        <table class="w-full text-left">
            <thead class="bg-slate-50 text-slate-500 text-[10px] uppercase tracking-widest border-b border-slate-100">
                <tr>
                    <th class="px-6 py-4">ID Pelanggan</th>
                    <th class="px-6 py-4">Nama</th>
                    <th class="px-6 py-4">Alamat & Lokasi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-50" id="desktopTableBody">
                @foreach($pelanggan as $p)
                @php
                    $koordinat = trim($p->titik_koordinat ?? '');
                    $hasCoord  = !empty($koordinat);
                    // Format terbaik: langsung ke koordinat GPS / search teks
                    if ($hasCoord) {
                        $mapsUrl = 'https://maps.google.com/?q=' . urlencode($koordinat);
                    } else {
                        $mapsUrl = 'https://maps.google.com/?q=' . urlencode(($p->address ?? '') . ', Indonesia');
                    }
                @endphp
                <tr class="hover:bg-slate-50/70 transition-colors pelanggan-row"
                    data-name="{{ strtolower($p->name) }}"
                    data-address="{{ strtolower($p->address ?? '') }}">
                    <td class="px-6 py-4">
                        <span class="font-mono text-xs text-slate-400 bg-slate-100 px-2 py-1 rounded-lg">{{ $p->customers_id }}</span>
                    </td>
                    <td class="px-6 py-4">
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-xl bg-green-100 text-green-700 font-black text-sm flex items-center justify-center shrink-0">
                                {{ strtoupper(substr($p->name, 0, 1)) }}
                            </div>
                            <span class="font-semibold text-slate-800 text-sm">{{ $p->name }}</span>
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        @if(!empty($p->address))
                            <a href="{{ $mapsUrl }}" target="_blank"
                               class="inline-flex items-center gap-2 text-xs text-blue-600 hover:text-blue-800 group max-w-xs">
                                <span class="w-5 h-5 shrink-0 rounded-lg flex items-center justify-center {{ $hasCoord ? 'bg-green-100' : 'bg-blue-50' }}">
                                    <i data-lucide="{{ $hasCoord ? 'map-pin' : 'search' }}" class="w-3 h-3 {{ $hasCoord ? 'text-green-600' : 'text-blue-500' }}"></i>
                                </span>
                                <span class="truncate group-hover:underline">{{ $p->address }}</span>
                                @if($hasCoord)
                                    <span class="shrink-0 text-[10px] font-bold text-green-600 bg-green-50 px-1.5 py-0.5 rounded-full">GPS</span>
                                @endif
                            </a>
                        @else
                            <span class="text-slate-300 text-xs italic">Belum ada alamat</span>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
        <div id="desktopEmptyState" class="hidden py-12 text-center text-slate-400 font-medium text-sm">
            <i data-lucide="search-x" class="w-8 h-8 mx-auto mb-2 text-slate-300"></i>
            Tidak ada pelanggan ditemukan
        </div>
    </div>

    {{-- === MOBILE: Card View (hidden on desktop) === --}}
    <div class="md:hidden space-y-3" id="mobileCardList">
        @foreach($pelanggan as $p)
        @php
            $koordinat = trim($p->titik_koordinat ?? '');
            $hasCoord  = !empty($koordinat);
            if ($hasCoord) {
                $mapsUrl = 'https://maps.google.com/?q=' . urlencode($koordinat);
            } else {
                $mapsUrl = 'https://maps.google.com/?q=' . urlencode(($p->address ?? '') . ', Indonesia');
            }
        @endphp
        <div class="bg-white rounded-2xl border border-slate-100 shadow-sm p-4 pelanggan-card"
             data-name="{{ strtolower($p->name) }}"
             data-address="{{ strtolower($p->address ?? '') }}">
            <div class="flex items-start gap-3">
                {{-- Avatar --}}
                <div class="w-11 h-11 rounded-2xl bg-gradient-to-br from-green-400 to-green-600 text-white font-black text-base flex items-center justify-center shrink-0 shadow-md shadow-green-500/20">
                    {{ strtoupper(substr($p->name, 0, 1)) }}
                </div>

                {{-- Info --}}
                <div class="flex-1 min-w-0">
                    <div class="flex items-center justify-between gap-2">
                        <p class="font-bold text-slate-800 text-sm truncate">{{ $p->name }}</p>
                        <span class="shrink-0 font-mono text-[10px] text-slate-400 bg-slate-100 px-2 py-0.5 rounded-lg">{{ $p->customers_id }}</span>
                    </div>

                    @if(!empty($p->address))
                        {{-- Alamat teks --}}
                        <p class="text-xs text-slate-500 mt-1 leading-relaxed">
                            <i data-lucide="map" class="w-3 h-3 inline-block mr-1 text-slate-400"></i>
                            {{ $p->address }}
                        </p>

                        {{-- Tombol buka Maps --}}
                        <a href="{{ $mapsUrl }}" target="_blank"
                           class="mt-2.5 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-xs font-bold transition-all active:scale-95
                                  {{ $hasCoord
                                     ? 'bg-green-50 text-green-700 border border-green-200 hover:bg-green-100'
                                     : 'bg-blue-50 text-blue-700 border border-blue-200 hover:bg-blue-100' }}">
                            <i data-lucide="{{ $hasCoord ? 'map-pin' : 'search' }}" class="w-3.5 h-3.5"></i>
                            {{ $hasCoord ? 'Buka di Maps (GPS)' : 'Cari di Google Maps' }}
                            @if($hasCoord)
                                <span class="text-[9px] font-black bg-green-200 text-green-800 px-1.5 py-0.5 rounded-full ml-0.5">✓ Akurat</span>
                            @endif
                        </a>
                    @else
                        <p class="text-xs text-slate-300 italic mt-1">Belum ada alamat</p>
                    @endif
                </div>
            </div>
        </div>
        @endforeach

        <div id="mobileEmptyState" class="hidden py-12 text-center text-slate-400 font-medium text-sm">
            <i data-lucide="search-x" class="w-8 h-8 mx-auto mb-2 text-slate-300"></i>
            Tidak ada pelanggan ditemukan
        </div>
    </div>

</div>

<script>
function filterPelanggan(query) {
    const q = query.toLowerCase().trim();

    // Desktop rows
    const rows = document.querySelectorAll('.pelanggan-row');
    let visibleRows = 0;
    rows.forEach(row => {
        const match = row.dataset.name.includes(q) || row.dataset.address.includes(q);
        row.style.display = match ? '' : 'none';
        if (match) visibleRows++;
    });
    document.getElementById('desktopEmptyState').classList.toggle('hidden', visibleRows > 0);

    // Mobile cards
    const cards = document.querySelectorAll('.pelanggan-card');
    let visibleCards = 0;
    cards.forEach(card => {
        const match = card.dataset.name.includes(q) || card.dataset.address.includes(q);
        card.style.display = match ? '' : 'none';
        if (match) visibleCards++;
    });
    document.getElementById('mobileEmptyState').classList.toggle('hidden', visibleCards > 0);
}
</script>
@endsection