@extends('layouts.app')

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

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>@lang('accounting-reports::lang.purchase_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="purchase_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.bill_no')</th>
                        <th>@lang('accounting-reports::lang.supplier')</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 purchase_journal_table = $('#purchase_journal_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '{{ action([\Modules\AccountingReports\Http\Controllers\PurchaseJournalController::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 purchase journal data. Please check the console for details.');
                }
            },
            columns: [
                { data: 'voucher_no', name: 'voucher_no' },
                { data: 'voucher_date', name: 'voucher_date' },
                { data: 'bill_no', name: 'bill_no' },
                { data: 'supplier', name: 'supplier' },
                { data: 'debit_total', name: 'debit_total' },
                { data: 'credit_total', name: 'credit_total' },
                { data: 'location', name: 'location' },
                { data: 'narration', name: 'narration' },
                { data: 'action', name: 'action', orderable: false, searchable: false }
            ],
            order: [[1, 'desc']], // Order by date descending
        });

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

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