@extends('layouts.app')
@section('title', 'Laporan Neraca - Dazry Laundry App')
@section('page_title', 'Laporan Neraca')
@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>


    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        {{-- Aktiva --}}
        <div>
            <h2 class=" font-semibold mb-2">Aktiva</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">Aktiva Lancar</td>
                    </tr>
                    @foreach($aktivaLancar as $nama => $nilai)
                    <tr>
                        <td class="px-4 py-2 border">{{ $nama }}</td>
                        <td class="px-4 py-2 border text-right">Rp {{ number_format($nilai,0,',','.') }}</td>
                    </tr>
                    @endforeach
                    <tr class="font-bold">
                        <td class="px-4 py-2 border">Total Aktiva Lancar</td>
                        <td class="px-4 py-2 border text-right">Rp {{ number_format(array_sum($aktivaLancar),0,',','.') }}</td>
                    </tr>

                    <tr class="bg-blue-700 text-white font-bold">
                        <td class="px-4 py-2 border" colspan="2">Aktiva Tetap</td>
                    </tr>
                    @foreach($aktivaTetap as $nama => $nilai)
                    <tr>
                        <td class="px-4 py-2 border">{{ $nama }}</td>
                        <td class="px-4 py-2 border text-right">Rp {{ number_format($nilai,0,',','.') }}</td>
                    </tr>
                    @endforeach
                    <tr class="font-bold">
                        <td class="px-4 py-2 border">Total Aktiva Tetap</td>
                        <td class="px-4 py-2 border text-right">Rp {{ number_format(array_sum($aktivaTetap),0,',','.') }}</td>
                    </tr>

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

        {{-- Pasiva --}}
        <div>
            <h2 class=" font-semibold mb-2">Pasiva</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">Kewajiban</td>
                    </tr>
                    @foreach($kewajiban as $nama => $nilai)
                    <tr>
                        <td class="px-4 py-2 border">{{ $nama }}</td>
                        <td class="px-4 py-2 border text-right">Rp {{ number_format($nilai,0,',','.') }}</td>
                    </tr>
                    @endforeach
                    <tr class="font-bold">
                        <td class="px-4 py-2 border">Total Kewajiban</td>
                        <td class="px-4 py-2 border text-right">Rp {{ number_format(array_sum($kewajiban),0,',','.') }}</td>
                    </tr>

                    <tr class="bg-blue-700 text-white font-bold">
                        <td class="px-4 py-2 border" colspan="2">Modal</td>
                    </tr>
                    @foreach($modal as $nama => $nilai)
                    <tr>
                        <td class="px-4 py-2 border">{{ $nama }}</td>
                        <td class="px-4 py-2 border text-right">Rp {{ number_format($nilai,0,',','.') }}</td>
                    </tr>
                    @endforeach
                    <tr class="font-bold">
                        <td class="px-4 py-2 border">Total Modal</td>
                        <td class="px-4 py-2 border text-right">Rp {{ number_format(array_sum($modal),0,',','.') }}</td>
                    </tr>

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

    {{-- Validasi Kesetimbangan --}}
    <div class="mt-6 p-4  
        {{ (array_sum($aktivaLancar)+array_sum($aktivaTetap)) == (array_sum($kewajiban)+array_sum($modal)) 
            ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
        <strong>Status Neraca:</strong>
        {{ (array_sum($aktivaLancar)+array_sum($aktivaTetap)) == (array_sum($kewajiban)+array_sum($modal)) 
            ? 'Seimbang ✅' : 'Tidak Seimbang ❌' }}
    </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 Neraca</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 bulan = "{{ $bulan }}";
        let tahun = "{{ $tahun }}";

        // load PDF dengan preview
        iframe.src = "{{ route('laporan.neraca.cetak', ['bulan'=>'__bulan__','tahun'=>'__tahun__']) }}&toolbar=0&navpanes=0&scrollbar=0&view=FitH"
            .replace('__bulan__', bulan)
            .replace('__tahun__', tahun) + "?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('neraca.export.excel', ['bulan'=>'__bulan__','tahun'=>'__tahun__']) }}"
            .replace('__bulan__', bulan)
            .replace('__tahun__', tahun);

        document.getElementById('btnExportPdf').href = "{{ route('laporan.neraca.cetak', ['bulan'=>'__bulan__','tahun'=>'__tahun__']) }}"
            .replace('__bulan__', bulan)
            .replace('__tahun__', tahun);
    }

    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