@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">{{ $title }}</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('antrian') }}" 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('antrian') }}" 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>

      <!-- Tabel Antrian -->
      <div class="overflow-x-auto">
        <table class="min-w-full bg-white border border-gray-300">
          <thead>
            <tr style="text-align: fixed;">
              <th class="py-2 px-4 border-b text-base">No Antrian</th>
              <th class="py-2 px-4 border-b text-base">Nama Pasien</th>
              <th class="py-2 px-4 border-b text-base">Nomor Telepon</th>
              <th class="py-2 px-4 border-b text-base">Email</th>
              <th class="py-2 px-4 border-b text-base">Tanggal Daftar</th>
              <th class="py-2 px-4 border-b text-base">Aksi</th>
            </tr>
          </thead>
          <tbody>
            <!-- Data Antrian -->
            @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">{{ $pasien['nomor_telepon'] }}</td>
                    <td class="py-2 px-4 border-b text-base">{{ $pasien['email'] }}</td>
                    <td class="py-2 px-4 border-b text-base">{{ $pasien['tanggal_daftar'] }}</td>
                    <td class="py-2 px-4 border-b text-base">
                        <div class="flex justify-center space-x-2">
                            <!-- Tombol Edit -->
                            <a href="{{ url("pasien/editForm/{$pasien['id']}") }}" class="bg-green-500 text-white py-1 px-2 rounded">Edit</a>

                            <!-- Tombol Hapus -->
                            <form action="{{ url('pasien/hapus/' . $pasien['id']) }}" method="post" style="display: inline;">
                                @csrf
                                @method('delete')
                                <button type="submit" class="bg-red-500 text-white py-1 px-2 rounded" onclick="return confirm('Apakah Anda yakin ingin menghapus data ini?')">Hapus</button>
                            </form>
                        </div>
                    </td>
                </tr>
            @endforeach
            <!-- Data lainnya -->
          </tbody>
        </table>
      </div>
  </div>
@endsection