@extends('layout.main')

@section('content')
<div class="container mt-4">
    <div class="card shadow-sm rounded-3">
        <div class="card-header bg-primary text-white text-center">
            <h4 class="mb-0">Rekap Pergeseran Anggaran</h4>
        </div>
        <div class="card-body">
            <!-- Tombol Print -->
            <div class="d-flex justify-content-end mb-3">
                <button id="printButton" class="btn btn-outline-primary" onclick="printPage()">
                    <i class="fas fa-print"></i> Cetak
                </button>
            </div>

            <!-- Table Responsive -->
            <div class="table-responsive">
                <table class="table table-bordered table-hover" id="rekapTable">
                    <thead class="table-dark text-center">
                        <tr>
                            <th style="width: 5%;">No</th>
                            <th style="min-width: 150px;">SKPD</th>
                            <th style="min-width: 180px;">Sub Kegiatan</th>
                            <th style="min-width: 180px;">Rekening</th>
                            <th style="min-width: 130px;">Jumlah Sebelum</th>
                            <th style="min-width: 130px;">Jumlah Sesudah</th>
                            <th style="min-width: 130px;">Selisih</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($reportpergeseran as $item)
                        <tr>
                            <td class="text-center">{{ $loop->iteration }}</td>
                            <td class="text-wrap">{{ $item->skpd->nama }}</td>
                            <td class="text-wrap">{{ $item->subKegiatan->nama }}</td>
                            <td class="text-wrap">{{ $item->rekening->nama }}</td>
                            <td class="text-end">{{ number_format($item->jumlah_sebelum, 0, ',', '.') }}</td>
                            <td class="text-end">{{ number_format($item->jumlah_sesudah, 0, ',', '.') }}</td>
                            <td class="text-end">{{ number_format($item->jumlah_sesudah - $item->jumlah_sebelum, 0, ',', '.') }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

        </div>
    </div>
</div>

<script>
    function printPage() {
        document.getElementById('printButton').style.display = 'none';
        window.print();
        window.onafterprint = function () {
            document.getElementById('printButton').style.display = 'block';
        };
    }
</script>
@endsection

@section('styles')
<style>
    td, th {
        word-wrap: break-word;
        word-break: break-word;
        white-space: normal !important;
        vertical-align: middle;
    }

    .table-responsive {
        -webkit-overflow-scrolling: touch;
        margin: 0 auto;
        padding: 0 15px;  /* Menambahkan padding pada sisi tabel */
    }

    @media print {
        body {
            font-size: 12pt;
        }

        #printButton, .card-header {
            display: none !important;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid #000 !important;
            padding: 8px !important;
        }

        .table-responsive {
            margin-bottom: 0 !important;
        }
    }

    /* Responsivitas untuk tampilan mobile */
    @media (max-width: 768px) {
        .table th, .table td {
            padding: 0.5rem;
        }

        .container {
            padding-left: 15px;
            padding-right: 15px;
        }

        .table-responsive {
            overflow-x: auto;
        }
    }

</style>
@endsection