@extends('layouts.dashboard')

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

@section('header-title', 'Visitors Management')

@section('content')
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="mt-8">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">

        <!-- Statistics Cards -->
        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
            <div class="overflow-hidden rounded-lg bg-white px-3 py-3 shadow-sm border border-gray-100 transition hover:shadow-md">
                <dt class="truncate text-xs font-medium text-gray-500">Total Visitors</dt>
                <dd class="mt-1 text-xl font-bold tracking-tight text-[#CF2030]">{{ $totalVisitors }}</dd>
                <!-- <div class="mt-1 text-xs text-green-600 font-semibold">↑ 12% from last month</div> -->
            </div>
            <div class="overflow-hidden rounded-lg bg-white px-3 py-3 shadow-sm border border-gray-100 transition hover:shadow-md">
                <dt class="truncate text-xs font-medium text-gray-500">Total Paid Amount</dt>
                <dd class="mt-1 text-xl font-bold tracking-tight text-gray-900">{{ $totalPaidAmount }}</dd>
                <!-- <div class="mt-1 text-xs text-green-600 font-semibold">Total TYFCB: $1.2M</div> -->
            </div>
            <div class="overflow-hidden rounded-lg bg-white px-3 py-3 shadow-sm border border-gray-100 transition hover:shadow-md">
                <dt class="truncate text-xs font-medium text-gray-500">Paid By Visitors</dt>
                <dd class="mt-1 text-xl font-bold tracking-tight text-gray-900">{{ $paidByVisitor }}</dd>
                <!-- <div class="mt-1 text-xs text-gray-500 italic">Across all regions</div> -->
            </div>
            <div class="overflow-hidden rounded-lg bg-white px-3 py-3 shadow-sm border border-gray-100 transition hover:shadow-md">
                <dt class="truncate text-xs font-medium text-gray-500">Paid by Member</dt>
                <dd class="mt-1 text-xl font-bold tracking-tight text-gray-900">{{ $paidByMember }}</dd>
                <!-- <div class="mt-1 text-xs text-blue-600 font-semibold underline cursor-pointer">View Details</div> -->
            </div>
        </div>

        <!-- Top Performing Chapters -->
        <div class="mt-8">
            <!-- Search Bar -->
            <div class="mb-6">
                <form method="GET" action="{{ route('visitors') }}" 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('visitors') }}" 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">Visitors List</h2>
                <button onclick="openVisitorModal()" class="text-sm font-semibold text-bni-red hover:text-red-800 cursor-pointer">Add Visitor</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" hidden>ID</th>
                            <th class="py-2 pl-3 pr-2 text-left text-xs font-semibold text-gray-900 sm:pl-4">Visitor 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">Company</th>
                            <th class="px-2 py-2 text-left text-xs font-semibold text-gray-900">Paid Amount</th>
                            <th class="px-2 py-2 text-left text-xs font-semibold text-gray-900">Paid By</th>
                            <th class="px-2 py-2 text-left text-xs font-semibold text-gray-900">Paid To</th>
                            <th class="py-2 pl-3 pr-2 text-left text-xs font-semibold text-gray-900 sm:pl-4">Meeting</th>
                            <th class="px-2 py-2 text-left text-xs font-semibold text-gray-900">Payment Mode</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 bg-white">
                        @forelse($visitors as $visitor)
                        <tr>
                            <td class="whitespace-nowrap py-2 pl-3 pr-2 text-xs font-bold sm:pl-4" hidden>{{ $visitor->id }}</td>
                            <td class="whitespace-nowrap py-2 pl-3 pr-2 text-xs font-bold text-[#CF2030] sm:pl-4">{{ $visitor->name }}</td>
                            <td class="whitespace-nowrap px-2 py-2 text-xs text-gray-500">{{ $visitor->phone }}</td>
                            <td class="whitespace-nowrap px-2 py-2 text-xs text-gray-500">{{ $visitor->company }}</td>
                            <td class="whitespace-nowrap px-2 py-2 text-xs text-gray-500">{{ $visitor->amount }}</td>
                            <td class="whitespace-nowrap px-2 py-2 text-xs text-gray-500">{{ $visitor->paid_by }}</td>

                            <td class="whitespace-nowrap px-2 py-2 text-xs text-gray-500">{{ $visitor->referred_by_name }}</td>
                            <td class="whitespace-nowrap py-2 pl-3 pr-2 text-xs font-bold text-green-600 sm:pl-4">{{ $visitor->meeting_id }}</td>
                            @if($visitor->payment_mode == 'ytc')
                            <!-- Collect button here -->
                            <td class="whitespace-nowrap px-2 py-2 text-xs text-gray-500">
                                <button class="collect-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded" data-visitor-id="{{ $visitor->id }}">
                                    Collect
                                </button>
                            </td>
                            @else
                            <td class="whitespace-nowrap px-2 py-2 text-xs text-gray-500">{{ $visitor->payment_mode }}</td>
                            @endif
                            <!-- <td class="whitespace-nowrap py-2 pl-3 pr-4 text-right text-xs font-medium sm:pr-4 italic">Edit</td> -->
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" 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($visitors->hasPages())
            <div class="mt-6 flex items-center justify-between">
                <div class="text-sm text-gray-700">
                    Showing {{ $visitors->firstItem() }} to {{ $visitors->lastItem() }} of {{ $visitors->total() }} results
                    @if($search)
                    for "{{ $search }}"
                    @endif
                </div>
                <div class="flex gap-2">
                    {{ $visitors->links() }}
                </div>
            </div>
            @endif
        </div>

    </div>
</div>
@endsection

@push('scripts')
<script>
    // Add any visitor-specific JavaScript here
    document.addEventListener('DOMContentLoaded', function() {
        console.log('Visitor page loaded');

        const visitorForm = document.getElementById('visitorForm');
        const visitorFormAlert = document.getElementById('visitorFormAlert');
        const visitorFormAlertText = document.getElementById('visitorFormAlertText');
        const visitorFormErrors = document.getElementById('visitorFormErrors');

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

        const clearErrors = () => {
            if (visitorFormErrors) visitorFormErrors.innerHTML = '';
            if (visitorFormAlert) visitorFormAlert.classList.add('hidden');
            if (visitorFormAlertText) visitorFormAlertText.textContent = '';
        };

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

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

                // Disable submit button and show loading state
                const submitButton = document.getElementById('submit-button');
                submitButton.disabled = true;
                submitButton.value = 'Saving... Please wait';

                const formData = new FormData(visitorForm);

                try {
                    const response = await fetch(visitorForm.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 || {});
                            // Re-enable button on error
                            submitButton.disabled = false;
                            submitButton.value = 'Save Visitor Record';
                            return;
                        }
                        showAlert('error', payload.message || 'Something went wrong.');
                        // Re-enable button on error
                        submitButton.disabled = false;
                        submitButton.value = 'Save Visitor Record';
                        return;
                    }

                    showAlert('success', payload.message || 'Saved successfully.');
                    visitorForm.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(() => {
                        closeVisitorModal();
                        window.location.reload();
                    }, 700);
                } catch (err) {
                    showAlert('error', 'Network error. Please try again.');
                    // Re-enable button on error
                    submitButton.disabled = false;
                    submitButton.value = 'Save Visitor Record';
                }
            });
        }

        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 openVisitorModal() {
        console.log('Opening visitor modal');
        document.getElementById('visitorModal').style.display = 'block';
    }

    function closeVisitorModal() {
        console.log('Closing visitor modal');
        document.getElementById('visitorModal').style.display = 'none';
    }

    function handlePaymentModalModeChange() {
        const paymentMode = document.getElementById('payment_payment_mode').value;
        const upiNumber = document.getElementById('payment_upi_number');
        const upiTransactionId = document.getElementById('payment_upi_transaction_id');

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

    // Initialize payment modal fields to be disabled on page load
    document.addEventListener('DOMContentLoaded', function() {
        handlePaymentModalModeChange();

        // Handle Collect button clicks
        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('collect-btn')) {
                e.preventDefault();
                const visitorId = e.target.getAttribute('data-visitor-id');
                openPaymentModal(visitorId);
            }
        });

        // Handle payment form submission
        const paymentForm = document.getElementById('paymentForm');
        if (paymentForm) {
            paymentForm.addEventListener('submit', async function(e) {
                e.preventDefault();

                const paymentFormAlert = document.getElementById('paymentFormAlert');
                const paymentFormAlertText = document.getElementById('paymentFormAlertText');
                if (paymentFormAlert) paymentFormAlert.classList.add('hidden');
                if (paymentFormAlertText) paymentFormAlertText.textContent = '';

                const formData = new FormData(paymentForm);
                const visitorId = document.getElementById('paymentForm').getAttribute('data-visitor-id');

                try {
                    const response = await fetch(`/visitor/payment/${visitorId}`, {
                        method: 'POST',
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        },
                        body: formData,
                    });

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

                    if (!response.ok) {
                        if (response.status === 422) {
                            if (paymentFormAlert && paymentFormAlertText) {
                                paymentFormAlert.classList.remove('hidden');
                                paymentFormAlert.classList.remove('bg-red-50', 'border-red-200', 'text-red-700', 'bg-green-50', 'border-green-200', 'text-green-700');
                                paymentFormAlert.classList.add('bg-red-50', 'border-red-200', 'text-red-700');
                                paymentFormAlertText.textContent = 'Please fix the errors below.';
                                if (payload.message) paymentFormAlertText.textContent = payload.message;
                            }
                            return;
                        }
                        if (paymentFormAlert && paymentFormAlertText) {
                            paymentFormAlert.classList.remove('hidden');
                            paymentFormAlert.classList.remove('bg-red-50', 'border-red-200', 'text-red-700', 'bg-green-50', 'border-green-200', 'text-green-700');
                            paymentFormAlert.classList.add('bg-red-50', 'border-red-200', 'text-red-700');
                            paymentFormAlertText.textContent = payload.message || 'Something went wrong.';
                        }
                        return;
                    }

                    if (paymentFormAlert && paymentFormAlertText) {
                        paymentFormAlert.classList.remove('hidden');
                        paymentFormAlert.classList.remove('bg-red-50', 'border-red-200', 'text-red-700', 'bg-green-50', 'border-green-200', 'text-green-700');
                        paymentFormAlert.classList.add('bg-green-50', 'border-green-200', 'text-green-700');
                        paymentFormAlertText.textContent = payload.message || 'Payment collected successfully.';
                    }
                    paymentForm.reset();
                    handlePaymentModalModeChange();

                    // setTimeout(() => {
                    //     closePaymentModal();
                    //     window.location.reload();
                    // }, 700);
                    setTimeout(() => {
                        console.log('Reloading...');
                        window.location.reload();
                    }, 700);
                } catch (err) {
                    if (paymentFormAlert && paymentFormAlertText) {
                        paymentFormAlert.classList.remove('hidden');
                        paymentFormAlert.classList.remove('bg-red-50', 'border-red-200', 'text-red-700', 'bg-green-50', 'border-green-200', 'text-green-700');
                        paymentFormAlert.classList.add('bg-red-50', 'border-red-200', 'text-red-700');
                        paymentFormAlertText.textContent = 'Network error. Please try again.';
                    }
                }
            });
        }
    });

    function openPaymentModal(visitorId) {
        document.getElementById('paymentForm').setAttribute('data-visitor-id', visitorId);
        document.getElementById('payment_visitor_id').value = visitorId;
        document.getElementById('paymentModal').style.display = 'block';
    }

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

        const paymentModal = document.getElementById('paymentModal');
        if (event.target == paymentModal) {
            closePaymentModal();
        }
    }

    function handlePaidByChange() {
        const paidBy = document.getElementById('paid_by').value;
        const paymentMode = document.getElementById('payment_mode');
        const ytcOption = paymentMode.querySelector('option[value="ytc"]');

        if (paidBy === 'visitor') {
            // Hide "Yet to Be Collected" option when Paid By is Visitor
            ytcOption.style.display = 'none';
            // If YTC was selected, reset to empty
            if (paymentMode.value === 'ytc') {
                paymentMode.value = '';
            }
        } else {
            // Show "Yet to Be Collected" option when Paid By is Member or empty
            ytcOption.style.display = 'block';
        }
    }

    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() {
        handlePaymentModeChange();
    });

    function handleVisitDateChange() {
        const visitDateInput = document.getElementById('visit_date');
        const meetingIdDisplay = document.getElementById('meeting_id_display');
        const meetingIdHidden = document.getElementById('meeting_id');

        const visitDate = visitDateInput.value;

        if (!visitDate) {
            meetingIdDisplay.textContent = '-';
            meetingIdHidden.value = '';
            return;
        }

        // Show loading state
        meetingIdDisplay.textContent = 'Loading...';
        meetingIdDisplay.classList.add('text-gray-400');

        // Make AJAX call to fetch meeting by date
        fetch(`/api/visitors/meeting-by-date?date=${visitDate}`, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                },
            })
            .then(response => response.json())
            .then(data => {
                meetingIdDisplay.classList.remove('text-gray-400');

                if (data.success) {
                    const meeting = data.data;
                    meetingIdDisplay.textContent = meeting.meeting_id;
                    meetingIdDisplay.classList.add('text-green-700', 'font-bold');
                    meetingIdHidden.value = meeting.meeting_id;
                    // submit button enable
                    const submitButton = document.getElementById('submit-button');
                    submitButton.disabled = false;
                } else {
                    meetingIdDisplay.textContent = 'Not Found';
                    meetingIdDisplay.classList.add('text-red-700');
                    meetingIdHidden.value = '';
                    // submit button disable
                    const submitButton = document.getElementById('submit-button');
                    submitButton.disabled = true;
                }
            })
            .catch(error => {
                console.error('Error fetching meeting:', error);
                meetingIdDisplay.textContent = 'Error';
                meetingIdDisplay.classList.add('text-red-700');
                meetingIdHidden.value = '';
                // submit button disable
                const submitButton = document.getElementById('submit-button');
                submitButton.disabled = true;
            });
    }
</script>
@endpush

<div id="visitorModal"
    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 Visitor</h3>
                    <p class="text-sm text-gray-500">Register a guest for an upcoming chapter meeting.</p>
                </div>
                <button onclick="closeVisitorModal()" 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="visitorForm" 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="visitorFormAlert" class="hidden mb-4 rounded-lg border px-4 py-3 text-sm">
                    <div id="visitorFormAlertText"></div>
                    <ul id="visitorFormErrors" 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">Visitor 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">Visit Date <span class="text-red-500">*</span></label>
                        <input type="date" name="visit_date" id="visit_date" 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"
                            onchange="handleVisitDateChange()">
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700">Meeting ID</label>
                        <div class="mt-1 block w-full rounded-md border-gray-300 shadow-sm sm:text-sm p-2 border bg-gray-50">
                            <span id="meeting_id_display" class="block text-sm text-gray-700 font-semibold min-h-[20px]">-</span>
                        </div>
                        <input type="hidden" name="meeting_id" id="meeting_id" value="">
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700">Referred By</label>
                        <input type="hidden" name="referred_by" id="referred_by" value="">

                        <div class="relative mt-1">
                            <button id="referred-by-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="referred-by-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="referred-by-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 p-1 space-y-1">
                                <input id="referred-by-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 member" autocomplete="off">

                                <div class="max-h-56 overflow-y-auto">
                                    @foreach($members as $member)
                                    <a href="#" data-referred-by-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">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 By <span class="text-red-500">*</span></label>
                        <select name="paid_by" id="paid_by"
                            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="handlePaidByChange()" required>
                            <option value="">Select</option>
                            <option value="visitor">Visitor</option>
                            <option value="member">Member</option>
                        </select>
                    </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 p-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>
                            <option value="ytc">Yet to Be Collected</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="closeVisitorModal()"
                        class="text-sm font-semibold leading-6 text-gray-900 hover:text-gray-600 transition">
                        Cancel
                    </button>
                    <input type="submit" id="submit-button"
                        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 Visitor Record">
                </div>
                <input type="hidden" name="status" value="paid">
            </form>
        </div>
    </div>
</div>

<!-- Payment Collection Modal -->
<div id="paymentModal"
    class="fixed inset-0 z-50 overflow-y-auto"
    style="display: none;"
    aria-labelledby="payment-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-lg border-t-8 border-[#CF2030]">

            <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="payment-modal-title">Collect Payment</h3>
                    <p class="text-sm text-gray-500">Enter payment details for this visitor.</p>
                </div>
                <button onclick="closePaymentModal()" 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="paymentForm" class="bg-white px-6 py-4">
                @csrf
                <input type="hidden" name="visitor_id" id="payment_visitor_id" value="">
                <div id="paymentFormAlert" class="hidden mb-4 rounded-lg border px-4 py-3 text-sm">
                    <div id="paymentFormAlertText"></div>
                </div>

                <div class="grid grid-cols-1 gap-y-4">
                    <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_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="handlePaymentModalModeChange()" 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="payment_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" disabled>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-gray-700">UPI Transaction ID</label>
                        <input type="text" name="upi_transaction_id" id="payment_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" disabled>
                    </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>
                    <button type="submit" id="payment-submit-button"
                        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">
                        Collect Payment
                    </button>
                </div>
            </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;
    } */
</style>