@extends('layouts.admin-apoteker')

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

@section('content')
<div class="container mx-auto space-y-6">
    {{-- Judul & Tambah --}}
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white">🧬 Pelayanan Farmasi Klinik</h1>

    <div class="flex flex-wrap gap-2">
        <a href="{{ route('patients.export.excel') }}"
           class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-lg shadow hover:bg-green-700 transition">
            📊 Export Excel
        </a>

        <a href="{{ route('patients.create') }}"
           class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg shadow hover:bg-blue-700 transition">
            ➕ Tambah Pasien
        </a>
    </div>
</div>


    {{-- Filter Pencarian --}}
    <form method="GET" class="mb-6 space-x-2">
        <input type="text" name="nama" value="{{ request('nama') }}"
               placeholder="Cari nama pasien..."
               class="px-3 py-2 border rounded dark:bg-gray-800 dark:text-white">
        <input type="date" name="dari" value="{{ request('dari') }}"
               class="px-3 py-2 border rounded dark:bg-gray-800 dark:text-white">
        <input type="date" name="sampai" value="{{ request('sampai') }}"
               class="px-3 py-2 border rounded dark:bg-gray-800 dark:text-white">
        <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">🔍 Cari</button>
        <a href="{{ route('patients.index') }}"
           class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">🔄 Reset</a>
    </form>

{{-- Tabel Pasien --}}
<div class="overflow-x-auto bg-white dark:bg-gray-800 rounded shadow">
    <table class="min-w-full table-auto text-sm">
        <thead class="bg-gray-100 dark:bg-gray-700">
            <tr>
                <th class="px-4 py-2 text-left">#</th>
                <th class="px-4 py-2 text-left">Nama</th>
                <th class="px-4 py-2 text-left">Tanggal Lahir</th>
                <th class="px-4 py-2 text-left">Jenis Kelamin</th>
                <th class="px-4 py-2 text-left">Tgl Pemeriksaan</th>
                <th class="px-4 py-2 text-left">Keluhan</th>
                <th class="px-4 py-2 text-left">Planing</th>
                <th class="px-4 py-2 text-left">Apoteker</th>
                <th class="px-4 py-2 text-left">Aksi</th>
            </tr>
        </thead>
        <tbody class="divide-y dark:divide-gray-700">
            @forelse($patients as $index => $patient)
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                    <td class="px-4 py-2">{{ $loop->iteration }}</td>
                    <td class="px-4 py-2">{{ $patient->nama_lengkap }}</td>
                   <td class="px-4 py-2">
    {{ optional($patient->user)->tanggal_lahir
        ? \Carbon\Carbon::parse($patient->user->tanggal_lahir)->format('d-m-Y')
        : '-' }}
</td>

                    <td class="px-4 py-2">{{ ucfirst(optional($patient->user)->gender ?? '-') }}</td>
                    <td class="px-4 py-2">
                        {{ $patient->tanggal_pemeriksaan ? \Carbon\Carbon::parse($patient->tanggal_pemeriksaan)->format('d-m-Y') : '-' }}
                    </td>
                    <td class="px-4 py-2">{{ $patient->keluhan ?? '-' }}</td>
                    <td class="px-4 py-2">{{ $patient->planing ?? '-' }}</td>
                    <td class="px-4 py-2">
    {{ optional($patient->apoteker)->name ?? '-' }}
</td>

<td class="px-4 py-2 whitespace-nowrap flex gap-2">
    <a href="{{ route('patients.show', $patient->id) }}" class="text-blue-600 hover:underline" title="Lihat">👁️</a>
    <a href="{{ route('patients.edit', $patient->id) }}" class="text-yellow-600 hover:underline" title="Edit">✏️</a>
    <a href="{{ route('patients.export.single', $patient->id) }}"
       class="text-indigo-600 hover:underline" title="Cetak Laporan PDF">🖨️</a>

<form id="delete-form-{{ $patient->id }}"
      action="{{ route('patients.destroy', $patient->id) }}"
      method="POST" class="hidden">
    @csrf
    @method('DELETE')
</form>

<button type="button"
        onclick="confirmDelete({{ $patient->id }}, '{{ $patient->nama_lengkap }}')"
        class="text-red-600 hover:underline" title="Hapus">
    🗑️
</button>
</td>

                </tr>
            @empty
                <tr>
                    <td colspan="8" class="text-center px-4 py-4 text-gray-500 dark:text-gray-300">
                        Tidak ada data ditemukan.
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>


    {{-- Pagination --}}
    <div class="mt-6">
        {{ $patients->appends(request()->query())->links() }}
    </div>
</div>
@endsection
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    function confirmDelete(id, name) {
        Swal.fire({
            title: 'Yakin ingin menghapus?',
            text: `Data pasien atas nama ${name} akan dihapus permanen!`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#e3342f',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Ya, hapus!',
            cancelButtonText: 'Batal'
        }).then((result) => {
            if (result.isConfirmed) {
                document.getElementById(`delete-form-${id}`).submit();
            }
        });
    }
</script>
@endpush