@extends('layouts.app')

@section('title', __('accounting-reports::lang.reconciliation_statement') . ' - ' . $bankAccount->account_name)

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        @lang('accounting-reports::lang.reconciliation_statement')
        <small>{{ $bankAccount->account_name }}</small>
    </h1>
</section>

<!-- Main content -->
<section class="content">
    @component('components.widget', ['class' => 'box-primary'])
        <div class="row">
            <div class="col-md-12">
                <div class="btn-group">
                    <a href="{{ route('accounting-reports.bank-reconciliation.index') }}" class="btn btn-default">
                        <i class="fa fa-arrow-left"></i> @lang('messages.back')
                    </a>
                    <a href="{{ route('accounting-reports.bank-reconciliation.reconcile', $bankAccount->id) }}" class="btn btn-primary">
                        <i class="fa fa-check-circle"></i> @lang('accounting-reports::lang.reconcile_now')
                    </a>
                    <button type="button" class="btn btn-success" onclick="window.print()">
                        <i class="fa fa-print"></i> @lang('accounting-reports::lang.print')
                    </button>
                </div>
            </div>
        </div>
        <br>
        
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    {!! Form::label('start_date', __('accounting-reports::lang.start_date') . ':') !!}
                    @php
                        $startOfMonth = \Carbon\Carbon::now()->startOfMonth();
                    @endphp
                    {!! Form::text('start_date', @format_date($startOfMonth), ['class' => 'form-control date-picker', 'id' => 'start_date', 'readonly']) !!}
                </div>
            </div>
            <div class="col-md-4">
                <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', 'id' => 'end_date', 'readonly']) !!}
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    {!! Form::label('refresh', '&nbsp;') !!}
                    <br>
                    <button type="button" class="btn btn-primary" id="refresh_btn">
                        <i class="fa fa-refresh"></i> @lang('accounting-reports::lang.refresh')
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Statement Summary -->
        <div class="row" id="statement_summary" style="display: none;">
            <div class="col-md-3">
                <div class="info-box bg-blue">
                    <span class="info-box-icon"><i class="fa fa-book"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">@lang('accounting-reports::lang.opening_balance')</span>
                        <span class="info-box-number display_currency" data-currency_symbol="true" id="opening_balance">0</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-box bg-green">
                    <span class="info-box-icon"><i class="fa fa-balance-scale"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">@lang('accounting-reports::lang.book_balance')</span>
                        <span class="info-box-number display_currency" data-currency_symbol="true" id="book_balance">0</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-box bg-yellow">
                    <span class="info-box-icon"><i class="fa fa-check-circle"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">@lang('accounting-reports::lang.cleared_balance')</span>
                        <span class="info-box-number display_currency" data-currency_symbol="true" id="cleared_balance">0</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="info-box bg-red">
                    <span class="info-box-icon"><i class="fa fa-exclamation-triangle"></i></span>
                    <div class="info-box-content">
                        <span class="info-box-text">@lang('accounting-reports::lang.outstanding_debits')</span>
                        <span class="info-box-number display_currency" data-currency_symbol="true" id="outstanding_debits">0</span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="table-responsive">
            <table class="table table-bordered table-striped table-hover" id="reconciled_transactions_table" style="width:100%;">
                <thead>
                    <tr>
                        <th>@lang('accounting-reports::lang.date')</th>
                        <th>@lang('accounting-reports::lang.cleared_date')</th>
                        <th>@lang('accounting-reports::lang.reference')</th>
                        <th>@lang('accounting-reports::lang.description')</th>
                        <th class="text-right">@lang('accounting-reports::lang.amount')</th>
                        <th>@lang('accounting-reports::lang.bank_statement_ref')</th>
                        <th>@lang('accounting-reports::lang.cleared_by')</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    @endcomponent
</section>

@endsection

@section('javascript')
<script type="text/javascript">
    $(document).ready(function() {
        // Initialize date pickers with proper format
        if (typeof datepicker_params !== 'undefined') {
            $('.date-picker').datepicker(datepicker_params);
        } else if (typeof datepicker_date_format !== 'undefined') {
            $('.date-picker').datepicker({
                autoclose: true,
                format: datepicker_date_format,
                todayHighlight: true,
                ignoreReadonly: true
            });
        } else {
            $('.date-picker').datepicker({
                autoclose: true,
                format: 'dd/mm/yyyy',
                todayHighlight: true,
                ignoreReadonly: true
            });
        }

        var bankAccountId = {{ $bankAccount->id }};

        // Load reconciliation statement
        function loadStatement() {
            var startDate = $('#start_date').val();
            var endDate = $('#end_date').val();
            
            // Convert dates from display format to Y-m-d format for API
            if (startDate && typeof datepicker_date_format !== 'undefined') {
                try {
                    var dateParts = startDate.split('/');
                    if (dateParts.length === 3) {
                        startDate = dateParts[2] + '-' + dateParts[1] + '-' + dateParts[0];
                    }
                } catch(e) {
                    // Keep original format if parsing fails
                }
            }
            
            if (endDate && typeof datepicker_date_format !== 'undefined') {
                try {
                    var dateParts = endDate.split('/');
                    if (dateParts.length === 3) {
                        endDate = dateParts[2] + '-' + dateParts[1] + '-' + dateParts[0];
                    }
                } catch(e) {
                    // Keep original format if parsing fails
                }
            }
            
            $.ajax({
                url: '{{ route("accounting-reports.bank-reconciliation.get-statement", $bankAccount->id) }}',
                type: 'GET',
                data: {
                    start_date: startDate,
                    end_date: endDate
                },
                success: function(response) {
                    if (response.success && response.data) {
                        var data = response.data;
                        
                        // Update summary
                        $('#opening_balance').text(data.opening_balance || 0);
                        $('#book_balance').text(data.book_balance || 0);
                        $('#cleared_balance').text(data.cleared_balance || 0);
                        $('#outstanding_debits').text(data.outstanding_debits || 0);
                        $('#statement_summary').show();
                        
                        // Load reconciled transactions
                        loadReconciledTransactions();
                        
                        if (typeof __currency_convert_recursively === 'function') {
                            __currency_convert_recursively($('#statement_summary'));
                        }
                    } else {
                        toastr.error(response.message || 'Error loading statement');
                    }
                },
                error: function(xhr) {
                    var errorMsg = 'Error loading statement';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    }
                    toastr.error(errorMsg);
                }
            });
        }

        // Load reconciled transactions
        function loadReconciledTransactions() {
            var startDate = $('#start_date').val();
            var endDate = $('#end_date').val();
            
            // Convert dates from display format to Y-m-d format for API
            if (startDate && typeof datepicker_date_format !== 'undefined') {
                try {
                    var dateParts = startDate.split('/');
                    if (dateParts.length === 3) {
                        startDate = dateParts[2] + '-' + dateParts[1] + '-' + dateParts[0];
                    }
                } catch(e) {
                    // Keep original format if parsing fails
                }
            }
            
            if (endDate && typeof datepicker_date_format !== 'undefined') {
                try {
                    var dateParts = endDate.split('/');
                    if (dateParts.length === 3) {
                        endDate = dateParts[2] + '-' + dateParts[1] + '-' + dateParts[0];
                    }
                } catch(e) {
                    // Keep original format if parsing fails
                }
            }
            
            $.ajax({
                url: '{{ route("accounting-reports.bank-reconciliation.reconciled-transactions", $bankAccount->id) }}',
                type: 'GET',
                data: {
                    start_date: startDate,
                    end_date: endDate
                },
                success: function(response) {
                    if (response.success) {
                        var tbody = $('#reconciled_transactions_table tbody');
                        tbody.empty();
                        
                        if (!response.data || response.data.length === 0) {
                            tbody.append('<tr><td colspan="7" class="text-center">@lang("accounting-reports::lang.no_reconciled_transactions")</td></tr>');
                        } else {
                            response.data.forEach(function(transaction) {
                                if (!transaction) return;
                                
                                var row = '<tr>';
                                row += '<td>' + (transaction.date || '-') + '</td>';
                                row += '<td>' + (transaction.cleared_date || '-') + '</td>';
                                row += '<td>' + (transaction.reference || '-') + '</td>';
                                row += '<td>' + (transaction.description || '-') + '</td>';
                                var amount = parseFloat(transaction.amount || 0);
                                row += '<td class="text-right"><span class="display_currency" data-currency_symbol="true">' + amount + '</span></td>';
                                row += '<td>' + (transaction.bank_statement_ref || '-') + '</td>';
                                row += '<td>' + (transaction.cleared_by || '-') + '</td>';
                                row += '</tr>';
                                tbody.append(row);
                            });
                            
                            if (typeof __currency_convert_recursively === 'function') {
                                __currency_convert_recursively($('#reconciled_transactions_table'));
                            }
                        }
                    } else {
                        toastr.error(response.message || 'Error loading reconciled transactions');
                    }
                },
                error: function(xhr) {
                    var errorMsg = 'Error loading reconciled transactions';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    }
                    toastr.error(errorMsg);
                }
            });
        }

        // Initial load
        loadStatement();

        // Refresh button
        $('#refresh_btn').on('click', function() {
            loadStatement();
        });
    });
</script>
@endsection