@extends('layouts.app')
@section('title', 'Select Member for Micro Loan')
@section('content')
<div class="max-w-5xl mx-auto px-4 py-6">
    <h1 class="text-2xl font-bold text-center mb-6">
        <i class="fas fa-user-plus mr-2"></i>Select Member for Micro Loan
    </h1>

    @if (session('error'))
        <div class="bg-red-100 text-red-800 px-4 py-3 rounded mb-4">
            {{ session('error') }}
        </div>
    @endif

    <div class="mb-6">
        <h2 class="text-lg font-semibold mb-1"><i class="fas fa-info-circle mr-2"></i>Step 1: Select Member</h2>
        <p class="text-sm text-gray-600">Choose a branch, CBO, and member. After selection, you'll proceed to the loan application form.</p>
    </div>

    <!-- Filter Form -->
    <form method="GET" action="{{ route('micro_loans.select_member_new') }}" class="bg-white p-6 rounded shadow mb-6">
        <h3 class="text-lg font-semibold mb-4"><i class="fas fa-filter mr-2"></i>Select Branch & CBO</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <label class="block mb-1 font-medium">Branch</label>
                <select name="branch_id" class="w-full border-gray-300 rounded shadow-sm" onchange="this.form.submit()">
                    <option value="">-- Select Branch --</option>
                    @foreach ($branches as $branch)
                        <option value="{{ $branch->id }}" {{ $selectedBranchId == $branch->id ? 'selected' : '' }}>
                            {{ $branch->branch_name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block mb-1 font-medium">CBO</label>
                <select name="cbo_id" class="w-full border-gray-300 rounded shadow-sm" onchange="this.form.submit()" {{ !$selectedBranchId ? 'disabled' : '' }}>
                    <option value="">-- Select CBO --</option>
                    @foreach ($cbos as $cbo)
                        <option value="{{ $cbo->cbo_id }}" {{ $selectedCboId == $cbo->cbo_id ? 'selected' : '' }}>
                            {{ $cbo->cbo_name }}
                        </option>
                    @endforeach
                </select>
            </div>
            <div class="flex items-end">
                <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded shadow hover:bg-blue-700">
                    <i class="fas fa-search mr-2"></i>Load Members
                </button>
            </div>
        </div>
    </form>

    <!-- Member Selection Form -->
    @if($selectedCboId && $members->count() > 0)
        <form method="POST" action="{{ route('micro_loans.process_member_selection') }}">
            @csrf
            <input type="hidden" name="branch_id" value="{{ $selectedBranchId }}">
            <input type="hidden" name="cbo_id" value="{{ $selectedCboId }}">

            <div class="bg-white p-6 rounded shadow">
                <h3 class="text-lg font-semibold mb-4"><i class="fas fa-users mr-2"></i>Select Member</h3>
                <div class="space-y-3">
                    @foreach ($members as $cboMember)
                        <div class="border rounded p-4 flex items-start space-x-3 {{ $selectedMemberId == $cboMember->member->id ? 'bg-blue-50 border-blue-400' : 'hover:bg-gray-50' }}">
                            <input type="radio" name="member_id" value="{{ $cboMember->member->id }}" id="member_{{ $cboMember->member->id }}" class="mt-1" {{ $selectedMemberId == $cboMember->member->id ? 'checked' : '' }} required>
                            <label for="member_{{ $cboMember->member->id }}" class="block w-full cursor-pointer">
                                <div class="font-semibold">{{ $cboMember->member->full_name }}</div>
                                <div class="text-sm text-gray-600">
                                    <strong>NIC:</strong> {{ $cboMember->member->nic }}<br>
                                    <strong>Position:</strong> {{ $cboMember->position }}<br>
                                    <strong>Group:</strong> {{ $cboMember->group_number }}
                                </div>
                            </label>
                        </div>
                    @endforeach
                </div>

                <div class="text-center mt-6">
                    <button type="submit" id="continueBtn" class="px-6 py-2 text-white rounded {{ !$selectedMemberId ? 'bg-gray-400 cursor-not-allowed' : 'bg-green-600 hover:bg-green-700' }}" {{ !$selectedMemberId ? 'disabled' : '' }}>
                        <i class="fas fa-arrow-right mr-2"></i>Continue to Loan Application
                    </button>
                </div>
            </div>
        </form>
    @elseif($selectedCboId)
        <div class="bg-white p-6 rounded shadow">
            <div class="bg-blue-100 text-blue-800 px-4 py-3 rounded">
                <i class="fas fa-info-circle mr-2"></i>No members found for the selected CBO.
            </div>
        </div>
    @endif

    <div class="text-center mt-6">
        <a href="{{ route('micro_loans.test') }}" class="inline-block bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700">
            <i class="fas fa-arrow-left mr-2"></i>Back to Test Page
        </a>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const radios = document.querySelectorAll('input[name="member_id"]');
    const continueBtn = document.getElementById('continueBtn');

    radios.forEach(function(radio) {
        radio.addEventListener('change', function() {
            continueBtn.disabled = false;
            continueBtn.classList.remove('bg-gray-400', 'cursor-not-allowed');
            continueBtn.classList.add('bg-green-600', 'hover:bg-green-700');
        });
    });
});
</script>
@endsection