@extends('layouts.app')

@section('title', 'Laporan Pembelian')
@section('page_title', 'Laporan Pembelian')

@section('content')
<section class="bg-white text-sm pt-2">

    @if (session('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
            <span class="block sm:inline">{{ session('error') }}</span>
        </div>
    @endif

    <div class="bg-white pt-2 mb-2">
        <form action="{{ route('laporan-pembelian.index', ['jenis' => $jenis]) }}" method="GET">
            <div class="flex flex-col md:flex-row items-stretch md:items-center space-y-4 md:space-y-0 md:space-x-4">
                <label for="periode_id" class="text-gray-700 font-semibold flex-shrink-0">Pilih Periode:</label>
                <select name="periode_id" id="periode_id" class="border-gray-300 p-2 w-full focus:ring-blue-500 focus:border-blue-500">
                    @foreach ($periodes as $periode)
                        <option value="{{ $periode->id }}" {{ ($periodeDipilih->id ?? '') == $periode->id ? 'selected' : '' }}>
                            {{ \Carbon\Carbon::parse($periode->tanggal_mulai)->translatedFormat('d F Y') }} - {{ \Carbon\Carbon::parse($periode->tanggal_selesai)->translatedFormat('d F Y') }}
                        </option>
                    @endforeach
                </select>
                <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 ">
                     <i class="fa-solid fa-search mr-2"></i> Filter
                </button>
                {{-- {{ url('laporan/pembelian/detail') }}/${jenis}/${pembelianId} --}}
                <a id="btn-cetak-pdf-all" 
                href="{{ url('laporan-pembelian/' . $jenis . '/print-pdf-all?periode_id=' . ($periodeDipilih->id ?? '')) }}" 
                target="_blank" 
                class="bg-red-500 hover:bg-red-600 text-white text-center font-bold py-2 px-4  transition-colors">
                     <i class="fa-solid fa-print mr-2"></i> PDF
                </a>
            </div>
        </form>
    </div>

    <div class="bg-white   pt-2">
        <div class="border-b border-gray-200">
            <nav class="-mb-px flex space-x-4 sm:space-x-8 overflow-x-auto" aria-label="Tabs">
                <a href="{{ route('laporan-pembelian.index', ['jenis' => 'bahan-baku', 'periode_id' => $periodeDipilih->id]) }}" class="{{ $jenis == 'bahan-baku' ? 'border-blue-600 text-blue-600 active-tab' : 'border-transparent text-gray-600 hover:text-blue-600 hover:border-blue-600' }} whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                    Pembelian Bahan Baku
                </a>
                <a href="{{ route('laporan-pembelian.index', ['jenis' => 'kemasan', 'periode_id' => $periodeDipilih->id]) }}" class="{{ $jenis == 'kemasan' ? 'border-blue-600 text-blue-600 active-tab' : 'border-transparent text-gray-600 hover:text-blue-600 hover:border-blue-600' }} whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                    Pembelian Kemasan
                </a>
                <a href="{{ route('laporan-pembelian.index', ['jenis' => 'bahan-penolong', 'periode_id' => $periodeDipilih->id]) }}" class="{{ $jenis == 'bahan-penolong' ? 'border-blue-600 text-blue-600 active-tab' : 'border-transparent text-gray-600 hover:text-blue-600 hover:border-blue-600' }} whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                    Pembelian Bahan Penolong
                </a>
            </nav>
        </div>

        <div id="tab-content" class="mt-2">
            <h2 class="text-xl font-bold mb-4">{{ $judul }}</h2>
            <div class="flex justify-end mb-4">
                <div x-data="{ open: false }" class="relative inline-block text-left">
                    <div>
                        <button @click="open = !open" 
                                class="inline-flex justify-center w-full  px-4 py-2  font-medium text-grey focus:outline-none">
                                <i class="fa-solid fa-cog mr-2"></i>
                            
                        </button>
                    </div>

                    <!-- Dropdown -->
                    <div x-show="open" @click.away="open = false"
                        class="origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
                        <div class="py-1">
                            <a href="{{ route('laporan-pembelian.pdf', ['jenis' => $jenis, 'tanggal_mulai' => $periodeDipilih->tanggal_mulai, 'tanggal_akhir' => $periodeDipilih->tanggal_selesai]) }}"
                            target="_blank"
                            class="flex items-center px-4 py-2 text-sm text-red-600 hover:bg-gray-100">
                                <i class="fa-solid fa-file-pdf mr-2"></i> PDF
                            </a>
                            <a href="{{ route('laporan-pembelian.excel', ['jenis' => $jenis, 'tanggal_mulai' => $periodeDipilih->tanggal_mulai, 'tanggal_akhir' => $periodeDipilih->tanggal_selesai]) }}"
                            target="_blank"
                            class="flex items-center px-4 py-2 text-sm text-green-600 hover:bg-gray-100">
                                <i class="fa-solid fa-file-excel mr-2"></i> Excel
                            </a>
                        </div>
                    </div>
                </div>
            </div>



           
            
            @if($items->isEmpty())
                <p class="text-gray-500 text-center">Tidak ada data pembelian untuk periode ini.</p>
            @else
                <div class="overflow-x-auto">
                    <table class="min-w-full leading-normal">
                        <thead class="bg-blue-700 text-white">
                            <tr>
                                <th class="w-2 px-5 py-3   text-left text-xs font-semibold  uppercase tracking-wider">
                                    No
                                </th>
                                <th class=" px-5 py-3   text-left text-xs font-semibold  uppercase tracking-wider">
                                    Tanggal
                                </th>
                                <th class=" px-5 py-3   text-left text-xs font-semibold  uppercase tracking-wider">
                                    Nomor Invoice
                                </th>
                                <th class="px-5 py-3   text-left text-xs font-semibold  uppercase tracking-wider">
                                    Pemasok
                                </th>
                                <th class="px-5 py-3   text-center text-xs font-semibold  uppercase tracking-wider">
                                    Total Harga
                                </th>
                                <th class="px-5 py-3   text-center text-xs font-semibold  uppercase tracking-wider">
                                    Aksi
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($items as $item)
                                <tr>
                                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                        {{ $loop->iteration }}
                                    </td>
                                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                        {{ \Carbon\Carbon::parse($item->tanggal_pembelian)->translatedFormat('d F Y') }}
                                    </td>
                                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                        {{ $item->nomor_faktur ?? '-' }}
                                    </td>
                                    <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                                        {{ $item->nama_pemasok }}
                                    </td>
                                    <td class="px-5 py-5 text-center border-b border-gray-200 bg-white text-sm">
                                        Rp {{ number_format($item->total_harga, 0, ',', '.') }}
                                    </td>
                                    <td class="px-5 py-5 text-center border-b border-gray-200 bg-white text-sm">
                                        <button type="button" class=" font-semibold detail-btn"
                                                data-id="{{ $item->id }}" data-jenis="{{ $jenis }}">
                                            <i class="fa-solid fa-plus mr-2"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <th colspan="4" class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">
                                    Total {{ $judul }}
                                </th>
                                <th colspan="2" class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-right text-xs font-bold text-gray-600 uppercase tracking-wider">
                                    Rp {{ number_format($items->sum('total_harga'), 0, ',', '.') }}
                                </th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            @endif
        </div>
    </div>
    <div id="detailModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
        <div class="flex justify-between items-center pb-3 border-b">
            <h3 class="text-lg font-bold text-gray-900">Detail Laporan Pembelian</h3>
            <button class="text-gray-500 hover:text-gray-700 close-modal-btn">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </div>

        <div class="mt-4">
            <div id="modal-content">
                <p><strong>Tanggal:</strong> <span id="modal-tanggal"></span></p>
                <p><strong>Nomor Invoice:</strong> <span id="modal-nomor-invoice"></span></p>
                <p><strong>Pemasok:</strong> <span id="modal-pemasok"></span></p>
                <p><strong>Total Harga:</strong> <span id="modal-total-harga"></span></p>

                <h4 class="font-bold text-sm mt-4 mb-2">Rincian Item:</h4>
                <div class="overflow-x-auto">
                    <table class="min-w-full leading-normal text-xs">
                        <thead class="bg-blue-700 text-white">
                            <tr>
                                <th class="px-3 py-2  text-left font-semibold  uppercase tracking-wider">No</th>
                                <th class="px-3 py-2  text-left font-semibold  uppercase tracking-wider">Item</th>
                                <th class="px-3 py-2  text-left font-semibold  uppercase tracking-wider">Kuantitas</th>
                                <th class="px-3 py-2  text-left font-semibold  uppercase tracking-wider">Harga Unit</th>
                                <th class="px-3 py-2  text-left font-semibold  uppercase tracking-wider">Subtotal</th>
                            </tr>
                        </thead>
                        <tbody id="modal-items-table">
                            </tbody>
                    </table>
                </div>
            </div>
            <div id="modal-loading" class="text-center hidden">
                <p>Memuat data...</p>
            </div>
        </div>
    </div>
</div>
</section>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const detailModal = document.getElementById('detailModal');
    const modalContent = document.getElementById('modal-content');
    const modalLoading = document.getElementById('modal-loading');
    const closeModalBtns = document.querySelectorAll('.close-modal-btn');

    document.querySelectorAll('.detail-btn').forEach(button => {
        button.addEventListener('click', function () {
            const pembelianId = this.getAttribute('data-id');
            const jenis = this.getAttribute('data-jenis');
            
            // Tampilkan modal dan indikator loading
            detailModal.classList.remove('hidden');
            modalContent.classList.add('hidden');
            modalLoading.classList.remove('hidden');

            fetch(`{{ url('laporan/pembelian/detail') }}/${jenis}/${pembelianId}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Gagal memuat detail laporan.');
                    }
                    return response.json();
                })
                .then(data => {
                    // Isi data ke dalam modal
                    document.getElementById('modal-tanggal').innerText = new Date(data.tanggal_pembelian).toLocaleDateString('id-ID', { day: '2-digit', month: 'long', year: 'numeric' });
                    document.getElementById('modal-nomor-invoice').innerText = data.nomor_faktur || '-';
                    document.getElementById('modal-pemasok').innerText = data.pemasok ? data.pemasok.nama : '-';
                    document.getElementById('modal-total-harga').innerText = 'Rp ' + new Intl.NumberFormat('id-ID').format(data.total_harga);

                    // Isi detail item
                    const itemsTable = document.getElementById('modal-items-table');
                    itemsTable.innerHTML = ''; // Kosongkan tabel sebelumnya
                    data.details.forEach((detail, index) => {
                        let itemName = '';
                        if (detail.bahan_baku) {
                            itemName = detail.bahan_baku.nama;
                        } else if (detail.kemasan) {
                            itemName = detail.kemasan.nama;
                        } else if (detail.bahan_penolong) {
                            itemName = detail.bahan_penolong.nama;
                        }

                        const row = `
                            <tr>
                                <td class="px-3 py-2 border-b border-gray-200 bg-white text-sm">${index + 1}</td>
                                <td class="px-3 py-2 border-b border-gray-200 bg-white text-sm">${itemName}</td>
                                <td class="px-3 py-2 border-b border-gray-200 bg-white text-sm">${detail.kuantitas}</td>
                                <td class="px-3 py-2 border-b border-gray-200 bg-white text-sm">Rp ${new Intl.NumberFormat('id-ID').format(detail.harga_unit)}</td>
                                <td class="px-3 py-2 border-b border-gray-200 bg-white text-sm">Rp ${new Intl.NumberFormat('id-ID').format(detail.harga_unit * detail.kuantitas)}</td>
                            </tr>
                        `;
                        itemsTable.insertAdjacentHTML('beforeend', row);
                    });

                    // Tampilkan konten, sembunyikan loading
                    modalLoading.classList.add('hidden');
                    modalContent.classList.remove('hidden');
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Gagal memuat detail.');
                    detailModal.classList.add('hidden');
                });
        });
    });

    closeModalBtns.forEach(btn => {
        btn.addEventListener('click', function () {
            detailModal.classList.add('hidden');
        });
    });

    // Tutup modal saat klik di luar area modal
    window.addEventListener('click', function (event) {
        if (event.target === detailModal) {
            detailModal.classList.add('hidden');
        }
    });
});
</script>
@endpush