@extends('layouts.dashboard')

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

@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-export text-accent me-2"></i>Accounting Export</h5>
    </div>
</div>

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

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

            <div class="tab-content pt-4">
                {{-- Export --}}
                <div class="tab-pane fade show active" id="ae-export">
                    <form method="POST" action="{{ route('accounting.export.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-ae-note mt-4">
                            <li>Use <strong>Preview</strong> to review &amp; print the IIF for the range (nothing is marked exported).</li>
                            <li>Only invoices not previously exported will be downloaded on Export.</li>
                            <li>An Export 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-download me-2"></i>EXPORT</button>
                        </div>
                    </form>
                </div>

                {{-- History --}}
                <div class="tab-pane fade" id="ae-history">
                    <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.export.download', $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 exports 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="historyDownloadBtn"><i class="fa-solid fa-download me-2"></i>EXPORT</button>
                    </div>
                </div>

                {{-- Settings --}}
                <div class="tab-pane fade" id="ae-settings">
                    <form method="POST" action="{{ route('accounting.export.settings') }}">
                        @csrf
                        <h6 class="fw-bold text-center mb-3">Quick Book</h6>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="ff-label">QuickBook Version</label>
                                <select name="quickbook_version" class="form-select ff-input">
                                    @foreach (['2018 or Older', '2019 or Newer', 'QuickBooks Online'] as $version)
                                        <option value="{{ $version }}" @selected($settings->quickbook_version === $version)>{{ $version }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="ff-label">Date Format</label>
                                <select name="date_format" class="form-select ff-input">
                                    @foreach (['m/d/Y', 'd/m/Y', 'Y-m-d'] as $fmt)
                                        <option value="{{ $fmt }}" @selected($settings->date_format === $fmt)>{{ $fmt }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-12">
                                <div class="ff-ae-subhead">Accounts Receivable</div>
                                <p class="small text-muted mb-2">Specify your QuickBooks receivable account(s) found in your Chart of Accounts.</p>
                            </div>
                            <div class="col-md-6">
                                <label class="ff-label">Account</label>
                                <input type="text" name="ar_account" class="form-control ff-input" value="{{ $settings->ar_account }}">
                            </div>
                            <div class="col-md-6">
                                <label class="ff-label text-accent">CAD Account</label>
                                <input type="text" name="cad_account" class="form-control ff-input" value="{{ $settings->cad_account }}">
                            </div>

                            <div class="col-12">
                                <div class="ff-ae-subhead">Line Item</div>
                                <p class="small text-muted mb-2">Specify the line item that loads should appear as in QuickBooks.</p>
                                <input type="text" name="line_item" class="form-control ff-input" value="{{ $settings->line_item }}" placeholder="Sales">
                            </div>

                            <div class="col-12">
                                <div class="ff-ae-subhead">Basic Advances</div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="deduct_advance" value="1" id="deductAdvance" @checked($settings->deduct_advance)>
                                    <label class="form-check-label" for="deductAdvance">I prefer to not use standard advances, and deduct the advance off the invoice.</label>
                                </div>
                            </div>
                        </div>

                        <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="submit" class="btn btn-warning fw-bold px-4"><i class="fa-solid fa-floppy-disk me-2"></i>SAVE</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

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

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

    const exportForm = document.getElementById('exportForm');
    if (exportForm) {
        exportForm.addEventListener('submit', function (e) {
            const from = document.getElementById('exportFrom').value;
            const to = document.getElementById('exportTo').value;
            if (from && to) {
                const days = (new Date(to) - new Date(from)) / 86400000;
                if (days > 366) {
                    e.preventDefault();
                    alert('Date range has a maximum limit of 1 year. Please select a range of a year or less.');
                }
            }
        });
    }

    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.export.preview') }}?" + params.toString();
        });
    }
});
</script>
@endpush
@endsection