@extends('layouts.app')
@section('title', 'Laporan Pengeluaran - Dazry Laundry App')
@section('page_title', 'Laporan Pengeluaran')
@section('content')
<section class="bg-white pt-6 text-sm">

    <div class="flex flex-col md:flex-row md:justify-between md:items-center mb-6">
        {{-- Dropdown Pilih Periode --}}
        <div class="mb-4 md:mb-0 w-full md:w-auto">
            <form method="GET" class="flex flex-col md:flex-row md:items-center space-y-4 md:space-y-0 md:space-x-4">
                <div>
                    <label class="block text-gray-700 text-sm font-bold mb-1">Pilih Periode</label>
                    <select name="periode_id" onchange="this.form.submit()" 
                            class="form-select w-full md:w-100 border-gray-300 ">
                        @foreach($periodes as $p)
                            <option value="{{ $p->id }}" 
                                    {{ $periodeDipilih->id == $p->id ? 'selected' : '' }}>
                                {{ $p->nama_periode }} 
                                ({{ \Carbon\Carbon::parse($p->tanggal_mulai)->format('d M Y') }} - 
                                {{ \Carbon\Carbon::parse($p->tanggal_selesai)->format('d M Y') }})
                                {{ $p->status == 'buka' ? '⭐ Aktif' : '' }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </form>
        </div>

        {{-- Tombol Export --}}
        <div class="flex flex-col md:flex-row md:items-center space-y-4 md:space-y-0 md:space-x-2 w-full md:w-auto mt-4 md:mt-0">
            <button onclick="openExportModal()" 
                    class="bg-blue-700 hover:bg-blue-600 text-white px-4 py-2  shadow w-full md:w-auto">
                <i class="fas fa-print mr-2"></i>Print
            </button>
        </div>
    </div>

    {{-- Ringkasan Pengeluaran --}}
    <div class="grid grid-cols-1 gap-8">
        <div>
            <h2 class="font-semibold mb-4">Ringkasan Pengeluaran</h2>
            <table class="min-w-full border border-gray-300 bg-white shadow-md mb-6">
                <tbody>
                    <tr class="bg-blue-700 text-white font-bold">
                        <td class="px-4 py-2 border" colspan="2">Jenis Pengeluaran</td>
                    </tr>
                    
                    <tr>
                        <td class="px-4 py-2 border">Pembelian Bahan Baku</td>
                        <td class="px-4 py-2 border text-right">Rp {{ number_format($bahanBaku,0,',','.') }}</td>
                    </tr>
                    
                    <tr>
                        <td class="px-4 py-2 border">Pembelian Kemasan</td>
                        <td class="px-4 py-2 border text-right">Rp {{ number_format($kemasan,0,',','.') }}</td>
                    </tr>
                    
                    <tr>
                        <td class="px-4 py-2 border">Pembelian Bahan Penolong</td>
                        <td class="px-4 py-2 border text-right">Rp {{ number_format($bahanPenolong,0,',','.') }}</td>
                    </tr>
                    
                    <tr>
                        <td class="px-4 py-2 border">Pengeluaran Umum</td>
                        <td class="px-4 py-2 border text-right">Rp {{ number_format($pengeluaranUmum,0,',','.') }}</td>
                    </tr>

                    <tr class="bg-blue-700 text-white font-bold">
                        <td class="px-4 py-2 border">TOTAL PENGELUARAN</td>
                        <td class="px-4 py-2 border text-right">
                            Rp {{ number_format($totalPengeluaran,0,',','.') }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    {{-- Analisis Pengeluaran --}}
    <div class="mt-6 p-4 bg-blue-100 text-blue-800 rounded">
        <strong>Analisis Pengeluaran:</strong>
        Total pengeluaran periode ini sebesar Rp {{ number_format($totalPengeluaran,0,',','.') }}
    </div>

    <div class="mt-4 p-3 rounded bg-blue-100 text-blue-800 text-sm">
        Periode aktif saat ini: 
        <strong>{{ $periodeAktif->nama_periode }}</strong> 
        ({{ \Carbon\Carbon::parse($periodeAktif->tanggal_mulai)->format('d M Y') }} 
        - {{ \Carbon\Carbon::parse($periodeAktif->tanggal_selesai)->format('d M Y') }})
    </div>

    <!-- Modal Export -->
    <div id="exportModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
        <div class="bg-white w-full max-w-4xl h-[90vh]  shadow-lg flex flex-col">
            
            <!-- Header -->
            <div class="flex justify-between items-center p-4 border-b">
                <h2 class="text-lg font-semibold">Preview Laporan Pengeluaran</h2>
                <button onclick="closeExportModal()" class="text-gray-500 hover:text-gray-800">&times;</button>
            </div>

            <!-- Body: Embed PDF dengan spinner -->
            <div class="flex-1 overflow-hidden relative">
                <!-- Spinner -->
                <div id="loadingSpinner" class="absolute inset-0 flex items-center justify-center bg-white">
                    <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
                    <span class="ml-3 text-gray-600 font-medium">Memuat laporan...</span>
                </div>

                <!-- Iframe PDF -->
                <iframe id="previewFrame" src="" class="w-full h-full border-0"></iframe>
            </div>

            <!-- Footer: Tombol Download -->
            <div class="flex justify-end space-x-2 p-4 border-t">
                <a id="btnExportExcel" href="#" 
                   class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">
                    Download Excel
                </a>
                <a id="btnExportPdf" href="#" 
                   class="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700">
                    Download PDF
                </a>
            </div>
        </div>
    </div>

    <script>
        function openExportModal() {
            const modal = document.getElementById('exportModal');
            modal.classList.remove('hidden');
            modal.classList.add('flex');

            const spinner = document.getElementById('loadingSpinner');
            const iframe = document.getElementById('previewFrame');

            spinner.classList.remove('hidden');
            iframe.classList.add('hidden');

            let periodeId = "{{ $periodeDipilih->id }}";

            // load PDF dengan preview
            iframe.src = "{{ route('laporan.pengeluaran.pdf', ['periode_id' => '__periode_id__']) }}&toolbar=0&navpanes=0&scrollbar=0&view=FitH"
                .replace('__periode_id__', periodeId) + "?preview=1";

            // ketika iframe selesai load -> sembunyikan spinner
            iframe.onload = () => {
                spinner.classList.add('hidden');
                iframe.classList.remove('hidden');
            };

            // set tombol download
            document.getElementById('btnExportExcel').href = "{{ route('laporan.pengeluaran.excel', ['periode_id' => '__periode_id__']) }}"
                .replace('__periode_id__', periodeId);

            document.getElementById('btnExportPdf').href = "{{ route('laporan.pengeluaran.pdf', ['periode_id' => '__periode_id__']) }}"
                .replace('__periode_id__', periodeId);
        }

        function closeExportModal() {
            const modal = document.getElementById('exportModal');
            modal.classList.add('hidden');
            modal.classList.remove('flex');

            // reset iframe
            const iframe = document.getElementById('previewFrame');
            iframe.src = "";
        }
    </script>

</section>    
@endsection