@extends('layouts.adminlte')

@section('title', 'Pajak & Kepatuhan')
@section('page_title', 'Pajak & Kepatuhan')

@push('styles')
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('vendor/select2/css/select2-bootstrap-5-theme.min.css') }}" />
    <style>
        .select2-container--bootstrap-5 .select2-selection { min-height: 38px; }
        .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
        .money { white-space: nowrap; }
        .table-sm td, .table-sm th { padding: .45rem; }
    </style>
@endpush

@section('content')
    <div class="card">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabEfaktur" type="button" role="tab">e-Faktur</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabEbupot" type="button" role="tab">e-Bupot</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabPph21" type="button" role="tab">PPh21</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabLogs" type="button" role="tab">Tax Logs</button>
                </li>
            </ul>
        </div>
        <div class="card-body tab-content">
            <div class="tab-pane fade show active" id="tabEfaktur" role="tabpanel">
                <div class="d-flex justify-content-between align-items-end mb-2">
                    <div class="row g-2 align-items-end flex-grow-1">
                        <div class="col-md-2">
                            <label class="form-label">Status</label>
                            <select class="form-select" id="efStatus">
                                <option value="">Semua</option>
                                <option value="draft">draft</option>
                                <option value="ready">ready</option>
                                <option value="reported">reported</option>
                                <option value="cancelled">cancelled</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Periode (YYYY-MM)</label>
                            <input class="form-control" id="efPeriod" placeholder="2026-03" />
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-primary w-100" id="btnEfLoad">Tampilkan</button>
                        </div>
                    </div>
                    <button class="btn btn-success" id="btnEfAdd"><i class="fas fa-plus me-1"></i>Tambah</button>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm table-striped table-hover align-middle w-100" id="tblEf">
                        <thead>
                        <tr>
                            <th style="width:70px">ID</th>
                            <th>No Faktur Pajak</th>
                            <th>No Invoice</th>
                            <th>Tanggal</th>
                            <th class="text-end">DPP</th>
                            <th class="text-end">PPN</th>
                            <th>Status</th>
                            <th style="width:120px">Aksi</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <small class="text-muted">Tracking kepatuhan (belum konek langsung DJP). Import/Export dapat ditambahkan berikutnya.</small>
            </div>

            <div class="tab-pane fade" id="tabEbupot" role="tabpanel">
                <div class="d-flex justify-content-between align-items-end mb-2">
                    <div class="row g-2 align-items-end flex-grow-1">
                        <div class="col-md-2">
                            <label class="form-label">Tax Type</label>
                            <input class="form-control" id="bpType" value="pph23" />
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Status</label>
                            <select class="form-select" id="bpStatus">
                                <option value="">Semua</option>
                                <option value="draft">draft</option>
                                <option value="ready">ready</option>
                                <option value="reported">reported</option>
                                <option value="cancelled">cancelled</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Periode (YYYY-MM)</label>
                            <input class="form-control" id="bpPeriod" placeholder="2026-03" />
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-primary w-100" id="btnBpLoad">Tampilkan</button>
                        </div>
                    </div>
                    <button class="btn btn-success" id="btnBpAdd"><i class="fas fa-plus me-1"></i>Tambah</button>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm table-striped table-hover align-middle w-100" id="tblBp">
                        <thead>
                        <tr>
                            <th style="width:70px">ID</th>
                            <th>No Bukti Potong</th>
                            <th>Tax</th>
                            <th>Tanggal</th>
                            <th>Periode</th>
                            <th class="text-end">DPP</th>
                            <th class="text-end">Rate</th>
                            <th class="text-end">Pajak</th>
                            <th>Status</th>
                            <th style="width:120px">Aksi</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <small class="text-muted">Tracking bukti potong vendor (PPh23/PPh4(2) dll). Integrasi otomatis dari pembayaran AP bisa ditambahkan berikutnya.</small>
            </div>

            <div class="tab-pane fade" id="tabPph21" role="tabpanel">
                <div class="row g-2 align-items-end mb-2">
                    <div class="col-md-3">
                        <label class="form-label">Date From</label>
                        <input type="date" class="form-control" id="p21From" value="{{ now()->startOfMonth()->toDateString() }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Date To</label>
                        <input type="date" class="form-control" id="p21To" value="{{ now()->toDateString() }}">
                    </div>
                    <div class="col-md-2">
                        <button class="btn btn-primary w-100" id="btnP21Load">Tampilkan</button>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm table-striped table-hover align-middle w-100" id="tblP21">
                        <thead>
                        <tr>
                            <th style="width:90px">Pay ID</th>
                            <th>Tanggal</th>
                            <th>Kode</th>
                            <th>Nama</th>
                            <th>NPWP</th>
                            <th class="text-end">Gross</th>
                            <th class="text-end">Rate</th>
                            <th class="text-end">PPh21</th>
                            <th>No Bukti</th>
                            <th style="width:120px">Bukti Potong</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <small class="text-muted">PPh21 dihitung di modul Penggajian. Ini rekap untuk kepatuhan + akses PDF Bukti Potong.</small>
            </div>

            <div class="tab-pane fade" id="tabLogs" role="tabpanel">
                <div class="d-flex justify-content-between align-items-end mb-2">
                    <div class="row g-2 align-items-end flex-grow-1">
                        <div class="col-md-2">
                            <label class="form-label">Type</label>
                            <select class="form-select" id="logType">
                                <option value="">Semua</option>
                                <option value="efaktur">efaktur</option>
                                <option value="ebupot">ebupot</option>
                                <option value="pph21">pph21</option>
                                <option value="system">system</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label">Period (YYYY-MM)</label>
                            <input class="form-control" id="logPeriod" placeholder="2026-03" />
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-primary w-100" id="btnLogLoad">Tampilkan</button>
                        </div>
                    </div>
                    <button class="btn btn-outline-success" id="btnLogAdd"><i class="fas fa-plus me-1"></i>Log Manual</button>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm table-striped table-hover align-middle w-100" id="tblLog">
                        <thead>
                        <tr>
                            <th style="width:70px">ID</th>
                            <th>Type</th>
                            <th>Action</th>
                            <th>Status</th>
                            <th>Period</th>
                            <th>At</th>
                            <th>Message</th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Modals are created by JS (bootstrap) to keep Blade small. --}}
@endsection

@push('scripts')
    <script src="{{ asset('vendor/select2/js/select2.min.js') }}"></script>
    <script src="{{ asset('js/tax_compliance.js') }}?v={{ config('app.version', '1') }}"></script>
@endpush