@extends('layouts.app')
@section('title', 'Laporan Laba Rugi - Dazry Laundry App')
@section('page_title', 'Laporan Laba Rugi')
@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 Laba Rugi --}}
<div class="grid grid-cols-1 gap-8">
    <div>
        <h2 class="font-semibold mb-4 text-xl">Ringkasan Laba Rugi</h2>

        <table class="min-w-full border border-gray-300 bg-white shadow-md mb-6">
            <tbody>

                {{-- PENDAPATAN --}}
                <tr class="bg-blue-700 text-white font-bold">
                    <td class="px-4 py-2 border" colspan="2">Pendapatan</td>
                </tr>
                <tr>
                    <td class="px-4 py-2 border">Total Pendapatan</td>
                    <td class="px-4 py-2 border text-right">Rp {{ number_format($pendapatan,0,',','.') }}</td>
                </tr>

                {{-- BEBAN --}}
                <tr class="bg-blue-700 text-white font-bold">
                    <td class="px-4 py-2 border" colspan="2">Beban</td>
                </tr>
                <tr>
                    <td class="px-4 py-2 border">Harga Pokok Penjualan (HPP)</td>
                    <td class="px-4 py-2 border text-right">Rp {{ number_format($hpp,0,',','.') }}</td>
                </tr>
                <tr>
                    <td class="px-4 py-2 border">Beban Operasional</td>
                    <td class="px-4 py-2 border text-right">Rp {{ number_format($bebanOperasional,0,',','.') }}</td>
                </tr>

                {{-- TOTAL BEBAN --}}
                <tr class="font-bold">
                    <td class="px-4 py-2 border">Total Beban</td>
                    <td class="px-4 py-2 border text-right">Rp {{ number_format($hpp + $bebanOperasional,0,',','.') }}</td>
                </tr>

                {{-- LABA KOTOR --}}
                <tr class="font-semibold">
                    <td class="px-4 py-2 border">Laba Kotor</td>
                    <td class="px-4 py-2 border text-right">Rp {{ number_format($labaKotor, 0, ',', '.') }}</td>
                </tr>

                {{-- LABA BERSIH SEBELUM PAJAK --}}
                <tr>
                    <td class="px-4 py-2 border">Laba Bersih Sebelum Pajak</td>
                    <td class="px-4 py-2 border text-right">
                        Rp {{ number_format($labaBersihSebelumPajak, 0, ',', '.') }}
                    </td>
                </tr>

                

                {{-- ============================================================== --}}
                {{-- 4. BEBAN PAJAK DAN LABA BERSIH SETELAH PAJAK (BARU) --}}
                {{-- ============================================================== --}}
                <tr class="bg-gray-100 font-bold border-t border-b border-gray-400">
                    <td  class="px-4 py-2 text-md">Laba Bersih Sebelum Pajak</td>
                    <td class="px-4 py-2 text-md text-right">
                        {{ number_format($labaBersihSebelumPajak, 2, ',', '.') }}
                    </td>
                </tr>

                <tr>
                    <td class="px-4 py-2 border text-md">Beban Pajak Penghasilan (PPh)</td>
                    <td class="px-4 py-2 border text-right">
                        ({{ number_format($bebanPajak, 2, ',', '.') }})
                    </td>
                </tr>

                <tr class="bg-gray-100 font-bold border-t border-b border-gray-400">
                    <td class="px-4 py-2">Laba Bersih Setelah Pajak</td>
                    <td class="px-4 py-2  text-right">
                        {{ number_format($labaBersihSetelahPajak, 2, ',', '.') }}
                    </td>
                </tr>

               

            </tbody>
        </table>
    </div>
</div>


    {{-- Status Laba Rugi --}}
    <div class="mt-6 p-4  
        {{ $labaBersihSetelahPajak >= 0 ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
        <strong>Status Laba Rugi:</strong>
        {{ $labaBersihSetelahPajak >= 0 ? 'Laba ✅' : 'Rugi ❌' }}
        (Rp {{ number_format(abs($labaBersihSetelahPajak),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 Laba Rugi</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('laba-rugi.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('laba-rugi.excel', ['periode_id' => '__periode_id__']) }}"
                .replace('__periode_id__', periodeId);

            document.getElementById('btnExportPdf').href = "{{ route('laba-rugi.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