@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">
        <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" href="{{ route('child-support.followups.manage') }}">Manage Follow-up</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="{{ route('child-support.releases.manage') }}">Manage Release</a>
                </li>
            </ul>
        </div>

        <div class="child-support-card">
            <form method="GET" action="{{ route('child-support.releases.manage') }}" class="row g-3 align-items-end mb-3">
                <div class="col-md-5">
                    <label class="form-label">Search release records</label>
                    <input type="text" name="q" class="form-control" value="{{ $filters['q'] ?? '' }}" placeholder="General ID or project area note">
                </div>
                <div class="col-md-4 d-flex gap-2">
                    <button type="submit" class="btn btn-primary">Search</button>
                    <a href="{{ route('child-support.releases.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>Child Name</th>
                        <th>Collected Date</th>
                        <th>Officer</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->child_name_nickname ?: '-' }}</td>
                            <td>{{ $record->collected_date ? $record->collected_date->format('d-m-Y') : '-' }}</td>
                            <td>{{ $record->child_program_officer_name ?: '-' }}</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.releases.index', ['release_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-release"
                                            data-delete-url="{{ route('child-support.releases.records.destroy', $record) }}">
                                        Delete
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center text-muted py-4">No release records found.</td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>

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

@push('scripts')
    <script>
        document.addEventListener('click', async function (event) {
            const button = event.target.closest('[data-action="delete-release"]');
            if (!button) return;
            if (!window.confirm('Delete this release record?')) return;

            try {
                const response = await fetch(button.dataset.deleteUrl, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    credentials: 'same-origin',
                });
                if (!response.ok) {
                    throw new Error('Delete failed');
                }
                window.location.reload();
            } catch (error) {
                alert(error.message || 'Delete failed');
            }
        });
    </script>
@endpush