@extends('layouts.admin-apoteker')

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

@section('content')
<div class="container mx-auto py-8">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white">👥 Data Pasien</h1>
        <a href="{{ route('admin.userpatients.create') }}"
           class="inline-block px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition">
            ➕ Tambah User
        </a>
    </div>

    @if (session('success'))
        <script>
            Swal.fire({
                icon: 'success',
                title: 'Berhasil!',
                text: '{{ session('success') }}',
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000
            });
        </script>
    @endif

    <!-- Filter -->
    <form method="GET" class="flex flex-wrap gap-4 items-center mb-6">
        <input type="text" name="search" value="{{ request('search') }}" placeholder="🔍 Cari nama/email/ktp"
               class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-white w-full md:w-1/4 placeholder-gray-400 dark:placeholder-gray-400">

        <select name="gender" class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-white">
            <option value="">Semua Gender</option>
            @foreach ($genders as $gender)
                <option value="{{ $gender }}" {{ request('gender') == $gender ? 'selected' : '' }}>{{ $gender }}</option>
            @endforeach
        </select>

        <select name="kota" class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-white">
            <option value="">Semua Kota</option>
            @foreach ($kotas as $kota)
                <option value="{{ $kota }}" {{ request('kota') == $kota ? 'selected' : '' }}>{{ $kota }}</option>
            @endforeach
        </select>

        <select name="status" class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-white">
            <option value="">Semua Status</option>
            @foreach ($statuses as $status)
                <option value="{{ $status }}" {{ request('status') == $status ? 'selected' : '' }}>{{ $status }}</option>
            @endforeach
        </select>

        <select name="role" class="px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-white">
            <option value="">Semua Role</option>
            @foreach ($roles as $role)
                <option value="{{ $role }}" {{ request('role') == $role ? 'selected' : '' }}>{{ ucfirst($role) }}</option>
            @endforeach
        </select>

        <div class="flex gap-2">
            <button type="submit"
                class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">
                🔍 Filter
            </button>
            <a href="{{ route('admin.userpatients.index') }}"
                class="bg-gray-300 text-gray-800 px-4 py-2 rounded hover:bg-gray-400 transition dark:bg-gray-600 dark:text-white dark:hover:bg-gray-700">
                ♻️ Reset
            </a>
        </div>
    </form>

    <!-- Tombol Export Excel -->
    <a href="{{ route('export.all.users') }}"
    class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition mb-4 inline-block">
    📥 Export Semua Data
 </a>





    <!-- Tabel Data -->
    <div class="bg-white dark:bg-gray-800 rounded shadow overflow-x-auto">
        <table class="w-full table-auto text-sm">
            <thead class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white">
                <tr>
                    <th class="px-4 py-2 text-left">Nama</th>
                    <th class="px-4 py-2 text-left">Email</th>
                    <th class="px-4 py-2">KTP</th>
                    <th class="px-4 py-2">Gender</th>
                    <th class="px-4 py-2">Kota</th>
                    <th class="px-4 py-2">Status</th>
                    <th class="px-4 py-2">Role</th>
                    <th class="px-4 py-2">Aksi</th>
                </tr>
            </thead>
            <tbody class="text-gray-700 dark:text-gray-200">
                @forelse ($users as $user)
                    <tr class="border-b dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                        <td class="px-4 py-2">{{ $user->name }}</td>
                        <td class="px-4 py-2">{{ $user->email }}</td>
                        <td class="px-4 py-2 text-center">{{ $user->ktp }}</td>
                        <td class="px-4 py-2 text-center">{{ $user->gender }}</td>
                        <td class="px-4 py-2 text-center">{{ $user->kota }}</td>
                        <td class="px-4 py-2 text-center">
                            <form action="{{ route('admin.userpatients.toggleStatus', $user->id) }}" method="POST">
                                @csrf
                                @method('PUT')
                                <button type="submit"
                                    class="px-2 py-1 rounded-full text-xs font-semibold
                                        {{ $user->status === 'Aktif' ? 'bg-green-200 text-green-700' : 'bg-red-200 text-red-700' }}
                                        hover:opacity-80 transition">
                                    {{ $user->status }}
                                </button>
                            </form>
                        </td>
                        <td class="px-4 py-2 text-center">
                            @foreach ($user->getRoleNames() as $role)
                                <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full">{{ $role }}</span>
                            @endforeach
                        </td>
                        <td class="px-4 py-2 text-center space-x-2">
                            <a href="{{ route('admin.userpatients.show', $user) }}" class="text-green-600 hover:underline">Lihat</a>
                            <a href="{{ route('admin.userpatients.edit', $user) }}" class="text-blue-600 hover:underline">Edit</a>
                            <a href="{{ route('userpatients.export.kartu', $user->id) }}"
                               class="text-yellow-600 hover:underline"
                               target="_blank" title="Export Kartu">
                                🪪 Kartu
                            </a>
                            <form action="{{ route('admin.userpatients.destroy', $user) }}" method="POST" class="inline-block"
                                  onsubmit="return confirm('Yakin ingin menghapus data ini?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-red-600 hover:underline">Hapus</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="text-center py-4 text-gray-500">Tidak ada data ditemukan.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="mt-4">
        {{ $users->withQueryString()->links() }}
    </div>
</div>
@endsection