@extends('layouts.dashboard')

@section('title', 'BNI Admin Dashboard')

@section('header-title', 'Regional Overview')

@section('content')
<div class="mt-8">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <!-- Top Performing Chapters -->
        <div class="mt-8">
            <!-- Search Bar -->
            <div class="mb-6">
                <form method="GET" action="{{ route('members') }}" class="flex gap-4">
                    <input type="text" name="search" value="{{ $search ?? '' }}"
                        placeholder="Search visitors..."
                        class="w-64 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#CF2030] focus:border-transparent">
                    <button type="submit" class="px-6 py-2 bg-[#CF2030] text-white font-medium rounded-lg hover:bg-[#a81a27] transition-colors">
                        Search
                    </button>
                    @if($search)
                    <a href="{{ route('members') }}" class="px-6 py-2 bg-gray-500 text-white font-medium rounded-lg hover:bg-gray-600 transition-colors">
                        Clear
                    </a>
                    @endif
                </form>
            </div>

            <div class="flex items-center justify-between">
                <h2 class="text-lg font-bold leading-6 text-gray-900 uppercase tracking-wider">Top Performing Chapters</h2>
                <button onclick="openMemberModal()" class="text-sm font-semibold text-bni-red hover:text-red-800 cursor-pointer">Add Member</button>
            </div>
            <div class="mt-4 overflow-x-auto shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
                <table class="min-w-full divide-y divide-gray-300 text-xs">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="py-2 pl-3 pr-2 text-left text-xs font-semibold text-gray-900 sm:pl-4">ID</th>
                            <th class="py-2 pl-3 pr-2 text-left text-xs font-semibold text-gray-900 sm:pl-4">Member Name</th>
                            <th class="px-2 py-2 text-left text-xs font-semibold text-gray-900">Mobile</th>
                            <th class="px-2 py-2 text-left text-xs font-semibold text-gray-900">Email</th>
                            <th class="px-2 py-2 text-left text-xs font-semibold text-gray-900">Category</th>
                            <th class="px-2 py-2 text-left text-xs font-semibold text-gray-900">Payment</th>
                            <th class="px-2 py-2 text-left text-xs font-semibold text-gray-900">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 bg-white">
                        @forelse($members as $member)
                        <tr>
                            <td class="whitespace-nowrap py-2 pl-3 pr-2 text-xs font-bold sm:pl-4">{{ $member->id }}</td>
                            <td class="whitespace-nowrap py-2 pl-3 pr-2 text-xs font-bold text-[#CF2030] sm:pl-4">{{ $member->name }}</td>
                            <td class="whitespace-nowrap px-2 py-2 text-xs text-gray-500">{{ $member->phone }}</td>
                            <td class="whitespace-nowrap px-2 py-2 text-xs text-gray-500">{{ $member->email }}</td>
                            <td class="whitespace-nowrap px-2 py-2 text-xs text-gray-500">
                                {{ $member->category ? $member->category->name : 'N/A' }}
                            </td>
                            <td class="whitespace-nowrap px-2 py-2 text-xs text-gray-500">
                                {{ $member->expireSchedule ? $member->expireSchedule->meeting_date : 'Unpaid' }}
                            </td>
                            <td class="whitespace-nowrap py-2 pl-3 pr-4 text-right text-xs font-medium sm:pr-4">
                                <!-- Pay Button -->
                                <button class="payButton btn bg-[#CF2030] text-white px-3 py-1 rounded text-xs" data-member-id="{{ $member->id }}">Pay</button>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" class="px-3 py-4 text-center text-xs text-gray-500">
                                @if($search)
                                No visitors found for "{{ $search }}".
                                @else
                                No visitors found.
                                @endif
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            @if($members->hasPages())
            <div class="mt-6 flex items-center justify-between">
                <div class="text-sm text-gray-700">
                    Showing {{ $members->firstItem() }} to {{ $members->lastItem() }} of {{ $members->total() }} results
                    @if($search)
                    for "{{ $search }}"
                    @endif
                </div>
                <div class="flex gap-2">
                    {{ $members->links() }}
                </div>
            </div>
            @endif
        </div>

    </div>
</div>
@endsection

@push('scripts')
<script>
    // Show the payment modal (popup)
    document.addEventListener('DOMContentLoaded', function() {
        const payButtons = document.querySelectorAll('.payButton');
        payButtons.forEach(button => {
            button.addEventListener('click', function() {
                const memberId = this.getAttribute('data-member-id');
                document.getElementById('member_id').value = memberId;
                document.getElementById("paymentModal").classList.remove("hidden");
            });
        });
    });

    // Close the payment modal
    function closePaymentModal() {
        document.getElementById("paymentModal").classList.add("hidden");
    }

    // Close modal when clicking outside the modal area
    window.onclick = function(event) {
        const paymentModal = document.getElementById('paymentModal');
        const memberModal = document.getElementById('memberModal');
        if (event.target == paymentModal) {
            closePaymentModal();
        }
        if (event.target == memberModal) {
            closeMemberModal();
        }
    }
</script>
<script>
    // Add any member-specific JavaScript here
    document.addEventListener('DOMContentLoaded', function() {
        console.log('Member page loaded');

        const memberForm = document.getElementById('memberForm');
        const memberFormAlert = document.getElementById('memberFormAlert');
        const memberFormAlertText = document.getElementById('memberFormAlertText');
        const memberFormErrors = document.getElementById('memberFormErrors');

        const showAlert = (type, message) => {
            if (!memberFormAlert) return;
            memberFormAlert.classList.remove('hidden');
            memberFormAlert.classList.remove('bg-red-50', 'border-red-200', 'text-red-700', 'bg-green-50', 'border-green-200', 'text-green-700');
            if (type === 'success') {
                memberFormAlert.classList.add('bg-green-50', 'border-green-200', 'text-green-700');
            } else {
                memberFormAlert.classList.add('bg-red-50', 'border-red-200', 'text-red-700');
            }
            if (memberFormAlertText) memberFormAlertText.textContent = message || '';
        };

        const clearErrors = () => {
            if (memberFormErrors) memberFormErrors.innerHTML = '';
            if (memberFormAlert) memberFormAlert.classList.add('hidden');
            if (memberFormAlertText) memberFormAlertText.textContent = '';
        };

        const showErrors = (errors) => {
            if (!memberFormErrors) return;
            memberFormErrors.innerHTML = '';
            Object.keys(errors || {}).forEach((key) => {
                (errors[key] || []).forEach((msg) => {
                    const li = document.createElement('li');
                    li.textContent = msg;
                    memberFormErrors.appendChild(li);
                });
            });
        };

        if (memberForm) {
            memberForm.addEventListener('submit', async function(e) {
                e.preventDefault();
                clearErrors();

                const formData = new FormData(memberForm);

                try {
                    const response = await fetch(memberForm.action, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: formData,
                    });

                    const payload = await response.json().catch(() => ({}));

                    if (!response.ok) {
                        if (response.status === 422) {
                            showAlert('error', 'Please fix the errors below.');
                            showErrors(payload.errors || {});
                            return;
                        }
                        showAlert('error', payload.message || 'Something went wrong.');
                        return;
                    }

                    showAlert('success', payload.message || 'Saved successfully.');
                    memberForm.reset();
                    const referredByHidden = document.getElementById('referred_by');
                    const referredByLabel = document.getElementById('referred-by-label');
                    if (referredByHidden) referredByHidden.value = '';
                    if (referredByLabel) referredByLabel.textContent = 'Select';

                    const paidToHidden = document.getElementById('paid_to');
                    const paidToLabel = document.getElementById('paid-to-label');
                    if (paidToHidden) paidToHidden.value = '';
                    if (paidToLabel) paidToLabel.textContent = 'Select';

                    setTimeout(() => {
                        closeMemberModal();
                        window.location.reload();
                    }, 700);
                } catch (err) {
                    showAlert('error', 'Network error. Please try again.');
                }
            });
        }

        // const referredByButton = document.getElementById('referred-by-button');
        // const referredByMenu = document.getElementById('referred-by-menu');
        // const referredBySearch = document.getElementById('referred-by-search');
        // const referredByHidden = document.getElementById('referred_by');

        // const paidToButton = document.getElementById('paid-to-button');
        // const paidToMenu = document.getElementById('paid-to-menu');
        // const paidToSearch = document.getElementById('paid-to-search');
        // const paidToHidden = document.getElementById('paid_to');

        // function setReferredBy(value, text) {
        //     if (referredByHidden) referredByHidden.value = value || '';
        //     const label = document.getElementById('referred-by-label');
        //     if (label) label.textContent = text || 'Select';
        // }

        // function setPaidTo(value, text) {
        //     if (paidToHidden) paidToHidden.value = value || '';
        //     const label = document.getElementById('paid-to-label');
        //     if (label) label.textContent = text || 'Select';
        // }

        // function openReferredByMenu() {
        //     if (!referredByMenu) return;
        //     referredByMenu.classList.remove('hidden');
        //     if (referredBySearch) {
        //         referredBySearch.value = '';
        //         filterReferredByItems('');
        //         referredBySearch.focus();
        //     }
        // }

        // function closeReferredByMenu() {
        //     if (!referredByMenu) return;
        //     referredByMenu.classList.add('hidden');
        // }

        // function toggleReferredByMenu() {
        //     if (!referredByMenu) return;
        //     if (referredByMenu.classList.contains('hidden')) openReferredByMenu();
        //     else closeReferredByMenu();
        // }

        // function filterReferredByItems(query) {
        //     if (!referredByMenu) return;
        //     const q = (query || '').toLowerCase();
        //     const items = referredByMenu.querySelectorAll('[data-referred-by-item]');
        //     items.forEach((item) => {
        //         const text = (item.getAttribute('data-text') || '').toLowerCase();
        //         item.classList.toggle('hidden', q !== '' && !text.includes(q));
        //     });
        // }

        // function openPaidToMenu() {
        //     if (!paidToMenu) return;
        //     paidToMenu.classList.remove('hidden');
        //     if (paidToSearch) {
        //         paidToSearch.value = '';
        //         filterPaidToItems('');
        //         paidToSearch.focus();
        //     }
        // }

        // function closePaidToMenu() {
        //     if (!paidToMenu) return;
        //     paidToMenu.classList.add('hidden');
        // }

        // function togglePaidToMenu() {
        //     if (!paidToMenu) return;
        //     if (paidToMenu.classList.contains('hidden')) openPaidToMenu();
        //     else closePaidToMenu();
        // }

        // function filterPaidToItems(query) {
        //     if (!paidToMenu) return;
        //     const q = (query || '').toLowerCase();
        //     const items = paidToMenu.querySelectorAll('[data-paid-to-item]');
        //     items.forEach((item) => {
        //         const text = (item.getAttribute('data-text') || '').toLowerCase();
        //         item.classList.toggle('hidden', q !== '' && !text.includes(q));
        //     });
        // }

        // if (referredByButton && referredByMenu) {
        //     referredByButton.addEventListener('click', function(e) {
        //         e.preventDefault();
        //         e.stopPropagation();
        //         toggleReferredByMenu();
        //     });

        //     referredByMenu.addEventListener('click', function(e) {
        //         const item = e.target.closest('[data-referred-by-item]');
        //         if (!item) return;
        //         e.preventDefault();
        //         const value = item.getAttribute('data-value');
        //         const text = item.getAttribute('data-text');
        //         setReferredBy(value, text);
        //         closeReferredByMenu();
        //     });

        //     if (referredBySearch) {
        //         referredBySearch.addEventListener('click', function(e) {
        //             e.stopPropagation();
        //         });
        //         referredBySearch.addEventListener('input', function() {
        //             filterReferredByItems(this.value);
        //         });
        //     }

        //     document.addEventListener('click', function(e) {
        //         if (referredByMenu.classList.contains('hidden')) return;
        //         if (referredByButton.contains(e.target)) return;
        //         if (referredByMenu.contains(e.target)) return;
        //         closeReferredByMenu();
        //     });

        //     document.addEventListener('keydown', function(e) {
        //         if (e.key === 'Escape') closeReferredByMenu();
        //     });
        // }

        // if (paidToButton && paidToMenu) {
        //     paidToButton.addEventListener('click', function(e) {
        //         e.preventDefault();
        //         e.stopPropagation();
        //         togglePaidToMenu();
        //     });

        //     paidToMenu.addEventListener('click', function(e) {
        //         const item = e.target.closest('[data-paid-to-item]');
        //         if (!item) return;
        //         e.preventDefault();
        //         const value = item.getAttribute('data-value');
        //         const text = item.getAttribute('data-text');
        //         setPaidTo(value, text);
        //         closePaidToMenu();
        //     });

        //     if (paidToSearch) {
        //         paidToSearch.addEventListener('click', function(e) {
        //             e.stopPropagation();
        //         });
        //         paidToSearch.addEventListener('input', function() {
        //             filterPaidToItems(this.value);
        //         });
        //     }

        //     document.addEventListener('click', function(e) {
        //         if (paidToMenu.classList.contains('hidden')) return;
        //         if (paidToButton.contains(e.target)) return;
        //         if (paidToMenu.contains(e.target)) return;
        //         closePaidToMenu();
        //     });

        //     document.addEventListener('keydown', function(e) {
        //         if (e.key === 'Escape') closePaidToMenu();
        //     });
        // }
    });

    function openMemberModal() {
        document.getElementById('memberModal').style.display = 'block';
    }

    function closeMemberModal() {
        document.getElementById('memberModal').style.display = 'none';
    }

    // Close modal when clicking outside
    window.onclick = function(event) {
        const modal = document.getElementById('memberModal');
        if (event.target == modal) {
            closeMemberModal();
        }
    }

    // function handlePaymentDurationChange() {
    //     const duration = document.getElementById('membership_duration').value;
    //     const paymentMode = document.getElementById('payment_mode');
    //     const upiOption = paymentMode.querySelector('option[value="upi"]');

    //     if (duration === '1') {
    //         // Show UPI option only for 1 month
    //         upiOption.style.display = 'block';
    //     } else {
    //         // Hide UPI option for other durations
    //         upiOption.style.display = 'none';
    //         // If UPI was selected, reset to empty
    //         if (paymentMode.value === 'upi') {
    //             paymentMode.value = '';
    //             handlePaymentModeChange(); // Disable UPI fields
    //         }
    //     }
    // }

    // function handlePaymentModeChange() {
    //     const paymentMode = document.getElementById('payment_mode').value;
    //     const upiNumber = document.getElementById('upi_number');
    //     const upiTransactionId = document.getElementById('upi_transaction_id');

    //     if (paymentMode === 'upi') {
    //         upiNumber.disabled = false;
    //         upiTransactionId.disabled = false;
    //     } else {
    //         upiNumber.value = '';
    //         upiTransactionId.value = '';
    //         upiNumber.disabled = true;
    //         upiTransactionId.disabled = true;
    //     }
    // }

    // Initialize UPI fields to be disabled on page load
    // document.addEventListener('DOMContentLoaded', function() {
    //     handlePaymentDurationChange();
    //     handlePaymentModeChange();

    //     const pricePerMonth = 6600;

    //     document.getElementById('membership_duration').addEventListener('change', calculate);
    //     document.getElementById('start_date').addEventListener('change', calculate);

    //     function calculate() {

    //         let months = document.getElementById('membership_duration').value;
    //         let startDate = document.getElementById('start_date').value;

    //         // Amount auto
    //         if (months) {
    //             document.querySelector('[name="paid_amount"]').value = months * pricePerMonth;
    //         }

    //         // Expiry date auto
    //         if (months && startDate) {
    //             let date = new Date(startDate);
    //             date.setMonth(date.getMonth() + parseInt(months));

    //             // Reduce 1 day
    //             date.setDate(date.getDate() - 1);

    //             let expiry = date.toISOString().split('T')[0];
    //             document.getElementById('expiry_date').value = expiry;
    //         }
    //     }
    // });
</script>
@endpush

<!-- Payment Modal (Popup) -->
<div id="paymentModal" class="fixed inset-0 z-50 hidden bg-gray-900 bg-opacity-75 backdrop-blur-sm">
    <div class="relative flex w-full max-w-lg flex-col bg-white rounded-xl p-6 mx-auto mt-32">

        <!-- Close Button -->
        <button onclick="closePaymentModal()" class="absolute top-4 right-4 text-gray-600">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>

        <!-- Modal Header -->
        <h3 class="text-xl font-bold text-gray-900 mb-4">Proceed with Payment</h3>

        <!-- Payment Form -->
        <form action="/payment" method="POST">
            @csrf
            <input type="hidden" name="member_id" id="member_id" value="">

            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-sm font-semibold text-gray-700">Payment Duration</label>
                    <select name="payment_duration" class="mt-1 block w-full p-2 border rounded-md">
                        <option value="">Select Duration</option>
                        <option value="1">1 Month</option>
                        <option value="3">3 Months</option>
                        <option value="6">6 Months</option>
                        <option value="12">1 Year</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700">Payment From</label>
                    <select name="payment_from" class="mt-1 block w-full p-2 border rounded-md">
                       <!-- Add renewal data  -->
                    </select>
                </div>



                <div>
                    <label class="block text-sm font-semibold text-gray-700">Payment End Month</label>
                    <input type="text" name="payment_end_month" value="" readonly
                        class="mt-1 block w-full px-2 py-1 border rounded-md">
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700">Amount to Pay</label>
                    <input type="text" name="amount" id="amountToPay" placeholder="Amount to Pay" class="mt-1 block w-full px-2 py-1 border rounded-md" readonly>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700">Payment Method</label>
                    <select name="payment_method" class="mt-1 block w-full p-2 border rounded-md">
                        <option value="">Select Payment Method</option>
                        <option value="cash">Cash</option>
                        <option value="card">Card</option>
                        <option value="upi">UPI</option>
                    </select>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700">UPI Number</label>
                    <input type="text" name="upi_number" class="mt-1 block w-full px-2 py-1 border rounded-md" placeholder="Enter UPI number">
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700">UPI Transection ID</label>
                    <input type="text" name="upi_transaction_id" class="mt-1 block w-full px-2 py-1 border rounded-md" placeholder="Enter UPI transaction ID">
                </div>

            </div>

            <div class="mt-6 flex items-center justify-end gap-x-4 border-t border-gray-100 pt-4">
                <button type="button" onclick="closePaymentModal()" class="text-sm font-semibold leading-6 text-gray-900 hover:text-gray-600 transition">
                    Cancel
                </button>
                <input type="submit" class="rounded-lg bg-[#CF2030] px-6 py-2 text-sm font-bold text-white shadow-md hover:bg-red-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#CF2030] transition-all transform active:scale-95" value="Proceed to Pay">
            </div>
        </form>
    </div>
</div>


<div id="memberModal"
    x-show="true"
    class="fixed inset-0 z-50 overflow-y-auto"
    style="display: none;"
    aria-labelledby="modal-title" role="dialog" aria-modal="true">

    <div class="fixed inset-0 bg-gray-900 bg-opacity-75 transition-opacity backdrop-blur-sm"></div>

    <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
        <div class="relative transform overflow-hidden rounded-xl bg-white text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-2xl border-t-8 border-[#CF2030] max-h-[90vh] flex flex-col">

            <div class="bg-white px-6 py-4 border-b border-gray-100 flex items-center justify-between">
                <div>
                    <h3 class="text-xl font-bold text-gray-900" id="modal-title">Add New Member</h3>
                    <p class="text-sm text-gray-500">Register a new member for the organization.</p>
                </div>
                <button onclick="closeMemberModal()" class="text-gray-400 hover:text-gray-600 transition-colors">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>

            <form id="memberForm" class="bg-white px-6 py-4 overflow-y-auto" style="max-height: calc(90vh - 86px);" action="{{ route('visitors.store') }}" method="POST">
                @csrf

                <div id="memberFormAlert" class="hidden mb-4 rounded-lg border px-4 py-3 text-sm">
                    <div id="memberFormAlertText"></div>
                    <ul id="memberFormErrors" class="mt-2 list-disc pl-5"></ul>
                </div>

                <div class="grid grid-cols-1 gap-x-4 gap-y-3 sm:grid-cols-3">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700">Member Name <span class="text-red-500">*</span></label>
                        <input type="text" name="name" required
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#CF2030] focus:ring-[#CF2030] sm:text-sm p-2 border"
                            placeholder="e.g. Jane Smith">
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700">Email Address <span class="text-red-500">*</span></label>
                        <input type="email" name="email" required
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#CF2030] focus:ring-[#CF2030] sm:text-sm p-2 border"
                            placeholder="jane@company.com">
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700">Phone Number <span class="text-red-500">*</span></label>
                        <input type="tel" name="phone" required
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#CF2030] focus:ring-[#CF2030] sm:text-sm p-2 border"
                            placeholder="+91 99999 99999">
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700">Company Name</label>
                        <input type="text" name="company"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#CF2030] focus:ring-[#CF2030] sm:text-sm p-2 border"
                            placeholder="Business Ltd.">
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700">
                            Category <span class="text-red-500">*</span>
                        </label>
                        <select name="category" id="category"
                            class="mt-1 block w-full p-2 border rounded-md" required>
                            <option value="">Select Category</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <!-- <div>
                        <label class="block text-sm font-semibold text-gray-700">
                            Membership Duration <span class="text-red-500">*</span>
                        </label>
                        <select name="membership_duration" id="membership_duration"
                            class="mt-1 block w-full p-2 border rounded-md" onchange="handlePaymentDurationChange()" required>
                            <option value="">Select</option>
                            <option value="1">1 Month (₹6600)</option>
                            <option value="3">3 Months (₹19800)</option>
                            <option value="6">6 Months (₹39600)</option>
                            <option value="12">1 Year (₹79200)</option>
                        </select>
                    </div> -->

                    <!-- <div>
                        <label class="block text-sm font-semibold text-gray-700">
                            Membership Start Date <span class="text-red-500">*</span>
                        </label>
                        <input type="date" name="start_date" id="start_date"
                            class="mt-1 block w-full p-2 border rounded-md" required>
                    </div> -->

                    <!-- <div>
                        <label class="block text-sm font-semibold text-gray-700">
                            Expiry Date
                        </label>
                        <input type="text" name="expiry_date" id="expiry_date"
                            class="mt-1 block w-full p-2 border rounded-md bg-gray-100"
                            readonly placeholder="Auto calculated">
                    </div> -->

                    <!-- <div>
                        <label class="block text-sm font-semibold text-gray-700">Paid Amount <span class="text-red-500">*</span></label>
                        <input type="number" name="paid_amount" step="0.01" min="0"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#CF2030] focus:ring-[#CF2030] sm:text-sm p-2 border"
                            placeholder="0.00" required>
                    </div> -->

                    <!-- <div>
                        <label class="block text-sm font-semibold text-gray-700">Paid To</label>
                        <input type="hidden" name="paid_to" id="paid_to" value="">

                        <div class="relative mt-1">
                            <button id="paid-to-button" type="button"
                                class="inline-flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-700 shadow-sm focus:outline-none focus:ring-2 focus:ring-[#CF2030]">
                                <span id="paid-to-label" class="truncate">Select</span>
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M6.293 9.293a1 1 0 011.414 0L10 11.586l2.293-2.293a1 1 0 111.414 1.414l-3 3a1 0 01-1.414 0l-3-3a1 1 010-1.414z" clip-rule="evenodd" />
                                </svg>
                            </button>

                            <div id="paid-to-menu"
                                class="hidden absolute left-0 right-0 z-50 mt-2 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 px-2 py-1 space-y-1">
                                <input id="paid-to-search"
                                    class="block w-full px-3 py-1 text-gray-800 border rounded-md border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#CF2030]"
                                    type="text" placeholder="Search" autocomplete="off">

                                <div class="max-h-56 overflow-y-auto">
                                    @foreach($members as $member)
                                    <a href="#" data-paid-to-item data-value="{{ $member->id }}" data-text="{{ $member->name }}"
                                        class="block px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 active:bg-red-100 cursor-pointer rounded-md">
                                        {{ $member->name }}
                                    </a>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div> -->

                    <!-- <div>
                        <label class="block text-sm font-semibold text-gray-700">Payment Mode <span class="text-red-500">*</span></label>
                        <select name="payment_mode" id="payment_mode"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#CF2030] focus:ring-[#CF2030] sm:text-sm p-2 border" onchange="handlePaymentModeChange()" required>
                            <option value="">Select</option>
                            <option value="cash">Cash</option>
                            <option value="card">Card</option>
                            <option value="upi">UPI</option>
                        </select>
                    </div> -->

                    <!-- <div>
                        <label class="block text-sm font-semibold text-gray-700">UPI Number</label>
                        <input type="tel" name="upi_number" id="upi_number"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#CF2030] focus:ring-[#CF2030] sm:text-sm p-2 border"
                            placeholder="+91 99999 99999">
                    </div> -->

                    <!-- <div>
                        <label class="block text-sm font-semibold text-gray-700">UPI Transaction ID</label>
                        <input type="text" name="upi_transaction_id" id="upi_transaction_id"
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-[#CF2030] focus:ring-[#CF2030] sm:text-sm p-2 border"
                            placeholder="Enter transaction ID">
                    </div> -->
                </div>

                <div class="mt-6 flex items-center justify-end gap-x-4 border-t border-gray-100 pt-4">
                    <button type="button" onclick="closeMemberModal()"
                        class="text-sm font-semibold leading-6 text-gray-900 hover:text-gray-600 transition">
                        Cancel
                    </button>
                    <input type="submit"
                        class="rounded-lg bg-[#CF2030] px-6 py-2 text-sm font-bold text-white shadow-md hover:bg-red-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#CF2030] transition-all transform active:scale-95"
                        value="Save Member Record">
                </div>
                <input type="hidden" name="status" value="paid">
            </form>
        </div>
    </div>
</div>

<style>
    .modal {
        font-family: Arial, sans-serif;
    }

    .form-control:focus {
        outline: none;
        border-color: #2f6fed;
        box-shadow: 0 0 0 2px rgba(47, 111, 237, 0.1);
    }

    .modal-header h3 {
        color: #333;
    }

    label {
        color: #555;
    }

    button[type="submit"]:hover {
        background: #1e5dd6;
    }

    input:disabled {
        background-color: #f3f4f6;
        cursor: not-allowed;
        opacity: 0.6;
    }

    /* button[type="button"]:hover {
        background: #5a6268;
    } */

    /* Modal Styles */
    #paymentModal {
        font-family: Arial, sans-serif;
    }

    .modal-header h3 {
        color: #333;
    }

    label {
        color: #555;
    }
</style>