@extends('layouts.app')

@section('content')
<div class="container mx-auto p-6" x-data="{ showModal: false, showEditModal: false, showConfirmDeleteModal: false, selectedMember: null, deleteActionUrl: '',showImportModal: false }">
   @if(session('success'))
        <div class="bg-green-500 text-white p-3 rounded mb-4">{{ session('success') }}</div>
    @endif
 
    <h2 class="text-3xl font-semibold text-gray-700">Members List</h2>

    <!-- Button to open Add Member modal -->
    <button @click="showModal = true" class="mt-4 bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition">
        Add Member
    </button>
    <button @click="showImportModal = true" class="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600">
    Import CSV
</button>
    <!-- Members Table -->
<div class="mt-8 w-full bg-white p-6 rounded-lg shadow-md" x-data="memberSort()">
    <!-- Search, Status, Rows-per-page — server-side filtering via GET -->
    <form method="GET" action="{{ route('members.index') }}" class="mb-4 flex flex-wrap items-end gap-4 justify-end">
          <div>
            <label class="block text-xs font-medium text-gray-500 mb-1">Rows per page</label>
            <select name="per_page" onchange="this.form.submit()" class="border p-2 rounded-md">
                <option value="10" @selected($perPage === 10)>10</option>
                <option value="25" @selected($perPage === 25)>25</option>
                <option value="50" @selected($perPage === 50)>50</option>
                <option value="100" @selected($perPage === 100)>100</option>
            </select>
        </div>
        <div class="flex-1 min-w-[200px]">
            <label class="block text-xs font-medium text-gray-500 mb-1">
                <i class="fas fa-search text-gray-400"></i> Search
            </label>
            <input type="text" name="search" value="{{ request('search') }}"
                placeholder="Name or Employee ID..." class="border p-2 rounded-md w-full">
        </div>
        <div>
            <label class="block text-xs font-medium text-gray-500 mb-1">Status</label>
            <select name="status" class="border p-2 rounded-md">
                <option value="">All Statuses</option>
                <option value="active" @selected(request('status') === 'active')>Active</option>
                <option value="inactive" @selected(request('status') === 'inactive')>Inactive</option>
            </select>
        </div>
      
        <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600">
            <i class="fas fa-filter mr-1"></i> Filter
        </button>
        @if(request()->anyFilled(['search','status']))
            <a href="{{ route('members.index') }}" class="bg-gray-200 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-300">
                <i class="fas fa-times mr-1"></i> Clear
            </a>
        @endif
    </form>

    <!-- Table Container -->
    <div class="overflow-x-auto w-full">
       <table class="min-w-full table-auto border-collapse">
        <thead class="bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-md rounded-t-lg">
                <tr>
                    <th class="py-3 px-4 text-left  cursor-pointer" @click="sortBy('name')">
                        Name
                        <span x-show="sortColumn === 'name'">
                            <span x-text="sortAsc ? '↑' : '↓'"></span>
                        </span>
                    </th>
                    <th class="py-3 px-4 text-left cursor-pointer" @click="sortBy('employee_id')">
                        Employee ID
                        <span x-show="sortColumn === 'employee_id'">
                            <span x-text="sortAsc ? '↑' : '↓'"></span>
                        </span>
                    </th>
                    <th class="py-2 px-2 cursor-pointer" @click="sortBy('email')">
                        Email Address
                        <span x-show="sortColumn === 'email'">
                            <span x-text="sortAsc ? '↑' : '↓'"></span>
                        </span>
                    </th>
                    <th class="py-3 px-4 text-left ">Phone</th>
                    <th class="py-3 px-4 text-left  cursor-pointer" @click="sortBy('joining_fee')">
                        Joining Fee
                        <span x-show="sortColumn === 'joining_fee'">
                            <span x-text="sortAsc ? '↑' : '↓'"></span>
                        </span>
                    </th>
                    <th class="py-3 px-4 text-left  cursor-pointer" @click="sortBy('total_savings')">
                        Total Savings/ Shares
                        <span x-show="sortColumn === 'total_savings'">
                            <span x-text="sortAsc ? '↑' : '↓'"></span>
                        </span>
                    </th>
                    <th class="py-3 px-4 text-left  cursor-pointer" @click="sortBy('total_social')">
                        Total Social
                        <span x-show="sortColumn === 'total_social'">
                            <span x-text="sortAsc ? '↑' : '↓'"></span>
                        </span>
                    </th>
                    <th class="py-3 px-4 text-left  cursor-pointer" @click="sortBy('eligible_loan')">
                        Eligible Loan
                        <span x-show="sortColumn === 'eligible_loan'">
                            <span x-text="sortAsc ? '↑' : '↓'"></span>
                        </span>
                    </th>
                    <th class="py-3 px-4 text-left  cursor-pointer" @click="sortBy('status')">
                        Status
                        <span x-show="sortColumn === 'status'">
                            <span x-text="sortAsc ? '↑' : '↓'"></span>
                        </span>
                    </th>
                    <th class="py-3 px-4 text-left whitespace-nowrap">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($members as $member)
                <tr class="border-t hover:bg-gray-100">
                    <td class="py-3 px-4 text-sm">{{ $member->name }}</td>
                    <td class="py-3 px-4 text-sm">{{ $member->employee_id }}</td>
                    <td class="py-3 px-4 text-sm">{{ $member->email }}</td>
                    <td class="py-3 px-4 text-sm">{{ $member->contact }}</td>
                    <td class="py-3 px-4 text-sm">{{ number_format($member->joining_fee, 2) }}</td>
                    <td class="py-3 px-4 text-sm">{{ number_format($member->total_savings, 2) }}</td>
                    <td class="py-3 px-4 text-sm">{{ number_format($member->total_social, 2) }}</td>
                    <td class="py-3 px-4 text-sm">{{ number_format($member->eligible_loan, 2) }}</td>
                 <td class="py-3 px-4 text-sm">
    <!-- Status toggle switch — icon and color both reflect active/inactive, no separate badge -->
    <form action="{{ route('members.toggleStatus', $member->id) }}" method="POST">
        @csrf
        @method('PUT')
        <button type="submit"
            title="{{ $member->status === 'active' ? 'Active — click to deactivate' : 'Inactive — click to activate' }}"
            class="text-2xl transition-colors duration-200 focus:outline-none {{ $member->status === 'active' ? 'text-green-500 hover:text-green-600' : 'text-red-400 hover:text-red-500' }}">
            <i class="fas {{ $member->status === 'active' ? 'fa-toggle-on' : 'fa-toggle-off' }}"></i>
        </button>
    </form>
</td>
                   <td class="py-3 px-4 text-sm">
    <div class="flex justify-center space-x-1">
        <!-- View Details Button -->
        <button @click="window.location.href='{{ route('members.show', $member->id) }}'"
            class="bg-blue-500 text-white px-2 py-1 rounded-l-md hover:bg-blue-600">
            <i class="fas fa-eye"></i>
        </button>

        <!-- Edit Button -->
        <button @click="$dispatch('open-modal', 'edit-member-{{ $member->id }}')" 
            class="bg-yellow-500 text-white px-2 py-1 hover:bg-yellow-600">
            <i class="fas fa-edit"></i>
        </button>

        <!-- Delete Button -->
        <button @click="showConfirmDeleteModal = true; deleteActionUrl = '{{ route('members.destroy', $member->id) }}'" 
            class="bg-red-500 text-white px-2 py-1 hover:bg-red-600">
            <i class="fas fa-trash"></i>
        </button>

      
    </div>
</td>

                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="mt-6">
        {{ $members->links() }}
    </div>
</div>

    <!-- Confirmation Modal for Delete -->
    <div x-show="showConfirmDeleteModal" x-cloak class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
        <div class="bg-white p-4 sm:p-6 rounded-lg shadow-lg w-full sm:w-1/2 lg:w-1/3 mx-2">
            <h3 class="text-xl font-semibold mb-4">Are you sure you want to delete member?</h3>
            
            <div class="flex justify-end">
    <button @click="showConfirmDeleteModal = false"
            class="bg-gray-400 text-white px-4 py-1 rounded-md hover:bg-gray-600">
        Cancel
    </button>
    <form :action="deleteActionUrl" method="POST" class="inline-block">
        @csrf
        @method('DELETE')
        <button type="submit"
                class="px-4 py-2 bg-red-500 text-white rounded-md hover:bg-red-600">
            Yes, Delete
        </button>
    </form>
   </div>
 </div>
</div>
<!-- Modal for CSV Import -->
<div x-show="showImportModal" x-cloak class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
    <div class="bg-white p-4 sm:p-6 rounded-lg shadow-lg w-full sm:w-1/2 lg:w-1/3 mx-2" @click.away="showImportModal = false">
        <h3 class="text-xl font-semibold">Import Members from CSV</h3>

         <a href="{{ asset('storage/sample_members.csv') }}" download="sample_members.csv"
           class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600">
            Download Sample CSV
        </a>


        <form method="POST" action="{{ route('members.import') }}" enctype="multipart/form-data" class="mt-2">
            @csrf
            <input type="file" name="csv_file" accept=".csv" required class="w-full border rounded-md p-2">
            <span class="text-red-500 text-sm">@error('csv_file') {{ $message }} @enderror</span>
            <div class="mt-4 flex justify-end">
                <button type="button" @click="showImportModal = false"
                    class="mr-2 px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600">
                    Cancel
                </button>
                <button type="submit"
                    class="px-4 py-2 bg-green-500 text-white rounded-md hover:bg-green-600">
                    Import
                </button>
            </div>
        </form>
    </div>
</div>

    <!-- Modal for Adding Member -->
   <div x-show="showModal" x-cloak class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
        <div class="bg-white p-4 sm:p-6 rounded-lg shadow-lg w-full sm:w-1/2 lg:w-1/3 mx-2" >
            <h3 class="text-xl font-semibold">Add Member</h3>
            <form method="POST" action="{{ route('members.store') }}" class="mt-4 overflow-y-auto max-h-[80vh]" >
                @csrf
                <!-- Name -->
                <div>
                    <label class="block text-sm font-medium">Name</label>
                    <input type="text" name="name" x-model="name"
                        class="w-full border rounded-md p-2" required>
                    <span class="text-red-500 text-sm" x-text="errors.name"></span>
                </div>
                <!-- Employee ID -->
                <div class="mt-2">
                    <label class="block text-sm font-medium">Employee ID</label>
                    <input type="text" name="employee_id" x-model="employee_id"
                        class="w-full border rounded-md p-2" required>
                    <span class="text-red-500 text-sm" x-text="errors.employee_id"></span>
                </div>
                <!-- Contact -->
                <div class="mt-2">
                    <label class="block text-sm font-medium">Contact</label>
                    <input type="text" name="contact" x-model="contact"
                        class="w-full border rounded-md p-2" required>
                    <span class="text-red-500 text-sm" x-text="errors.contact"></span>
                </div>

                 <div class="mt-2">
                    <label class="block text-sm font-medium">Email Address</label>
                    <input type="text" name="email" x-model="email"
                        class="w-full border rounded-md p-2" required>
                    <span class="text-red-500 text-sm" x-text="errors.email"></span>
                </div>
                <!-- Joining Fee -->
                <div class="mt-2">
                    <label class="block text-sm font-medium">Joining Fee</label>
                    <input type="number" name="joining_fee" x-model="joining_fee" min="5000"
                        class="w-full border rounded-md p-2" required>
                    <span class="text-red-500 text-sm" x-text="errors.joining_fee"></span>
                </div>
                <!-- Submit Button -->
                <div class="mt-4 flex justify-end">
                    <button type="button" @click="showModal = false"
                        class="mr-2 px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600">
                        Cancel
                    </button>
                    <button type="submit"
                        class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">
                        Save
                    </button>
                </div>
            </form>
        </div>
    </div>

     @foreach ($members as $member)
    <x-modal name="edit-member-{{ $member->id }}" focusable>
        <form method="POST" action="{{ route('members.update', $member->id) }}" class="p-6">
            @csrf
            @method('PUT')

            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Edit Member</h2>

            <div class="mt-6">
                <x-input-label for="name-{{ $member->id }}" value="Name" />
                <x-text-input id="name-{{ $member->id }}" name="name" type="text" value="{{ $member->name }}" required class="mt-1 block w-full" />
            </div>

            <div class="mt-6">
                <x-input-label for="employee_id-{{ $member->id }}" value="Employee ID" />
                <x-text-input id="employee_id-{{ $member->id }}" name="employee_id" type="text" value="{{ $member->employee_id }}" class="mt-1 block w-full" />
            </div>

            <div class="mt-6">
                <x-input-label for="contact-{{ $member->id }}" value="Contact" />
                <x-text-input id="contact-{{ $member->id }}" name="contact" type="text" value="{{ $member->contact }}" class="mt-1 block w-full" />
            </div>

            <div class="mt-6">
                <x-input-label for="email-{{ $member->id }}" value="Email" />
                <x-text-input id="email-{{ $member->id }}" name="email" type="email" value="{{ $member->email }}" class="mt-1 block w-full" />
            </div>

            <div class="mt-6">
                <x-input-label for="joining_fee-{{ $member->id }}" value="Joining Fee" />
                <x-text-input id="joining_fee-{{ $member->id }}" name="joining_fee" type="number" min="5000" value="{{ $member->joining_fee }}" class="mt-1 block w-full" />
            </div>

            <div class="mt-6 flex justify-end">
                <x-secondary-button x-on:click="$dispatch('close')">Cancel</x-secondary-button>
                <x-primary-button type="submit" class="ml-3">Save</x-primary-button>
            </div>
        </form>
    </x-modal>
@endforeach
</div>
@endsection
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('memberForm', () => ({
        name: '',
        employee_id: '',
        contact: '',
        joining_fee: 5000,
        errors: {},

        validate() {
            this.errors = {};
            if (!this.name) this.errors.name = 'Name is required';
            if (!this.employee_id) this.errors.employee_id = 'Employee ID is required';
            if (!this.contact) this.errors.contact = 'Contact is required';
            if (!this.email) this.errors.email = 'Email is required';
            if (this.joining_fee < 5000) this.errors.joining_fee = 'Minimum fee is 5000';
        }
    }));
});
</script>

<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('memberSort', () => ({
        sortColumn: '',
        sortAsc: true,

        sortBy(column) {
            const table = document.querySelector("tbody");
            const rows = Array.from(table.querySelectorAll("tr"));

            const getValue = (row) => {
                const cell = row.querySelector(`td:nth-child(${this.getColumnIndex(column)})`);
                return cell ? cell.textContent.trim() : '';
            };

            rows.sort((a, b) => {
                let valA = getValue(a);
                let valB = getValue(b);

                if (!isNaN(valA) && !isNaN(valB)) {
                    valA = parseFloat(valA);
                    valB = parseFloat(valB);
                }

                return this.sortAsc ? valA.localeCompare(valB) : valB.localeCompare(valA);
            });

            this.sortAsc = !this.sortAsc;
            rows.forEach(row => table.appendChild(row));
        },

        getColumnIndex(column) {
            const headers = ["name", "employee_id", "email", "contact", "joining_fee", "status"];
            return headers.indexOf(column) + 1;
        }
    }));
});
</script>