@extends('layouts.master')

@section('title', 'Laporan Buku Besar Information')

@section('css')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />

<style>
    .clickable-row {
        cursor: pointer;
    }

    .clickable-row:hover, .clickable-row:focus {
        background-color: #f1f1f1;
    }

    .btn-insert {
        margin-bottom: 20px;
    }

    .btn-print, .btn-edit {
        margin-right: 10px;
    }
    .filter-input {
        width: 100%;
        padding: 5px;
        box-sizing: border-box;
    }
    /* Fix Select2 alignment inside bootstrap layouts */
    .select2-container--bootstrap-5 .select2-selection {
        height: 38px !important;
        padding: 5px 12px;
    }
</style>
@endsection

@section('content')
<x-page-title title="Laporan Buku Besar" pagetitle="Laporan Buku Besar" />
<hr>

<div class="card">
    <div class="card-body">
        <h6 class="mb-2 text-uppercase">Laporan Buku Besar </h6>
        <div class="row mb-3 align-items-end">
            <div class="col-md-2">
                <label for="date_from">Date From:</label>
                <div class="input-group">
                    <input type="date" id="date_from" class="form-control date-picker filter-date me-0">
                    <button type="button" class="btn btn-danger clear-date" data-target="#date_from"><i class="material-icons-outlined">close</i></button>
                </div>
            </div>

            <div class="col-md-2">
                <label for="date_to">Date To:</label>
                <div class="input-group">
                    <input type="date" id="date_to" class="form-control date-picker filter-date me-0">
                    <button type="button" class="btn btn-danger clear-date" data-target="#date_to"><i class="material-icons-outlined">close</i></button>
                </div>
            </div>

            <div class="col-md-4">
                <label for="coa_id">COA:</label>
                <select id="coa_id" class="form-control select2-coa">
                    <option value="">Select COA</option>
                    @foreach($coas as $coa)
                        <option value="{{ $coa->account_number }}">{{ $coa->account_number }} - {{ $coa->account_name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-4">
                <button type="button" class="btn btn-primary" id="btn-search">Search</button>
            </div>
        </div>

        <div class="table-responsive">
            <table id="example" class="table table-hover table-bordered mt-3" style="width:100%">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>{{__('Account Number')}}</th>
                        <th>Nomor Dokumen</th>
                        <th>Tanggal Dokumen</th>
                        <th>Account Name</th>
                        <th>Catatan</th>
                        <th>Debet</th>
                        <th>Credit</th>
                        <th>Balance</th>
                    </tr>
                    <tr>
                        <th></th>
                        <th><input type="text" class="filter-input form-control" placeholder="Search Account Number"></th>
                        <th><input type="text" class="filter-input form-control" placeholder="Search Document Number"></th>
                        <th><input type="text" class="filter-input form-control" placeholder="Search Journal Date"></th>
                        <th><input type="text" class="filter-input form-control" placeholder="Search Account Name"></th>
                        <th><input type="text" class="filter-input form-control" placeholder="Search Note"></th>
                        <th><input type="text" class="filter-input form-control" placeholder="Search Debet"></th>
                        <th><input type="text" class="filter-input form-control" placeholder="Search Credit"></th>
                        <th><input type="text" class="filter-input form-control" placeholder="Search Balance"></th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

@if (session('success'))
<script>
    Swal.fire({ title: 'Success!', text: "{{ session('success') }}", icon: 'success', confirmButtonText: 'OK' });
</script>
@endif

@if (session('error'))
<script>
    Swal.fire({ title: 'Error!', text: "{{ session('error') }}", icon: 'error', confirmButtonText: 'OK' });
</script>
@endif

@endsection

@section('scripts')
<script src="{{ URL::asset('build/plugins/datatable/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ URL::asset('build/plugins/datatable/js/dataTables.bootstrap5.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
    $(document).ready(function() {
        // Initialize Select2 Engine
        $('.select2-coa').select2({
            theme: 'bootstrap-5',
            placeholder: 'Select COA',
            allowClear: true
        });

        // Initialize DataTable (Removed Client-Side Heavy Excel Button Export Configuration)
        var table = $('#example').DataTable({
            lengthChange: false,
            @if(Auth::user()->role=='RO01')
            buttons: [
                'copy',
                {
                    text: 'Excel',
                    className: 'btn btn-success buttons-excel buttons-html5',
                    action: function (e, dt, node, config) {
                        // Grab current filter values
                        var dateFrom = $('#date_from').val();
                        var dateTo = $('#date_to').val();
                        var coaId = $('#coa_id').val();

                        // Build query string
                        var queryParams = $.param({
                            date_from: dateFrom,
                            date_to: dateTo,
                            coa_id: coaId
                        });

                        var exportUrl = '{{ route("transaction.journal.export_ledger") }}?' + queryParams;

                        // 1. Fire up SweetAlert2 Loading Spinner
                        Swal.fire({
                            title: 'Generating Excel...',
                            text: 'Harap Tunggu.',
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });

                        // 2. Fetch data via Native AJAX to track processing status
                        var xhr = new XMLHttpRequest();
                        xhr.open('GET', exportUrl, true);
                        xhr.responseType = 'blob'; // Important for handling file streams safely

                        xhr.onload = function () {
                            if (xhr.status === 200) {
                                // Close loading spinner
                                Swal.close();

                                // Get filename from response headers or fall back to a default format
                                var filename = "Laporan_Buku_Besar.xlsx";
                                var disposition = xhr.getResponseHeader('content-disposition');
                                if (disposition && disposition.indexOf('filename=') !== -1) {
                                    var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                                    var matches = filenameRegex.exec(disposition);
                                    if (matches != null && matches[1]) {
                                        filename = matches[1].replace(/['"]/g, '');
                                    }
                                }

                                // Trigger the download out-of-viewport
                                var blob = xhr.response;
                                var link = document.createElement('a');
                                link.href = window.URL.createObjectURL(blob);
                                link.download = filename;
                                document.body.appendChild(link);
                                link.click();
                                document.body.removeChild(link);
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Export Failed',
                                    text: 'An error occurred on the server while generating the file.'
                                });
                            }
                        };

                        xhr.onerror = function () {
                            Swal.fire({
                                icon: 'error',
                                title: 'Network Error',
                                text: 'Could not connect to the server.'
                            });
                        };

                        xhr.send();
                    }
                },
                'print'
            ],
            @endif
            columns: [
                {
                    data: null,
                    render: function(data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                { data: 'account_number' },
                { data: 'document_number' },
                { data: 'document_date' },
                { data: 'account_name' },
                { data: 'notes' },
                { data: 'debet_nominal' },
                { data: 'credit_nominal' },
                { data: 'balance' },
            ]
        });

        table.buttons().container().appendTo('#example_wrapper .col-md-6:eq(0)');

        // Individual column search
        $('#example thead tr:eq(1) th').each(function(i) {
            var column = table.column(i);
            if (i !== 0) {
                $(this).find('input').on('keyup change', function() {
                    if (column.search() !== this.value) {
                        column.search(this.value).draw();
                    }
                });
            }
        });

        $('#example thead tr:eq(1) th input').on('click', function(e) {
            e.stopPropagation();
        });

        // Clear filter button actions
        $('.clear-date').on('click', function() {
            $($(this).data('target')).val('');
        });

        // Fetch display data via Ajax
        $('#btn-search').on('click', function() {
            var dateFrom = $('#date_from').val();
            var dateTo = $('#date_to').val();
            var coaId = $('#coa_id').val();

            $.ajax({
                url: '{{ route("transaction.journal.fetch_ledger_items") }}',
                method: 'GET',
                data: {
                    date_from: dateFrom,
                    date_to: dateTo,
                    coa_id: coaId
                },
                success: function(response) {
                    table.clear().rows.add(response).draw();
                },
                error: function(xhr) {
                    console.error(xhr);
                    alert('An error occurred while fetching data.');
                }
            });
        });

        // Backend Redirection Download Event Hook
        $('#btn-export-excel').on('click', function() {
            var dateFrom = $('#date_from').val();
            var dateTo = $('#date_to').val();
            var coaId = $('#coa_id').val();

            // Direct mapping parameters over window instance
            var queryParams = $.param({
                date_from: dateFrom,
                date_to: dateTo,
                coa_id: coaId
            });

            var exportUrl = '{{ route("transaction.journal.export_ledger") }}?' + queryParams;
            window.location.href = exportUrl;
        });
    });
</script>
@endsection