@extends('layouts.app')

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

@section('content')

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">

    <!-- HEADER -->
    <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-8 gap-4">
        <div>
            <h1 class="text-3xl font-bold text-gray-800">
                Data Pasien
            </h1>
            <p class="text-base text-gray-500 mt-1">
                Kelola data pasien untuk proses rekomendasi
            </p>
        </div>

        <a href="{{ route('pasien.create') }}"
           class="inline-flex items-center gap-2 px-5 py-3 bg-green-600 text-white text-base font-medium rounded-lg shadow hover:bg-green-700 transition">
            <span class="text-xl">+</span>
            Tambah Pasien
        </a>
    </div>

    <!-- TABLE CARD -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">

        <div class="overflow-x-auto">
            <table class="min-w-[1100px] w-full text-sm sm:text-base text-gray-700">

                <!-- HEADER -->
                <thead class="bg-gray-50 text-gray-600 text-sm uppercase tracking-wide">
                    <tr>
                        <th class="px-6 py-4 text-left">Nama</th>
                        <th class="px-6 py-4 text-left">Umur</th>
                        <th class="px-6 py-4 text-left">Berat (kg)</th>
                        <th class="px-6 py-4 text-left">Tinggi (cm)</th>
                        <th class="px-6 py-4 text-left">Jenis Kelamin</th>
                        <th class="px-6 py-4 text-left">Gejala</th>
                        <th class="px-6 py-4 text-left">Aktivitas Fisik</th>
                        <th class="px-6 py-4 text-center">Aksi</th>
                    </tr>
                </thead>

                <!-- BODY -->
                <tbody class="divide-y divide-gray-100">

                    @forelse($pasien as $p)
                    <tr class="hover:bg-gray-50 transition">

                        <td class="px-6 py-4 font-medium text-gray-800">
                            {{ $p->nama }}
                        </td>

                        <td class="px-6 py-4">
                            {{ $p->umur }}
                        </td>

                        <td class="px-6 py-4">
                            {{ $p->berat_badan }}
                        </td>

                        <td class="px-6 py-4">
                            {{ $p->tinggi_badan }}
                        </td>

                        <td class="px-6 py-4">
                            {{ $p->jenis_kelamin }}
                        </td>

                        <td class="px-6 py-4 text-gray-600 max-w-xs truncate">
                            {{ ucwords(str_replace(',', ', ', $p->gejala)) }}
                        </td>

                        <td class="px-6 py-4">
                            {{ $p->aktivitas_harian }}
                        </td>

                        <!-- ACTION -->
                        <td class="px-6 py-4">
                            <div class="flex flex-wrap justify-center gap-2">

                                <a href="{{ route('pasien.edit', $p->id) }}"
                                   class="px-4 py-2 text-sm font-medium rounded-md bg-blue-500 text-white hover:bg-blue-600 transition">
                                    Edit
                                </a>

                                <form action="{{ route('pasien.destroy', $p->id) }}"
                                    method="POST"
                                    class="form-hapus-pasien">

                                    @csrf
                                    @method('DELETE')

                                    <button type="submit"
                                        class="px-4 py-2 text-sm font-medium rounded-md bg-red-500 text-white hover:bg-red-600 transition">
                                        Hapus
                                    </button>

                                </form>

                            </div>
                        </td>

                    </tr>

                    @empty
                    <tr>
                        <td colspan="9" class="px-6 py-12 text-center text-gray-400">
                            <div class="flex flex-col items-center gap-3">
                                <span class="text-4xl">👤</span>
                                <p class="text-base">Belum ada data pasien</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse

                </tbody>
            </table>
        </div>

    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
document.querySelectorAll('.form-hapus-pasien').forEach(form => {

    form.addEventListener('submit', function(e) {

        e.preventDefault();

        Swal.fire({
            title: 'Hapus Data Pasien?',
            html: `
                <div style="font-size:14px; color:#6b7280; line-height:1.7; margin-top:8px;">
                    Data pasien yang dihapus tidak dapat dikembalikan.
                </div>
            `,
            icon: 'warning',

            showCancelButton: true,

            confirmButtonText: 'Hapus',
            cancelButtonText: 'Batal',

            reverseButtons: true,
            focusCancel: true,

            background: '#ffffff',
            color: '#111827',

            customClass: {
                popup: 'rounded-[24px] p-6 shadow-xl',
                title: 'text-xl font-bold text-gray-800',
                htmlContainer: 'text-sm text-gray-500',
                confirmButton: 'bg-red-500 hover:bg-red-600 text-white px-6 py-3 rounded-xl text-sm font-semibold',
                cancelButton: 'bg-gray-100 hover:bg-gray-200 text-gray-700 px-6 py-3 rounded-xl text-sm font-semibold mr-2'
            },

            buttonsStyling: false

        }).then((result) => {

            if (result.isConfirmed) {
                form.submit();
            }

        });

    });

});
</script>
@endsection