@extends('layouts.app')

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/child-support-register.css') }}">
@endpush

@section('content')
    <div class="container-fluid child-support-shell"
         data-child-support-manage
         data-manage-type="followup"
         data-edit-url="{{ route('child-support.followups.index') }}"
         data-record-url-template="{{ route('child-support.followups.records.show', ['followup' => '__FOLLOWUP_ID__']) }}"
         data-crypto-key="{{ $cryptoKey ?? '' }}"
         data-sensitive-fields='@json($followupSensitiveFields ?? [])'>
        <div class="mb-3">
            <ul class="nav nav-pills child-support-nav gap-2">
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('child-support.register.index') }}">Register</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('child-support.register.manage') }}">Manage Register</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="{{ route('child-support.followups.manage') }}">Manage Follow-up</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('child-support.releases.manage') }}">Manage Release</a>
                </li>
            </ul>
        </div>

        <div class="child-support-card mb-3">
            <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3">
                <div>
                    <h1 class="h4 mb-1">Manage Child Support Follow-up</h1>
                    <div class="child-support-meta">Edit or delete server follow-ups online, or manage browser follow-ups in Offline-only mode.</div>
                </div>
                <div class="child-support-actions">
                    <button type="button" class="btn btn-outline-secondary btn-sm" id="childSupportManageOfflineToggle">Offline-only: Off</button>
                </div>
            </div>
            <div class="child-support-inline-note mt-2">
                Pending queue: <strong id="childSupportManagePendingCount">0</strong>
                <span class="ms-3" id="childSupportManageStatus">Ready.</span>
            </div>
        </div>

        <div class="child-support-card mb-3 d-none" id="childSupportManageOfflinePanel">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-end gap-3 mb-3">
                <div>
                    <h2 class="h6 mb-1">Browser follow-ups</h2>
                    <div class="child-support-meta">These follow-ups are stored in this browser. Delete of synced records is queued until Sync runs.</div>
                </div>
                <div class="col-md-4 p-0">
                    <label class="form-label">Search offline follow-ups</label>
                    <input type="text" class="form-control" id="childSupportManageOfflineSearch" placeholder="Name, CS code, General ID">
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-dark table-striped align-middle mb-0">
                    <thead>
                        <tr>
                            <th>General ID</th>
                            <th>CS Code</th>
                            <th>Child Name</th>
                            <th>Visit Date</th>
                            <th>Status</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="childSupportManageOfflineBody"></tbody>
                </table>
            </div>
            <div class="child-support-local-empty mt-2" id="childSupportManageOfflineEmpty">No browser follow-ups found.</div>
        </div>

        <div class="child-support-card" id="childSupportManageOnlinePanel">
            <form method="GET" action="{{ route('child-support.followups.manage') }}" class="row g-3 align-items-end mb-3">
                <div class="col-md-5">
                    <label class="form-label">Search server follow-ups</label>
                    <input type="text" name="q" class="form-control" value="{{ $filters['q'] ?? '' }}" placeholder="CS code or General ID">
                </div>
                <div class="col-md-4 d-flex gap-2">
                    <button type="submit" class="btn btn-primary">Search</button>
                    <a href="{{ route('child-support.followups.manage') }}" class="btn btn-outline-light">Reset</a>
                </div>
            </form>

            <div class="table-responsive">
                <table class="table table-dark table-striped align-middle mb-0">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>General ID</th>
                            <th>CS Code</th>
                            <th>Child Name</th>
                            <th>Visit Date</th>
                            <th>Updated</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($records as $record)
                            <tr>
                                <td>{{ $record->id }}</td>
                                <td>{{ $record->general_id ?: '-' }}</td>
                                <td>{{ $record->cs_code ?: '-' }}</td>
                                <td>{{ $record->child_name ?: 'Unnamed child' }}</td>
                                <td>{{ $record->followup_date ? $record->followup_date->format('d-m-Y') : '-' }}</td>
                                <td>{{ $record->updated_at ? $record->updated_at->format('d-m-Y H:i') : '-' }}</td>
                                <td class="text-end">
                                    <div class="d-inline-flex gap-2">
                                        <a href="{{ route('child-support.followups.index', ['followup_id' => $record->id]) }}" class="btn btn-sm btn-outline-light">Edit</a>
                                        <button type="button"
                                                class="btn btn-sm btn-outline-danger"
                                                data-action="delete-server"
                                                data-server-id="{{ $record->id }}"
                                                data-delete-url="{{ route('child-support.followups.records.destroy', $record) }}">
                                            Delete
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center text-muted py-4">No follow-ups found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="mt-3">
                {{ $records->links() }}
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('js/child-support-crypto.js') }}?v={{ filemtime(public_path('js/child-support-crypto.js')) }}"></script>
    <script src="{{ asset('js/child-support-manage.js') }}?v={{ filemtime(public_path('js/child-support-manage.js')) }}"></script>
@endpush