@extends('layouts.app')

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

@section('content')

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

<!-- Main content -->
<section class="content">
    <!-- Reconciliation Summary -->
    <div class="row">
        <div class="col-md-3">
            <div class="info-box bg-yellow">
                <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.unreconciled_transactions')</span>
                    <span class="info-box-number" id="unreconciled_count">{{ $summary['total_unreconciled'] ?? 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-money"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">@lang('accounting-reports::lang.unreconciled_amount')</span>
                    <span class="info-box-number display_currency" data-currency_symbol="true" id="unreconciled_amount">{{ $summary['unreconciled_amount'] ?? 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-check-circle"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">@lang('accounting-reports::lang.last_reconciled')</span>
                    <span class="info-box-number">
                        @if($lastReconciledDate)
                            {{ @format_date($lastReconciledDate) }}
                        @else
                            @lang('accounting-reports::lang.never')
                        @endif
                    </span>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="info-box bg-blue">
                <span class="info-box-icon"><i class="fa fa-university"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">@lang('accounting-reports::lang.bank_account')</span>
                    <span class="info-box-number">{{ $bankAccount->bank_name ?? '-' }}</span>
                </div>
            </div>
        </div>
    </div>

    @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>
                    <button type="button" class="btn btn-success" id="mark_reconciled_btn" disabled>
                        <i class="fa fa-check"></i> @lang('accounting-reports::lang.mark_reconciled')
                    </button>
                    <button type="button" class="btn btn-warning" id="mark_unreconciled_btn" disabled>
                        <i class="fa fa-undo"></i> @lang('accounting-reports::lang.mark_unreconciled')
                    </button>
                    <button type="button" class="btn btn-info" id="auto_match_btn">
                        <i class="fa fa-magic"></i> @lang('accounting-reports::lang.auto_match')
                    </button>
                    <button type="button" class="btn btn-primary" id="import_statement_btn">
                        <i class="fa fa-upload"></i> @lang('accounting-reports::lang.import_statement')
                    </button>
                    <a href="{{ route('accounting-reports.bank-reconciliation.statement', $bankAccount->id) }}" class="btn btn-default">
                        <i class="fa fa-file-text"></i> @lang('accounting-reports::lang.view_statement')
                    </a>
                </div>
            </div>
        </div>
        <br>
        
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    {!! Form::label('as_of_date', __('accounting-reports::lang.as_of_date') . ':') !!}
                    {!! Form::text('as_of_date', @format_date($asOfDate), ['class' => 'form-control date-picker', 'id' => 'as_of_date', 'readonly']) !!}
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    {!! Form::label('cleared_date', __('accounting-reports::lang.cleared_date') . ':') !!}
                    {!! Form::text('cleared_date', @format_date('now'), ['class' => 'form-control date-picker', 'id' => 'cleared_date', 'readonly']) !!}
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    {!! Form::label('bank_statement_ref', __('accounting-reports::lang.bank_statement_ref') . ':') !!}
                    {!! Form::text('bank_statement_ref', null, ['class' => 'form-control', 'id' => 'bank_statement_ref', 'placeholder' => __('accounting-reports::lang.optional')]) !!}
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <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>
        
        <div class="table-responsive">
            <table class="table table-bordered table-striped table-hover" id="unreconciled_transactions_table" style="width:100%;">
                <thead>
                    <tr>
                        <th width="5%">
                            <input type="checkbox" id="select_all">
                        </th>
                        <th>@lang('accounting-reports::lang.date')</th>
                        <th>@lang('accounting-reports::lang.voucher_no')</th>
                        <th>@lang('accounting-reports::lang.description')</th>
                        <th>@lang('accounting-reports::lang.type')</th>
                        <th class="text-right">@lang('accounting-reports::lang.amount')</th>
                        <th>@lang('accounting-reports::lang.location')</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    @endcomponent
    
    <!-- Import Statement Modal -->
    <div class="modal fade" id="import_statement_modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">@lang('accounting-reports::lang.import_bank_statement')</h4>
                </div>
                {!! Form::open(['url' => route('accounting-reports.bank-reconciliation.import-statement', $bankAccount->id), 'method' => 'post', 'files' => true, 'id' => 'import_statement_form']) !!}
                <div class="modal-body">
                    <div class="form-group">
                        {!! Form::label('file', __('accounting-reports::lang.select_file') . ' (CSV):') !!}
                        {!! Form::file('file', ['class' => 'form-control', 'accept' => '.csv,.txt', 'required']) !!}
                        <small class="help-block">@lang('accounting-reports::lang.csv_format_help')</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">@lang('messages.close')</button>
                    <button type="submit" class="btn btn-primary">@lang('accounting-reports::lang.import')</button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</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 selectedTransactions = [];
        var bankAccountId = {{ $bankAccount->id }};

        // Load unreconciled transactions
        function loadUnreconciledTransactions() {
            var asOfDate = $('#as_of_date').val();
            
            // Convert date from display format to Y-m-d format for API
            if (asOfDate && typeof datepicker_date_format !== 'undefined') {
                // Parse date from display format to Y-m-d
                try {
                    var dateParts = asOfDate.split('/');
                    if (dateParts.length === 3) {
                        // Assuming dd/mm/yyyy format
                        asOfDate = dateParts[2] + '-' + dateParts[1] + '-' + dateParts[0];
                    }
                } catch(e) {
                    // Keep original format if parsing fails
                }
            }
            
            $.ajax({
                url: '{{ route("accounting-reports.bank-reconciliation.unreconciled-transactions", $bankAccount->id) }}',
                type: 'GET',
                data: {
                    as_of_date: asOfDate
                },
                success: function(response) {
                    if (response.success) {
                        var tbody = $('#unreconciled_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_unreconciled_transactions")</td></tr>');
                            $('#mark_reconciled_btn').prop('disabled', true);
                            $('#mark_unreconciled_btn').prop('disabled', true);
                            $('#unreconciled_amount').text('0');
                            $('#unreconciled_count').text('0');
                        } else {
                            var totalUnreconciled = 0;
                            response.data.forEach(function(transaction) {
                                if (!transaction) return;
                                
                                var row = '<tr>';
                                row += '<td><input type="checkbox" class="transaction_checkbox" value="' + (transaction.id || '') + '"></td>';
                                row += '<td>' + (transaction.date || '-') + '</td>';
                                row += '<td>' + (transaction.voucher_no || '-') + '</td>';
                                row += '<td>' + (transaction.description || '-') + '</td>';
                                var type = (transaction.type || 'debit').toLowerCase();
                                row += '<td><span class="label label-' + (type === 'credit' ? 'success' : 'danger') + '">' + type.toUpperCase() + '</span></td>';
                                var amount = parseFloat(transaction.amount || 0);
                                row += '<td class="text-right"><span class="display_currency" data-currency_symbol="true">' + amount + '</span></td>';
                                var locationName = '-';
                                if (transaction.location && transaction.location.name) {
                                    locationName = transaction.location.name;
                                } else if (transaction.location && typeof transaction.location === 'string') {
                                    locationName = transaction.location;
                                }
                                row += '<td>' + locationName + '</td>';
                                row += '</tr>';
                                tbody.append(row);
                                totalUnreconciled += Math.abs(amount);
                            });
                            
                            $('#unreconciled_amount').text(totalUnreconciled);
                            $('#unreconciled_count').text(response.data.length);
                            
                            if (typeof __currency_convert_recursively === 'function') {
                                __currency_convert_recursively($('#unreconciled_transactions_table'));
                            }
                        }
                    } else {
                        toastr.error(response.message || 'Error loading transactions');
                    }
                },
                error: function(xhr) {
                    var errorMsg = 'Error loading transactions';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    }
                    toastr.error(errorMsg);
                    $('#unreconciled_transactions_table tbody').html('<tr><td colspan="7" class="text-center text-danger">' + errorMsg + '</td></tr>');
                }
            });
        }

        // Initial load
        loadUnreconciledTransactions();

        // Refresh button
        $('#refresh_btn').on('click', function() {
            loadUnreconciledTransactions();
            selectedTransactions = [];
            updateButtons();
        });

        // Select all checkbox
        $(document).on('change', '#select_all', function() {
            $('.transaction_checkbox').prop('checked', $(this).prop('checked'));
            updateSelectedTransactions();
        });

        // Individual checkbox change
        $(document).on('change', '.transaction_checkbox', function() {
            updateSelectedTransactions();
            // Update select all checkbox state
            var totalCheckboxes = $('.transaction_checkbox').length;
            var checkedCheckboxes = $('.transaction_checkbox:checked').length;
            $('#select_all').prop('checked', totalCheckboxes > 0 && totalCheckboxes === checkedCheckboxes);
        });

        function updateSelectedTransactions() {
            selectedTransactions = [];
            $('.transaction_checkbox:checked').each(function() {
                selectedTransactions.push($(this).val());
            });
            updateButtons();
        }

        function updateButtons() {
            if (selectedTransactions.length > 0) {
                $('#mark_reconciled_btn').prop('disabled', false);
                $('#mark_unreconciled_btn').prop('disabled', false);
            } else {
                $('#mark_reconciled_btn').prop('disabled', true);
                $('#mark_unreconciled_btn').prop('disabled', true);
            }
        }

        // Mark as reconciled
        $('#mark_reconciled_btn').on('click', function() {
            if (selectedTransactions.length === 0) {
                toastr.warning('Please select at least one transaction');
                return;
            }

            var clearedDate = $('#cleared_date').val();
            var bankStatementRef = $('#bank_statement_ref').val();
            
            // Convert date from display format to Y-m-d format for API
            if (clearedDate && typeof datepicker_date_format !== 'undefined') {
                try {
                    var dateParts = clearedDate.split('/');
                    if (dateParts.length === 3) {
                        // Assuming dd/mm/yyyy format
                        clearedDate = dateParts[2] + '-' + dateParts[1] + '-' + dateParts[0];
                    }
                } catch(e) {
                    // Keep original format if parsing fails
                }
            }

            $.ajax({
                url: '{{ route("accounting-reports.bank-reconciliation.mark-reconciled", $bankAccount->id) }}',
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    transaction_ids: selectedTransactions,
                    cleared_date: clearedDate,
                    bank_statement_ref: bankStatementRef
                },
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.message);
                        loadUnreconciledTransactions();
                        selectedTransactions = [];
                        updateButtons();
                    } else {
                        toastr.error(response.message);
                    }
                },
                error: function(xhr) {
                    var errorMsg = 'Error reconciling transactions';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    }
                    toastr.error(errorMsg);
                }
            });
        });

        // Mark as unreconciled
        $('#mark_unreconciled_btn').on('click', function() {
            if (selectedTransactions.length === 0) {
                toastr.warning('Please select at least one transaction');
                return;
            }

            var confirmTitle = typeof LANG !== 'undefined' && LANG.sure ? LANG.sure : 'Are you sure?';
            swal({
                title: confirmTitle,
                text: 'This will unreconcile the selected transactions.',
                icon: "warning",
                buttons: true,
                dangerMode: true,
            }).then((willUnreconcile) => {
                if (willUnreconcile) {
                    $.ajax({
                        url: '{{ route("accounting-reports.bank-reconciliation.mark-unreconciled", $bankAccount->id) }}',
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            transaction_ids: selectedTransactions
                        },
                        success: function(response) {
                            if (response.success) {
                                toastr.success(response.message);
                                loadUnreconciledTransactions();
                                selectedTransactions = [];
                                updateButtons();
                            } else {
                                toastr.error(response.message);
                            }
                        },
                        error: function(xhr) {
                            var errorMsg = 'Error unreconciling transactions';
                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                errorMsg = xhr.responseJSON.message;
                            }
                            toastr.error(errorMsg);
                        }
                    });
                }
            });
        });

        // Auto match
        $('#auto_match_btn').on('click', function() {
            var asOfDate = $('#as_of_date').val();
            
            if (!asOfDate) {
                toastr.warning('Please select an as of date first');
                return;
            }
            
            // Convert date from display format to Y-m-d format for API
            if (asOfDate && typeof datepicker_date_format !== 'undefined') {
                try {
                    var dateParts = asOfDate.split('/');
                    if (dateParts.length === 3) {
                        // Assuming dd/mm/yyyy format
                        asOfDate = dateParts[2] + '-' + dateParts[1] + '-' + dateParts[0];
                    }
                } catch(e) {
                    // Keep original format if parsing fails
                }
            }
            
            swal({
                title: 'Auto Match Transactions?',
                text: 'This will automatically match and reconcile transactions based on amount and date.',
                icon: "info",
                buttons: true,
            }).then((willMatch) => {
                if (willMatch) {
                    $.ajax({
                        url: '{{ route("accounting-reports.bank-reconciliation.auto-match", $bankAccount->id) }}',
                        type: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            as_of_date: asOfDate
                        },
                        success: function(response) {
                            if (response.success) {
                                toastr.success(response.message || 'Transactions matched successfully');
                                loadUnreconciledTransactions();
                                selectedTransactions = [];
                                updateButtons();
                            } else {
                                toastr.error(response.message || 'Error auto-matching transactions');
                            }
                        },
                        error: function(xhr) {
                            var errorMsg = 'Error auto-matching transactions';
                            if (xhr.responseJSON && xhr.responseJSON.message) {
                                errorMsg = xhr.responseJSON.message;
                            } else if (xhr.responseText) {
                                try {
                                    var response = JSON.parse(xhr.responseText);
                                    errorMsg = response.message || errorMsg;
                                } catch(e) {
                                    // Keep default error message
                                }
                            }
                            toastr.error(errorMsg);
                        }
                    });
                }
            });
        });

        // Import statement
        $('#import_statement_btn').on('click', function() {
            $('#import_statement_modal').modal('show');
        });

        // Import form submit
        $('#import_statement_form').on('submit', function(e) {
            e.preventDefault();
            
            var fileInput = $(this).find('input[type="file"]');
            if (!fileInput[0].files || fileInput[0].files.length === 0) {
                toastr.warning('Please select a file to import');
                return;
            }
            
            var formData = new FormData(this);
            var $submitBtn = $(this).find('button[type="submit"]');
            var originalText = $submitBtn.html();
            $submitBtn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Importing...');
            
            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') || $('input[name="_token"]').val()
                },
                success: function(response) {
                    $submitBtn.prop('disabled', false).html(originalText);
                    if (response.success) {
                        toastr.success(response.message || 'Statement imported successfully');
                        $('#import_statement_modal').modal('hide');
                        $(this)[0].reset();
                        loadUnreconciledTransactions();
                    } else {
                        toastr.error(response.message || 'Error importing statement');
                    }
                },
                error: function(xhr) {
                    $submitBtn.prop('disabled', false).html(originalText);
                    var errorMsg = 'Error importing statement';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMsg = xhr.responseJSON.message;
                    } else if (xhr.responseText) {
                        try {
                            var response = JSON.parse(xhr.responseText);
                            errorMsg = response.message || errorMsg;
                        } catch(e) {
                            // Keep default error message
                        }
                    }
                    toastr.error(errorMsg);
                }
            });
        });
    });
</script>
@endsection