@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="kode" class="block mb-2 text-sm font-medium text-gray-900">Kode Barang</label>
                    <input type="number" id="kode" name="kode" 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="Scan/Input Manual disini" required />
                    <input type="id" id="id" name="id" hidden>
                </div> 
                <div class="mb-6">
                    <label for="nama" class="block mb-2 text-sm font-medium text-gray-900">Nama Barang</label>
                    <input type="text" id="nama" name="nama" 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 Nama Barang" required />
                </div> 
                <div class="mb-6">
                    <label for="id_kategori" class="block mb-2 text-sm font-medium text-gray-900">Kategori</label>
                    <select id="id_kategori" name="id_kategori" 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" required>
                        <option value="" disabled selected>Pilih Kategori Barang</option>
                        @foreach ($data['kategori'] as $dt )
                        <option value="{{ $dt->id }}">{{ $dt->nama }}</option>    
                        @endforeach
                    </select>
                </div>
                <div class="mb-6">
                    <label for="ukuran" class="block mb-2 text-sm font-medium text-gray-900">Ukuran Barang</label>
                    <input type="text" id="ukuran" name="ukuran" 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 Ukuran Barang" required />
                </div>
            </div>
            <div class="col-span-3 md:col-span-1">
                <div class="mb-6">
                    <label for="harga_beli" class="block mb-2 text-sm font-medium text-gray-900">Harga Beli Barang</label>
                    <input type="number" id="harga_beli" name="harga_beli" 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 Harga Beli Barang" required />
                </div>
                <div class="mb-6">
                    <label for="harga_jual" class="block mb-2 text-sm font-medium text-gray-900">Harga Jual Barang</label>
                    <input type="number" id="harga_jual" name="harga_jual" 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 Harga Jual Barang" required />
                </div>
                <div class="mb-6">
                    <label for="demand" class="block mb-2 text-sm font-medium text-gray-900">Demand</label>
                    <input type="number" id="demand" name="demand" 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 Demand Barrang" required />
                </div>
                 <div class="mb-6">
                    <label for="gambar" class="block mb-2 text-sm font-medium text-gray-900">Gambar</label>
                    <input type="file" id="gambar" name="gambar" accept="image/*" 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" placeholder="Masukan Gambar Barang" required />
                </div>
            </div>
            <div class="col-span-3 md:col-span-1">
            <div class="mb-6">
                    <label for="holding_cost" class="block mb-2 text-sm font-medium text-gray-900">Biaya Penyimpanan</label>
                    <input type="number" id="holding_cost" name="holding_cost" 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 Biaya Penyimpanan" required />
                </div>
                <div class="mb-6">
                    <label for="biaya_pemesanan" class="block mb-2 text-sm font-medium text-gray-900">Biaya Pemesanan</label>
                    <input type="number" id="biaya_pemesanan" name="biaya_pemesanan" 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 Biaya Penyimpanan" required />
                </div>
                <div class="mb-6">
                    <label for="lead_time" class="block mb-2 text-sm font-medium text-gray-900">Lead Time</label>
                    <input type="number" id="lead_time" name="lead_time" 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 Lead Time" required />
                </div>
                <div class="mb-6">
                    <label for="lead_time_variance" class="block mb-2 text-sm font-medium text-gray-900">Lead Time Variance</label>
                    <input type="number" id="lead_time_variance" name="lead_time_variance" 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 Lead Time Variance" 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">Kode Barang</th>
                        <th class="p-3">Nama Barang</th>
                        <th class="p-3">Kategori</th>
                        <th class="p-3">Ukuran</th>
                        <th class="p-3">Harga Jual</th>
                        <th class="p-3">Stok</th>
                        <th class="p-3">Kalkulasi EOQ</th>
                        <th class="p-3"></th>
                    </tr>
                </thead>
                <tbody>
                   
                    @foreach($data['barang'] as $index => $item)
                        @php
                            $average = $item->demand / 365;
                            if($item->stok_terbaru > $item->rop){
                                $bg = 'bg-green-500';
                            }else{
                                $bg = 'bg-yellow-500';
                            }
                            if($item->stok_terbaru < $item->safety_stok){
                                $bg = 'bg-red-500';
                            }
                        @endphp
                        <tr class="text-left border-b border-gray-200">
                            <td class="p-3">{{ $index + 1 }}</td>
                            <td class="p-3">{{ $item->kode }}</td>
                            <td class="p-3">{{ $item->nama }}</td>
                            <td class="p-3">{{ $item->kategori->nama }}</td>
                            <td class="p-3">{{ $item->ukuran }}</td>
                            <td class="p-3">{{ 'IDR ' . number_format($item->harga_jual, 0, ',', '.') }}</td>                            
                            <td class="p-3">{{ $item->stok_terbaru }} Pcs</td>
                            <td class="p-3">
                                <button class="{{$bg}} text-white p-2 rounded-lg" 
                                    onclick="openModal('{{ $item->nama }}', '{{ $item->harga_beli }}', '{{ $item->stok_terbaru }}', '{{ $item->holding_cost }}', '{{ $item->biaya_pemesanan}}', '{{ $item->lead_time }}', '{{ $item->eoq_annual }}', '{{ $item->safety_stok}}', '{{ $item->rop }}', '{{ $item->demand }}', '{{ $item->lead_time_variance }}' , '{{ $item->pemesanan }}', '{{ $item->max_sales }}', '{{ $average }}' )">
                                    EOQ, Safety Stock & ROP
                                </button>
                            </td>
                            <td class="p-3">
                                <button class="bg-blue-500 text-white p-2 rounded-lg mr-2" onclick="editData({{ $item->barang_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->barang_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,MAX, average) {
        
        let html = `
            <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 </p>
                        <span class="font-extralight">${Math.round(parseFloat(Demand))} Psc</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))} Pcs</span>
                    </div>
                    <div class="flex justify-between items-center mb-5">
                        <p class="text-lg font-semibold">EOQ </p>
                        <span class="font-extralight">${Math.round(parseFloat(EOQAnnual))} Pcs</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))} Pcs</span>
                    </div>
                    <div class="flex justify-between items-center mb-5">
                        <p class="text-lg font-semibold">Penjualan Tertinggi</p>
                        <span class="font-extralight">${Math.round(parseFloat(MAX))} Pcs</span>
                    </div>
                    <div class="flex justify-between items-center mb-5">
                        <p class="text-lg font-semibold">Rata - Rata</p>
                        <span class="font-extralight">${Math.round(parseFloat(average))}/Tahun</span>
                    </div>
                </div>
            </div>
        `;
        $("#modal-content").html(html);
        const modal = document.getElementById("myModal");
        const modalContent = document.getElementById("modal-content");

        modal.classList.remove("hidden");
    }

    document.querySelector('.close').addEventListener('click', function() {
        const modal = document.getElementById("myModal");
        modal.classList.add("hidden");
        // 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('barang.update', ['id' => '__ID__']) }}";
        $.ajax({
            url: baseUrl.replace('__ID__', id),
            type: 'GET',
            success: function(response) {
                $('#id').val(response.message.id);
                $('#kode').val(response.message.kode);
                $('#nama').val(response.message.nama);
                $('#ukuran').val(response.message.ukuran);
                $('#harga_beli').val(response.message.harga_beli);
                $('#harga_jual').val(response.message.harga_jual);
                $('#stok').val(response.message.stok);
                $('#kadaluarsa').val(response.message.kadaluarsa);
                $('#demand').val(response.message.demand);
                $('#holding_cost').val(response.message.holding_cost);
                $('#biaya_pemesanan').val(response.message.biaya_pemesanan);
                $('#lead_time').val(response.message.lead_time);
                $('#lead_time_variance').val(response.message.lead_time_variance);
                $('#id_kategori').val(response.message.id_kategori);
                toggleModal();
            },
            error: function(error) {
                console.error('Error getting data:', error.responseText);
            }
        });
    }

    function deleteData(id) {
        const baseUrl = "{{ route('barang.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('barang.update', ['id' => '__ID__']) }}";
        const id = $('#id').val();
        const url = id ? baseUrl.replace('__ID__', id) : '{{ route('barang') }}';

        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