@extends('layout.app')

@section('content')


<div class="w-full h-full bg-white rounded-lg shadow-lg p-5">
    <div class="py-5">   
        <div class="pb-4 bg-white flex justify-between">
            <div>
            <a href="{{ route('pembelian.tambah')}}"> <button class="bg-yellow-500 hover:bg-yellow-400 text-white p-2 rounded-lg">
                    Tambah Data
                </button></a>
            </div>
        </div>     
        <div class="overflow-x-auto">
            <table id="datatable" class="w-full">
                <thead class="bg-gray-200">
                    <tr class="text-left">
                        <th class="p-3">No</th>
                        <th class="p-3">Nomor Transaksi</th>
                        <th class="p-3">Tanggal</th>
                        <th class="p-3">Supplier</th>
                        <th class="p-3">Jumlah Item</th>
                        <th class="p-3">Total</th>
                        <th class="p-3">Detail</th>
                        <th class="p-3"></th>
                    </tr>
                </thead>
                <tbody>
                @foreach($data['pembelian'] as $index => $item)
                        <tr class="text-left border-b border-gray-200">
                            <td class="p-3">{{ $index + 1 }}</td>
                            <td class="p-3">{{ $item->no_transaksi }}</td>
                            <td class="p-3">{{ date("d-m-Y",strtotime($item->created_at)) }}</td>
                            <td class="p-3">{{ $item->supplier->nama_supplier }}</td>
                            <td class="p-3">{{ count($item->listItem) }} Items</td>
                            <td class="p-3">{{ 'IDR ' . number_format($item->total_harga, 0, ',', '.') }}</td>                            
                           
                            <td class="p-3">
                                <button class="bg-green-500 text-white p-2 rounded-lg" 
                                    onclick="openModal('{{ $item->listItem }}')">
                                    List Item
                                </button>
                            </td>
                            <td class="p-3">
                                <button class="bg-red-500 text-white p-2 rounded-lg mr-2" onclick="deleteData({{ $item->id }})">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.320c-1.18 0-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                                    </svg>
                                </button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
                        
            </table>
        </div>
    </div>
</div>

<!-- Modal -->
<div id="myModal" class="modal hidden fixed inset-0 py-32 z-50 overflow-auto bg-gray-500 bg-opacity-50 flex justify-center items-center">
    <div class="modal-content bg-white w-full mx-32 p-10 rounded-lg">
        <div class="col-span-3 flex justify-between border-b-2 border-[#ee69b1] py-2 mb-2">
            <h2 class="text-xl font-bold">Detail</h2>
            <button id="closeModalButton" class="close text-red-500 hover:text-red-700">&times;</button>
        </div>
        <div id="modal-content" class="text-lg font-semibold"></div>
    </div>
</div>
  
@endsection

@section('script')
<script>
    $(document).ready(function() {
        $('#datatable').DataTable();
    });

    window.addEventListener('DOMContentLoaded', function() {
        fetchData();
    });

    function formatToIDR(amount) {
        return 'IDR ' + new Intl.NumberFormat('id-ID').format(amount);
    }

    function openModal(data) {
        // console.log(data);
        const modal = document.getElementById("myModal");
        const modalContent = document.getElementById("modal-content");

        modal.classList.remove("hidden");
        var html = `<table id="datatable" class="w-full">
                <thead class="bg-gray-200">
                    <tr class="text-left">
                        <th class="p-3">No</th>
                        <th class="p-3">Nama Barang</th>
                        <th class="p-3">Ukuran</th>
                        <th class="p-3">Harga Beli</th>
                        <th class="p-3">Qty</th>
                        <th class="p-3">Sub Total</th>
                    </tr>
                </thead>
                <tbody>`;
        var no = 1;
        data = JSON.parse(data);
        data.forEach(function(e){
            html += `<tr class="text-left border-b border-gray-200">
                            <td class="p-3">${no}</td>
                            <td class="p-3">${e.nama_barang}</td>
                            <td class="p-3">${e.ukuran_barang}</td>
                            <td class="p-3">${formatToIDR(Math.round(parseFloat(e.harga_beli)))}</td>
                            <td class="p-3">${e.qty_beli}</td>
                            <td class="p-3">${formatToIDR(Math.round(parseFloat(e.harga_beli*e.qty_beli)))}</td>                            
                        </tr>`;
                        no++;
        })
        html += `</tbody></table>`;
        modalContent.innerHTML = html;
    }

    document.querySelector('.close').addEventListener('click', function() {
        const modal = document.getElementById("myModal");
        modal.style.display = "none";
        location.reload();
    });

    window.addEventListener('click', function(event) {
        const modal = document.getElementById("myModal");
        if (event.target == modal) {
            modal.style.display = "none";
            location.reload();
        }
    });

    

    function deleteData(id) {
        const baseUrl = "{{ route('pembelian.delete', ['id' => '__ID__']) }}";
        if (confirm('Apakah anda yakin ingin menghapus data ini?')) {
            $.ajax({
                url: baseUrl.replace('__ID__', id),
                type: 'GET',
                success: function(response) {
                    alert(response.message);
                    location.reload();
                },
                error: function(error) {
                    console.error('Error getting data:', error.responseText);
                }
            });
        }
    }

    
</script>
@endsection