@extends('layouts.app')

@section('title', 'Profiled Cases - NGBVD')

@section('content')
<div class="ngbvd-page-header mb-3">
    <div>
        <h2 class="ngbvd-page-title">Profiled Cases</h2>
        <p class="ngbvd-page-subtitle">Search, review and open survivor profiles captured in the system.</p>
    </div>
</div>

<div class="card ngbvd-filter-card">
    <form id="indexform" method="get" action="{{ route('/dataentry/list') }}">
        <div class="row align-items-end">
            <div class="col-md-3">
                <label class="col-form-label">Start Date</label>
                <input type="text" class="form-control datepicker" name="start_date" id="from" value="{{ request('start_date') }}" placeholder="Start date (optional)" autocomplete="off">
            </div>
            <div class="col-md-3">
                <label class="col-form-label">End Date</label>
                <input type="text" class="form-control datepicker" name="end_date" id="to" value="{{ request('end_date') }}" placeholder="End date (optional)" autocomplete="off">
            </div>
            <div class="col-md-2">
                <label class="col-form-label">Records</label>
                <select name="perPage" id="perPage" class="form-control" data-no-selectize="true">
                    @foreach ($availablePerPageOptions as $option)
                        <option value="{{ $option }}" @if($perPage == $option) selected @endif>{{ $option }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4 d-flex gap-2" style="gap:8px;">
                <button type="submit" class="btn btn-primary">Apply Filter</button>
                <a href="{{ route('/dataentry/list') }}" class="btn btn-outline-secondary">Reset</a>
                <a href="{{ route('/dataentry/import') }}" class="btn btn-outline-secondary">Offline Import</a>
            </div>
        </div>
    </form>
</div>

<div class="card ngbvd-table-card">
    <div class="card-block">
        <div class="ngbvd-table-toolbar">
            <div>
                <h5 class="mb-1">Case Register</h5>
                <small class="text-muted">Showing {{ $victims->count() }} of {{ method_exists($victims, 'total') ? number_format($victims->total()) : $victims->count() }} records</small>
            </div>
            <div class="d-flex align-items-center" style="gap:8px;">
                <input type="text" class="form-control form-control-sm" id="profiledCaseSearch" placeholder="Search visible records..." style="min-width:240px;">
            </div>
        </div>

        <div class="table-responsive">
            <table class="table table-hover ngbvd-profiled-table ngbvd-modern-table" id="table" data-datatable="true" data-server-paginated="true">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Interview Date</th>
                        <th>Survivor Code</th>
                        <th>Gender</th>
                        <th>Age</th>
                        <th>Nationality</th>
                        <th>National Status</th>
                        <th>District</th>
                        <th>Sub-County</th>
                        <th>Parish</th>
                        <th>Referred</th>
                        <th>Created By</th>
                        <th>User Role</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="profiledCaseRows">
                    @forelse ($victims as $victim)
                        <tr>
                            <td>{{ $loop->iteration + (($victims->currentPage() - 1) * $victims->perPage()) }}</td>
                            <td>{{ $victim->interview_date }}</td>
                            <td><span class="survivor-code">{{ $victim->survivor_code ?: $victim->crb_number }}</span></td>
                            <td>{{ $victim->genderValue }}</td>
                            <td>{{ $victim->dob == '0000-00-00' ? '' : $victim->dob }}</td>
                            <td>{{ $victim->nationality }}</td>
                            <td>{{ $victim->national_status }}</td>
                            <td>{{ $victim->district }}</td>
                            <td>{{ $victim->subbcounty }}</td>
                            <td>{{ $victim->parish }}</td>
                            <td>
                                @if(!in_array($victim->refered, [1, 0]) || (int)$victim->refered === 0)
                                    <span class="ngbvd-badge ngbvd-badge-muted">No</span>
                                @else
                                    <span class="ngbvd-badge ngbvd-badge-success">Yes</span>
                                @endif
                            </td>
                            <td>{{ $victim->created_by }}<br><small class="text-muted">{{ $victim->email }}</small></td>
                            <td>{{ $victim->urole }}</td>
                            <td>
                                <button type="button" class="ngbvd-action-btn ngbvd-preview-btn" data-case-modal data-title="{{ $victim->survivor_code ?: $victim->crb_number }}" data-pdf="{{ url('/dataentry/report?id='.($victim->uuid ?: $victim->id)) }}" data-url="{{ url('/dataentry/report?id='.($victim->uuid ?: $victim->id)) }}"><i class="ti-eye"></i> Preview</button>
                                <a href="{{ url('/dataentry/update?id='.($victim->uuid ?: $victim->id)) }}" class="ngbvd-action-btn"><i class="ti-pencil"></i> Edit</a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="14" class="text-center text-muted py-4">No profiled cases found for the selected filter.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-3">
            {{ $victims->appends(request()->query())->links('vendor.pagination.bootstrap-4', ['class' => 'custom-pagination']) }}
        </div>
    </div>
</div>
<div class="modal fade ngbvd-case-modal" id="casePreviewModal" tabindex="-1" role="dialog" aria-labelledby="casePreviewTitle" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="casePreviewTitle">Case Preview</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body p-0">
                <div class="ngbvd-modal-tools"><a id="casePdfLink" href="#" target="_blank" class="btn ngbvd-btn-primary"><i class="ti-printer"></i> Export PDF Report</a></div><iframe class="ngbvd-case-frame" id="casePreviewFrame" title="Case preview"></iframe>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    document.getElementById('perPage').addEventListener('change', function () {
        this.form.submit();
    });

    document.querySelectorAll('[data-case-modal]').forEach(function (button) {
        button.addEventListener('click', function () {
            var frame = document.getElementById('casePreviewFrame');
            var title = document.getElementById('casePreviewTitle');
            if (title) { title.textContent = 'Case Preview - ' + (button.getAttribute('data-title') || 'Profile'); }
            if (frame) { frame.src = button.getAttribute('data-url'); }
            var pdf = document.getElementById('casePdfLink');
            if (pdf) { pdf.href = button.getAttribute('data-pdf') || '#'; }
            if (window.jQuery) { jQuery('#casePreviewModal').modal('show'); }
        });
    });
    if (window.jQuery) {
        jQuery('#casePreviewModal').on('hidden.bs.modal', function () { document.getElementById('casePreviewFrame').src = 'about:blank'; });
    }

    var profiledSearch = document.getElementById('profiledCaseSearch');
    if (profiledSearch) {
        profiledSearch.addEventListener('input', function () {
            var query = this.value.toLowerCase().trim();
            document.querySelectorAll('#profiledCaseRows tr').forEach(function (row) {
                row.style.display = row.textContent.toLowerCase().indexOf(query) === -1 ? 'none' : '';
            });
        });
    }
</script>
@endpush