@extends('layouts.app')

@section('title', 'Member Management')


@section('nav-header')

<div class="iq-navbar-header" style="height: 215px;">
                <div class="container-fluid iq-container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="flex-wrap d-flex justify-content-between align-items-center">
                                <div>
                                    <h1>Member Management</h1>
                                </div>
                                <div>
                                    <button type="button" class="btn btn-success rounded-pill" data-bs-toggle="modal"
                                        data-bs-target="#memberaddmodule">
                                        <svg class="icon-20" width="20" viewBox="0 0 24 24" fill="none"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd" clip-rule="evenodd"
                                                d="M9.87651 15.2063C6.03251 15.2063 2.74951 15.7873 2.74951 18.1153C2.74951 20.4433 6.01251 21.0453 9.87651 21.0453C13.7215 21.0453 17.0035 20.4633 17.0035 18.1363C17.0035 15.8093 13.7415 15.2063 9.87651 15.2063Z"
                                                stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round"></path>
                                            <path fill-rule="evenodd" clip-rule="evenodd"
                                                d="M9.8766 11.886C12.3996 11.886 14.4446 9.841 14.4446 7.318C14.4446 4.795 12.3996 2.75 9.8766 2.75C7.3546 2.75 5.3096 4.795 5.3096 7.318C5.3006 9.832 7.3306 11.877 9.8456 11.886H9.8766Z"
                                                stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round"></path>
                                            <path d="M19.2036 8.66919V12.6792" stroke="currentColor" stroke-width="1.5"
                                                stroke-linecap="round" stroke-linejoin="round"></path>
                                            <path d="M21.2497 10.6741H17.1597" stroke="currentColor" stroke-width="1.5"
                                                stroke-linecap="round" stroke-linejoin="round"></path>
                                        </svg>
                                        &nbsp;Add a New Member
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="iq-header-img">
                    <img src="../assets/images/dashboard/top-header.png" alt="header"
                        class="theme-color-default-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header1.png" alt="header"
                        class="theme-color-purple-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header2.png" alt="header"
                        class="theme-color-blue-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header3.png" alt="header"
                        class="theme-color-green-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header4.png" alt="header"
                        class="theme-color-yellow-img img-fluid w-100 h-100 animated-scaleX">
                    <img src="../assets/images/dashboard/top-header5.png" alt="header"
                        class="theme-color-pink-img img-fluid w-100 h-100 animated-scaleX">
                </div>
            </div> <!-- Nav Header Component End -->
            <!--Nav End-->

@endsection



@section('content')

<!-- Table -->
        <div class="conatiner-fluid content-inner mt-n5 py-0">

            <div class="modal fade" id="memberaddmodule" tabindex="-1" aria-labelledby="memberaddmodule"
                aria-hidden="true">
                <div class="modal-dialog modal-halfscreen">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="memberaddmodule">Add a New Member</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            

                            <form id="memberForm" enctype="multipart/form-data">
                                <div class="row">
                                    <div class="col-4">
                                        <label class="form-label">Member Number</label>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" id="member_number" name="member_number" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <label class="form-label">Full Name</label>
                                        <input type="text" class="form-control" name="member_full_name" placeholder="Enter Full Name">
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label">Address</label>
                                        <input type="text" class="form-control" name="member_address" placeholder="Enter Address">
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label">Select Area</label>
                                        <select class="form-select" name="area_id" id="area_id">
                                            <option disabled selected>Loading areas...</option>
                                        </select>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label">Select Sub Area</label>
                                        <select class="form-select" name="sub_area_id" id="sub_area_id">
                                            <option disabled selected>Select area first</option>
                                        </select>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label">NIC No:</label>
                                        <input type="text" class="form-control" name="member_nic" id="nic-column" placeholder="NIC No">
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label">Birthday</label>
                                        <input type="text" class="form-control" name="member_dob" id="dob-column" readonly>
                                    </div>
                                    <div class="col-4">
                                        <label class="form-label">Gender</label>
                                        <input type="text" class="form-control" name="member_gender" id="gender-column" readonly>
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label">NIC Scan Upload</label>
                                        <input class="form-control" type="file" name="nic_file">
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label">Phone Number</label>
                                        <input type="text" class="form-control" name="member_phone" placeholder="Phone Number">
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label">Email Address</label>
                                        <input type="email" class="form-control" name="member_email" placeholder="Email Address">
                                    </div>
                                </div>
                            </form>



                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary" onclick="submitMemberForm()">Add Member</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="membereditmodule" tabindex="-1" aria-labelledby="membereditmodule"
                aria-hidden="true">
                <div class="modal-dialog modal-halfscreen">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Edit Member Details</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <form id="editMemberForm" enctype="multipart/form-data">
    @csrf
    <input type="hidden" name="member_id" id="edit_member_id">

    <div class="row">
        <div class="col-4">
            <label class="form-label">Member Number</label>
            <div class="input-group mb-3">
                <input type="text" class="form-control" id="edit_member_number" readonly>
            </div>
        </div>

        <div class="col-12">
            <label class="form-label">Full Name</label>
            <div class="input-group mb-3">
                <input type="text" class="form-control" name="member_full_name" id="edit_member_name">
            </div>
        </div>

        <div class="col-12">
            <label class="form-label">Address</label>
            <div class="input-group mb-3">
                <input type="text" class="form-control" name="member_address" id="edit_member_address">
            </div>
        </div>

        <div class="col-6">
            <label class="form-label">Select Area</label>
            <div class="input-group mb-3">
                <select class="form-select" name="area_id" id="edit_area_id"></select>
            </div>
        </div>

        <div class="col-6">
            <label class="form-label">Select Sub Area</label>
            <div class="input-group mb-3">
                <select class="form-select" name="sub_area_id" id="edit_sub_area_id"></select>
            </div>
        </div>

        <div class="col-4">
            <label class="form-label">NIC No:</label>
            <div class="input-group mb-3">
                <input type="text" class="form-control" name="member_nic" id="edit_member_nic">
            </div>
        </div>

        <div class="col-4">
            <label class="form-label">Birthday</label>
            <div class="input-group mb-3">
                <input type="text" class="form-control" name="member_dob" id="edit_member_dob" readonly>
            </div>
        </div>

        <div class="col-4">
            <label class="form-label">Gender</label>
            <div class="input-group mb-3">
                <input type="text" class="form-control" name="member_gender" id="edit_member_gender" readonly>
            </div>
        </div>

        <div class="col-12">
            <label class="form-label">NIC Scan Upload</label>
            <input class="form-control" type="file" name="nic_file" id="edit_nic_file">
            <div id="edit_nic_doc_preview" class="mt-2"></div>
        </div>

        <div class="col-6">
            <label class="form-label">Phone Number</label>
            <div class="input-group mb-3">
                <input type="text" class="form-control" name="member_phone" id="edit_member_phone">
            </div>
        </div>

        <div class="col-6">
            <label class="form-label">Email Address</label>
            <div class="input-group mb-3">
                <input type="email" class="form-control" name="member_email" id="edit_member_email">
            </div>
        </div>

        <div class="col-12">
            <label class="form-label">Member Status</label>
            <div class="form-check form-switch">
                <input class="form-check-input" type="checkbox" id="edit_member_status" name="member_status">
                <label class="form-check-label" for="edit_member_status">Inactive / Active</label>
            </div>
        </div>
    </div>
</form>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary" onclick="submitMemberUpdateForm()">Update</button>
                        </div>
                    </div>

                </div>
            </div>

            <div class="modal fade" id="memberviewmodule" tabindex="-1" aria-labelledby="memberviewmodule" aria-hidden="true">
    <div class="modal-dialog modal-halfscreen">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">View Member</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="row">
                        <div class="col-4">
                            <label class="form-label">Member Number</label>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" id="view_member_number" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <label class="form-label">Full Name</label>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" id="view_member_name" readonly>
                            </div>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Address</label>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" id="view_member_address" readonly>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <label class="form-label">Select Area</label>
                                    <select class="form-select mb-3 shadow-none" id="view_member_area" disabled>
                                        <option disabled selected>select area</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label class="form-label">Select Sub Area</label>
                                    <select class="form-select mb-3 shadow-none" id="view_member_subarea" disabled>
                                        <option disabled selected>select sub area</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="col-4">
                            <label class="form-label">NIC No:</label>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" id="view_member_nic" readonly>
                            </div>
                        </div>
                        <div class="col-4">
                            <label class="form-label">Birthday</label>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" id="view_member_dob" readonly>
                            </div>
                        </div>
                        <div class="col-4">
                            <label class="form-label">Gender</label>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" id="view_member_gender" readonly>
                            </div>
                        </div>
                        <div class="col-12">
                            <label class="form-label">NIC Scan</label>
                            <div id="nic_doc_container" class="mt-2">
                                <!-- Image preview will be injected here by JS -->
                            </div>
                        </div>

                        <div class="col-6">
                            <label class="form-label">Phone Number</label>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" id="view_member_phone" readonly>
                            </div>
                        </div>
                        <div class="col-6">
                            <label class="form-label">Email Address</label>
                            <div class="input-group mb-3">
                                <input type="email" class="form-control" id="view_member_email" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">Member Status</label>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="view_member_status" disabled>
                                <label class="form-check-label">Inactive / Active</label>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


            <div class="row">
                <div class="col-sm-12">
                    <div class="card">

                        <div class="card-body">

                            <div class="table-responsive">
                                <table id="datatable" class="table table-striped" data-toggle="data-table">
                                    <thead>
                                        <tr>
                                            <th>Member No:</th>
                                            <th>Name</th>
                                            <th>NIC</th>
                                            <th>Phone No:</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($members as $member)
                                        <tr>
                                            <td>{{ $member->member_number }}</td>
                                            <td>{{ $member->member_full_name }}</td>
                                            <td>{{ $member->member_nic }}</td>
                                            <td>{{ $member->member_phone_number }}</td>
                                            <td>
                                                @if ($member->record_active_status == 1)
                                                    <span class="badge bg-success">Active</span>
                                                @else
                                                    <span class="badge bg-danger">Inactive</span>
                                                @endif
                                            </td>
                                            <td>
                                                <a data-bs-toggle="tooltip" data-bs-placement="top" title="Edit">
                                                    <button class="btn btn-icon btn-warning edit-member-btn"
                                                        type="button"
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#membereditmodule"
                                                        data-id="{{ $member->member_id }}"
                                                        data-number="{{ $member->member_number }}"
                                                        data-name="{{ $member->member_full_name }}"
                                                        data-nic="{{ $member->member_nic }}"
                                                        data-phone="{{ $member->member_phone_number }}"
                                                        data-email="{{ $member->member_email }}"
                                                        data-address="{{ $member->member_address }}"
                                                        data-status="{{ $member->record_active_status }}"
                                                        data-dob="{{ $member->member_dob }}"
                                                        data-gender="{{ $member->member_gender }}"
                                                        data-area-id="{{ $member->area->area_id ?? '' }}"
                                                        data-subarea-id="{{ $member->subarea->subarea_id ?? '' }}"
                                                        data-doc="{{ $member->doc_link ? asset($member->doc_link) : '' }}"
                                                    >
                                                        <span class="btn-inner">
                                                            <svg class="icon-35" width="20" viewBox="0 0 24 24" fill="none"
                                                                xmlns="http://www.w3.org/2000/svg">
                                                                <path
                                                                    d="M11.4925 2.78906H7.75349C4.67849 2.78906 2.75049 4.96606 2.75049 8.04806V16.3621C2.75049 19.4441 4.66949 21.6211 7.75349 21.6211H16.5775C19.6625 21.6211 21.5815 19.4441 21.5815 16.3621V12.3341"
                                                                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                                                    stroke-linejoin="round"></path>
                                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                                    d="M8.82812 10.921L16.3011 3.44799C17.2321 2.51799 18.7411 2.51799 19.6721 3.44799L20.8891 4.66499C21.8201 5.59599 21.8201 7.10599 20.8891 8.03599L13.3801 15.545C12.9731 15.952 12.4211 16.181 11.8451 16.181H8.09912L8.19312 12.401C8.20712 11.845 8.43412 11.315 8.82812 10.921Z"
                                                                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                                                    stroke-linejoin="round"></path>
                                                            </svg>
                                                        </span>
                                                    </button>
                                                </a>
                                                <a data-bs-toggle="tooltip" data-bs-placement="top" title="View">
                                                    <button class="btn btn btn-icon btn-info view-member-btn" 
                                                        type="button" 
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#memberviewmodule"
                                                        data-id="{{ $member->member_id }}"
                                                        data-number="{{ $member->member_number }}"
                                                        data-name="{{ $member->member_full_name }}"
                                                        data-nic="{{ $member->member_nic }}"
                                                        data-phone="{{ $member->member_phone_number }}"
                                                        data-email="{{ $member->member_email }}"
                                                        data-address="{{ $member->member_address }}"
                                                        data-status="{{ $member->record_active_status }}"
                                                        data-dob="{{ $member->member_dob }}"
                                                        data-gender="{{ $member->member_gender }}"
                                                        data-area-id="{{ $member->area->area_id ?? '' }}"
                                                        data-subarea-id="{{ $member->subarea->subarea_id ?? '' }}"
                                                        data-doc="{{ $member->doc_link ? asset($member->doc_link) : '' }}"
                                                    >
                                                        <span class="btn-inner">
                                                            <svg class="icon-35" width="20" viewBox="0 0 24 24" fill="none"
                                                                xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
                                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                                    d="M15.1614 12.0531C15.1614 13.7991 13.7454 15.2141 11.9994 15.2141C10.2534 15.2141 8.83838 13.7991 8.83838 12.0531C8.83838 10.3061 10.2534 8.89111 11.9994 8.89111C13.7454 8.89111 15.1614 10.3061 15.1614 12.0531Z"
                                                                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                                                    stroke-linejoin="round"></path>
                                                                <path fill-rule="evenodd" clip-rule="evenodd"
                                                                    d="M11.998 19.355C15.806 19.355 19.289 16.617 21.25 12.053C19.289 7.48898 15.806 4.75098 11.998 4.75098H12.002C8.194 4.75098 4.711 7.48898 2.75 12.053C4.711 16.617 8.194 19.355 12.002 19.355H11.998Z"
                                                                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                                                    stroke-linejoin="round"></path>
                                                            </svg>
                                                        </span>
                                                    </button>
                                                </a>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
@endsection

@section('scripts')
<script>
// Run immediately when script is included
(function initializeMemberForm() {
    // Fetch next member number
    fetch('/api/members/next-number')
        .then(res => res.json())
        .then(data => {
            document.getElementById('member_number').value = data.next_member_number;
        });

    // Live NIC parsing
    document.getElementById('nic-column').addEventListener('input', processNIC);

    // Area + Subarea dropdowns
    const areaSelect = document.getElementById('area_id');
    const subAreaSelect = document.getElementById('sub_area_id');

    fetch('/api/areas')
        .then(res => res.json())
        .then(data => {
            areaSelect.innerHTML = '<option disabled selected>Select Area</option>';
            data.forEach(area => {
                const option = document.createElement('option');
                option.value = area.id;
                option.text = area.name;
                areaSelect.appendChild(option);
            });
        });

    areaSelect.addEventListener('change', function () {
        const areaId = this.value;
        fetch(`/api/areas/${areaId}/sub-areas`)
            .then(res => res.json())
            .then(data => {
                subAreaSelect.innerHTML = '<option disabled selected>Select Sub Area</option>';
                data.forEach(sub => {
                    const option = document.createElement('option');
                    option.value = sub.id;
                    option.text = sub.name;
                    subAreaSelect.appendChild(option);
                });
            });
    });
})();


function processNIC() {
    const nic = document.getElementById('nic-column').value;
    const genderField = document.getElementById('gender-column');
    const dobField = document.getElementById('dob-column');

    genderField.value = "";
    dobField.value = "";

    const nicLength = nic.length;
    let birthYear, birthMonth, birthDay, gender;

    if (nicLength === 10 && /[VXvx]$/.test(nic)) {
        birthYear = "19" + nic.substring(0, 2);
        let days = parseInt(nic.substring(2, 5), 10);
        gender = days > 500 ? "Female" : "Male";
        if (days > 500) days -= 500;
        [birthMonth, birthDay] = calculateBirthDate(days);
    } else if (nicLength === 12) {
        birthYear = nic.substring(0, 4);
        let days = parseInt(nic.substring(4, 7), 10);
        gender = days > 500 ? "Female" : "Male";
        if (days > 500) days -= 500;
        [birthMonth, birthDay] = calculateBirthDate(days);
    } else {
        return;
    }

    const dob = `${birthYear}-${String(birthMonth).padStart(2, '0')}-${String(birthDay).padStart(2, '0')}`;
    genderField.value = gender;
    dobField.value = dob;
}

function calculateBirthDate(days) {
    const monthDays = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    let month = 0;
    while (days > monthDays[month]) {
        days -= monthDays[month];
        month++;
    }
    return [month + 1, days];
}

function submitMemberForm() {
    const form = document.getElementById('memberForm');

    Swal.fire({
        title: 'Create Member?',
        text: 'Are you sure you want to create this member?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Yes, create it!',
    }).then((result) => {
        if (result.isConfirmed) {
            const formData = new FormData(form);

            fetch('/api/members/create', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    Swal.fire('Success', 'Member created successfully!', 'success')
                .then(() => {
                    location.reload(); // 🔁 Reloads the full page
                });
                } else {
                    Swal.fire('Error', data.message || 'Something went wrong!', 'error');
                }
            })
            .catch(() => Swal.fire('Error', 'Server error occurred.', 'error'));
        }
    });
}

</script>

<script>
    $(document).on('click', '.view-member-btn', function () {
        const memberNumber = $(this).data('number');
        const fullName = $(this).data('name');
        const nic = $(this).data('nic');
        const phone = $(this).data('phone');
        const email = $(this).data('email');
        const address = $(this).data('address');
        const dob = $(this).data('dob');
        const gender = $(this).data('gender');
        const status = $(this).data('status');
        const areaId = $(this).data('area-id');
        const subareaId = $(this).data('subarea-id');
        const docLink = $(this).data('doc');

        // Populate basic fields
        $('#view_member_number').val(memberNumber);
        $('#view_member_name').val(fullName);
        $('#view_member_nic').val(nic);
        $('#view_member_phone').val(phone);
        $('#view_member_email').val(email);
        $('#view_member_address').val(address);
        $('#view_member_dob').val(dob);
        $('#view_member_gender').val(gender);
        $('#view_member_status').prop('checked', status == 1);

        // Populate area
        const areaSelect = $('#view_member_area');
        areaSelect.prop('disabled', false); // temporarily enable
        fetch('/api/areas')
            .then(res => res.json())
            .then(areas => {
                areaSelect.empty().append(`<option disabled>Select Area</option>`);
                areas.forEach(area => {
                    areaSelect.append(`<option value="${area.id}">${area.name}</option>`);
                });
                areaSelect.val(areaId); // set selected
                areaSelect.prop('disabled', true); // disable again
            });

        // Populate subarea
        const subareaSelect = $('#view_member_subarea');
        subareaSelect.prop('disabled', false); // temporarily enable
        
        fetch(`/api/sub-areas`)
        .then(res => res.json())
        .then(subs => {
            subareaSelect.empty().append(`<option disabled>Select Sub Area</option>`);
            subs.forEach(sub => {
                subareaSelect.append(`<option value="${sub.id}">${sub.name}</option>`);
            });

            // Select correct subarea
            setTimeout(() => {
                subareaSelect.val(String(subareaId)).trigger('change');
                subareaSelect.prop('disabled', true);
            }, 0);
        });


        // Show NIC Document
        const docContainer = $('#nic_doc_container');
        docContainer.empty();

        if (docLink && docLink !== 'null') {
            const fullUrl = docLink; // ✅ FIXED LINE
            docContainer.append(`
                <a href="${fullUrl}" target="_blank">
                    <img src="${fullUrl}" style="max-height:120px;" class="img-fluid rounded shadow-sm" />
                </a>
            `);
        }


        // Show modal
        const modal = new bootstrap.Modal(document.getElementById('memberviewmodule'));
        modal.show();
    });
</script>


<script>
    // Assuming you have this data embedded or fetched dynamically
    const allAreas = {}; // Format: { subarea_id: { area_id: 1, area_name: "ABC", subarea_name: "XYZ" } }


    // This should be triggered when a view button is clicked
    function showMemberViewModal(member) {
        document.getElementById('view_member_number').value = member.member_number;
        document.getElementById('view_member_name').value = member.member_full_name;
        document.getElementById('view_member_address').value = member.member_address;
        document.getElementById('view_member_nic').value = member.member_nic;
        document.getElementById('view_member_dob').value = member.member_dob;
        document.getElementById('view_member_gender').value = member.member_gender;
        document.getElementById('view_member_phone').value = member.member_phone_number;
        document.getElementById('view_member_email').value = member.member_email;
        document.getElementById('view_member_status').checked = (member.record_active_status == 1);

        populateAreaDropdowns(member.area_id, member.subarea_id);

        // Show document if available
        const docInput = document.getElementById('view_member_doc');
        const docWrapper = docInput.parentElement;

        if (member.doc_link && member.doc_link !== ' ') {
            const preview = `<a href="${member.doc_link}" target="_blank"><img src="${member.doc_link}" style="max-height:100px;" class="mt-2"/></a>`;
            docWrapper.insertAdjacentHTML('beforeend', preview);
        }

        const modal = new bootstrap.Modal(document.getElementById('memberviewmodule'));
        modal.show();
    }

</script>

<script>

    $(document).on('click', '.edit-member-btn', function () {


        $('#edit_area_id').off('change').on('change', function () {
            const selectedAreaId = $(this).val();
            fetch(`/api/areas/${selectedAreaId}/sub-areas`)
                .then(res => res.json())
                .then(subs => {
                    const subSelect = $('#edit_sub_area_id');
                    subSelect.empty().append('<option disabled>Select Sub Area</option>');
                    subs.forEach(sub => {
                        subSelect.append(`<option value="${sub.id}">${sub.name}</option>`);
                    });
                });
        });

    const memberId = $(this).data('id');
    const memberNumber = $(this).data('number');
    const fullName = $(this).data('name');
    const nic = $(this).data('nic');
    const phone = $(this).data('phone');
    const email = $(this).data('email');
    const address = $(this).data('address');
    const dob = $(this).data('dob');
    const gender = $(this).data('gender');
    const status = $(this).data('status');
    const areaId = $(this).data('area-id');
    const subareaId = $(this).data('subarea-id');
    const docLink = $(this).data('doc');

    $('#edit_member_id').val(memberId);
    $('#edit_member_number').val(memberNumber);
    $('#edit_member_name').val(fullName);
    $('#edit_member_nic').val(nic);
    $('#edit_member_phone').val(phone);
    $('#edit_member_email').val(email);
    $('#edit_member_address').val(address);
    $('#edit_member_dob').val(dob);
    $('#edit_member_gender').val(gender);
    $('#edit_member_status').prop('checked', status == 1);

    // Show current document
    const docContainer = $('#edit_nic_doc_preview');
    docContainer.empty();
    if (docLink && docLink !== 'null') {
        docContainer.append(`
            <a href="${docLink}" target="_blank">
                <img src="${docLink}" style="max-height:100px;" class="img-fluid rounded shadow-sm" />
            </a>
        `);
    }

    // Populate Area Dropdown
    fetch('/api/areas')
    .then(res => res.json())
    .then(areas => {
        const areaSelect = $('#edit_area_id');
        areaSelect.empty().append('<option disabled>Select Area</option>');
        areas.forEach(area => {
            areaSelect.append(`<option value="${area.id}">${area.name}</option>`);
        });
        areaSelect.val(areaId); // preselect
    });

    // Populate Sub Area Dropdown
    fetch(`/api/areas/${areaId}/sub-areas`)
    .then(res => res.json())
    .then(subs => {
        const subSelect = $('#edit_sub_area_id');
        subSelect.empty().append('<option disabled>Select Sub Area</option>');
        subs.forEach(sub => {
            subSelect.append(`<option value="${sub.id}">${sub.name}</option>`);
        });
        subSelect.val(subareaId); // preselect
    });


    const modal = new bootstrap.Modal(document.getElementById('membereditmodule'));
    modal.show();
});


</script>


<script>
    function submitMemberUpdateForm() {
    const form = document.getElementById('editMemberForm');
    const formData = new FormData(form);

    Swal.fire({
        title: 'Update Member?',
        text: 'Confirm to update the member details?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Yes, update it!'
    }).then((result) => {
        if (result.isConfirmed) {
            fetch('/api/memberupdate', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    Swal.fire('Success', 'Member updated successfully!', 'success')
                        .then(() => location.reload());
                } else {
                    Swal.fire('Error', data.message || 'Update failed.', 'error');
                }
            })
            .catch(() => Swal.fire('Error', 'Server error occurred.', 'error'));
        }
    });
}

</script>


<script>
    document.getElementById('edit_member_nic').addEventListener('input', function () {
    const nic = this.value;
    const genderField = document.getElementById('edit_member_gender');
    const dobField = document.getElementById('edit_member_dob');

    genderField.value = "";
    dobField.value = "";

    let birthYear, birthMonth, birthDay, gender;
    const nicLength = nic.length;

    if (nicLength === 10 && /[VXvx]$/.test(nic)) {
        birthYear = "19" + nic.substring(0, 2);
        let days = parseInt(nic.substring(2, 5), 10);
        gender = days > 500 ? "Female" : "Male";
        if (days > 500) days -= 500;
        [birthMonth, birthDay] = calculateBirthDate(days);
    } else if (nicLength === 12) {
        birthYear = nic.substring(0, 4);
        let days = parseInt(nic.substring(4, 7), 10);
        gender = days > 500 ? "Female" : "Male";
        if (days > 500) days -= 500;
        [birthMonth, birthDay] = calculateBirthDate(days);
    } else {
        return;
    }

    const dob = `${birthYear}-${String(birthMonth).padStart(2, '0')}-${String(birthDay).padStart(2, '0')}`;
    genderField.value = gender;
    dobField.value = dob;
});

</script>
@endsection