@extends('layouts.app')

@section('title', 'Add New Member')

@section('content')
<div class="max-w-4xl mx-auto">
    <!-- Page Header -->
    <div class="mb-6">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">Add New Member</h1>
                <p class="text-gray-600">Create a new member account in the system</p>
            </div>
            <a href="{{ route('members.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition ease-in-out duration-150">
                <i class="fas fa-arrow-left mr-2"></i>
                Back to Members
            </a>
        </div>
    </div>

    <!-- Form Card -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        @if ($errors->any())
            <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-md">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-exclamation-circle text-red-400"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-red-800">There were errors with your submission</h3>
                        <div class="mt-2 text-sm text-red-700">
                            <ul class="list-disc pl-5 space-y-1">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        @if (session('success'))
            <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-md">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-check-circle text-green-400"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-green-800">{{ session('success') }}</p>
                    </div>
                </div>
            </div>
        @endif

        <form method="POST" action="{{ route('members.store') }}" id="memberForm">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Left Column -->
                <div class="space-y-4">
                    <div>
                        <label for="title" class="block text-sm font-medium text-gray-700 mb-1">Title</label>
                        <select name="title" id="title" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" required>
                            <option value="">-- Select --</option>
                            <option value="Mr">Mr</option>
                            <option value="Mrs">Mrs</option>
                            <option value="Miss">Miss</option>
                            <option value="Dr">Dr</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <input type="checkbox" id="no_nic" onclick="toggleNICField()" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                        <label for="no_nic" class="ml-2 block text-sm text-gray-900">No NIC</label>
                    </div>

                    <div>
                        <label for="full_name" class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
                        <input type="text" name="full_name" id="full_name" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" onkeyup="generateInitials()" required>
                    </div>

                    <div>
                        <label for="initials" class="block text-sm font-medium text-gray-700 mb-1">Initials</label>
                        <input type="text" name="initials" id="initials" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-50" readonly>
                    </div>

                    <div>
                        <label for="nic" class="block text-sm font-medium text-gray-700 mb-1">NIC</label>
                        <div class="flex space-x-2">
                            <input type="text" name="nic" id="nic" class="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" onkeyup="autoFillDOBGender(this.value)" required>
                            <button type="button" onclick="generateNIC()" class="px-4 py-2 bg-yellow-600 text-white rounded-md hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 transition-colors">
                                Generate
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Right Column -->
                <div class="space-y-4">
                    <div>
                        <label for="dob" class="block text-sm font-medium text-gray-700 mb-1">Date of Birth</label>
                        <input type="date" name="dob" id="dob" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-50" readonly>
                    </div>

                    <div>
                        <label for="gender" class="block text-sm font-medium text-gray-700 mb-1">Gender</label>
                        <input type="text" name="gender" id="gender" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-50" readonly>
                    </div>

                    <div>
                        <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Phone</label>
                        <input type="text" name="phone" id="phone" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" required>
                    </div>

                    <div>
                        <label for="address" class="block text-sm font-medium text-gray-700 mb-1">Address</label>
                        <textarea name="address" id="address" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" required></textarea>
                    </div>

                    <div>
                        <label for="civil_status" class="block text-sm font-medium text-gray-700 mb-1">Civil Status</label>
                        <select name="civil_status" id="civil_status" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" onchange="toggleSpouseDetails()">
                            <option value="Single">Single</option>
                            <option value="Married">Married</option>
                            <option value="Divorced">Divorced</option>
                        </select>
                    </div>

                    <!-- Spouse Details -->
                    <div id="spouse_details_section" class="mt-6 border-t pt-4" style="display:none;">
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">Spouse Details (if applicable)</h3>
                        <div class="mb-3">
                            <label for="spouse_name" class="block text-sm font-medium text-gray-700 mb-1">Spouse Name</label>
                            <input type="text" name="spouse_name" id="spouse_name" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        <div class="mb-3">
                            <label for="spouse_address" class="block text-sm font-medium text-gray-700 mb-1">Spouse Address</label>
                            <input type="text" name="spouse_address" id="spouse_address" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        <div class="mb-3">
                            <label for="spouse_id" class="block text-sm font-medium text-gray-700 mb-1">Spouse ID</label>
                            <input type="text" name="spouse_id" id="spouse_id" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                        </div>
                        <div class="mb-3">
                            <label for="spouse_mobile" class="block text-sm font-medium text-gray-700 mb-1">Spouse Mobile</label>
                            <input type="text" name="spouse_mobile" id="spouse_mobile" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex justify-end mt-8 pt-6 border-t border-gray-200">
                <button type="submit" class="inline-flex items-center px-6 py-3 bg-blue-600 border border-transparent rounded-md font-semibold text-sm text-white uppercase tracking-widest hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition ease-in-out duration-150">
                    <i class="fas fa-plus mr-2"></i>
                    Add Member
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function generateNIC() {
    let randomNIC = "9000" + Math.floor(100000 + Math.random() * 900000) + "v";
    document.getElementById("nic").value = randomNIC;
    autoFillDOBGender(randomNIC);
}

function generateInitials() {
    let fullName = document.getElementById("full_name").value.trim();
    if (fullName === "") return;

    let words = fullName.split(" ");
    let lastName = words.pop();
    let initials = words.map(word => word.charAt(0).toUpperCase()).join(".") + ". " + lastName;
    document.getElementById("initials").value = initials;
}

function autoFillDOBGender(nic) {
    let year, days, gender;

    if (nic.length === 10 && /[VXvxX]$/.test(nic)) {
        year = "19" + nic.substring(0, 2);
        days = parseInt(nic.substring(2, 5));
    } else if (nic.length === 12) {
        year = nic.substring(0, 4);
        days = parseInt(nic.substring(4, 7));
    } else {
        document.getElementById("dob").value = "";
        document.getElementById("gender").value = "";
        return;
    }

    if (days > 500) {
        gender = "Female";
        days -= 500;
    } else {
        gender = "Male";
    }

    let birthDate = new Date(year, 0, days);
    document.getElementById("dob").value = birthDate.toISOString().split("T")[0];
    document.getElementById("gender").value = gender;
}

function toggleNICField() {
    const nicField = document.getElementById("nic");
    const noNICCheckbox = document.getElementById("no_nic");

    if (noNICCheckbox.checked) {
        nicField.disabled = true;
        nicField.required = false;
        nicField.value = "N/A";
        nicField.classList.add('bg-gray-100');
    } else {
        nicField.disabled = false;
        nicField.required = true;
        nicField.value = "";
        nicField.classList.remove('bg-gray-100');
    }
}

function toggleSpouseDetails() {
    var civilStatus = document.getElementById('civil_status').value;
    var spouseSection = document.getElementById('spouse_details_section');
    spouseSection.style.display = (civilStatus === 'Married') ? 'block' : 'none';
}
// Show/hide on page load (in case of validation error)
document.addEventListener('DOMContentLoaded', function() {
    toggleSpouseDetails();
});

// JS validation before submission
document.getElementById("memberForm").addEventListener("submit", function(event) {
    let errors = [];

    const phone = document.querySelector("[name='phone']").value;
    if (!/^(0|94|\+94)?[1-9][0-9]{8}$/.test(phone)) {
        errors.push("❌ Invalid phone number");
    }

    const nic = document.getElementById("nic").value;
    if (nic !== "N/A" && !/^([0-9]{9}[VXvx]|[0-9]{12})$/.test(nic)) {
        errors.push("❌ Invalid NIC format");
    }

    const fullName = document.getElementById("full_name").value;
    if (!/^[a-zA-Z .'-]+$/.test(fullName)) {
        errors.push("❌ Name can only contain letters, spaces, and hyphens");
    }

    if (errors.length > 0) {
        event.preventDefault();
        alert(errors.join("\n"));
    }
});
</script>
@endsection