@extends('layouts.master')
@section('title', 'Tax Summary Report')

@section('styles')
@include('partials.tax._styles')
@endsection

@section('content')
<div class="tax-report-page">
    <div class="no-print" style="display:flex;justify-content:flex-end;margin-bottom:12px;">
        <a href="{{ route('modules.reports') }}" class="tax-btn-back"><i class="fas fa-arrow-left"></i> Back to Reports</a>
    </div>

    @include('partials.tax._zimra-modal')
    @include('partials.tax._page')
</div>
@endsection

@push('scripts')
<script>
(function () {
    const tabButtons = document.querySelectorAll('.tax-tab');
    const tabPanes = document.querySelectorAll('.tax-pane');
    tabButtons.forEach((btn) => {
        btn.addEventListener('click', () => {
            const tabId = btn.getAttribute('data-tab');
            tabButtons.forEach(b => b.classList.remove('active'));
            btn.classList.add('active');
            tabPanes.forEach(p => p.classList.remove('active'));
            const pane = document.getElementById(tabId);
            if (pane) pane.classList.add('active');
        });
    });

    const modalOverlay = document.getElementById('zimraModal');
    if (modalOverlay) {
        const closeBtn = document.getElementById('zimraCloseBtn');
        const close = () => { modalOverlay.classList.remove('active'); document.body.style.overflow = ''; };
        const open = () => { modalOverlay.classList.add('active'); document.body.style.overflow = 'hidden'; };

        document.addEventListener('DOMContentLoaded', open);
        if (closeBtn) closeBtn.addEventListener('click', close);
        modalOverlay.addEventListener('click', (e) => { if (e.target === modalOverlay) close(); });
        document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && modalOverlay.classList.contains('active')) close(); });
    }
})();
</script>
@endpush