@extends('layouts.master')

@section('title', 'Laporan Jurnal Umum')

@section('css')
<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;
    }
</style>
@endsection

@section('content')
<x-page-title title="Journal" pagetitle="Laporan Jurnal Umum" />
<hr>

<div class="card">
    <div class="card-body">
        <h6 class="mb-2 text-uppercase">Laporan Jurnal Umum</h6>
        <div class="row mb-3">
            <div class="col-md-3">
                <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-3">
                <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-3 pt-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>Account Name</th>
                        <th>Document Number</th>
                        <th>Journal Date</th>
                        <th>Note</th>
                        <th>Debet</th>
                        <th>Credit</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 Account Name"></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 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>
                    </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                    <tr>
                        <th>No</th>
                        <th>{{__('Account Number')}}</th>
                        <th>Account Name</th>
                        <th>Document Number</th>
                        <th>Journal Date</th>
                        <th>Note</th>
                        <th>Debet</th>
                        <th>Credit</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
@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>
    $(document).ready(function() {
        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) {
                        var dateFrom = $('#date_from').val();
                        var dateTo = $('#date_to').val();

                        var queryParams = $.param({
                            date_from: dateFrom,
                            date_to: dateTo
                        });

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

                        // 1. Show SweetAlert2 loading full screen block for processing files
                        Swal.fire({
                            title: 'Generating Excel...',
                            text: 'Harap Tunggu.',
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });

                        // 2. XMLHttpRequest Blob handler to capture download complete event
                        var xhr = new XMLHttpRequest();
                        xhr.open('GET', exportUrl, true);
                        xhr.responseType = 'blob';

                        xhr.onload = function () {
                            if (xhr.status === 200) {
                                Swal.close(); // Stop full spinner only when fully streamed

                                var filename = "Laporan_Jurnal_Umum.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, '');
                                    }
                                }

                                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;
                    },
                    orderable: false
                },
                { data: 'account_number' },
                { data: 'account_name' },
                { data: 'document_number' },
                { data: 'document_date' },
                { data: 'notes' },
                {
                    data: 'debet_nominal',
                    render: function(data, type, row) {
                        if (type === 'display' || type === 'filter') {
                            return parseFloat(data.replaceAll('.', '').replaceAll(',', '') || 0).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                        }
                        return data;
                    }
                },
                {
                    data: 'credit_nominal',
                    render: function(data, type, row) {
                        if (type === 'display' || type === 'filter') {
                            return parseFloat(data.replaceAll('.', '').replaceAll(',', '') || 0).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
                        }
                        return data;
                    }
                }
            ],
        });

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

        // Individual column search configuration
        $('#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();
        });

        // Inline Search processing indicator configuration
        $('#btn-search').on('click', function() {
            var $btn = $(this);
            var dateFrom = $('#date_from').val();
            var dateTo = $('#date_to').val();

            // Transform button layout to processing structure safely
            $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Searching...');

            $.ajax({
                url: '{{ route("transaction.journal.fetch_items") }}',
                method: 'GET',
                data: {
                    date_from: dateFrom,
                    date_to: dateTo
                },
                success: function(response) {
                    table.clear().rows.add(response).draw();
                },
                error: function(xhr) {
                    console.error(xhr);
                    alert('An error occurred while fetching data.');
                },
                complete: function() {
                    // Turn button element layout structure back to normal
                    $btn.prop('disabled', false).text('Search');
                }
            });
        });

        $('.clear-date').on('click', function() {
            $($(this).data('target')).val('');
        });
    });
</script>
@endsection