/**
 * Template Name: Expenses History
 *
 * @package Budget_Tracker
 */

get_header();

if ( ! budget_user_can_view() ) {
    wp_redirect( wp_login_url( get_permalink() ) );
    exit;
}
?>

<main class="site-content">
    <div class="container">
        <h1>История расходов</h1>
        
        <!-- Current Month Expenses -->
        <div class="budget-table mb-2">
            <h2>Расходы за текущий месяц (March 2026)</h2>
            <div id="current-month-expenses">
                <p>Нет расходов за текущий месяц</p>            </div>
        </div>
        
        <!-- Calendar Navigator -->
        <div class="budget-table mb-2">
            <h2>Просмотр расходов по месяцам</h2>
            
            <div class="calendar-controls">
                <button id="prev-year" class="btn btn-secondary">◄◄</button>
                <button id="prev-month" class="btn btn-secondary">◄</button>
                <h3 id="calendar-title"></h3>
                <button id="next-month" class="btn btn-secondary">►</button>
                <button id="next-year" class="btn btn-secondary">►►</button>
            </div>
            
            <div id="expense-calendar" class="expense-calendar"></div>
        </div>
        
        <!-- Selected Period Expenses -->
        <div class="budget-table" id="selected-expenses" style="display: none;">
            <h2 id="selected-title"></h2>
            <div id="selected-expenses-list"></div>
        </div>
    </div>
</main>

<script>
jQuery(document).ready(function($) {
    let currentDate = new Date();
    
    function renderCalendar(year, month) {
        $('#calendar-title').text(getMonthName(month) + ' ' + year);
        
        $.ajax({
            url: budgetTracker.ajaxUrl,
            type: 'POST',
            data: {
                action: 'budget_get_calendar_expenses',
                nonce: budgetTracker.nonce,
                year: year,
                month: month
            },
            success: function(response) {
                if (response.success) {
                    const calendar = response.data;
                    let html = '';
                    
                    // Day headers
                    const dayNames = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
                    dayNames.forEach(day => {
                        html += '<div class="calendar-day-header">' + day + '</div>';
                    });
                    
                    // Calendar days
                    calendar.forEach(day => {
                        const classes = ['calendar-day'];
                        if (day.is_other_month) {
                            classes.push('other-month');
                        }
                        if (day.expense_count > 0) {
                            classes.push('has-expenses');
                        }
                        
                        html += '<div class="' + classes.join(' ') + '" data-date="' + day.date + '">';
                        html += '<span class="day-number">' + day.day + '</span>';
                        if (day.expense_count > 0) {
                            html += '<span class="expense-count">' + day.expense_count + '</span>';
                        }
                        html += '</div>';
                    });
                    
                    $('#expense-calendar').html(html);
                }
            }
        });
    }
    
    function getMonthName(month) {
        const months = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь',
                        'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
        return months[month];
    }
    
    function loadExpensesByDate(date) {
        $.ajax({
            url: budgetTracker.ajaxUrl,
            type: 'POST',
            data: {
                action: 'budget_get_expenses_by_date',
                nonce: budgetTracker.nonce,
                date: date
            },
            success: function(response) {
                if (response.success) {
                    $('#selected-title').text('Расходы за ' + formatDate(date));
                    $('#selected-expenses-list').html(response.data.html);
                    $('#selected-expenses').show();
                    
                    $('html, body').animate({
                        scrollTop: $('#selected-expenses').offset().top - 100
                    }, 500);
                }
            }
        });
    }
    
    function loadExpensesByMonth(year, month) {
        $.ajax({
            url: budgetTracker.ajaxUrl,
            type: 'POST',
            data: {
                action: 'budget_get_expenses_by_month',
                nonce: budgetTracker.nonce,
                year: year,
                month: month
            },
            success: function(response) {
                if (response.success) {
                    $('#selected-title').text('Расходы за ' + getMonthName(month) + ' ' + year);
                    $('#selected-expenses-list').html(response.data.html);
                    $('#selected-expenses').show();
                    
                    $('html, body').animate({
                        scrollTop: $('#selected-expenses').offset().top - 100
                    }, 500);
                }
            }
        });
    }
    
    function formatDate(dateStr) {
        const parts = dateStr.split('-');
        return parts[2] + '.' + parts[1] + '.' + parts[0];
    }
    
    // Navigation
    $('#prev-month').on('click', function() {
        currentDate.setMonth(currentDate.getMonth() - 1);
        renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
    });
    
    $('#next-month').on('click', function() {
        currentDate.setMonth(currentDate.getMonth() + 1);
        renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
    });
    
    $('#prev-year').on('click', function() {
        currentDate.setFullYear(currentDate.getFullYear() - 1);
        renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
    });
    
    $('#next-year').on('click', function() {
        currentDate.setFullYear(currentDate.getFullYear() + 1);
        renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
    });
    
    // Click on calendar title to load month expenses
    $('#calendar-title').on('click', function() {
        loadExpensesByMonth(currentDate.getFullYear(), currentDate.getMonth());
    }).css('cursor', 'pointer');
    
    // Day click
    $(document).on('click', '.calendar-day:not(.other-month)', function() {
        const date = $(this).data('date');
        if (date) {
            loadExpensesByDate(date);
        }
    });
    
    // Initial render (previous month to avoid showing current month twice)
    currentDate.setMonth(currentDate.getMonth() - 1);
    renderCalendar(currentDate.getFullYear(), currentDate.getMonth());
});
</script>


<footer class="site-footer">
    <div class="container">
        <p>&copy; 2026 budget.watergo.com.ua. Все права защищены.</p>
    </div>
</footer>

<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/budget/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
</body>
</html>