@extends('admin.layout')
@section('title', 'Iklan Jasa')
@section('subtitle', 'Mitra berbayar yang diangkat ke puncak daftar pada satu jasa')

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

    {{-- Satu halaman mengurus satu jasa. Jasanya dipilih di sini dan dibawa
         lewat query string supaya alamat halamannya bisa dibagikan. --}}
    <form method="GET" action="{{ route('admin.service-promotions') }}" class="bg-white rounded-2xl border border-line p-5 mb-4">
        <label for="service" class="block text-xs font-semibold uppercase tracking-wide text-sub mb-2">Jasa</label>
        <div class="flex flex-wrap gap-3">
            <select id="service" name="service" onchange="this.form.submit()"
                    class="flex-1 min-w-64 rounded-xl border border-line px-3 py-2 text-sm outline-none focus:border-brand focus:ring-2 focus:ring-brand/20">
                @foreach ($services as $item)
                    <option value="{{ $item->id }}" @selected($service && $item->id === $service->id)>
                        {{ $item->parent?->name ? $item->parent->name.' › ' : '' }}{{ $item->name }}
                        @unless ($item->show_on_home) (tidak tampil di home) @endunless
                    </option>
                @endforeach
            </select>
            {{-- Cadangan kalau JavaScript mati. --}}
            <button class="px-4 py-2 rounded-xl border border-line text-sm font-semibold hover:bg-canvas transition">Tampilkan</button>
        </div>
    </form>

    @if (! $service)
        <div class="bg-white rounded-2xl border border-line p-8 text-center text-sub">
            Belum ada jasa yang tampil di home, jadi belum ada yang bisa dipasangi iklan.
            Pilih jasanya dulu di <a href="{{ route('admin.home-services') }}" class="font-semibold text-brand-dark underline">Home Jasa</a>.
        </div>
    @else
        <form method="POST" action="{{ route('admin.service-promotions.update') }}">
            @csrf @method('PUT')
            <input type="hidden" name="category_id" value="{{ $service->id }}">

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

            <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">Tayang</th>
                                <th class="text-left font-semibold px-5 py-3">Mitra</th>
                                <th class="text-left font-semibold px-5 py-3 w-24">Urutan</th>
                                <th class="text-right font-semibold px-5 py-3 w-24">Aksi</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-line">
                            @forelse ($promotions as $promotion)
                                <tr class="hover:bg-canvas transition">
                                    <td class="px-5 py-3">
                                        <input type="checkbox" name="active[{{ $promotion->id }}]" value="1"
                                               @checked($promotion->is_active)
                                               aria-label="Tayangkan {{ $promotion->mitraProfile?->user?->name }}"
                                               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">
                                                {{ $promotion->mitraProfile?->user?->initials() }}
                                            </span>
                                            <div>
                                                <div class="font-semibold">{{ $promotion->mitraProfile?->user?->name ?? '—' }}</div>
                                                <div class="text-xs text-sub">{{ $promotion->mitraProfile?->user?->phone }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-5 py-3">
                                        <input type="number" name="order[{{ $promotion->id }}]" value="{{ $promotion->sort_order }}"
                                               min="0" max="9999" aria-label="Urutan {{ $promotion->mitraProfile?->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>
                                    <td class="px-5 py-3 text-right">
                                        {{-- Tombolnya menyasar form terpisah di bawah: form
                                             hapus tidak boleh bersarang di form urutan. --}}
                                        <button type="submit" form="unset-{{ $promotion->id }}"
                                                class="px-3 py-1.5 rounded-lg border border-line text-xs font-semibold text-red-500 hover:text-red-600 transition">
                                            Lepas
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <tr><td colspan="4" class="px-5 py-8 text-center text-sub">Belum ada mitra yang dipasang di jasa ini.</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            @if ($promotions->isNotEmpty())
                <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 urutan
                    </button>
                </div>
            @endif
        </form>

        @foreach ($promotions as $promotion)
            <form id="unset-{{ $promotion->id }}" method="POST" class="hidden"
                  action="{{ route('admin.service-promotions.destroy', $promotion) }}"
                  onsubmit="return confirm('Lepas {{ $promotion->mitraProfile?->user?->name }} dari jasa {{ $service->name }}?')">
                @csrf @method('DELETE')
            </form>
        @endforeach

        <div class="mt-4 bg-white rounded-2xl border border-line p-5">
            <h2 class="text-xs font-semibold uppercase tracking-wide text-sub mb-3">Pasang mitra</h2>

            @error('mitra_profile_id')
                <p class="mb-3 text-sm text-red-600">{{ $message }}</p>
            @enderror

            @if ($candidates->isEmpty())
                <p class="text-sm text-sub">Semua mitra terverifikasi sudah dipasang di jasa ini.</p>
            @else
                <form method="POST" action="{{ route('admin.service-promotions.store') }}" class="flex flex-wrap gap-3">
                    @csrf
                    <input type="hidden" name="category_id" value="{{ $service->id }}">
                    <select name="mitra_profile_id" required aria-label="Mitra yang dipasang"
                            class="flex-1 min-w-64 rounded-xl border border-line px-3 py-2 text-sm outline-none focus:border-brand focus:ring-2 focus:ring-brand/20">
                        @foreach ($candidates as $candidate)
                            <option value="{{ $candidate->id }}">
                                {{ $candidate->user?->name ?? 'Mitra #'.$candidate->id }}
                                @if ($candidate->user?->phone) — {{ $candidate->user->phone }} @endif
                            </option>
                        @endforeach
                    </select>
                    <button class="px-4 py-2 rounded-xl bg-brand text-white text-sm font-semibold hover:bg-brand-dark transition">
                        Pasang
                    </button>
                </form>
            @endif
        </div>

        <p class="mt-3 text-xs text-sub">
            Mitra yang dipasang tampil di puncak daftar untuk jasa ini sesuai urutan di atas,
            sisanya menyusul urut terdekat seperti biasa. Hanya mitra terverifikasi yang bisa dipasang —
            kalau verifikasinya dicabut, iklannya otomatis berhenti tampil walau barisnya masih ada di sini.
        </p>
    @endif
@endsection