@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">Data Trial Balance 2</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">Data Trial Balance 2</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-akuntansi') }}" method="POST">
                                @csrf
                                <input type="hidden" id="selectedMonthExport" name="selectedMonthExport">
                                <table class="table">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <label for="procedure">Pilih Stored Procedure:</label>
                                            </td>
                                            <td>
                                                <select id="procedure" class="form-control" name="procedure" style="width: 20.5%" required>
                                                    <option value="" disabled selected>Pilih Stored Procedure</option>
                                                    <option value="generate_data_acc_tb2">Data TB2 GABUNGAN</option>
                                                    <option value="generate_data_acc_tb2_konv">Data TB2 KONVEN</option>
                                                    <option value="generate_data_acc_tb2_syh">Data TB2 SYARIAH</option>
                                                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <label for="cabang">Masukkan Cabang :</label>
                                            </td>
                                            <td>
                                                <input type="text" id="cabang" class="form-control" name="cabang" style="width: 10%;" disabled>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Pilih Bulan:</td>
                                            <td><input type="text" class="monthpicker" id="selectedMonth" name="selectedMonth"></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div style="display: flex; justify-content: space-between;">
                                </div>
                                <button type="submit" class="btn btn-dark">Download Excel</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>

                            <table class="table table-hover akuntansi nowrap display bg-cyan" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>br_id</th>
                                        <th>tahun</th>
                                        <th>bulan</th>
                                        <th>coa</th>
                                        <th>coa_nm</th>
                                        <th>db_amt</th>
                                        <th>cr_amt</th>
                                        <th>tr_db_amt</th>
                                        <th>tr_cr_amt</th>
                                        <th>sd_amt</th>
                                        <th>led</th>
                                        <th>led_sub</th>
                                        <th>led_sub_nm</th>
                                        <th>cabang</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

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

    var akuntansi = $(".akuntansi").DataTable({
    
    bFilter: false,
    autoWidth: true,
    scrollX: true,
    scrollY: '310px', // Adjust the desired height for scrollable area
    scroller: {
        loadingIndicator: false,
    },
    searching: false,
    select: true,
    cache: true,
    destroy: true,
    processing: true,
    serverSide: true,
    ajax: {
        type: 'GET',
        url: "{{ route('akuntansi') }}",
        data: function (d) {
            d.month = $('#selectedMonth').val();
            d.cabang = $('#cabang').val();
            d.procedure = $('#procedure').val();
        },
        beforeSend: function () {
            $(".loading-spinner").show(); // Show the loading spinner before making the AJAX request
        },
        complete: function () {
            $(".loading-spinner").hide(); // Hide the loading spinner after the AJAX request is complete
        },
        dataSrc: function (json) {
            return json.data;
        },
    },
    deferRender: true,
    paging: true,
    pageLength: -1, // Show all records on a single page
    ordering: false, // Disable column sorting
    columns: [
        { "data": "br_id" },
        { "data": "tahun" },
        { "data": "bulan" },
        { "data": "coa" },
        { "data": "coa_nm" },
        { "data": "db_amt" },
        { "data": "cr_amt" },
        { "data": "tr_db_amt" },
        { "data": "tr_cr_amt" },
        { "data": "sd_amt" },
        { "data": "led" },
        { "data": "led_sub" },
        { "data": "led_sub_nm" },
        { "data": "br_nm" }
    ],
    
    });

    $('.monthpicker').on('change', function () {
        var selectedMonth = $("#selectedMonth").val();
        if (selectedMonth) {
            $("#selectedMonthExport").val(selectedMonth); // Update hidden input value
            akuntansi.draw();
        }
    });

    $('#procedure').on('change', function () {
        var selectedProcedure = $("#procedure").val();
        var isGenerateDataAccTb2 = selectedProcedure === 'generate_data_acc_tb2';

        // Enable/disable the "Masukkan Cabang" field based on the selected procedure
        $('#cabang').prop('disabled', !isGenerateDataAccTb2);

        // Clear the value of "Masukkan Cabang" field if it's disabled
        if (!isGenerateDataAccTb2) {
            $('#cabang').val('');
        }

        akuntansi.draw(); // Redraw the DataTable when the procedure is changed
    });

});

</script>
@endpush

@endsection