@extends('layouts.app')

@section('title', __('accounting-reports::lang.sales_journal'))

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>@lang('accounting-reports::lang.sales_journal')
        <small class="text-muted">@lang('accounting-reports::lang.automated_journal_entries')</small>
    </h1>
</section>

<!-- Main content -->
<section class="content">
    @component('components.widget', ['class' => 'box-primary'])
        <div class="row">
            <div class="col-md-3 col-xs-12">
                <div class="form-group">
                    {!! Form::label('start_date', __('accounting-reports::lang.start_date') . ':') !!}
                    {!! Form::text('start_date', @format_date(\Carbon\Carbon::now()->startOfMonth()), ['class' => 'form-control date-picker', 'readonly', 'id' => 'start_date']) !!}
                </div>
            </div>
            <div class="col-md-3 col-xs-12">
                <div class="form-group">
                    {!! Form::label('end_date', __('accounting-reports::lang.end_date') . ':') !!}
                    {!! Form::text('end_date', @format_date('now'), ['class' => 'form-control date-picker', 'readonly', 'id' => 'end_date']) !!}
                </div>
            </div>
            <div class="col-md-3 col-xs-12">
                <div class="form-group">
                    {!! Form::label('location_id', __('purchase.business_location') . ':') !!}
                    {!! Form::select('location_id', $locations, null, ['class' => 'form-control select2', 'placeholder' => __('messages.all'), 'style' => 'width:100%', 'id' => 'location_filter']) !!}
                </div>
            </div>
            <div class="col-md-3 col-xs-12">
                <div class="form-group">
                    <label>&nbsp;</label><br>
                    <button type="button" class="btn btn-primary" id="filter_btn">
                        <i class="fa fa-filter"></i> @lang('messages.filter')
                    </button>
                    @if(auth()->user()->can('accounting.export_reports'))
                    <button type="button" class="btn btn-success" id="export_btn">
                        <i class="fa fa-download"></i> @lang('accounting-reports::lang.export')
                    </button>
                    @endif
                </div>
            </div>
        </div>
        
        <div class="table-responsive">
            <table class="table table-bordered table-striped table-hover" id="sales_journal_table" style="width:100%;">
                <thead>
                    <tr>
                        <th>@lang('accounting-reports::lang.voucher_no')</th>
                        <th>@lang('accounting-reports::lang.voucher_date')</th>
                        <th>@lang('accounting-reports::lang.invoice_no')</th>
                        <th>@lang('accounting-reports::lang.customer')</th>
                        <th>@lang('accounting-reports::lang.debit')</th>
                        <th>@lang('accounting-reports::lang.credit')</th>
                        <th>@lang('purchase.business_location')</th>
                        <th>@lang('accounting-reports::lang.narration')</th>
                        <th>@lang('messages.action')</th>
                    </tr>
                </thead>
            </table>
        </div>
    @endcomponent
</section>

@endsection

@section('javascript')
<script type="text/javascript">
    $(document).ready(function() {
        // Initialize date pickers with proper format
        if (typeof datepicker_date_format !== 'undefined') {
            $('#start_date').datepicker({
                autoclose: true,
                format: datepicker_date_format
            });
            $('#end_date').datepicker({
                autoclose: true,
                format: datepicker_date_format
            });
        } else {
            // Fallback if datepicker_date_format is not defined
            $('#start_date').datepicker({
                autoclose: true,
                format: 'dd/mm/yyyy'
            });
            $('#end_date').datepicker({
                autoclose: true,
                format: 'dd/mm/yyyy'
            });
        }

        // Initialize select2
        $('#location_filter').select2();

        var sales_journal_table = $('#sales_journal_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '{{ action([\Modules\AccountingReports\Http\Controllers\SalesJournalController::class, "getData"]) }}',
                data: function(d) {
                    // Get dates in proper format for backend
                    var startDate = $('#start_date').val();
                    var endDate = $('#end_date').val();
                    
                    // Convert to YYYY-MM-DD format if needed
                    if (startDate && typeof moment !== 'undefined') {
                        var startMoment = moment(startDate, datepicker_date_format || 'DD/MM/YYYY');
                        if (startMoment.isValid()) {
                            d.start_date = startMoment.format('YYYY-MM-DD');
                        } else {
                            d.start_date = startDate;
                        }
                    } else {
                        d.start_date = startDate;
                    }
                    
                    if (endDate && typeof moment !== 'undefined') {
                        var endMoment = moment(endDate, datepicker_date_format || 'DD/MM/YYYY');
                        if (endMoment.isValid()) {
                            d.end_date = endMoment.format('YYYY-MM-DD');
                        } else {
                            d.end_date = endDate;
                        }
                    } else {
                        d.end_date = endDate;
                    }
                    
                    d.location_id = $('#location_filter').val();
                },
                error: function(xhr, error, thrown) {
                    console.error('DataTables Ajax Error:', error, thrown);
                    toastr.error('Error loading sales journal data. Please check the console for details.');
                }
            },
            columns: [
                { data: 'voucher_no', name: 'voucher_no', orderable: true, searchable: true },
                { data: 'voucher_date', name: 'voucher_date', orderable: true, searchable: false },
                { data: 'invoice_no', name: 'reference', orderable: true, searchable: true },
                { data: 'customer', name: 'customer', orderable: false, searchable: false },
                { data: 'debit_total', name: 'debit_total', orderable: false, searchable: false },
                { data: 'credit_total', name: 'credit_total', orderable: false, searchable: false },
                { data: 'location', name: 'location', orderable: false, searchable: false },
                { data: 'narration', name: 'narration', orderable: false, searchable: true },
                { data: 'action', name: 'action', orderable: false, searchable: false }
            ],
            order: [[1, 'desc']], // Order by date descending
            pageLength: 25,
            language: {
                processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span>',
                emptyTable: 'No sales journal entries found for the selected period.',
                zeroRecords: 'No matching records found'
            }
        });

        $('#filter_btn').on('click', function() {
            sales_journal_table.ajax.reload();
        });

        $('#export_btn').on('click', function() {
            window.location.href = '{{ action([\Modules\AccountingReports\Http\Controllers\SalesJournalController::class, "export"]) }}?start_date=' + 
                $('#start_date').val() + '&end_date=' + $('#end_date').val() + '&location_id=' + $('#location_filter').val();
        });
    });
</script>
@endsection