@extends('layouts.app')

@section('title', 'Persetujuan akun — Super Admin')

@section('content')
    <div style="margin-bottom:18px;">
        <h1 style="margin:0 0 6px; font-size:22px; font-weight:800;">Persetujuan akun</h1>
        <p style="margin:0; color:#6b7280; font-size:14px;">Kelola pendaftar baru dan permintaan upgrade peran (Operator → Bos / Mekanik).</p>
    </div>

    @if (session('status'))
        <div style="background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; padding:12px 14px; border-radius:10px; margin-bottom:16px; font-size:14px;">
            {{ session('status') }}
        </div>
    @endif

    @if ($errors->has('reject'))
        <div style="background:#fff2f2; border:1px solid #ffd0d0; color:#b00020; padding:12px 14px; border-radius:10px; margin-bottom:16px; font-size:14px;">
            {{ $errors->first('reject') }}
        </div>
    @endif

    <div style="display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; align-items:center;">
        <form method="GET" action="{{ route('admin.approvals') }}" style="display:flex; flex-wrap:wrap; gap:8px; align-items:center;">
            <input type="search" name="q" value="{{ $searchQ }}" placeholder="Cari nama / email" style="padding:8px 12px; border:1px solid #e5e7eb; border-radius:8px; min-width:200px;">
            <select name="status" style="padding:8px 12px; border:1px solid #e5e7eb; border-radius:8px;">
                <option value="">Semua status</option>
                <option value="pending" @selected($filterStatus === 'pending')>Menunggu</option>
                <option value="approved" @selected($filterStatus === 'approved')>Disetujui</option>
                <option value="rejected" @selected($filterStatus === 'rejected')>Ditolak</option>
            </select>
            <button type="submit" style="padding:8px 14px; background:#1d4ed8; color:#fff; border:0; border-radius:8px; font-weight:600; cursor:pointer;">Filter</button>
        </form>
    </div>

    <div style="background:#fff; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,0.08); overflow:auto;">
        <table style="width:100%; border-collapse:collapse; min-width:720px;">
            <thead>
                <tr style="text-align:left; font-size:13px; color:#6b7280;">
                    <th style="padding:12px 14px; border-bottom:1px solid #eee;">Pengguna</th>
                    <th style="padding:12px 14px; border-bottom:1px solid #eee;">Peran saat ini</th>
                    <th style="padding:12px 14px; border-bottom:1px solid #eee;">Status</th>
                    <th style="padding:12px 14px; border-bottom:1px solid #eee;">Permintaan</th>
                    <th style="padding:12px 14px; border-bottom:1px solid #eee;">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($users as $u)
                    <tr>
                        <td style="padding:14px; border-bottom:1px solid #f3f4f6; vertical-align:top;">
                            <div style="font-weight:700;">{{ $u->name }}</div>
                            <div style="font-size:13px; color:#6b7280;">{{ $u->email }}</div>
                            <div style="font-size:12px; color:#9ca3af; margin-top:4px;">Daftar: {{ $u->created_at?->format('d/m/Y H:i') }}</div>
                        </td>
                        <td style="padding:14px; border-bottom:1px solid #f3f4f6; vertical-align:top;">
                            <span style="font-weight:600;">{{ $u->role }}</span>
                        </td>
                        <td style="padding:14px; border-bottom:1px solid #f3f4f6; vertical-align:top;">
                            @if ($u->approval_status === 'pending')
                                <span style="background:#fef3c7; color:#92400e; padding:3px 8px; border-radius:6px; font-size:12px; font-weight:700;">Menunggu</span>
                            @elseif ($u->approval_status === 'rejected')
                                <span style="background:#fee2e2; color:#991b1b; padding:3px 8px; border-radius:6px; font-size:12px; font-weight:700;">Ditolak</span>
                            @else
                                <span style="background:#d1fae5; color:#065f46; padding:3px 8px; border-radius:6px; font-size:12px; font-weight:700;">Aktif</span>
                            @endif
                        </td>
                        <td style="padding:14px; border-bottom:1px solid #f3f4f6; vertical-align:top; font-size:13px;">
                            @if ($u->requested_role)
                                <strong style="color:#1d4ed8;">↑ {{ $u->requested_role }}</strong>
                            @else
                                <span style="color:#9ca3af;">—</span>
                            @endif
                        </td>
                        <td style="padding:14px; border-bottom:1px solid #f3f4f6; vertical-align:top;">
                            <div style="display:flex; flex-direction:column; gap:8px; align-items:flex-start;">
                                <a href="{{ route('admin.users.preview', $u) }}" style="font-size:13px; font-weight:600; color:#1d4ed8;">Lihat profil ringkas</a>
                                @if ($u->role !== 'super_admin')
                                    <form method="POST" action="{{ route('admin.users.role', $u) }}" style="display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0;">
                                        @csrf
                                        <select name="role" style="padding:6px 8px; border-radius:6px; border:1px solid #e5e7eb; font-size:13px;">
                                            <option value="operator" @selected($u->role === 'operator')>Operator</option>
                                            <option value="mekanik" @selected($u->role === 'mekanik')>Mekanik</option>
                                            <option value="bos" @selected($u->role === 'bos')>Bos</option>
                                        </select>
                                        <button type="submit" style="padding:6px 10px; background:#111827; color:#fff; border:0; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer;">Terapkan & setujui</button>
                                    </form>
                                    @if ($u->approval_status === 'pending')
                                        <form method="POST" action="{{ route('admin.users.reject', $u) }}" style="margin:0;" onsubmit="return confirm('Tolak akun ini?');">
                                            @csrf
                                            <button type="submit" style="padding:6px 10px; background:#fff; color:#b91c1c; border:1px solid #fecaca; border-radius:6px; font-size:12px; font-weight:600; cursor:pointer;">Tolak pendaftaran</button>
                                        </form>
                                    @endif
                                @endif
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" style="padding:24px; color:#6b7280;">Tidak ada pengguna.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div style="margin-top:16px;">
        {{ $users->links() }}
    </div>
@endsection