@extends('layouts.app')

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

@section('content')
<section class="content-header">
    <h1>@lang('accounting-reports::lang.monthly_cashbook')</h1>
</section>

<section class="content">
    <div class="box box-solid">
        <div class="box-header with-border">
            <h3 class="box-title">@lang('accounting-reports::lang.monthly_cashbook')</h3>
            <div class="box-tools">
                <button type="button" class="btn btn-sm btn-success" id="export_excel">
                    <i class="fa fa-file-excel-o"></i> @lang('accounting-reports::lang.excel')
                </button>
                <button type="button" class="btn btn-sm btn-info" onclick="window.print()">
                    <i class="fa fa-print"></i> @lang('accounting-reports::lang.print')
                </button>
            </div>
        </div>

        <div class="box-body">
            <div class="row">
                <!-- Month Selector -->
                <div class="col-md-3">
                    <div class="form-group">
                        <label>@lang('accounting-reports::lang.month'):</label>
                        <select name="month" id="month" class="form-control select2">
                            <option value="">@lang('accounting-reports::lang.select')</option>
                            <option value="01">@lang('accounting-reports::lang.january')</option>
                            <option value="02">@lang('accounting-reports::lang.february')</option>
                            <option value="03">@lang('accounting-reports::lang.march')</option>
                            <option value="04">@lang('accounting-reports::lang.april')</option>
                            <option value="05">@lang('accounting-reports::lang.may')</option>
                            <option value="06">@lang('accounting-reports::lang.june')</option>
                            <option value="07">@lang('accounting-reports::lang.july')</option>
                            <option value="08">@lang('accounting-reports::lang.august')</option>
                            <option value="09">@lang('accounting-reports::lang.september')</option>
                            <option value="10">@lang('accounting-reports::lang.october')</option>
                            <option value="11">@lang('accounting-reports::lang.november')</option>
                            <option value="12">@lang('accounting-reports::lang.december')</option>
                        </select>
                    </div>
                </div>
                
                <!-- Year Selector -->
                <div class="col-md-2">
                    <div class="form-group">
                        <label>@lang('accounting-reports::lang.year'):</label>
                        <select name="year" id="year" class="form-control select2">
                            @foreach($years as $year)
                                <option value="{{ $year }}" {{ $year == date('Y') ? 'selected' : '' }}>{{ $year }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                
                <!-- Date Range Picker (Alternative) -->
                <div class="col-md-4">
                    <div class="form-group">
                        <label>@lang('accounting-reports::lang.date_range'):</label>
                        <div class="input-group">
                            <input type="text" id="date_range" class="form-control" readonly placeholder="@lang('accounting-reports::lang.select_a_date_range')">
                            <span class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </span>
                        </div>
                    </div>
                </div>
                
                <!-- Hidden date fields -->
                <input type="hidden" id="start_date" name="start_date">
                <input type="hidden" id="end_date" name="end_date">
                
                <div class="col-md-3">
                    <div class="form-group">
                        <label>@lang('accounting-reports::lang.business_location'):</label>
                        <select name="location_id" id="location_id" class="form-control select2">
                            <option value="">@lang('accounting-reports::lang.all')</option>
                            @foreach($locations as $locationId => $locationName)
                                <option value="{{ $locationId }}">{{ $locationName }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <label>@lang('accounting-reports::lang.select_account'):</label>
                        <select name="account_id" id="account_id" class="form-control select2">
                            <option value="">@lang('accounting-reports::lang.all')</option>
                            @foreach($accounts as $accountId => $accountName)
                                <option value="{{ $accountId }}">{{ $accountName }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="form-group" style="margin-top: 25px;">
                        <button type="button" id="filter_btn" class="btn btn-primary">
                            <i class="fa fa-filter"></i> @lang('accounting-reports::lang.filter')
                        </button>
                        <button type="button" id="reset_btn" class="btn btn-default">
                            <i class="fa fa-refresh"></i> @lang('accounting-reports::lang.reset')
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Report Section -->
    <div class="box box-solid" id="report_section" style="display:none;">
        <div class="box-header with-border">
            <h3 class="box-title">@lang('accounting-reports::lang.monthly_cashbook')</h3>
        </div>
        <div class="box-body">
            <!-- Summary Cards -->
            <div class="row" style="margin-bottom: 20px;">
                <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" id="opening-balance">0.00</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="info-box bg-green">
                        <span class="info-box-icon"><i class="fa fa-arrow-up"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">@lang('accounting-reports::lang.total_cash_in')</span>
                            <span class="info-box-number" id="total-cash-in">0.00</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="info-box bg-red">
                        <span class="info-box-icon"><i class="fa fa-arrow-down"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">@lang('accounting-reports::lang.total_cash_out')</span>
                            <span class="info-box-number" id="total-cash-out">0.00</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="info-box bg-yellow">
                        <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.closing_balance')</span>
                            <span class="info-box-number" id="closing-balance">0.00</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Monthly Table -->
            <div class="table-responsive">
                <table class="table table-bordered table-striped" id="monthly_table">
                    <thead>
                        <tr>
                            <th>@lang('accounting-reports::lang.month')</th>
                            <th>@lang('accounting-reports::lang.opening_balance')</th>
                            <th>@lang('accounting-reports::lang.cash_in')</th>
                            <th>@lang('accounting-reports::lang.cash_out')</th>
                            <th>@lang('accounting-reports::lang.net_balance')</th>
                            <th>@lang('accounting-reports::lang.closing_balance')</th>
                        </tr>
                    </thead>
                    <tbody id="monthly-tbody">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>
@endsection

@section('javascript')
<script>
$(document).ready(function() {
    // Initialize select2
    $('.select2').select2();

    // Set current month and year
    $('#month').val(('0' + (new Date().getMonth() + 1)).slice(-2));
    $('#year').val(new Date().getFullYear());

    // Initialize date range picker
    if (typeof moment !== 'undefined' && typeof daterangepicker !== 'undefined') {
        var start = moment().startOf('year');
        var end = moment();
        
        $('#date_range').daterangepicker({
            startDate: start,
            endDate: end,
            autoUpdateInput: true,
            locale: {
                format: moment_date_format
            },
            ranges: {
                'This Year': [moment().startOf('year'), moment()],
                'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            }
        }, function(start, end) {
            $('#start_date').val(start.format('YYYY-MM-DD'));
            $('#end_date').val(end.format('YYYY-MM-DD'));
            $('#month').val('').trigger('change');
        });

        $('#start_date').val(start.format('YYYY-MM-DD'));
        $('#end_date').val(end.format('YYYY-MM-DD'));
    }

    // Month/Year change handlers
    $('#month, #year').on('change', function() {
        var month = $('#month').val();
        var year = $('#year').val();
        
        if (month && year && typeof moment !== 'undefined') {
            var start = moment(year + '-' + month + '-01', 'YYYY-MM-DD').startOf('month');
            var end = moment(year + '-' + month + '-01', 'YYYY-MM-DD').endOf('month');
            
            $('#start_date').val(start.format('YYYY-MM-DD'));
            $('#end_date').val(end.format('YYYY-MM-DD'));
            if ($('#date_range').length && typeof moment !== 'undefined') {
                $('#date_range').val(start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format));
            }
        }
    });

    // Filter button
    $('#filter_btn').click(function() {
        loadMonthlyCashbook();
    });

    // Reset button
    $('#reset_btn').click(function() {
        $('#month').val(('0' + (new Date().getMonth() + 1)).slice(-2));
        $('#year').val(new Date().getFullYear());
        $('#location_id').val('').trigger('change');
        $('#account_id').val('').trigger('change');
        if (typeof moment !== 'undefined') {
            var start = moment().startOf('year');
            var end = moment();
            $('#start_date').val(start.format('YYYY-MM-DD'));
            $('#end_date').val(end.format('YYYY-MM-DD'));
            if ($('#date_range').length) {
                $('#date_range').val(start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format));
            }
        }
        $('#report_section').hide();
    });

    function loadMonthlyCashbook() {
        var month = $('#month').val();
        var year = $('#year').val();
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();
        var location_id = $('#location_id').val();
        var account_id = $('#account_id').val();

        if (!start_date || !end_date) {
            toastr.error('@lang("accounting-reports::lang.please_select_date_range")');
            return;
        }

        $.ajax({
            url: '{{ route("accounting-reports.cash-book.monthly.get-data") }}',
            method: 'GET',
            data: {
                month: month,
                year: year,
                start_date: start_date,
                end_date: end_date,
                location_id: location_id,
                account_id: account_id
            },
            beforeSend: function() {
                $('#filter_btn').prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Loading...');
            },
            success: function(response) {
                if (response.success) {
                    displayMonthlyCashbook(response);
                    $('#report_section').show();
                } else {
                    toastr.error(response.error || 'Error loading monthly cashbook');
                }
            },
            error: function(xhr) {
                var errorMsg = 'Error loading monthly cashbook';
                if (xhr.responseJSON && xhr.responseJSON.error) {
                    errorMsg = xhr.responseJSON.error;
                }
                toastr.error(errorMsg);
            },
            complete: function() {
                $('#filter_btn').prop('disabled', false).html('<i class="fa fa-filter"></i> @lang("accounting-reports::lang.filter")');
            }
        });
    }

    function displayMonthlyCashbook(data) {
        // Update summary
        $('#opening-balance').text(formatCurrency(data.opening_balance || 0));
        $('#total-cash-in').text(formatCurrency(data.total_cash_in || 0));
        $('#total-cash-out').text(formatCurrency(data.total_cash_out || 0));
        $('#closing-balance').text(formatCurrency(data.final_closing_balance || 0));

        // Update table
        var tbody = $('#monthly-tbody');
        tbody.empty();

        if (data.monthly_data && data.monthly_data.length > 0) {
            data.monthly_data.forEach(function(month) {
                var row = '<tr>';
                row += '<td><strong>' + month.month_name + '</strong></td>';
                row += '<td class="text-right">' + formatCurrency(month.opening_balance || 0) + '</td>';
                row += '<td class="text-right text-green">' + formatCurrency(month.cash_in || 0) + '</td>';
                row += '<td class="text-right text-red">' + formatCurrency(month.cash_out || 0) + '</td>';
                row += '<td class="text-right">' + formatCurrency(month.net_balance || 0) + '</td>';
                row += '<td class="text-right"><strong>' + formatCurrency(month.closing_balance || 0) + '</strong></td>';
                row += '</tr>';
                tbody.append(row);
            });
        } else {
            tbody.append('<tr><td colspan="6" class="text-center">@lang("accounting-reports::lang.no_data_available")</td></tr>');
        }
    }

    function formatCurrency(amount) {
        if (typeof amount === 'undefined' || amount === null) {
            return '0.00';
        }
        var num = parseFloat(amount);
        if (isNaN(num)) {
            return '0.00';
        }
        return num.toLocaleString('en-IN', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        });
    }
});
</script>
@endsection