@extends('admin.layout')
@section('title', 'Rekomendasi Mitra')
@section('subtitle', 'Mitra yang diangkat di bagian rekomendasi home customer')

@section('content')
    <x-flash />

    <form method="POST" action="{{ route('admin.recommendations.update') }}">
        @csrf @method('PUT')

        <div class="flex flex-wrap items-center gap-3 mb-4">
            <div class="text-sm text-sub">
                Terpilih: <span class="font-bold text-ink">{{ $selected->count() }} mitra</span>.
                Angka di kanan menentukan urutan tampil (kecil = duluan).
            </div>
            <button class="ml-auto px-4 py-2 rounded-xl bg-brand text-white text-sm font-semibold hover:bg-brand-dark transition">
                Simpan pilihan
            </button>
        </div>

        @if ($selected->isNotEmpty())
            <div class="bg-white rounded-2xl border border-line p-5 mb-4">
                <h2 class="text-xs font-semibold uppercase tracking-wide text-sub mb-3">Urutan di home</h2>
                <div class="flex flex-wrap gap-2">
                    @foreach ($selected as $i => $item)
                        <span class="inline-flex items-center gap-2 px-3 py-2 rounded-xl bg-brand-soft text-brand-dark text-sm font-semibold">
                            <span class="w-5 h-5 rounded-full bg-white text-[11px] grid place-items-center">{{ $i + 1 }}</span>
                            {{ $item->user?->name }}
                        </span>
                    @endforeach
                </div>
            </div>
        @endif

        <div class="bg-white rounded-2xl border border-line overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-canvas text-sub text-xs uppercase tracking-wide">
                        <tr>
                            <th class="text-left font-semibold px-5 py-3 w-12">Tampil</th>
                            <th class="text-left font-semibold px-5 py-3">Mitra</th>
                            <th class="text-left font-semibold px-5 py-3">Urutan</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-line">
                        @forelse ($mitra as $m)
                            <tr class="hover:bg-canvas transition">
                                <td class="px-5 py-3">
                                    {{-- Penanda "baris ini ikut disimpan". Tanpa ini, menyimpan
                                         dari satu halaman akan mencabut pilihan di halaman lain. --}}
                                    <input type="hidden" name="visible[]" value="{{ $m->id }}">
                                    <input type="checkbox" name="mitra[]" value="{{ $m->id }}" @checked($m->is_recommended)
                                           class="w-4 h-4 rounded border-line text-brand focus:ring-brand/30">
                                </td>
                                <td class="px-5 py-3">
                                    <div class="flex items-center gap-3">
                                        <span class="w-8 h-8 rounded-full bg-accent-soft text-accent grid place-items-center text-xs font-bold">
                                            {{ $m->user?->initials() }}
                                        </span>
                                        <div>
                                            <div class="font-semibold">{{ $m->user?->name ?? '—' }}</div>
                                            <div class="text-xs text-sub">{{ $m->user?->phone }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-5 py-3">
                                    <input type="number" name="order[{{ $m->id }}]" value="{{ $m->recommend_sort_order }}"
                                           min="0" max="9999" aria-label="Urutan {{ $m->user?->name }}"
                                           class="w-16 rounded-lg border border-line px-2 py-1 text-sm text-center outline-none focus:border-brand focus:ring-2 focus:ring-brand/20">
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="3" class="px-5 py-8 text-center text-sub">Belum ada mitra terverifikasi.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <x-pagination :paginator="$mitra" unit="mitra terverifikasi" />

        <p class="mt-3 text-xs text-sub">
            Perubahan disimpan per halaman — pilihan di halaman lain tidak ikut terpengaruh.
            Hanya mitra terverifikasi yang bisa dipilih. Kalau verifikasi seorang mitra dicabut,
            ia otomatis berhenti tampil di home walau tandanya masih menyala di sini.
        </p>

        <div class="mt-4 flex justify-end">
            <button class="px-4 py-2 rounded-xl bg-brand text-white text-sm font-semibold hover:bg-brand-dark transition">
                Simpan pilihan
            </button>
        </div>
    </form>
@endsection