@extends('layout.app')

@section('content')

<div id="modal" 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-1/2 p-4 rounded-lg">
        <div class="col-span-3 flex justify-between border-b-2 border-[#ee69b1] p-2 mb-2">
            <h2 class="text-xl font-bold">Tambah {{$data['title'] }}</h2>
            <button id="closeModalButton" class="text-red-500 hover:text-red-700">&times;</button>
        </div>
        <form id="formData" class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="col-span-3 md:col-span-1">
                @csrf
                <div class="mb-6">
                    <label for="nama_supplier" class="block mb-2 text-sm font-medium text-gray-900">Nama Supplier</label>
                    <input type="text" id="nama_supplier" name="nama_supplier" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Masukkan Nama Supplier" required />
                    <input type="id" id="id" name="id" hidden>
                </div> 
               
                
            </div>
            <div class="col-span-3 md:col-span-1">
                <div class="mb-6">
                    <label for="alamat" class="block mb-2 text-sm font-medium text-gray-900">Alamat</label>
                    <input type="text" id="alamat" name="alamat" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Masukan Alamat" required />
                </div> 
            </div>
            <div class="col-span-3 md:col-span-1">
                <div class="mb-6">
                    <label for="telepon" class="block mb-2 text-sm font-medium text-gray-900">Telepon</label>
                    <input type="text" id="telepon" name="telepon" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="Masukan Telepon" required />
                </div>
            </div>
        </form>
        <div class="col-span-3 flex justify-center">
            <button type="button" onclick="saveData()" class="text-white bg-yellow-500 hover:bg-yellow-400 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">Submit</button>
        </div>
    </div>
</div>

<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>
                <button id="openModalButton" class="bg-yellow-500 hover:bg-yellow-400 text-white p-2 rounded-lg">
                    Tambah Data
                </button>
            </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">Nama Supplier</th>
                        <th class="p-3">Alamat</th>
                        <th class="p-3">Telepon</th>
                        <th class="p-3"></th>
                    </tr>
                </thead>
                <tbody>
                    
                    @foreach($data['supplier'] as $index => $item)
                       
                        <tr class="text-left border-b border-gray-200">
                            <td class="p-3">{{ $index + 1 }}</td>
                            <td class="p-3">{{ $item->nama_supplier }}</td>
                            <td class="p-3">{{ $item->alamat }}</td>
                            <td class="p-3">{{ $item->telepon }}</td>
                            
                            <td class="p-3">
                                <button class="bg-blue-500 text-white p-2 rounded-lg mr-2" onclick="editData({{ $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="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
                                    </svg>
                                </button>
                                <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(Nama, Harga, Stok, BiayaSimpan, BiayaPesan, LeadTime, EOQAnnual, safetyStock, ROP, Demand, LongLeadTime, Pemesanan) {
        const modal = document.getElementById("myModal");
        const modalContent = document.getElementById("modal-content");

        modal.classList.remove("hidden");
        modalContent.innerHTML = `
            <div class="grid grid-cols-2 gap-10">
                <div>
                    <div class="flex justify-between items-center mb-5">
                        <p class="text-lg font-semibold">Nama Barang </p>
                        <span class="font-extralight">${Nama}</span>
                    </div>
                    <div class="flex justify-between items-center mb-5">
                        <p class="text-lg font-semibold">Harga Beli</p>
                        <span class="font-extralight">${formatToIDR(Math.round(parseFloat(Harga)))} /Unit</span>
                    </div>
                    <div class="flex justify-between items-center mb-5">
                        <p class="text-lg font-semibold">Stok saat ini </p>
                        <span class="font-extralight">${Math.round(parseFloat(Stok))} Unit</span>
                    </div>
                    <div class="flex justify-between items-center mb-5">
                        <p class="text-lg font-semibold">Biaya simpan</p>
                        <span class="font-extralight">${formatToIDR(Math.round(parseFloat(BiayaSimpan)))}</span>
                    </div>
                    <div class="flex justify-between items-center mb-5">
                        <p class="text-lg font-semibold">Biaya pesan </p>
                        <span class="font-extralight">${formatToIDR(Math.round(parseFloat(BiayaPesan)))}</span>
                    </div>
                    <div class="flex justify-between items-center mb-5">
                        <p class="text-lg font-semibold">Lead Time </p>
                        <span class="font-extralight">${Math.round(parseFloat(LeadTime))} Hari</span>
                    </div>
                    <div class="flex justify-between items-center mb-5">
                        <p class="text-lg font-semibold">Long Lead Time </p>
                        <span class="font-extralight">${Math.round(parseFloat(LongLeadTime))} Hari</span>
                    </div>
                </div>
                <div class="border-l-2 border-gray-300 pl-10">
                    <div class="flex justify-between items-center mb-5">
                        <p class="text-lg font-semibold">Demand/tahun </p>
                        <span class="font-extralight">${Math.round(parseFloat(Demand))} Unit</span>
                    </div>
                    <div class="flex justify-between items-center mb-5">
                        <p class="text-lg font-semibold">Safety Stock</p>
                        <span class="font-extralight">${Math.round(parseFloat(safetyStock))} Unit</span>
                    </div>
                    <div class="flex justify-between items-center mb-5">
                        <p class="text-lg font-semibold">EOQ/tahun </p>
                        <span class="font-extralight">${Math.round(parseFloat(EOQAnnual))} Unit</span>
                    </div>
                    <div class="flex justify-between items-center mb-5">
                        <p class="text-lg font-semibold">Pemesanan </p>
                        <span class="font-extralight">${Math.round(parseFloat(Pemesanan))} Kali</span>
                    </div>
                    <div class="flex justify-between items-center mb-5">
                        <p class="text-lg font-semibold">Reorder Point</p>
                        <span class="font-extralight">${Math.round(parseFloat(ROP))} Unit</span>
                    </div>
                </div>
            </div>
        `;
    }

    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 editData(id) {
        const baseUrl = "{{ route('supplier.update', ['id' => '__ID__']) }}";
        $.ajax({
            url: baseUrl.replace('__ID__', id),
            type: 'GET',
            success: function(response) {
                $('#id').val(response.message.id);
                $('#nama_supplier').val(response.message.nama_supplier);
                $('#alamat').val(response.message.alamat);
                $('#telepon').val(response.message.telepon);
                
                toggleModal();
            },
            error: function(error) {
                console.error('Error getting data:', error.responseText);
            }
        });
    }

    function deleteData(id) {
        const baseUrl = "{{ route('supplier.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);
                }
            });
        }
    }

    function saveData() {
        const formData = new FormData(document.getElementById("formData"));
        const baseUrl = "{{ route('supplier.update', ['id' => '__ID__']) }}";
        const id = $('#id').val();
        const url = id ? baseUrl.replace('__ID__', id) : '{{ route('supplier') }}';

        const csrfToken = $('meta[name="csrf-token"]').attr('content');

        const ajaxSettings = {
            url: url,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': csrfToken
            },
            success: function(response) {
                alert(response.message);
                location.reload();
            },
            error: function(error) {
                console.error('Error saving data:', error.responseText);
            }
        };

        $.ajax(ajaxSettings);
    }
</script>
@endsection