@extends('layouts.app')

@section('title', 'Application Details')

@section('content')
    <div class="container-fluid py-3">
        <div class="d-flex align-items-center justify-content-between mb-3">
            <h4 class="mb-0">
                <i class="bi bi-file-earmark-text me-2"></i>
                Application Details
            </h4>
            <a href="{{ route('applications.index') }}" class="btn btn-secondary btn-sm">
                <i class="bi bi-arrow-left me-1"></i> Back to List
            </a>
        </div>

        @php
            $status = (string) ($application->status ?? '');
            $statusClass =
                [
                    'PENDING' => 'text-bg-warning',
                    'APPROVED' => 'text-bg-success',
                    'REJECTED' => 'text-bg-danger',
                    'ASSESSING' => 'text-bg-info',
                    'LOCKED' => 'text-bg-primary',
                ][$status] ?? 'text-bg-secondary';

            $biz = $application->business; // may be null
            $own = optional($biz)->owner; // may be null
            $ownerFull = $own
                ? $own->full_name ??
                    trim(($own->first_name ?? '') . ' ' . ($own->middle_name ?? '') . ' ' . ($own->last_name ?? ''))
                : null;

            // tiny helpers
            $safe = fn($v) => e($v ?? '—');
            $fmtPeso = fn($n) => is_null($n) ? '—' : '₱ ' . number_format((float) $n, 2);
        @endphp

        {{-- HEADER: real Application fields --}}
        <div class="card shadow-sm mb-3">
            <div class="card-body">
                <div class="row g-2">
                    <div class="col-md-3">
                        <div class="small text-muted">Permit No.</div>
                        <div class="fw-semibold">{{ $safe($application->permit_no) }}</div>
                    </div>
                    <div class="col-md-2">
                        <div class="small text-muted">Type</div>
                        <span class="badge text-bg-info">{{ $safe($application->type) }}</span>
                    </div>
                    <div class="col-md-2">
                        <div class="small text-muted">Tax Year</div>
                        <div class="fw-semibold">{{ (int) ($application->tax_year ?? 0) }}</div>
                    </div>
                    <div class="col-md-3">
                        <div class="small text-muted">Filed At</div>
                        <div class="fw-semibold">{{ optional($application->filed_at)->format('Y-m-d H:i') ?? '—' }}</div>
                    </div>
                    <div class="col-md-2">
                        <div class="small text-muted">Status</div>
                        <span class="badge {{ $statusClass }}">{{ $safe($status ?: '—') }}</span>
                    </div>
                </div>

                <div class="row g-2 mt-2">
                    <div class="col-md-3">
                        <div class="small text-muted">Application ID</div>
                        <div class="fw-semibold">{{ (int) $application->id }}</div>
                    </div>
                    <div class="col-md-3">
                        <div class="small text-muted">Business ID</div>
                        <div class="fw-semibold">{{ $safe(optional($biz)->id) }}</div>
                    </div>
                    <div class="col-md-3">
                        <div class="small text-muted">Created</div>
                        <div class="fw-semibold">{{ optional($application->created_at)->format('Y-m-d H:i') ?? '—' }}</div>
                    </div>
                    <div class="col-md-3">
                        <div class="small text-muted">Updated</div>
                        <div class="fw-semibold">{{ optional($application->updated_at)->format('Y-m-d H:i') ?? '—' }}</div>
                    </div>
                </div>

                @if (!empty($application->remarks))
                    <div class="row g-2 mt-2">
                        <div class="col-12">
                            <div class="small text-muted">Remarks</div>
                            <div>{{ e($application->remarks) }}</div>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        {{-- TABS --}}
        <div class="card shadow-sm">
            <div class="card-body">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-overview" type="button"
                            role="tab">
                            <i class="bi bi-info-circle me-1"></i>Overview
                        </button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-assessment" type="button"
                            role="tab">
                            <i class="bi bi-calculator me-1"></i>Assessment
                        </button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-billing" type="button"
                            role="tab">
                            <i class="bi bi-cash-stack me-1"></i>Billing / Receipts
                        </button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-endorse" type="button"
                            role="tab">
                            <i class="bi bi-ui-checks me-1"></i>Endorsements
                        </button>
                    </li>
                </ul>

                <div class="tab-content pt-3">
                    {{-- OVERVIEW: REAL Business + Owner (null-safe) --}}
                    <div class="tab-pane fade show active" id="tab-overview" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="border rounded p-3 h-100">
                                    <div class="fw-semibold mb-2">
                                        <i class="bi bi-person-badge me-2"></i>Owner
                                    </div>
                                    <div class="small">{{ $safe($ownerFull) }}</div>
                                    <div class="small">Mobile: {{ $safe(optional($own)->mobile_no) }}</div>
                                    <div class="small">Email: {{ $safe(optional($own)->email) }}</div>
                                    <div class="small mt-2">
                                        {{ $safe(optional($own)->address_line) }},
                                        {{ $safe(optional($own)->barangay) }},
                                        {{ $safe(optional($own)->city_municipality) }},
                                        {{ $safe(optional($own)->province) }} {{ $safe(optional($own)->zipcode) }}
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="border rounded p-3 h-100">
                                    <div class="fw-semibold mb-2">
                                        <i class="bi bi-shop me-2"></i>Business
                                    </div>
                                    <div class="small">Name: {{ $safe(optional($biz)->business_name) }}</div>
                                    <div class="small">Trade: {{ $safe(optional($biz)->trade_name) }}</div>
                                    <div class="small">Org Nature: {{ $safe(optional($biz)->organization_nature) }}</div>
                                    <div class="small">TIN: {{ $safe(optional($biz)->tin) }}</div>
                                    <div class="small">Capital: {{ $fmtPeso(optional($biz)->capital_investment) }}</div>
                                    <div class="small mt-2">
                                        {{ $safe(optional($biz)->address_line) }},
                                        {{ $safe(optional($biz)->barangay) }},
                                        {{ $safe(optional($biz)->city_municipality) }},
                                        {{ $safe(optional($biz)->province) }} {{ $safe(optional($biz)->zipcode) }}
                                    </div>
                                    <div class="small mt-2">Control Code: {{ $safe(optional($biz)->control_code) }}</div>
                                    <div class="small">Status: <span
                                            class="badge text-bg-secondary">{{ $safe(optional($biz)->status) }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- ASSESSMENT (static placeholder) --}}
                    <div class="tab-pane fade" id="tab-assessment" role="tabpanel">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="mb-0">Fees Breakdown</h6>
                            <div class="btn-group">
                                <button class="btn btn-sm btn-secondary" disabled>
                                    <i class="bi bi-plus-circle me-1"></i>Add Fee
                                </button>
                                <button class="btn btn-sm btn-secondary" disabled>
                                    <i class="bi bi-sliders me-1"></i>Adjustments
                                </button>
                                <button class="btn btn-sm btn-success" disabled>
                                    <i class="bi bi-check2-circle me-1"></i>Lock Assessment
                                </button>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table id="tblAssessment" class="table table-sm table-striped table-bordered align-middle"
                                style="width:100%">
                                <thead class="table-light">
                                    <tr>
                                        <th class="bg-success text-white">Code</th>
                                        <th class="bg-success text-white">Description</th>
                                        <th class="bg-success text-white">Basis</th>
                                        <th class="bg-success text-white" class="text-end">Qty</th>
                                        <th class="bg-success text-white" class="text-end">Rate</th>
                                        <th class="bg-success text-white" class="text-end">Amount</th>
                                        <th class="bg-success text-white" class="text-end">Surcharge</th>
                                        <th class="bg-success text-white" class="text-end">Interest</th>
                                        <th class="bg-success text-white" class="text-end">Total</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>BUS-TAX</td>
                                        <td>Business Tax (Retail)</td>
                                        <td>Gross: ₱3,500,000 x 1.5%</td>
                                        <td class="text-end">1</td>
                                        <td class="text-end">—</td>
                                        <td class="text-end">52,500.00</td>
                                        <td class="text-end">0.00</td>
                                        <td class="text-end">0.00</td>
                                        <td class="text-end">52,500.00</td>
                                    </tr>
                                    <tr>
                                        <td>MP-FEE</td>
                                        <td>Mayor’s Permit Fee</td>
                                        <td>Fixed</td>
                                        <td class="text-end">1</td>
                                        <td class="text-end">2,000.00</td>
                                        <td class="text-end">2,000.00</td>
                                        <td class="text-end">0.00</td>
                                        <td class="text-end">0.00</td>
                                        <td class="text-end">2,000.00</td>
                                    </tr>
                                    <tr>
                                        <td>SAN-FEE</td>
                                        <td>Sanitary Inspection Fee</td>
                                        <td>Heads: 10 x ₱100</td>
                                        <td class="text-end">10</td>
                                        <td class="text-end">100.00</td>
                                        <td class="text-end">1,000.00</td>
                                        <td class="text-end">0.00</td>
                                        <td class="text-end">0.00</td>
                                        <td class="text-end">1,000.00</td>
                                    </tr>
                                    <tr>
                                        <td>BFP-FEE</td>
                                        <td>Fire Safety Inspection (BFP)</td>
                                        <td>Schedule-based</td>
                                        <td class="text-end">1</td>
                                        <td class="text-end">1,500.00</td>
                                        <td class="text-end">1,500.00</td>
                                        <td class="text-end">0.00</td>
                                        <td class="text-end">0.00</td>
                                        <td class="text-end">1,500.00</td>
                                    </tr>
                                </tbody>
                                <tfoot class="table-light">
                                    <tr>
                                        <th colspan="5" class="text-end">Sub-Total:</th>
                                        <th class="text-end">57,000.00</th>
                                        <th class="text-end">0.00</th>
                                        <th class="text-end">0.00</th>
                                        <th class="text-end">57,000.00</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>

                    {{-- BILLING / RECEIPTS (static placeholder) --}}
                    <div class="tab-pane fade" id="tab-billing" role="tabpanel">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="mb-0">Billing & Payments</h6>
                            <div class="btn-group">
                                <button class="btn btn-sm btn-primary" disabled>
                                    <i class="bi bi-receipt me-1"></i>Proceed to Receipt
                                </button>
                                <button class="btn btn-sm btn-secondary" disabled>
                                    <i class="bi bi-printer me-1"></i>Print SOA
                                </button>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table id="tblBilling" class="table table-sm table-striped table-bordered align-middle"
                                style="width:100%">
                                <thead class="table-light">
                                    <tr>
                                        <th class="bg-success text-white">OR No.</th>
                                        <th class="bg-success text-white">Date</th>
                                        <th class="bg-success text-white" class="text-end">Amount</th>
                                        <th class="bg-success text-white">Cashier</th>
                                        <th class="bg-success text-white">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>OR-2025-000111</td>
                                        <td>2025-01-10 10:22</td>
                                        <td class="text-end">57,000.00</td>
                                        <td>cashier01</td>
                                        <td><span class="badge text-bg-success">POSTED</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {{-- ENDORSEMENTS (static placeholder) --}}
                    <div class="tab-pane fade" id="tab-endorse" role="tabpanel">
                        <div class="d-flex gap-2 flex-wrap">
                            <span class="badge text-bg-success"><i class="bi bi-check-circle me-1"></i>Health</span>
                            <span class="badge text-bg-warning"><i class="bi bi-hourglass-split me-1"></i>Zoning</span>
                            <span class="badge text-bg-success"><i class="bi bi-check-circle me-1"></i>Engineering</span>
                            <span class="badge text-bg-success"><i class="bi bi-check-circle me-1"></i>BFP</span>
                        </div>
                    </div>

                </div> {{-- /tab-content --}}
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(function() {
            // Optional UX for static tables
            $('#tblAssessment').DataTable({
                paging: false,
                searching: false,
                info: false,
                ordering: false,
                columnDefs: [{
                    targets: [3, 4, 5, 6, 7, 8],
                    className: 'text-end'
                }]
            });
            $('#tblBilling').DataTable({
                paging: false,
                searching: false,
                info: false,
                ordering: false,
                columnDefs: [{
                    targets: [2],
                    className: 'text-end'
                }]
            });
        });
    </script>
@endpush