@extends('layouts.dashboard')

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

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

@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">
            <!-- Payment Status 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">Expired Members</dt>
                    <dd class="mt-1 text-xl font-bold tracking-tight text-red-600">
                        {{ $members->filter(function($member) {
                            return $member->expireSchedule && 
                                   (($member->expireSchedule->year < now()->year) || 
                                    ($member->expireSchedule->year == now()->year && 
                                     date('m', strtotime($member->expireSchedule->name . ' 1')) < now()->month));
                        })->count() }}
                    </dd>
                    <div class="mt-1 text-xs text-red-500 font-semibold">Need Renewal</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">Current Month</dt>
                    <dd class="mt-1 text-xl font-bold tracking-tight text-orange-600">
                        {{ $members->filter(function($member) {
                            return $member->expireSchedule && 
                                   $member->expireSchedule->year == now()->year && 
                                   date('m', strtotime($member->expireSchedule->name . ' 1')) == now()->month;
                        })->count() }}
                    </dd>
                    <div class="mt-1 text-xs text-orange-500 font-semibold">Due This 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">Active Members</dt>
                    <dd class="mt-1 text-xl font-bold tracking-tight text-green-600">
                        {{ $members->filter(function($member) {
                            return $member->expireSchedule && 
                                   (($member->expireSchedule->year > now()->year) || 
                                    ($member->expireSchedule->year == now()->year && 
                                     date('m', strtotime($member->expireSchedule->name . ' 1')) > now()->month));
                        })->count() }}
                    </dd>
                    <div class="mt-1 text-xs text-green-500 font-semibold">Paid Future</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">Unpaid Members</dt>
                    <dd class="mt-1 text-xl font-bold tracking-tight text-gray-600">
                        {{ $members->filter(function($member) {
                            return !$member->expireSchedule;
                        })->count() }}
                    </dd>
                    <div class="mt-1 text-xs text-gray-500 font-semibold">No Payment</div>
                </div>
            </div> -->

            <!-- Search Bar -->
            <div class="mb-6 mt-8">
                <form method="GET" action="{{ route('members') }}" class="flex gap-4">
                    <input type="text" name="search" value="{{ $search ?? '' }}"
                        placeholder="Search members..."
                        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 mt-6">
                <h2 class="text-lg font-bold leading-6 text-gray-900 uppercase tracking-wider">Members List</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">
                                @if($member->expireSchedule)
                                @php
                                $currentMonth = now()->month;
                                $currentYear = now()->year;
                                $expireMonth = date('m', strtotime($member->expireSchedule->name . ' 1'));
                                $expireYear = $member->expireSchedule->year;

                                $isExpired = ($expireYear < $currentYear) ||
                                    ($expireYear==$currentYear && $expireMonth < $currentMonth);
                                    @endphp
                                    @if($isExpired)
                                    <span class="text-red-600 font-semibold">{{ $member->expireSchedule->name }}-{{ $member->expireSchedule->year }}</span>
                                    @else
                                    <span class="text-green-600 font-semibold">{{ $member->expireSchedule->name }}-{{ $member->expireSchedule->year }}</span>
                                    @endif
                                    @else
                                    <span class="text-gray-500">Unpaid</span>
                                    @endif
                            </td>
                            <td class="whitespace-nowrap py-2 pl-3 pr-4 text-right text-xs font-medium sm:pr-4">
                                <!-- Pay Button -->
                                <a href="{{ route('members.payment', $member->id) }}" class="btn bg-[#CF2030] text-white px-3 py-1 rounded text-xs inline-block">Pay</a>
                            </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>
    // 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.');
                }
            });
        }
    });

    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();
        }
    }
</script>
@endpush


<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('members.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 <span class="text-red-500">*</span></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> -->
                        <input type="text" name="category" 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="Category">
                    </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>