@extends('layout.admin')

@section('content')

<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Laporan Analisis Kesesuaian Aset dan Liabilitas</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Laporan Analisis Kesesuaian Aset dan Liabilitas</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <form action="{{ route('export-excel-almu') }}" method="POST">
                                @csrf
                                <table class="table">
                                <tbody>
                                    <tr class="row">
                                        <td class="col-md-auto"><label for="yearPicker">Pilih Tahun:</label></td>
                                        <td class="col-md-3">
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                                                <input type="text" class="form-control datepicker" id="yearPicker" name="yearPicker">
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>

                                <div style="display: flex; justify-content: space-between;">
                                </div>
                                <!-- <button type="submit" class="btn btn-dark">Download Excel</button> -->
                                <button type="button" class="btn btn-warning" id="download-pdf">Tampilkan PDF</button>
                            </form>
                            <br>
                        <br>

                            <div class="d-flex justify-content-center">
                                <div class="spinner-grow text-success loading-spinner" role="status" style="width: 2;height: 2">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                                <div class="spinner-border text-danger loading-spinner" role="status" style="width: 2;height: 2">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                                <div class="spinner-grow text-warning loading-spinner" role="status" style="width: 2;height: 2">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                                <div class="spinner-border text-info loading-spinner" role="status" style="width: 2;height: 2">
                                  <span class="visually-hidden">Loading...</span>
                                </div>
                              </div>

                              <div class="card-body" style="max-height: 250px; overflow-y: auto;">
                                <table class="table table-hover almu nowrap display bg-cyan" style="width:100%; height: 50px;">
                                    <thead>
                                        <tr>
                                            <th>Ket</th>
                                            <th>ASSET</th>
                                            <th>LIABILITY</th>
                                            <th>Tahun</th>
                                            <th>Bulan</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                                <div id="pdf-container">
                                    <iframe id="pdf-viewer" style="width: 100%; height: 300px;"></iframe>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>





@push('js')
<script>
$(document).ready(function () {
    $('.datepicker').datepicker({
        autoclose: true,
        clearBtn: true,
        minViewMode: 2, 
        format: 'yyyy',
    });

    var almu = $(".almu").DataTable({
        bFilter: false,
        autoWidth: true,
        scrollX: true,
        searching: false,
        select: true,
        cache: true,
        destroy: true,
        processing: true,
        serverSide: true,
        ajax: {
            type: 'GET',
            url: "{{ route('almu') }}",
            data: function (d) {
                d.year = $('#yearPicker').val();
            },
            beforeSend: function () {
                $(".loading-spinner").show(); 
            },
            complete: function () {
                $(".loading-spinner").hide(); 
            },
            dataSrc: function (json) {
                return json.data;
            },
        },
        deferRender: true,
        paging: true,
        pageLength: -1,
        ordering: false,
        columns: [
            { "data": "Ket" },
            { "data": "ASSET" },
            { "data": "LIABILITY" },
            { "data": "tahun"},
            { "data": "Bulan"}
        ],
    });

    $('#download-pdf').on('click', function () {
        $.ajax({
            url: "{{ route('export-pdf-almu') }}",
            type: 'GET',
            xhrFields: {
                responseType: 'blob'
            },
            success: function(response) {
                var blob = new Blob([response], { type: 'application/pdf' });
                var url = URL.createObjectURL(blob);
                $('#pdf-viewer').attr('src', url);
                $('#pdf-container').slideDown();
                
                var windowHeight = $(window).height();
                $('#pdf-viewer').height(windowHeight);
                $('#pdf-viewer').css('overflow-y', 'hidden');
            },
            error: function(xhr) {
                console.error('Error loading PDF:', xhr.statusText);
            }
        });
    });

    $('.datepicker').on('change', function () {
        almu.draw();
    });
    
});
</script>
@endpush

@endsection