@extends('layouts.admin-apoteker')

@section('title', 'Home Pharmacy Care')

@section('content')
<div class="container mx-auto space-y-6">
<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">
        📋 Dokumentasi Pelayanan di Rumah (Home Pharmacy)
    </h1>

    <div class="flex flex-wrap gap-2">
        <a href="{{ route('home-pharmacy.pdf') }}"
           class="inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-lg shadow hover:bg-red-700 transition">
            📄 Export PDF
        </a>

        <a href="{{ route('home-pharmacy.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('home-pharmacy-care.create') }}"
           class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg shadow hover:bg-blue-700 transition">
            ➕ Tambah Kunjungan
        </a>
    </div>
</div>


    {{-- Form Pencarian --}}
 <form method="GET" class="mb-6 flex flex-col md:flex-row gap-3 items-end">
    {{-- 🔍 Input Nama --}}
    <div class="flex-1">
        <label class="block text-sm text-gray-700 dark:text-gray-300 mb-1">Nama</label>
        <input type="text" name="q" value="{{ request('q') }}"
               class="w-full px-3 py-2 rounded border dark:bg-gray-800 dark:text-white"
               placeholder="Cari nama pasien...">
    </div>

    {{-- 🎭 Filter Role --}}
    <div class="w-48">
        <label class="block text-sm text-gray-700 dark:text-gray-300 mb-1">Role</label>
        <select name="role" class="w-full px-3 py-2 rounded border dark:bg-gray-800 dark:text-white">
            <option value="">Semua Role</option>
            <option value="pasien" {{ request('role') === 'pasien' ? 'selected' : '' }}>Pasien</option>
        </select>
    </div>

    {{-- 🎯 Tombol Aksi --}}
    <div class="flex gap-2">
        <button type="submit"
                class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">
            Cari
        </button>
        <a href="{{ route('home-pharmacy-care.index') }}"
           class="bg-gray-300 dark:bg-gray-700 text-black dark:text-white px-4 py-2 rounded hover:bg-gray-400">
            🔄 Reset
        </a>
    </div>
</form>


    {{-- List Pasien & Kunjungan --}}
    @forelse ($pasiens as $pasien)
        <div class="bg-white dark:bg-gray-800 rounded shadow p-4 mb-4">
            <h2 class="font-semibold text-lg">
                {{ $pasien->name }} ({{ $pasien->tanggal_lahir ? \Carbon\Carbon::parse($pasien->tanggal_lahir)->age . ' th' : 'n/a' }})
            </h2>
            <p>{{ $pasien->alamat ?? '-' }} | {{ $pasien->no_hp ?? '-' }}</p>

            <table class="w-full mt-4 text-sm border">
                <thead>
                    <tr class="bg-gray-200 dark:bg-gray-700">
                        <th class="border px-2">No</th>
                        <th class="border px-2">Tanggal Kunjungan</th>
                        <th class="border px-2">Catatan</th>
                        <th class="border px-2">Apoteker</th>
                        <th class="border px-2">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($pasien->homePharmacyVisits as $i => $visit)
                        <tr>
                            <td class="border px-2">{{ $i + 1 }}</td>
                            <td class="border px-2">{{ $visit->tanggal_kunjungan }}</td>
                            <td class="border px-2">{{ \Illuminate\Support\Str::limit(strip_tags($visit->catatan), 50) }}</td>
                            <td class="border px-2">{{ $visit->apoteker->name ?? '-' }}</td>
                            <td class="border px-2 whitespace-nowrap space-y-1">
                                <div class="flex flex-wrap gap-2">
                                    <a href="{{ route('home-pharmacy-care.show', $visit->id) }}" class="text-blue-600 hover:underline">Lihat</a>
                                    <a href="{{ route('home-pharmacy-care.edit', $visit->id) }}" class="text-green-600 hover:underline">Edit</a>
                                    <form action="{{ route('home-pharmacy-care.destroy', $visit->id) }}" method="POST" class="delete-form inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text-red-600 hover:underline delete-button"
                                                data-nama="{{ $pasien->name }} pada {{ $visit->tanggal_kunjungan }}">
                                            Hapus
                                        </button>
                                    </form>
                                    <a href="{{ route('home-pharmacy.export.single', $visit->id) }}"
                                       class="text-indigo-600 hover:underline" title="Cetak PDF">
                                        🖨️ PDF
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center text-gray-500 py-2">Belum ada kunjungan.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    @empty
        <p class="text-gray-500">Tidak ada data pasien ditemukan.</p>
    @endforelse

    {{-- Pagination --}}
    <div class="mt-6">{{ $pasiens->links() }}</div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const deleteButtons = document.querySelectorAll('.delete-button');
        deleteButtons.forEach(button => {
            button.addEventListener('click', function (e) {
                e.preventDefault();
                const form = this.closest('form');
                const nama = this.dataset.nama;

                Swal.fire({
                    title: 'Yakin ingin menghapus?',
                    text: `Data kunjungan ${nama} akan dihapus permanen.`,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#e3342f',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Ya, hapus!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        form.submit();
                    }
                });
            });
        });
    });
</script>
@endpush