@extends('layouts.admin')

@section('header')
    Membership Renewals
@endsection

@section('content')
    <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg border border-gray-200" 
         x-data="{ 
            showRenewModal: false, 
            member: {}, 
            renewalDate: '',
            day: '',
            month: '',
            year: '',
            init() {
                this.$watch('day, month, year', () => {
                    if (this.day && this.month && this.year) {
                        this.renewalDate = `${this.year}-${this.month.toString().padStart(2, '0')}-${this.day.toString().padStart(2, '0')}`;
                    }
                });
            },
            openRenewModal(m) {
                this.member = m;
                // Parse existing renewal date or default to now
                let date = m.renewal_date ? new Date(m.renewal_date) : new Date();
                // Default to +1 year
                date.setFullYear(date.getFullYear() + 1);
                
                this.year = date.getFullYear();
                this.month = date.getMonth() + 1;
                this.day = date.getDate();
                
                this.showRenewModal = true;
            }
         }">
        <div class="p-6">
            <div class="mb-6">
                <h2 class="text-xl font-bold text-gray-900 font-display">Upcoming Renewals</h2>
                <div class="flex items-center gap-2 mt-1">
                    <p class="text-sm text-gray-500">List of members with set renewal dates, sorted by earliest.</p>
                    <span class="inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold bg-indigo-50 text-indigo-700 border border-indigo-100">
                        <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                        Showing overdue & next 2 months only
                    </span>
                </div>
            </div>

            <!-- Filters -->
            <div class="mb-6 bg-gray-50 p-4 rounded-lg border border-gray-200">
                <form method="GET" action="{{ route('members.renewals') }}" id="filter-form">
                    <div class="flex flex-col md:flex-row gap-4 items-end">
                        <!-- Search -->
                        <div class="flex-1 w-full">
                            <label for="search" class="block text-sm font-medium text-gray-700 mb-1">Search by Name</label>
                            <input 
                                type="text" 
                                name="search" 
                                id="search" 
                                value="{{ request('search') }}" 
                                placeholder="Type to search..."
                                class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                                autocomplete="off"
                            />
                        </div>
                        
                        <!-- Hidden inputs for sorting -->
                        <input type="hidden" name="sort" id="sort-field" value="{{ request('sort', 'renewal_date') }}">
                        <input type="hidden" name="direction" id="sort-direction" value="{{ request('direction', 'asc') }}">
                        @if(request('page'))
                            <input type="hidden" name="page" id="page-field" value="{{ request('page') }}">
                        @endif
                    </div>
                </form>
            </div>

            <div id="renewals-table-container">
                @include('members.partials.renewals_table', ['members' => $members])
            </div>
        </div>

        <!-- Renewal Modal -->
        <div x-show="showRenewModal" class="fixed inset-0 z-50 overflow-y-auto" style="display: none;" x-cloak>
            <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                <div x-show="showRenewModal" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="fixed inset-0 transition-opacity" aria-hidden="true" @click="showRenewModal = false">
                    <div class="absolute inset-0 bg-gray-500 opacity-75 backdrop-blur-sm"></div>
                </div>

                <span class="hidden sm:inline-block sm:align-middle sm:min-h-screen" aria-hidden="true">&#8203;</span>

                <div x-show="showRenewModal" 
                     x-transition:enter="ease-out duration-300" 
                     x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 
                     x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" 
                     x-transition:leave="ease-in duration-200" 
                     x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" 
                     x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 
                     class="inline-block align-middle bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full border border-gray-100">
                    
                    <form :action="member.renew_url" method="POST">
                        @csrf
                        <div class="bg-white px-6 pt-5 pb-6 sm:p-8 sm:pb-8">
                                <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
                                    <h3 class="text-xl leading-6 font-black text-gray-900 font-display">Renew <span x-text="member.name"></span></h3>
                                    <div class="mt-4">
                                        <p class="text-sm text-gray-600 font-medium">New renewal date will be:</p>
                                        
                                        <div class="mt-4 grid grid-cols-3 gap-3">
                                            <div>
                                                <label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Day</label>
                                                <input type="number" x-model="day" min="1" max="31" class="block w-full rounded-lg border-gray-200 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm font-bold">
                                            </div>
                                            <div>
                                                <label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Month</label>
                                                <select x-model="month" class="block w-full rounded-lg border-gray-200 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm font-bold">
                                                    @foreach(range(1, 12) as $m)
                                                        <option value="{{ $m }}">{{ date('F', mktime(0, 0, 0, $m, 1)) }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div>
                                                <label class="block text-[10px] font-black text-gray-400 uppercase tracking-widest mb-1">Year</label>
                                                <input type="number" x-model="year" min="2000" max="2100" class="block w-full rounded-lg border-gray-200 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm font-bold">
                                            </div>
                                        </div>

                                        <input type="hidden" name="renewal_date" :value="renewalDate">
                                        
                                        <div class="mt-4 p-3 bg-gray-50 rounded-xl border border-gray-100 flex items-center justify-between">
                                            <span class="text-xs font-bold text-gray-500 uppercase tracking-wider">Confirmed Date:</span>
                                            <span class="text-sm font-black text-indigo-700" x-text="day + '/' + month + '/' + year"></span>
                                        </div>
                                    </div>
                                </div>
                        </div>
                        <div class="bg-gray-50 px-6 py-4 sm:px-8 sm:flex sm:flex-row-reverse gap-3 border-t border-gray-100">
                            <button type="submit" class="w-full inline-flex justify-center rounded-xl border border-transparent shadow-sm px-6 py-2.5 bg-indigo-600 text-sm font-black text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:w-auto uppercase tracking-widest transition-all hover:scale-105 active:scale-95">
                                Renew Now
                            </button>
                            <button @click="showRenewModal = false" type="button" class="mt-3 w-full inline-flex justify-center rounded-xl border border-gray-200 shadow-sm px-6 py-2.5 bg-white text-sm font-black text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto uppercase tracking-widest transition-all">
                                Cancel
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('filter-form');
            const searchInput = document.getElementById('search');
            const tableContainer = document.getElementById('renewals-table-container');
            let searchTimeout;

            function fetchResults() {
                const url = new URL(form.action);
                const params = new URLSearchParams(new FormData(form));

                url.search = params.toString();

                fetch(url, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.text())
                .then(html => {
                    tableContainer.innerHTML = html;
                    bindTableEvents();
                    window.history.pushState({}, '', url);
                })
                .catch(error => console.error('Error fetching renewals:', error));
            }

            function bindTableEvents() {
                // Bind sort links
                tableContainer.querySelectorAll('.sort-link').forEach(link => {
                    link.addEventListener('click', function(e) {
                        e.preventDefault();
                        const sort = this.getAttribute('data-sort');
                        const direction = this.getAttribute('data-direction');

                        document.getElementById('sort-field').value = sort;
                        document.getElementById('sort-direction').value = direction;
                        
                        // Reset page to 1 when changing sorting
                        let pageInput = document.getElementById('page-field');
                        if (pageInput) pageInput.value = 1;

                        fetchResults();
                    });
                });

                // Bind pagination links
                tableContainer.querySelectorAll('nav a, .pagination a').forEach(link => {
                    link.addEventListener('click', function(e) {
                        e.preventDefault();
                        const linkUrl = new URL(this.getAttribute('href'));
                        const page = linkUrl.searchParams.get('page');
                        
                        let pageInput = document.getElementById('page-field');
                        if (!pageInput) {
                            pageInput = document.createElement('input');
                            pageInput.type = 'hidden';
                            pageInput.name = 'page';
                            pageInput.id = 'page-field';
                            form.appendChild(pageInput);
                        }
                        pageInput.value = page;

                        fetchResults();
                    });
                });
            }

            // Debounced Search Input
            searchInput.addEventListener('input', function() {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(() => {
                    let pageInput = document.getElementById('page-field');
                    if (pageInput) pageInput.value = 1;
                    fetchResults();
                }, 300); // 300ms debounce
            });

            // Intercept form submission
            form.addEventListener('submit', function(e) {
                e.preventDefault();
                fetchResults();
            });

            // Initialize bindings
            bindTableEvents();
        });
    </script>
@endsection