@extends('layoutt')

@section('content')
    <div class="mx-auto my-8 p-8 bg-white shadow-md rounded-md max-w-3xl w-full sm:max-w-2xl md:max-w-3xl lg:max-w-4xl animate__animated animate__fadeInUp">
        <h1 class="text-2xl font-semibold mb-4">Detail Pasien</h1>
        @if (session()->get('success'))
            <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-4" role="alert">
                {{ session()->get('success') }}
            </div>
        @endif

        <div class="flex mb-4">
            <!-- Form Pencarian -->
              <form action="{{ route('detail.index') }}" method="get" class="flex items-center">
                  <input type="text" name="search" placeholder="Cari nama pasien" class="rounded-l-lg p-2 border-t mr-0 border-b border-l text-gray-800 border-gray-200 bg-white" value="{{ request('search') }}" />
                  <button type="submit" class="px-6 rounded-r-lg bg-blue-500 text-white border border-blue-500 border-solid p-2 hover:bg-blue-700">Cari</button>
              </form>

              <!-- Tombol Refresh dengan Ikon -->
              <a href="{{ route('detail.index') }}" class="ml-auto bg-transparent text-white py-1 px-2 rounded animate__animated animate__rubberBand">
                <img src="{{ asset('assets/img/refresh.png') }}" style="width: 30px; height: 30px;">
              </a>
        </div>

        <div class="overflow-x-auto animate__animated animate__fadeInUp">
            <table class="min-w-full bg-white border border-gray-300">
                <thead>
                    <tr style="text-align: center;">
                        <th class="py-2 px-4 border-b text-base">No</th>
                        <th class="py-2 px-4 border-b text-base">Nama</th>
                        <th class="py-2 px-4 border-b text-base">Penyakit</th>
                        <th class="py-2 px-4 border-b text-base">Membutuhkan Obat</th>
                        <th class="py-2 px-4 border-b text-base">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Data Detail Pasien -->
                    @foreach ($pasienData as $pasien)
                        <tr style="text-align: center;">
                            <td class="py-2 px-4 border-b text-base">A00{{ $pasien['id'] }}</td>
                            <td class="py-2 px-4 border-b text-base">{{ $pasien['nama'] }}</td>
                            <td class="py-2 px-4 border-b text-base" style="white-space: pre-line;">{{ $pasien['penyakit'] ?? '' }}</td>
                            <td class="py-2 px-4 border-b text-base" style="white-space: pre-line;">{{ $pasien['obat'] ?? '' }}</td>
                            <td class="py-2 px-4 border-b text-base">
                                <div class="flex justify-center space-x-2">
                                    <!-- Tombol Edit -->
                                    <form action="{{ route('detail.edit', $pasien['id']) }}" method="get" style="display: inline;">
                                        <button type="submit" class="bg-green-500 text-white py-1 px-2 rounded">Edit</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
@endsection