@extends('layouts.app')

@section('content')
<div class="max-w-6xl mx-auto py-4 px-2">
    <h1 class="mb-4 text-center text-2xl font-bold flex items-center justify-center">
        <i class="bi bi-building mr-2"></i> Change Member's CBO
    </h1>
    
    @if (!empty($message))
        <div class="alert alert-success">{{ $message }}</div>
    @endif

    @if (!empty($error))
        <div class="alert alert-danger">{{ $error }}</div>
    @endif

    @if (session('success'))
        <div class="alert alert-success">
            <i class="bi bi-check-circle"></i> {{ session('message') }}
        </div>
    @endif

    <!-- Step 1: Search Member by NIC -->
    <div class="bg-gray-50 p-4 rounded-lg shadow mb-4">
        <h3 class="mb-3 flex items-center text-lg font-semibold">
            <i class="bi bi-search mr-2"></i> Step 1: Search Member by NIC
        </h3>
        <form method="POST" action="{{ route('cbo-members.search-for-change') }}">
            @csrf
            <div class="row g-3 align-items-end">
                <div class="col-md-9">
                    <label for="nic" class="form-label">Member NIC Number</label>
                    <input 
                        type="text" 
                        class="form-control" 
                        id="nic" 
                        name="nic" 
                        value="{{ old('nic') }}" 
                        required 
                        pattern="^(\d{9}[vVxX]|\d{12})$" 
                        title="Enter valid NIC: 9 digits followed by V/X (e.g., 123456789V) or 12-digit new NIC (e.g., 200012345678)"
                        placeholder="Enter member's NIC number">
                </div>
                <div class="col-md-3">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="bi bi-search"></i> Search Member
                    </button>
                </div>
            </div>
        </form>
    </div>

    @if (session('searched_member_for_change'))
        @php $member = session('searched_member_for_change'); @endphp
        
        <!-- Step 2: Member Details and Current CBO -->
        <div class="bg-blue-50 p-4 rounded-lg shadow mb-4">
            <h3 class="mb-3 flex items-center text-lg font-semibold">
                <i class="bi bi-person-badge mr-2"></i> Step 2: Member Details
            </h3>
            <div class="bg-white rounded p-3 mb-3 shadow">
                <div class="row">
                    <div class="col-md-6">
                        <p><strong><i class="bi bi-person"></i> Name:</strong> {{ $member->full_name }}</p>
                        <p><strong><i class="bi bi-telephone"></i> Phone:</strong> {{ $member->phone ?? 'N/A' }}</p>
                    </div>
                    <div class="col-md-6">
                        <p><strong><i class="bi bi-credit-card"></i> NIC:</strong> {{ $member->nic }}</p>
                        <p><strong><i class="bi bi-geo-alt"></i> Address:</strong> {{ $member->address ?? 'N/A' }}</p>
                    </div>
                </div>
            </div>

            @php
                $currentCboMember = $member->cboMember ?? null;
            @endphp

            @if($currentCboMember)
                <!-- Current CBO Information -->
                <div class="bg-warning bg-opacity-25 p-3 rounded mb-3">
                    <h5 class="text-warning"><i class="bi bi-building"></i> Current CBO Membership</h5>
                    <div class="row">
                        <div class="col-md-4">
                            <p><strong>CBO:</strong> {{ $currentCboMember->cbo->cbo_name ?? 'N/A' }}</p>
                        </div>
                        <div class="col-md-4">
                            <p><strong>Position:</strong> {{ $currentCboMember->position ?? 'N/A' }}</p>
                        </div>
                        <div class="col-md-4">
                            <p><strong>Group:</strong> {{ $currentCboMember->group_number ? 'Group ' . $currentCboMember->group_number : 'No Group' }}</p>
                        </div>
                    </div>
                </div>

                <!-- Step 3: Remove from Current CBO -->
                <div class="bg-danger bg-opacity-25 p-3 rounded mb-3">
                    <h5 class="text-danger"><i class="bi bi-person-dash"></i> Step 3: Remove from Current CBO</h5>
                    <p class="mb-3">First, remove the member from their current CBO:</p>
                    <form method="POST" action="{{ route('cbo-members.remove-for-change') }}" onsubmit="return confirm('Are you sure you want to remove this member from their current CBO?')">
                        @csrf
                        <input type="hidden" name="cbo_member_id" value="{{ $currentCboMember->id }}">
                        <input type="hidden" name="member_nic" value="{{ $member->nic }}">
                        <button type="submit" class="btn btn-danger">
                            <i class="bi bi-person-dash"></i> Remove from Current CBO
                        </button>
                    </form>
                </div>
            @else
                <!-- No Current CBO -->
                <div class="bg-info bg-opacity-25 p-3 rounded mb-3">
                    <h5 class="text-info"><i class="bi bi-info-circle"></i> No Current CBO</h5>
                    <p>This member is not currently assigned to any CBO. You can directly add them to a CBO.</p>
                </div>
            @endif

            <!-- Step 4: Add to New CBO -->
            <div class="bg-success bg-opacity-25 p-3 rounded">
                <h5 class="text-success"><i class="bi bi-person-plus"></i> Step 4: Add to New CBO</h5>
                <p class="mb-3">Add the member to their new CBO:</p>
                <form method="POST" action="{{ route('cbo-members.add-for-change') }}">
                    @csrf
                    <input type="hidden" name="member_id" value="{{ $member->id }}">
                    <input type="hidden" name="member_nic" value="{{ $member->nic }}">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label for="cbo_id" class="form-label"><i class="bi bi-building"></i> Select New CBO</label>
                            <select class="form-select" id="cbo_id" name="cbo_id" required>
                                <option value="">-- Select CBO --</option>
                                @foreach ($cbos as $cbo)
                                    <option value="{{ $cbo->cbo_id }}" 
                                            {{ old('cbo_id') == $cbo->cbo_id ? 'selected' : '' }}>
                                        {{ $cbo->cbo_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="position" class="form-label"><i class="bi bi-person-gear"></i> Position/Role</label>
                            <select name="position" class="form-select" required>
                                <option value="">-- Select Position --</option>
                                <option value="Center_leader" {{ old('position') == 'Center_leader' ? 'selected' : '' }}>Center Leader</option>
                                <option value="Member" {{ old('position') == 'Member' ? 'selected' : '' }}>Member</option>
                                <option value="Secretary" {{ old('position') == 'Secretary' ? 'selected' : '' }}>Secretary</option>
                                <option value="Treasurer" {{ old('position') == 'Treasurer' ? 'selected' : '' }}>Treasurer</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="group_number" class="form-label"><i class="bi bi-people-fill"></i> Group Number</label>
                            <select class="form-select" id="group_number" name="group_number">
                                <option value="">-- No Group --</option>
                                <option value="01" {{ old('group_number') == '01' ? 'selected' : '' }}>Group 01</option>
                                <option value="02" {{ old('group_number') == '02' ? 'selected' : '' }}>Group 02</option>
                                <option value="03" {{ old('group_number') == '03' ? 'selected' : '' }}>Group 03</option>
                                <option value="04" {{ old('group_number') == '04' ? 'selected' : '' }}>Group 04</option>
                            </select>
                            <small class="text-muted">Max 4 members per group</small>
                        </div>
                        <div class="col-md-2 d-flex align-items-end">
                            <button type="submit" class="btn btn-success w-100">
                                <i class="bi bi-person-plus"></i> Add to CBO
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endif

    <!-- Quick Actions -->
    <div class="bg-light p-4 rounded-lg shadow">
        <h4 class="mb-3">Quick Actions</h4>
        <div class="row">
            <div class="col-md-4">
                <a href="{{ route('cbo-members.index') }}" class="btn btn-outline-primary w-100">
                    <i class="bi bi-arrow-left"></i> Back to CBO Management
                </a>
            </div>
            <div class="col-md-4">
                <a href="{{ route('cbo-members.change') }}" class="btn btn-outline-secondary w-100">
                    <i class="bi bi-arrow-clockwise"></i> Start New Search
                </a>
            </div>
            <div class="col-md-4">
                <a href="{{ route('members.index') }}" class="btn btn-outline-info w-100">
                    <i class="bi bi-people"></i> View All Members
                </a>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Auto-format NIC input
    document.getElementById('nic')?.addEventListener('input', function(e) { 
        this.value = this.value.toUpperCase(); 
    });

    // Show group capacity info when CBO is selected
    document.getElementById('cbo_id')?.addEventListener('change', function() {
        const cboId = this.value;
        const groupSelect = document.getElementById('group_number');
        
        if (cboId) {
            // You can add AJAX call here to get real-time group capacity
            // For now, we'll just show a general message
            groupSelect.title = 'Select a group (max 4 members per group)';
        }
    });

    // Form validation
    document.querySelector('form[action="{{ route("cbo-members.add-for-change") }}"]')?.addEventListener('submit', function(e) {
        const cboId = document.getElementById('cbo_id').value;
        const position = document.querySelector('select[name="position"]').value;
        
        if (!cboId || !position) {
            e.preventDefault();
            alert('Please select both CBO and Position before adding the member.');
        }
    });
</script>
@endpush
@endsection