@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">
    <div class="flex justify-between items-center mb-4">
        <h1 class="text-2xl font-semibold">Data Obat</h1>
        <div class="flex">
            <!-- Tombol Refresh dengan Ikon -->
            <a href="{{ url('/obat') }}" 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>

    @if(session()->has('success'))
        <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-4" role="alert">
            {{ session('success') }}
        </div>
    @endif

    <div class="flex flex-col mb-4">
        <!-- Form Pencarian -->
        <form action="{{ url('obat') }}" method="post" class="flex items-center mb-4 sm:mb-0">
            @csrf
            <input type="text" name="search" placeholder="Cari nama obat" class="rounded-l-lg p-2 border-t mr-0 border-b border-l text-gray-800 border-gray-200 bg-white" />
            <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><br/>
        
        <!-- Tombol Obat Masuk -->
        <a href="{{ url('/masuk') }}" class="bg-transparent hover:bg-transparent text-green-500 font-bold py-1 px-2 rounded w-auto">
            Tambah Obat
        </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">ID</th>
                    <th class="py-2 px-4 border-b text-base">Nama Obat</th>
                    <th class="py-2 px-4 border-b text-base">Harga Jual</th>
                    <th class="py-2 px-4 border-b text-base">Harga Beli</th>
                    <th class="py-2 px-4 border-b text-base">Stok</th>
                    <th class="py-2 px-4 border-b text-base">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @foreach($obat as $item)
                    <tr style="text-align: center;">
                        <td class="py-2 px-4 border-b text-base">B00{{ $item['id'] }}</td>
                        <td class="py-2 px-4 border-b text-base">{{ $item['nama_obat'] }}</td>
                        <td class="py-2 px-4 border-b text-base">{{ $item['harga_jual'] }}</td>
                        <td class="py-2 px-4 border-b text-base">{{ $item['harga_beli'] }}</td>
                        <td class="py-2 px-4 border-b text-base">{{ $item['stok'] }}</td>
                        <td class="py-2 px-4 border-b text-base">
                            <div class="flex justify-center space-x-2">
                                <!-- Tombol Edit -->
                                <a href="{{ url('obat/terjual/' . $item['id']) }}" class="bg-green-500 text-white py-1 px-2 rounded">Terjual</a>

                                <!-- Tombol Hapus -->
                                <form action="{{ url('obat/delete/' . $item['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
            </tbody>
        </table>
    </div>
</div>
@endsection