@extends('layouts.dashboard')

@section('page_title', 'ACCOUNTING SUMMARY')

@section('content')
<div class="ff-toolbar d-flex justify-content-between align-items-center mb-4">
    <div class="d-flex align-items-center gap-3">
        <a href="{{ route('accounting.index') }}" class="btn btn-outline-secondary btn-sm"><i class="fa fa-arrow-left"></i> Back</a>
        <h5 class="m-0 fw-bold border-start ps-3 border-color"><i class="fa-solid fa-file-invoice-dollar text-accent me-2"></i>Accounting Summary</h5>
    </div>
</div>

@if (session('summary_error'))
    <div class="alert alert-warning">{{ session('summary_error') }}</div>
@endif

<div class="row justify-content-center">
    <div class="col-lg-7">
        <div class="ff-as-card">
            <ul class="nav nav-tabs ff-as-tabs" role="tablist">
                <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#as-export" type="button">Export</button></li>
                <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#as-history" type="button">History</button></li>
            </ul>

            <div class="tab-content pt-4">
                {{-- Export --}}
                <div class="tab-pane fade show active" id="as-export">
                    <form method="POST" action="{{ route('accounting.summary.generate') }}" id="exportForm">
                        @csrf
                        <div class="row g-3 align-items-end">
                            <div class="col-12 col-md-3">
                                <label class="ff-label fw-bold">Date Range</label>
                            </div>
                            <div class="col-6 col-md-4">
                                <label class="ff-label">From</label>
                                <input type="date" name="date_from" id="exportFrom" class="form-control ff-input" value="{{ $defaultFrom }}">
                            </div>
                            <div class="col-6 col-md-4">
                                <label class="ff-label">To</label>
                                <input type="date" name="date_to" id="exportTo" class="form-control ff-input" value="{{ $defaultTo }}">
                            </div>
                        </div>

                        <ul class="ff-as-note mt-4">
                            <li>Use <strong>Preview</strong> to review &amp; print invoices in the range (nothing is marked exported).</li>
                            <li>Only invoices not previously exported will be downloaded on Export.</li>
                            <li>An Accounting Summary ID will be generated on Export.</li>
                        </ul>

                        <div class="d-flex justify-content-end gap-2 mt-3">
                            <a href="{{ route('accounting.index') }}" class="btn btn-outline-secondary px-4">Cancel</a>
                            <button type="button" class="btn btn-outline-warning fw-bold px-4" id="previewBtn"><i class="fa-solid fa-eye me-2"></i>PREVIEW</button>
                            <button type="submit" class="btn btn-warning fw-bold px-4"><i class="fa-solid fa-file-export me-2"></i>EXPORT</button>
                        </div>
                    </form>
                </div>

                {{-- History --}}
                <div class="tab-pane fade" id="as-history">
                    <form method="GET" action="{{ route('accounting.summary') }}" id="historyForm">
                        <label class="ff-label">Export ID</label>
                        <select class="form-select ff-input" id="historySelect">
                            <option value="">Please Select</option>
                            @foreach ($history as $item)
                                <option value="{{ route('accounting.summary.show', $item) }}">[{{ $item->reference_code }}] {{ $item->created_at->format('Y-m-d H:i:s') }}</option>
                            @endforeach
                        </select>

                        @if ($history->isEmpty())
                            <p class="text-muted small mt-3 mb-0">No summaries have been generated yet.</p>
                        @endif

                        <div class="d-flex justify-content-end gap-2 mt-4">
                            <a href="{{ route('accounting.index') }}" class="btn btn-outline-secondary px-4">Cancel</a>
                            <button type="button" class="btn btn-warning fw-bold px-4" id="historyViewBtn"><i class="fa-solid fa-eye me-2"></i>VIEW</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .ff-as-card { background: var(--card-bg, #fff); border: 1px solid var(--border-color); border-radius: 14px; padding: 22px 26px; }
    [data-theme="dark"] .ff-as-card { background: var(--surface-2, #1b1f27); }
    .ff-as-tabs .nav-link { color: var(--text-muted); font-weight: 700; border: none; border-bottom: 2px solid transparent; }
    .ff-as-tabs .nav-link.active { color: var(--accent-color); background: transparent; border-bottom-color: var(--accent-color); }
    .ff-as-note { color: #e0532f; font-size: 0.85rem; padding-left: 18px; }
    .ff-as-note li { margin-bottom: 4px; }
</style>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const select = document.getElementById('historySelect');
    const viewBtn = document.getElementById('historyViewBtn');
    if (viewBtn && select) {
        viewBtn.addEventListener('click', function () {
            if (select.value) {
                window.location.href = select.value;
            }
        });
    }

    const previewBtn = document.getElementById('previewBtn');
    if (previewBtn) {
        previewBtn.addEventListener('click', function () {
            const from = document.getElementById('exportFrom').value;
            const to = document.getElementById('exportTo').value;
            const params = new URLSearchParams();
            if (from) { params.set('date_from', from); }
            if (to) { params.set('date_to', to); }
            window.location.href = "{{ route('accounting.summary.preview') }}?" + params.toString();
        });
    }
});
</script>
@endpush
@endsection