@extends('layouts.admin')

@section('title', 'Manajemen Mitra')

@section('content')
<div class="flex items-center justify-between mb-8">
    <div>
        <h1 class="admin-page-title">Manajemen Mitra</h1>
        <p class="admin-page-subtitle">Kelola logo dan link mitra yang tampil di website</p>
    </div>
    <a href="{{ route('admin.partners.create') }}" class="admin-btn admin-btn-primary">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
        Tambah Mitra
    </a>
</div>

@if(session('success'))
<div class="bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 px-4 py-3 rounded-xl mb-6 text-sm">
    {{ session('success') }}
</div>
@endif

@if($partners->count() > 0)
<div class="admin-card overflow-hidden">
    <table class="w-full">
        <thead>
            <tr class="border-b border-white/5">
                <th class="text-left px-6 py-4 text-xs font-semibold uppercase tracking-wider text-white/30">Urutan</th>
                <th class="text-left px-6 py-4 text-xs font-semibold uppercase tracking-wider text-white/30">Logo</th>
                <th class="text-left px-6 py-4 text-xs font-semibold uppercase tracking-wider text-white/30">Nama Mitra</th>
                <th class="text-left px-6 py-4 text-xs font-semibold uppercase tracking-wider text-white/30">Link</th>
                <th class="text-left px-6 py-4 text-xs font-semibold uppercase tracking-wider text-white/30">Status</th>
                <th class="text-right px-6 py-4 text-xs font-semibold uppercase tracking-wider text-white/30">Aksi</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-white/5">
            @foreach($partners as $partner)
            <tr class="hover:bg-white/[0.02] transition-colors">
                <td class="px-6 py-4">
                    <span class="text-white/50 text-sm font-mono">{{ $partner->sort_order }}</span>
                </td>
                <td class="px-6 py-4">
                    <div class="w-16 h-12 bg-white/5 rounded-lg flex items-center justify-center overflow-hidden border border-white/10">
                        <img src="{{ $partner->logo_url }}" alt="{{ $partner->name }}" class="max-w-full max-h-full object-contain p-1">
                    </div>
                </td>
                <td class="px-6 py-4">
                    <span class="text-white/80 font-semibold text-sm">{{ $partner->name }}</span>
                </td>
                <td class="px-6 py-4">
                    @if($partner->url)
                    <a href="{{ $partner->url }}" target="_blank" class="text-accent hover:text-accent/80 text-sm truncate block max-w-[200px]">
                        {{ $partner->url }}
                    </a>
                    @else
                    <span class="text-white/20 text-sm">—</span>
                    @endif
                </td>
                <td class="px-6 py-4">
                    @if($partner->is_active)
                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-emerald-500/10 text-emerald-400 rounded-full text-xs font-semibold">
                        <span class="w-1.5 h-1.5 bg-emerald-400 rounded-full"></span>
                        Aktif
                    </span>
                    @else
                    <span class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-white/5 text-white/30 rounded-full text-xs font-semibold">
                        <span class="w-1.5 h-1.5 bg-white/30 rounded-full"></span>
                        Nonaktif
                    </span>
                    @endif
                </td>
                <td class="px-6 py-4 text-right">
                    <div class="flex items-center justify-end gap-2">
                        <a href="{{ route('admin.partners.edit', $partner) }}" class="admin-btn-icon" title="Edit">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                        </a>
                        <form action="{{ route('admin.partners.destroy', $partner) }}" method="POST" onsubmit="return confirm('Hapus mitra ini?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="admin-btn-icon text-red-400 hover:bg-red-500/10" title="Hapus">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@else
<div class="admin-card p-12 text-center">
    <div class="w-16 h-16 bg-white/5 rounded-2xl flex items-center justify-center mx-auto mb-4">
        <svg class="w-8 h-8 text-white/20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/></svg>
    </div>
    <h3 class="text-white/60 font-semibold mb-1">Belum Ada Mitra</h3>
    <p class="text-white/30 text-sm">Tambahkan mitra untuk menampilkannya di halaman profil website.</p>
</div>
@endif
@endsection