{{-- resources/views/yayasan/laporan/penggunaan-per-program/index.blade.php --}}

@extends('layouts.app')

@section('title', 'Laporan Penggunaan Dana Per Program Yayasan Pendidikan')

@section('content')
<div class="nk-content nk-content-fluid">
    <div class="container-xl wide-xl">
        <div class="nk-content-inner">
            <div class="nk-content-body">
                <div class="nk-block-head nk-block-head-sm">
                    <div class="nk-block-between">
                        <div class="nk-block-head-content">
                            <h3 class="nk-block-title page-title">Laporan Penggunaan Dana Per Program</h3>
                            <div class="nk-block-des text-soft">
                                <p>Rekap penggunaan dana yayasan berdasarkan program.</p>
                            </div>
                        </div>
                    </div>
                </div>

                @if(session('error'))
                    <div class="alert alert-danger alert-icon alert-dismissible fade show" role="alert">
                        <em class="icon ni ni-cross-circle"></em> <strong>Error!</strong> {{ session('error') }}
                        <button class="close" data-bs-dismiss="alert"></button>
                    </div>
                @endif
                
                @if(session('success'))
                    <div class="alert alert-success alert-icon alert-dismissible fade show" role="alert">
                        <em class="icon ni ni-check-circle"></em> <strong>Sukses!</strong> {{ session('success') }}
                        <button class="close" data-bs-dismiss="alert"></button>
                    </div>
                @endif
                
                <div class="card card-bordered mb-4">
                    <div class="card-inner">
                        <form method="GET" action="{{ route('yayasan.laporan.penggunaan-per-program.index') }}" id="filterForm">
                            <div class="row g-3 align-items-end">
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="form-label">Tahun</label>
                                        <div class="form-control-wrap">
                                            <select class="form-select js-select2" id="tahun" name="tahun">
                                                @foreach($tahunList as $year)
                                                    <option value="{{ $year }}" {{ $selectedTahun == $year ? 'selected' : '' }}>
                                                        {{ $year }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label class="form-label">Bulan</label>
                                        <div class="form-control-wrap">
                                            <select class="form-select js-select2" id="bulan" name="bulan">
                                                <option value="">Semua Bulan</option>
                                                @foreach($bulanList as $key => $nama)
                                                    <option value="{{ $key }}" {{ $selectedBulan == $key ? 'selected' : '' }}>
                                                        {{ $nama }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-group">
                                        <label class="form-label">Unit {{ auth()->user()->role_id != 1 ? '(Wajib)' : '(Opsional)' }}</label>
                                        <div class="form-control-wrap">
                                            @if(auth()->user()->role_id == 7)
                                                {{-- Untuk role unit, unit sudah fixed; gunakan hidden input agar nilai terkirim --}}
                                                <input type="hidden" name="unit_id" value="{{ $selectedUnit }}">
                                                <select class="form-select js-select2" id="unit_id" disabled>
                                                    @foreach($units as $unit)
                                                        <option value="{{ $unit->kode_unit }}" {{ $selectedUnit == $unit->kode_unit ? 'selected' : '' }}>
                                                            {{ $unit->nama_unit }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            @else
                                                <select class="form-select js-select2" id="unit_id" name="unit_id">
                                                    @if(auth()->user()->role_id == 1)
                                                        <option value="">Semua Unit</option>
                                                    @endif
                                                    @foreach($units as $unit)
                                                        <option value="{{ $unit->kode_unit }}" {{ $selectedUnit == $unit->kode_unit ? 'selected' : '' }}>
                                                            {{ $unit->nama_unit }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <button type="submit" class="btn btn-primary w-100">
                                            <em class="icon ni ni-filter"></em> Filter
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="card card-preview">
                    <div class="card-inner border-bottom">
                        <div class="card-title-group">
                            <div class="card-title">
                                <h6 class="title">Preview Laporan</h6>
                            </div>
                            <div class="card-tools">
                                <a class="btn btn-success btn-dim btn-sm"
                                   href="{{ route('yayasan.laporan.penggunaan-per-program.excel', ['bulan' => $selectedBulan, 'unit_id' => $selectedUnit, 'tahun' => $selectedTahun]) }}">
                                    <em class="icon ni ni-file-excel"></em><span>Download Excel</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-custom">
                            <thead class="table-light">
                                <tr>
                                    <th>Kode Kegiatan</th>
                                    <th>Kode Akun</th>
                                    <th>Nama Program</th>
                                    <th>Nama Unit</th>
                                    <th class="text-end">Nominal Pengajuan</th>
                                    <th class="text-end">Nominal Realisasi</th>
                                    <th class="text-center">Tgl Realisasi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($data as $row)
                                    <tr>
                                        <td>
                                            @if($row->kode_kegiatan && $row->kode_kegiatan !== '-')
                                                <span class="badge badge-dim bg-outline-secondary">{{ $row->kode_kegiatan }}</span>
                                            @else
                                                <span class="text-muted">-</span>
                                            @endif
                                        </td>
                                        <td>{{ $row->kode_akun !== '-' ? $row->kode_akun : '-' }}</td>
                                        <td>
                                            {{ $row->nama }}
                                            @if(!$row->kode_kegiatan || $row->kode_kegiatan === '-')
                                                <br><small class="text-muted fst-italic">(dari deskripsi transaksi)</small>
                                            @endif
                                        </td>
                                        <td>{{ $row->nama_unit }}</td>
                                        <td class="text-end">{{ number_format($row->nominal_pengajuan, 0, ',', '.') }}</td>
                                        <td class="text-end">{{ number_format($row->nominal_realisasi, 0, ',', '.') }}</td>
                                        <td class="text-center">{{ $row->tanggal_realisasi ? \Carbon\Carbon::parse($row->tanggal_realisasi)->format('d/m/Y') : '-' }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="text-center p-4 text-muted">Tidak ada data untuk filter ini.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                            <tfoot>
                                <tr class="table-light fw-bold border-top border-primary">
                                    <td colspan="4" class="text-end text-uppercase">TOTAL</td>
                                    <td class="text-end">{{ number_format($totalPengajuan ?? 0, 0, ',', '.') }}</td>
                                    <td class="text-end">{{ number_format($totalRealisasi ?? 0, 0, ',', '.') }}</td>
                                    <td></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    (function($) {
        "use strict";
        
        // Auto close alerts after 5 seconds
        setTimeout(function() {
            $('.alert').fadeOut('slow');
        }, 5000);
        
        // Manual close alert
        $('.alert .close').on('click', function() {
            $(this).closest('.alert').fadeOut('slow');
        });
        
        // Form validation
        $('#filterForm').on('submit', function(e) {
            // Validasi unit hanya untuk role non-admin dan non-unit (role 7 sudah otomatis via hidden input)
            var userRoleId = {{ auth()->user()->role_id }};
            if (userRoleId != 1 && userRoleId != 7) {
                var unitId = $('#unit_id').val();
                if (!unitId) {
                    e.preventDefault();
                    alert('Silakan pilih unit terlebih dahulu.');
                    return false;
                }
            }
            
            // Show loading state
            var submitBtn = $(this).find('button[type="submit"]');
            var originalText = submitBtn.html();
            submitBtn.html('<em class="icon ni ni-loader"></em> Memproses...');
            submitBtn.prop('disabled', true);
            
            // Re-enable button after 3 seconds if no response
            setTimeout(function() {
                submitBtn.html(originalText);
                submitBtn.prop('disabled', false);
            }, 3000);
        });
        
    })(jQuery);
</script>
@endpush