<x-app-layout>
    <x-slot name="title">Kelola Pemain</x-slot>

    <div class="d-flex align-items-start justify-content-between mb-4 flex-wrap gap-3">
        <div>
            <div style="font-size:20px;font-weight:800;color:#0f172a;font-family:'Plus Jakarta Sans',sans-serif">Kelola Pemain</div>
            <div style="font-size:13px;color:#64748b">Ban, unban, dan lihat detail pemain</div>
        </div>
        <form method="GET" class="d-flex gap-2" style="width:100%;max-width:320px">
            <input type="text" name="search" value="{{ request('search') }}"
                   placeholder="Cari username…" class="pes-input" style="min-width:0;flex:1">
            <button class="btn-pes-primary" style="flex-shrink:0"><i class="ti ti-search"></i></button>
        </form>
    </div>

    <div class="pes-card">
        <div style="overflow-x:auto">
            <table class="pes-table">
                <thead>
                    <tr>
                        <th>Pemain</th>
                        <th>ELO / Divisi</th>
                        <th class="d-none d-md-table-cell">W / L / D</th>
                        <th class="d-none d-lg-table-cell">Bergabung</th>
                        <th>Status</th>
                        <th>Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($players as $player)
                        @php $div = getDivision($player->elo); @endphp
                        <tr>
                            <td>
                                <div class="d-flex align-items-center gap-2">
                                    <img src="{{ $player->avatar ?? 'https://ui-avatars.com/api/?name='.urlencode($player->username).'&background=1d4ed8&color=fff' }}"
                                         style="width:36px;height:36px;border-radius:10px;object-fit:cover" alt="">
                                    <div>
                                        <div style="font-size:13px;font-weight:600;color:#0f172a">{{ $player->username }}</div>
                                        <div style="font-size:11px;color:#94a3b8">{{ $player->discord_username }}</div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <div style="font-size:14px;font-weight:800;color:#1d4ed8;font-family:'Plus Jakarta Sans',sans-serif">{{ number_format($player->elo) }}</div>
                                <span class="div-badge {{ $div['cls'] }}" style="font-size:10px">{{ $div['name'] }}</span>
                            </td>
                            <td class="d-none d-md-table-cell" style="font-size:13px">
                                <span style="color:#16a34a;font-weight:600">{{ $player->wins }}</span>
                                <span style="color:#e2e8f0;margin:0 2px">/</span>
                                <span style="color:#dc2626;font-weight:600">{{ $player->losses }}</span>
                                <span style="color:#e2e8f0;margin:0 2px">/</span>
                                <span style="color:#64748b">{{ $player->draws }}</span>
                            </td>
                            <td class="d-none d-lg-table-cell" style="font-size:12px;color:#64748b">{{ $player->created_at->format('d M Y') }}</td>
                            <td>
                                @if($player->is_banned)
                                <span style="background:#fef2f2;color:#dc2626;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700">Dibanned</span>
                                @else
                                <span style="background:#f0fdf4;color:#16a34a;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700">Aktif</span>
                                @endif
                            </td>
                            <td>
                                @if($player->is_banned)
                                    <form method="POST" action="{{ route('admin.players.unban', $player->id) }}" style="display:inline">
                                        @csrf
                                        <button class="btn-pes-secondary" style="font-size:12px;padding:5px 12px;background:#f0fdf4;color:#16a34a;border-color:#bbf7d0">
                                            <i class="ti ti-lock-open"></i> Unban
                                        </button>
                                    </form>
                                @else
                                    <button class="btn-pes-secondary" style="font-size:12px;padding:5px 12px;background:#fef2f2;color:#dc2626;border-color:#fecaca"
                                            data-bs-toggle="modal" data-bs-target="#ban-{{ $player->id }}">
                                        <i class="ti ti-ban"></i> Ban
                                    </button>

                                    <!-- Ban modal -->
                                    <div class="modal fade" id="ban-{{ $player->id }}" tabindex="-1">
                                        <div class="modal-dialog modal-dialog-centered">
                                            <div class="modal-content" style="border-radius:20px;border:none">
                                                <div class="modal-header" style="border-bottom:1px solid #f1f5f9;padding:20px 24px">
                                                    <h5 class="modal-title" style="font-size:16px;font-weight:700;color:#0f172a">Ban {{ $player->username }}?</h5>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                                </div>
                                                <form method="POST" action="{{ route('admin.players.ban', $player->id) }}">
                                                    @csrf
                                                    <div class="modal-body" style="padding:20px 24px">
                                                        <label class="pes-label">Alasan Ban</label>
                                                        <textarea name="reason" rows="3" class="pes-input" required placeholder="Tulis alasan ban..."></textarea>
                                                    </div>
                                                    <div class="modal-footer" style="border-top:1px solid #f1f5f9;padding:16px 24px;gap:8px">
                                                        <button type="submit" class="btn-pes-primary" style="background:#dc2626">
                                                            <i class="ti ti-ban"></i> Konfirmasi Ban
                                                        </button>
                                                        <button type="button" class="btn-pes-secondary" data-bs-dismiss="modal">Batal</button>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6" style="text-align:center;padding:48px;color:#94a3b8">Tidak ada pemain ditemukan</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($players->hasPages())
        <div style="padding:14px 20px;border-top:1px solid #f1f5f9">{{ $players->links() }}</div>
        @endif
    </div>
</x-app-layout>
