@extends('layouts.app')
@section('title', 'Kelola User')
@section('page-title', 'Kelola User')

@section('content')

@if(session('status'))
    <div class="mb-4 px-4 py-3 rounded-xl text-sm font-medium flex items-center gap-2"
         style="background:#f0fdf4;color:#16a34a;border:1px solid #86efac;">
        <i class="fas fa-check-circle"></i> {{ session('status') }}
    </div>
@endif

@if($errors->any())
    <div class="mb-4 px-4 py-3 rounded-xl text-sm font-medium"
         style="background:#fff0f0;color:#dc2626;border:1px solid #fca5a5;">
        <i class="fas fa-exclamation-circle mr-1"></i> {{ $errors->first() }}
    </div>
@endif

{{-- Kartu Statistik --}}
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
    <div class="bg-white p-5 rounded-2xl border border-[#ede8df]" style="box-shadow:0 2px 12px rgba(26,58,42,.06);">
        <p class="text-xs font-semibold uppercase tracking-wider mb-1" style="color:#5a7a67;">Total User</p>
        <h3 class="text-3xl font-bold" style="font-family:'Playfair Display',serif;color:#1a3a2a;">
            {{ $totalAdmin + $totalUser }}
        </h3>
    </div>
    <div class="bg-white p-5 rounded-2xl border border-[#ede8df]" style="box-shadow:0 2px 12px rgba(26,58,42,.06);">
        <p class="text-xs font-semibold uppercase tracking-wider mb-1" style="color:#5a7a67;">Ahli Tanaman</p>
        <h3 class="text-3xl font-bold" style="font-family:'Playfair Display',serif;color:#2d6a4f;">
            {{ $totalAdmin }}
        </h3>
    </div>
    <div class="bg-white p-5 rounded-2xl border border-[#ede8df]" style="box-shadow:0 2px 12px rgba(26,58,42,.06);">
        <p class="text-xs font-semibold uppercase tracking-wider mb-1" style="color:#5a7a67;">Petani</p>
        <h3 class="text-3xl font-bold" style="font-family:'Playfair Display',serif;color:#2563eb;">
            {{ $totalUser }}
        </h3>
    </div>
</div>

{{-- Filter & Search --}}
<div class="bg-white rounded-2xl border border-[#ede8df] p-5 mb-5" style="box-shadow:0 2px 12px rgba(26,58,42,.06);">
    <form method="GET" action="{{ route('users.index') }}" class="flex flex-wrap gap-3 items-end">
        <div class="flex-1 min-w-[200px]">
            <label class="block text-xs font-semibold uppercase tracking-wider mb-1" style="color:#5a7a67;">Cari</label>
            <input type="text" name="search" value="{{ request('search') }}"
                   placeholder="Nama atau email..."
                   class="w-full px-4 py-2.5 rounded-xl border text-sm"
                   style="border-color:#ede8df;color:#1a3a2a;outline:none;" />
        </div>
        <div>
            <label class="block text-xs font-semibold uppercase tracking-wider mb-1" style="color:#5a7a67;">Role</label>
            <select name="role" class="px-4 py-2.5 rounded-xl border text-sm" style="border-color:#ede8df;color:#1a3a2a;outline:none;">
                <option value="">Semua</option>
                <option value="admin"  {{ request('role') === 'admin'  ? 'selected' : '' }}>Ahli Tanaman</option>
                <option value="user"   {{ request('role') === 'user'   ? 'selected' : '' }}>Petani</option>
            </select>
        </div>
        <button type="submit" class="px-5 py-2.5 rounded-xl text-sm font-semibold text-white" style="background:#2d6a4f;">
            <i class="fas fa-search mr-1"></i> Cari
        </button>
        @if(request('search') || request('role'))
        <a href="{{ route('users.index') }}" class="px-5 py-2.5 rounded-xl text-sm font-semibold"
           style="background:#f0fdf4;color:#2d6a4f;border:1.5px solid #b7ddc4;">
            <i class="fas fa-times mr-1"></i> Reset
        </a>
        @endif
    </form>
</div>

{{-- Tabel User --}}
<div class="bg-white rounded-2xl border border-[#ede8df] overflow-hidden" style="box-shadow:0 2px 12px rgba(26,58,42,.06);">

    {{-- Mobile: card --}}
    <div class="mobile-cards" style="display:none;">
        @forelse($users as $user)
        <div style="padding:16px;border-bottom:1px solid #ede8df;">
            <div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;">
                <div style="width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:14px;flex-shrink:0;background:{{ $user->role === 'admin' ? '#2d6a4f' : '#2563eb' }};">
                    {{ strtoupper(substr($user->name, 0, 1)) }}
                </div>
                <div style="flex:1;min-width:0;">
                    <p style="font-weight:600;font-size:14px;color:#1a3a2a;margin:0;">
                        {{ $user->name }}
                        @if($user->id === auth()->id())
                            <span style="font-size:12px;font-weight:400;color:#8fa89a;">(Kamu)</span>
                        @endif
                    </p>
                    <p style="font-size:12px;color:#5a7a67;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ $user->email }}</p>
                </div>
                <span style="padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;flex-shrink:0;background:{{ $user->role === 'admin' ? '#d8f3dc' : '#e0f0ff' }};color:{{ $user->role === 'admin' ? '#2d6a4f' : '#2563eb' }};">
                    {{ $user->role === 'admin' ? 'Ahli' : 'Petani' }}
                </span>
            </div>
            @if($user->id !== auth()->id())
            <div style="display:flex;gap:8px;">
                <form method="POST" action="{{ route('users.updateRole', $user) }}" style="flex:1;">
                    @csrf
                    @method('PATCH')
                    <input type="hidden" name="role" value="{{ $user->role === 'admin' ? 'user' : 'admin' }}">
                    <button type="submit"
                        style="width:100%;padding:8px;border-radius:8px;font-size:12px;font-weight:600;background:#f0fdf4;color:#2d6a4f;border:1px solid #b7ddc4;cursor:pointer;"
                        onclick="return confirm('Ubah role {{ addslashes($user->name) }}?')">
                        <i class="fas fa-exchange-alt" style="margin-right:4px;"></i>
                        Jadikan {{ $user->role === 'admin' ? 'Petani' : 'Ahli' }}
                    </button>
                </form>
                <button onclick="confirmDeleteUser({{ $user->id }}, '{{ addslashes($user->name) }}')"
                    style="padding:8px 12px;border-radius:8px;font-size:12px;font-weight:600;background:#fff0f0;color:#dc2626;border:1px solid #fca5a5;cursor:pointer;">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
            @endif
        </div>
        @empty
        <div style="text-align:center;padding:48px;color:#8fa89a;">
            <i class="fas fa-users" style="font-size:32px;color:#c8d8cc;display:block;margin-bottom:12px;"></i>
            Tidak ada user ditemukan
        </div>
        @endforelse
    </div>

    {{-- Desktop: tabel --}}
    <div class="desktop-table overflow-x-auto">
        <table class="w-full">
            <thead>
                <tr style="background:#f8f4ee;border-bottom:2px solid #ede8df;">
                    <th class="text-left py-3 px-5" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">User</th>
                    <th class="text-left py-3 px-5" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">Email</th>
                    <th class="text-left py-3 px-5" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">Role</th>
                    <th class="text-left py-3 px-5" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">Bergabung</th>
                    <th class="text-left py-3 px-5" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($users as $user)
                <tr style="border-bottom:1px solid rgba(237,232,223,.6);"
                    class="transition" onmouseover="this.style.background='rgba(216,243,220,.2)'" onmouseout="this.style.background=''">
                    <td class="py-3 px-5">
                        <div class="flex items-center gap-3">
                            <div class="w-9 h-9 rounded-full flex items-center justify-center text-white font-bold text-sm flex-shrink-0"
                                 style="background:{{ $user->role === 'admin' ? '#2d6a4f' : '#2563eb' }};">
                                {{ strtoupper(substr($user->name, 0, 1)) }}
                            </div>
                            <div>
                                <p class="text-sm font-semibold" style="color:#1a3a2a;">
                                    {{ $user->name }}
                                    @if($user->id === auth()->id())
                                        <span class="text-xs font-normal ml-1" style="color:#8fa89a;">(Kamu)</span>
                                    @endif
                                </p>
                            </div>
                        </div>
                    </td>
                    <td class="py-3 px-5 text-sm" style="color:#5a7a67;">{{ $user->email }}</td>
                    <td class="py-3 px-5">
                        <span class="px-3 py-1 rounded-full text-xs font-semibold"
                              style="background:{{ $user->role === 'admin' ? '#d8f3dc' : '#e0f0ff' }};
                                     color:{{ $user->role === 'admin' ? '#2d6a4f' : '#2563eb' }};">
                            <i class="fas {{ $user->role === 'admin' ? 'fa-user-tie' : 'fa-seedling' }} mr-1"></i>
                            {{ $user->role === 'admin' ? 'Ahli Tanaman' : 'Petani' }}
                        </span>
                    </td>
                    <td class="py-3 px-5 text-sm" style="color:#8fa89a;">{{ $user->created_at->format('d M Y') }}</td>
                    <td class="py-3 px-5">
                        @if($user->id !== auth()->id())
                        <div class="flex items-center gap-2">
                            <form method="POST" action="{{ route('users.updateRole', $user) }}">
                                @csrf
                                @method('PATCH')
                                <input type="hidden" name="role" value="{{ $user->role === 'admin' ? 'user' : 'admin' }}">
                                <button type="submit"
                                    class="px-3 py-1.5 rounded-lg text-xs font-semibold transition"
                                    style="background:#f0fdf4;color:#2d6a4f;border:1px solid #b7ddc4;"
                                    onmouseover="this.style.background='#d8f3dc'" onmouseout="this.style.background='#f0fdf4'"
                                    onclick="return confirm('Ubah role {{ addslashes($user->name) }} menjadi {{ $user->role === 'admin' ? 'Petani' : 'Ahli Tanaman' }}?')">
                                    <i class="fas fa-exchange-alt mr-1"></i>
                                    Jadikan {{ $user->role === 'admin' ? 'Petani' : 'Ahli Tanaman' }}
                                </button>
                            </form>
                            <button onclick="confirmDeleteUser({{ $user->id }}, '{{ addslashes($user->name) }}')"
                                class="px-3 py-1.5 rounded-lg text-xs font-semibold transition"
                                style="background:#fff0f0;color:#dc2626;border:1px solid #fca5a5;"
                                onmouseover="this.style.background='#fee2e2'" onmouseout="this.style.background='#fff0f0'">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                        @else
                        <span class="text-xs" style="color:#c8d8cc;">—</span>
                        @endif
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="text-center py-12" style="color:#8fa89a;">
                        <i class="fas fa-users text-3xl mb-3 block" style="color:#c8d8cc;"></i>
                        Tidak ada user ditemukan
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @if($users->hasPages())
    <div class="px-5 py-4" style="border-top:1px solid #ede8df;">
        {{ $users->links() }}
    </div>
    @endif
</div>

{{-- Modal Konfirmasi Hapus User --}}
<div id="deleteUserModal" class="fixed inset-0 z-50 hidden flex items-center justify-center"
     style="background:rgba(0,0,0,0.4);">
    <div class="bg-white rounded-2xl p-6 w-full max-w-sm mx-4 shadow-2xl"
         style="animation: popIn .25s cubic-bezier(0.22,1,0.36,1);">
        <div class="text-center mb-4">
            <div class="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3"
                 style="background:#fff0f0;">
                <i class="fas fa-user-times text-2xl" style="color:#dc2626;"></i>
            </div>
            <h3 class="text-lg font-bold mb-1" style="font-family:'Playfair Display',serif;color:#1a3a2a;">Hapus User?</h3>
            <p class="text-sm" style="color:#5a7a67;">
                Kamu akan menghapus akun<br>
                <strong id="deleteUserName" style="color:#1a3a2a;"></strong>
            </p>
            <p class="text-xs mt-2" style="color:#dc2626;">⚠️ Semua data diagnosa user ikut terhapus.</p>
        </div>
        <div class="flex gap-3 mt-4">
            <button onclick="closeUserModal()"
                class="flex-1 py-2.5 rounded-xl text-sm font-semibold"
                style="background:#f0fdf4;color:#2d6a4f;border:1.5px solid #b7ddc4;">
                Batal
            </button>
            <form id="deleteUserForm" method="POST" class="flex-1">
                @csrf
                @method('DELETE')
                <button type="submit" class="w-full py-2.5 rounded-xl text-sm font-semibold text-white" style="background:#dc2626;">
                    Ya, Hapus
                </button>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
    function confirmDeleteUser(id, name) {
        document.getElementById('deleteUserName').textContent = name;
        document.getElementById('deleteUserForm').action = '{{ route("users.destroy", ":id") }}'.replace(':id', id);
        document.getElementById('deleteUserModal').classList.remove('hidden');
    }
    function closeUserModal() {
        document.getElementById('deleteUserModal').classList.add('hidden');
    }
    document.getElementById('deleteUserModal').addEventListener('click', function(e) {
        if (e.target === this) closeUserModal();
    });
</script>
<style>
    @media (max-width: 640px) {
        .mobile-cards { display: block !important; }
        .desktop-table { display: none !important; }
    }
    @keyframes popIn {
        from { transform: scale(0.85); opacity: 0; }
        to   { transform: scale(1);    opacity: 1; }
    }
</style>
@endpush