@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()->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 mb-4">
        <!-- Form Pencarian -->
        <form action="{{ url('riwayat/search') }}" method="post" class="flex items-center">
            @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>

        <!-- Tombol Refresh -->
        <a href="{{ url('/riwayat') }}" 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 flex">
        <!-- Riwayat Terjual -->
        <div class="flex-1 mr-4">
            <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">Riwayat Terjual</th>
                        <th class="py-2 px-4 border-b text-base"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($transactions as $transaction)
                        @if ($transaction['stok'] < 0)
                            <tr style="text-align: center;">
                                <td class="py-2 px-4 border-b text-base">{{ $transaction['nama_obat'] }}</td>
                                <td class="py-2 px-4 border-b text-base">
                                    <div class="flex justify-center space-x-2">
                                        <button type="button" onclick="openTerjual('{!! htmlspecialchars(json_encode($transaction)) !!}')"
                                            class="bg-green-500 text-white py-1 px-2 rounded">Detail</button>
                                    </div>
                                </td>
                            </tr>
                        @endif
                    @endforeach
                </tbody>
            </table>
        </div>
        <!-- Riwayat Masuk -->
        <div class="flex-1">
            <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">Riwayat Masuk</th>
                        <th class="py-2 px-4 border-b text-base"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($riwayatMasuk as $riwayat)
                    <tr style="text-align: center;">
                        <td class="py-2 px-4 border-b text-base">{{ $riwayat['nama_obat'] }}</td>
                        <td class="py-2 px-4 border-b text-base">
                            <div class="flex justify-center space-x-2">
                                <button type="button" onclick="openRiwayatMasuk('{!! htmlspecialchars(json_encode($riwayat)) !!}')"
                                    class="bg-green-500 text-white py-1 px-2 rounded">Detail</button>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
<!-- Elemen modal -->
    <div id="modalTerjual" class="fixed inset-0 overflow-y-auto hidden">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="absolute inset-0 bg-black opacity-50"></div>
            <div class="bg-white rounded-lg p-8 max-w-3xl w-full relative animate__animated animate__zoomIn">
                <!-- Mengganti class animasi menjadi animate__zoomIn -->
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-3xl font-semibold">Detail Obat Terjual</h2>
                    <button onclick="closeTerjual()" class="text-gray-600 hover:text-gray-800 focus:outline-none text-4xl">&times;</button>
                </div>
                <div id="detailObatTerjual" class="p-4 rounded-md">
                    <!-- Isi detail obat terjual akan ditampilkan di sini -->
                </div>
            </div>
        </div>
    </div>
    <div id="modalRiwayatMasuk" class="fixed inset-0 overflow-y-auto hidden">
        <div class="flex items-center justify-center min-h-screen p-4">
            <div class="absolute inset-0 bg-black opacity-50"></div>
            <div class="bg-white rounded-lg p-8 max-w-3xl w-full relative animate__animated animate__zoomIn">
                <!-- Mengganti class animasi menjadi animate__zoomIn -->
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-3xl font-semibold">Detail Obat Terjual</h2>
                    <button onclick="closeRiwayatMasuk()" class="text-gray-600 hover:text-gray-800 focus:outline-none text-4xl">&times;</button>
                </div>
                <div id="detailRiwayatMasuk" class="p-4 rounded-md">
                    <!-- Isi detail obat terjual akan ditampilkan di sini -->
                </div>
            </div>
        </div>
    </div>
    <script>
        function openRiwayatMasuk(data) {
            var riwayatMasukData = JSON.parse(data);
            var detailRiwayatMasuk = document.getElementById('detailRiwayatMasuk');

            // Konversi timestamp ke objek Date
            var createdDate = new Date(riwayatMasukData.update_at);

            // Format tanggal
            var formattedDate = createdDate.toLocaleDateString();

            // Format jam
            var formattedTime = createdDate.toLocaleTimeString([], { hour: 'numeric', minute: 'numeric', second: 'numeric' });

            detailRiwayatMasuk.innerHTML = `
                Ada Beberapa Obat yang masuk, detailnya sebagai berikut: <br/>
                <table class="min-w-full bg-transparent border border-transparent">
                    <tbody>
                        <tr>
                            <td class="py-2 px-4 border-b text-base">Obat <br/> Harga Beli <br/> Harga Jual <br/> Jumlah <br/> Tanggal <br/> Jam</td>
                            <td class="py-2 px-4 border-b text-base">${riwayatMasukData.nama_obat} <br/> Rp. ${riwayatMasukData.harga_beli} <br/> Rp. ${riwayatMasukData.harga_jual} <br/> ${riwayatMasukData.stok} <br/> ${formattedDate} <br/> ${formattedTime}</td>
                        </tr>
                    </tbody>
                </table>
            `;
            document.getElementById('modalRiwayatMasuk').classList.remove('hidden');
        }


        function closeRiwayatMasuk() {
            document.getElementById('modalRiwayatMasuk').classList.add('hidden');
        }

        function openTerjual(data) {
            var obatData = JSON.parse(data);
            var detailObatTerjual = document.getElementById('detailObatTerjual');

            // Konversi timestamp ke objek Date
            var createdDate = new Date(obatData.created_at);

            // Format tanggal
            var formattedDate = createdDate.toLocaleDateString();

            // Format jam
            var formattedTime = createdDate.toLocaleTimeString();

            detailObatTerjual.innerHTML = `
                Ada Beberapa Obat yang sudah terjual, untuk detailnya sebagai berikut: <br/>
                <table class="min-w-full bg-transparent border border-transparent">
                    <tbody>
                        <tr>
                            <td class="py-2 px-4 border-b text-base">Obat <br/> Harga <br/> Jumlah <br/> Tanggal <br/> Jam</td>
                            <td class="py-2 px-4 border-b text-base">${obatData.nama_obat} <br/> Rp. ${obatData.harga_jual} <br/> ${obatData.stok} <br/> ${formattedDate} <br/> ${formattedTime}</td>
                        </tr>
                    </tbody>
                </table>
            `;
            document.getElementById('modalTerjual').classList.remove('hidden');
        }


        function closeTerjual() {
            document.getElementById('modalTerjual').classList.add('hidden');
        }
    </script>
@endsection