@extends('layouts.app')

@section('title', $account->name . ' — Corporate Scheme')

@section('content')
    @php
        $corpManage = auth()->user() && auth()->user()->hasAnyRole('Super Admin', 'Hospital Admin', 'Corporate Scheme Admin', 'Finance User');
    @endphp
    {{-- ===================== Header ===================== --}}
    <div class="flex items-start justify-between gap-4 mb-6">
        <div>
            <div class="flex items-center gap-3 mb-1">
                <h1 class="text-2xl font-bold text-gray-800">{{ $account->name }}</h1>
                <span class="badge badge-info">{{ $account->code }}</span>
                <span class="badge {{ $account->scheme_status === 'Active' ? 'badge-success' : ($account->scheme_status === 'Suspended' ? 'badge-warning' : 'badge-danger') }}">
                    {{ $account->scheme_status }}
                </span>
            </div>
            <div class="text-sm text-gray-500">
                Contact: {{ $account->contact_person ?? '—' }} · {{ $account->phone ?? '—' }} · {{ $account->email ?? '—' }}
            </div>
            {{-- Member actions (moved up from the members section) --}}
            <div class="flex flex-wrap gap-2 mt-3">
                <button type="button" onclick="openEnrolModal('principal')" class="btn-primary">+ Enrol Principal</button>
                <button type="button" onclick="openEnrolModal('dependant')" class="btn-secondary">+ Add Dependant</button>
            </div>
        </div>
        <div class="flex gap-2">
            @if($corpManage)
            <button type="button" onclick="openPublicEnrolModal()" class="btn-secondary whitespace-nowrap">
                Public Enrolment Link
                @if($account->public_enrol_enabled)
                    <span class="ml-1 inline-block w-2 h-2 rounded-full bg-green-500 align-middle" title="On"></span>
                @else
                    <span class="ml-1 inline-block w-2 h-2 rounded-full bg-gray-300 align-middle" title="Off"></span>
                @endif
            </button>
            @endif
        </div>
    </div>

    {{-- ===================== Members Section ===================== --}}
    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
        <div class="flex items-center justify-between p-5 border-b border-gray-200">
            <h2 class="text-sm font-semibold text-gray-700 uppercase tracking-wide">Enrolled Members</h2>
        </div>

        {{-- Filters --}}
        <form method="GET" class="px-5 py-4 bg-gray-50 border-b border-gray-200">
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 items-end">
                <div>
                    <label class="form-label">Search</label>
                    <input type="text" name="q" value="{{ request('q') }}" placeholder="Name, member #, MRN…" class="form-input">
                </div>
                <div>
                    <label class="form-label">Member Type</label>
                    <select name="type" class="form-input">
                        <option value="">All</option>
                        <option value="principal" @selected(request('type') === 'principal')>Principal</option>
                        <option value="dependant" @selected(request('type') === 'dependant')>Dependant</option>
                    </select>
                </div>
                <div>
                    <label class="form-label">Status</label>
                    <select name="status" class="form-input">
                        <option value="">All</option>
                        @foreach (['Pending','Active','Grace Period','Suspended','Closed'] as $s)
                            <option value="{{ $s }}" @selected(request('status') === $s)>{{ $s }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="flex gap-2">
                    <button type="submit" class="btn-primary flex-1">Filter</button>
                    <a href="{{ route('corporate.accounts.show', $account) }}" class="btn-secondary">Reset</a>
                </div>
            </div>
        </form>

        {{-- Members Table --}}
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="table-header">
                        <th class="px-4 py-3 text-left">Member #</th>
                        <th class="px-4 py-3 text-left">MRN</th>
                        <th class="px-4 py-3 text-left">Name</th>
                        <th class="px-4 py-3 text-left">Type</th>
                        <th class="px-4 py-3 text-left">Principal Of</th>
                        <th class="px-4 py-3 text-left">Last Paid</th>
                        <th class="px-4 py-3 text-left">Next Due</th>
                        <th class="px-4 py-3 text-left">Status</th>
                        <th class="px-4 py-3 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse ($members as $m)
                        <tr class="hover:bg-gray-50">
                            <td class="table-cell font-mono text-xs">{{ $m->member_number }}</td>
                            <td class="table-cell font-mono text-xs">{{ $m->patient?->mrn ?? '—' }}</td>
                            <td class="table-cell">
                                {{ $m->patient ? trim($m->patient->first_name . ' ' . $m->patient->last_name) : '—' }}
                            </td>
                            <td class="table-cell">
                                <span class="badge {{ $m->member_type === 'principal' ? 'badge-info' : 'badge-gray' }}">
                                    {{ ucfirst($m->member_type) }}
                                </span>
                            </td>
                            <td class="table-cell text-xs text-gray-500">
                                {{ $m->principal?->member_number ?? '—' }}
                            </td>
                            <td class="table-cell text-xs">{{ $m->last_paid_month ?? '—' }}</td>
                            <td class="table-cell text-xs">{{ $m->next_due_date?->format('d M Y') ?? '—' }}</td>
                            <td class="table-cell">
                                @php
                                    $badge = match ($m->status) {
                                        'Active'       => 'badge-success',
                                        'Grace Period' => 'badge-warning',
                                        'Pending'      => 'badge-info',
                                        default        => 'badge-danger',
                                    };
                                @endphp
                                <span class="badge {{ $badge }}">{{ $m->status }}</span>
                            </td>
			<td class="table-cell text-right">
                                <div class="flex items-center justify-end gap-2 flex-wrap">
                                    @if($m->status === 'Pending')
                                        @if($m->enrolment_source === 'public_form')
                                            <span class="text-[10px] px-1.5 py-0.5 bg-amber-100 text-amber-800 rounded font-semibold" 
title="Self-enrolled via public form">SELF</span>
                                        @endif
                                        @if($corpManage)
                                        <form method="POST" action="{{ route('corporate.members.approve', $m) }}" class="inline">
                                            @csrf
                                            <button class="text-xs text-green-700 hover:underline font-medium">Approve</button>
                                        </form>
                                        <button onclick="rejectMember({{ $m->id }})" class="text-xs text-red-700 hover:underline">Reject</button>
                                        @endif
                                    @endif
                                    <a href="{{ route('corporate.eligibility.index', ['patient_id' => $m->patient_id]) }}" class="text-cr-700 text-xs 
hover:underline">Check</a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9" class="text-center py-8 text-gray-400">
                                No members enrolled yet. Click "Enrol Principal" to begin.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if (method_exists($members, 'links'))
            <div class="px-5 py-3 border-t border-gray-200">{{ $members->withQueryString()->links() }}</div>
        @endif
    </div>

{{-- ============================================================
     ENROL MEMBER MODAL (handles both principal & dependant)
============================================================ --}}
<div id="enrolModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50 p-4">
    <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
        <div class="px-5 py-4 border-b border-gray-200 flex justify-between items-center">
            <h3 class="font-semibold text-gray-800"><span id="enrolModalTitle">Enrol Principal</span></h3>
            <button onclick="closeEnrolModal()" class="text-gray-500 hover:text-gray-800 text-2xl leading-none">&times;</button>
        </div>
        <form method="POST" action="{{ route('corporate.members.store') }}" class="p-5 space-y-4">
            @csrf
            <input type="hidden" name="corporate_account_id" value="{{ $account->id }}">
            <input type="hidden" name="member_type" id="memberTypeInput" value="principal">

            {{-- Patient search --}}
            <div>
                <label class="form-label">Search Existing Patient *</label>
                <div class="relative">
                    <input type="text" id="patientSearch" placeholder="Type MRN, name, ID or phone…"
                           class="form-input" autocomplete="off">
                    <div id="patientResults" class="absolute left-0 right-0 bg-white border border-gray-200 rounded-md shadow-lg mt-1 max-h-60 overflow-y-auto hidden z-10"></div>
                </div>
                <input type="hidden" name="patient_id" id="patientIdInput" required>
                <div id="selectedPatient" class="mt-2 text-sm text-gray-700 hidden bg-gray-50 px-3 py-2 rounded"></div>
                <div class="text-xs text-gray-500 mt-1">Patient must already exist in the master patient registry.</div>
            </div>

            {{-- Principal selector (dependants only) --}}
            <div id="principalSelector" class="hidden">
                <label class="form-label">Link to Principal *</label>
                <select name="principal_member_id" class="form-input">
                    <option value="">— Select principal —</option>
                    @foreach ($principalsList ?? [] as $p)
                        <option value="{{ $p->id }}">
                            {{ $p->member_number }} — {{ $p->patient ? trim($p->patient->first_name . ' ' . $p->patient->last_name) : '' }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div id="relationshipField" class="hidden">
                <label class="form-label">Relationship to Principal *</label>
                <select name="relationship_to_principal" class="form-input">
                    <option value="">—</option>
                    <option value="Spouse">Spouse</option>
                    <option value="Child">Child</option>
                    <option value="Parent">Parent</option>
                    <option value="Sibling">Sibling</option>
                    <option value="Other">Other</option>
                </select>
            </div>

            {{-- Verification --}}
            <div class="grid grid-cols-2 gap-3 pt-2 border-t border-gray-100">
                <div>
                    <label class="form-label">Verification Method 1 *</label>
                    <select name="verification_method_1" id="verifyMethod1" class="form-input" onchange="syncVerifyInput(1)" required>
                        <option value="National ID">National ID</option>
                        <option value="Birth Certificate">Birth Certificate</option>
                        <option value="Passport">Passport</option>
                        <option value="Phone">Phone Number</option>
                        <option value="DOB">Date of Birth</option>
                        <option value="Principal Confirmation">Principal Confirmation</option>
                    </select>
                </div>
                <div>
                    <label class="form-label">Verification Value 1 *</label>
                    <input type="text" name="verification_value_1" id="verifyText1" class="form-input" required>
                    <input type="text" name="verification_value_1" id="verifyDate1"
                           class="form-input hidden" placeholder="dd/mm/yyyy"
                           onfocus="if(!this.value)this.type='date'"
                           onblur="if(!this.value)this.type='text'"
                           disabled>
                </div>
                <div>
                    <label class="form-label">Verification Method 2 *</label>
                    <select name="verification_method_2" id="verifyMethod2" class="form-input" onchange="syncVerifyInput(2)" required>
                        <option value="DOB">Date of Birth</option>
                        <option value="National ID">National ID</option>
                        <option value="Birth Certificate">Birth Certificate</option>
                        <option value="Phone">Phone Number</option>
                        <option value="Principal Confirmation">Principal Confirmation</option>
                    </select>
                </div>
                <div>
                    <label class="form-label">Verification Value 2 *</label>
                    <input type="text" name="verification_value_2" id="verifyText2" class="form-input hidden" disabled>
                    <input type="text" name="verification_value_2" id="verifyDate2"
                           class="form-input" placeholder="dd/mm/yyyy"
                           onfocus="if(!this.value)this.type='date'"
                           onblur="if(!this.value)this.type='text'"
                           required>
                </div>
            </div>

            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="form-label">Membership Start *</label>
                    <input type="date" name="membership_start_date" class="form-input" value="{{ now()->format('Y-m-d') }}" required>
                </div>
                <div>
                    <label class="form-label">Status</label>
                    <select name="status" class="form-input">
                        <option value="Active" selected>Active</option>
                        <option value="Pending">Pending</option>
                    </select>
                </div>
            </div>

            <div class="flex justify-end gap-2 pt-4 border-t border-gray-100">
                <button type="button" onclick="closeEnrolModal()" class="btn-secondary">Cancel</button>
                <button type="submit" class="btn-primary">Enrol Member</button>
            </div>
        </form>
    </div>
</div>

<script>
    function openEnrolModal(type) {
        document.getElementById('enrolModal').classList.remove('hidden');
        document.getElementById('enrolModal').classList.add('flex');
        document.getElementById('memberTypeInput').value = type;
        document.getElementById('enrolModalTitle').textContent = type === 'principal' ? 'Enrol Principal Member' : 'Add Dependant';
        const isDep = type === 'dependant';
        document.getElementById('principalSelector').classList.toggle('hidden', !isDep);
        document.getElementById('relationshipField').classList.toggle('hidden', !isDep);
        // Ensure verification inputs match the current method selections
        syncVerifyInput(1);
        syncVerifyInput(2);
    }

    function closeEnrolModal() {
        document.getElementById('enrolModal').classList.add('hidden');
        document.getElementById('enrolModal').classList.remove('flex');
    }

    // Patient search debounce
    let searchTimer;
    document.getElementById('patientSearch').addEventListener('input', function (e) {
        clearTimeout(searchTimer);
        const q = e.target.value.trim();
        const box = document.getElementById('patientResults');
        if (q.length < 2) { box.classList.add('hidden'); return; }
        searchTimer = setTimeout(() => {
            fetch('{{ route('corporate.members.search-patients') }}?q=' + encodeURIComponent(q))
                .then(r => r.json())
                .then(rows => {
                    if (!rows.length) {
                        box.innerHTML = '<div class="px-3 py-2 text-sm text-gray-400">No patients found</div>';
                    } else {
                        box.innerHTML = rows.map(p =>
                            `<div class="px-3 py-2 hover:bg-cr-50 cursor-pointer text-sm border-b border-gray-100" onclick="selectPatient(${p.id}, '${(p.label || '').replace(/'/g, '&#39;')}')">
                                ${p.label}
                            </div>`
                        ).join('');
                    }
                    box.classList.remove('hidden');
                });
        }, 250);
    });

    function selectPatient(id, label) {
        document.getElementById('patientIdInput').value = id;
        const sel = document.getElementById('selectedPatient');
        sel.textContent = 'Selected: ' + label;
        sel.classList.remove('hidden');
        document.getElementById('patientResults').classList.add('hidden');
        document.getElementById('patientSearch').value = label;
    }

    // Swap between text input and date picker depending on verification method.
    // We disable the hidden input so its (empty) value isn't submitted alongside
    // the visible one — only one name="verification_value_N" goes to the server.
    function syncVerifyInput(slot) {
        const method = document.getElementById('verifyMethod' + slot).value;
        const textInput = document.getElementById('verifyText' + slot);
        const dateInput = document.getElementById('verifyDate' + slot);
        const isDob = (method === 'DOB');

        // Show date picker for DOB; show text input for everything else
        dateInput.classList.toggle('hidden', !isDob);
        textInput.classList.toggle('hidden', isDob);

        // Enable only the visible one — the disabled one is not submitted
        dateInput.disabled = !isDob;
        textInput.disabled = isDob;

        // Required follows the visible field
        dateInput.required = isDob;
        textInput.required = !isDob;

        // Clear stale values when swapping so we don't carry over yesterday's input
        if (isDob) { textInput.value = ''; } else { dateInput.value = ''; }
    }
</script>
<script>
    function rejectMember(id) {
        const reason = prompt('Reason for rejection (required, min 3 chars):');
        if (!reason || reason.trim().length < 3) return;
        const f = document.createElement('form');
        f.method = 'POST';
        f.action = '/corporate/members/' + id + '/reject';
        f.innerHTML = '@csrf<input type="hidden" name="reason" value="' + reason.replace(/"/g, '&quot;') + '">';
        document.body.appendChild(f);
        f.submit();
    }
</script>

{{-- ============================================================
     PUBLIC SELF-ENROLMENT MODAL
============================================================ --}}
<div id="publicEnrolModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50 p-4">
    <div class="bg-white rounded-lg shadow-xl max-w-lg w-full">
        <div class="px-5 py-4 border-b border-gray-200 flex justify-between items-center">
            <h3 class="font-semibold text-gray-800">Public Self-Enrolment Link</h3>
            <button type="button" onclick="closePublicEnrolModal()" class="text-gray-500 hover:text-gray-800 text-2xl leading-none">&times;</button>
        </div>
        <div class="p-5">
            <div class="flex items-start justify-between gap-3 mb-3">
                <p class="text-xs text-gray-500">Share with SACCO members so they can enrol themselves. Submissions land as Pending for your review.</p>
                @if($account->public_enrol_enabled)
                    <span class="text-xs px-2 py-1 bg-green-100 text-green-700 rounded whitespace-nowrap">● ON</span>
                @else
                    <span class="text-xs px-2 py-1 bg-gray-100 text-gray-600 rounded whitespace-nowrap">○ OFF</span>
                @endif
            </div>

            @if($account->public_enrol_enabled && $account->public_enrol_slug)
                @php $publicUrl = url('/enrol/' . $account->public_enrol_slug); @endphp
                <div class="bg-gray-50 border border-gray-200 rounded p-3 mb-3 flex items-center gap-2">
                    <input type="text" readonly value="{{ $publicUrl }}" id="publicEnrolUrl"
                           class="flex-1 font-mono text-xs px-2 py-1.5 bg-white border border-gray-300 rounded">
                    <button type="button" onclick="copyEnrolUrl(event)" class="btn-secondary text-xs whitespace-nowrap">Copy</button>
                    <a href="{{ $publicUrl }}" target="_blank" class="btn-secondary text-xs whitespace-nowrap">Open ↗</a>
                </div>
                <div class="flex flex-wrap gap-2">
                    <form method="POST" action="{{ route('corporate.accounts.toggle-public-enrol', $account) }}" class="inline">
                        @csrf
                        <input type="hidden" name="enabled" value="0">
                        <button class="btn-secondary text-xs">Turn off link</button>
                    </form>
                    <form method="POST" action="{{ route('corporate.accounts.rotate-public-enrol-slug', $account) }}" class="inline"
                          onsubmit="return confirm('Rotate the link? The old URL stops working immediately.');">
                        @csrf
                        <button class="btn-secondary text-xs">Rotate link</button>
                    </form>
                </div>
            @else
                <form method="POST" action="{{ route('corporate.accounts.toggle-public-enrol', $account) }}">
                    @csrf
                    <input type="hidden" name="enabled" value="1">
                    <button class="btn-primary text-xs">Turn on public enrolment</button>
                </form>
            @endif
        </div>
    </div>
</div>

<script>
    function openPublicEnrolModal() {
        const m = document.getElementById('publicEnrolModal');
        m.classList.remove('hidden');
        m.classList.add('flex');
    }
    function closePublicEnrolModal() {
        const m = document.getElementById('publicEnrolModal');
        m.classList.add('hidden');
        m.classList.remove('flex');
    }
    function copyEnrolUrl(e) {
        const inp = document.getElementById('publicEnrolUrl');
        inp.select();
        document.execCommand('copy');
        const btn = e.target;
        const original = btn.textContent;
        btn.textContent = '✓ Copied';
        setTimeout(() => { btn.textContent = original; }, 1500);
    }

    // Deep-link from the Schemes & Members landing "Enrol Member" picker:
    // ?enrol=principal|dependant opens the matching enrol modal on load.
    document.addEventListener('DOMContentLoaded', function () {
        const params = new URLSearchParams(window.location.search);
        const t = params.get('enrol');
        if ((t === 'principal' || t === 'dependant') && typeof openEnrolModal === 'function') {
            openEnrolModal(t);
        }
        if (params.get('publiclink') === '1' && typeof openPublicEnrolModal === 'function') {
            openPublicEnrolModal();
        }
    });
</script>
@endsection