@extends('layouts.app')

@section('title', 'Program Frees')

@section('content')
    <!-- Breadcrumb -->
    <nav class="mb-4">
        <ol class="flex items-center space-x-2 text-sm text-gray-600">
            <li><a href="{{ url('dashboard') }}" class="hover:text-blue-600">Dashboard</a></li>
            <li>
                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </li>
            <li><a href="{{ route('programFrees.index') }}" class="hover:text-blue-600">Program Frees</a></li>
            <li>
                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </li>
            <li class="text-gray-900 font-medium">List</li>
        </ol>
    </nav>

    <!-- Overview Metrics Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 flex items-center">
            <div class="p-3 bg-blue-50 rounded-full">
                <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                </svg>
            </div>
            <div class="ml-4">
                <p class="text-xs font-medium text-gray-500 uppercase tracking-wider">Total Program Frees</p>
                <p class="text-2xl font-semibold text-gray-900" id="totalRegPointsCard">0</p>
            </div>
        </div>
    </div>

    <!-- Filters Bar -->
    <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100 mb-6 flex flex-wrap gap-3 items-center justify-between">
        <div class="flex flex-wrap gap-3 items-center flex-1">
            <input type="text" id="filterName" placeholder="Filter by point name..." class="px-3 py-2 text-sm border border-gray-300 rounded-md focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 w-full md:w-1/3">

            <button id="btnFilter" class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md hover:bg-indigo-700 transition">Filter</button>
            <button id="btnReset" class="px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-md hover:bg-gray-200 transition">Reset</button>
        </div>

        <div class="flex items-center space-x-3">
            <div class="flex items-center space-x-1">
                <label for="perPage" class="text-xs text-gray-500">Show:</label>
                <select id="perPage" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-1 focus:ring-indigo-500">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                </select>
            </div>

            <a href="{{ route('programFrees.create') }}" class="inline-flex items-center px-3 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700 transition">
                <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                </svg>
                Add New
            </a>
        </div>
    </div>

    <!-- Table Container -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 text-sm">
                <thead class="bg-gray-50">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">SL</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Name</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Price</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Created Date</th>
                    <th class="px-4 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Actions</th>
                </tr>
                </thead>
                <tbody id="regPointTableBody" class="bg-white divide-y divide-gray-200">
                <!-- Dynamic Rows -->
                </tbody>
            </table>
        </div>

        <!-- Table Footer / Pagination -->
        <div class="px-4 py-3 bg-gray-50 border-t border-gray-200 flex flex-col sm:flex-row items-center justify-between gap-3">
            <p id="paginationInfo" class="text-xs text-gray-600">Showing 0 to 0 of 0 entries</p>
            <div id="pagination" class="flex items-center space-x-1"></div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        let currentPage = 1;

        function formatDate(dateStr) {
            if (!dateStr) return '-';
            const date = new Date(dateStr);
            return isNaN(date.getTime()) ? dateStr : date.toLocaleDateString();
        }

        function loadRegPoints(page = 1) {
            currentPage = page;

            let filters = {
                name: $('#filterName').val(),
                page: currentPage,
                perPage: $('#perPage').val()
            };

            $.get('{{ route("programFrees.data") }}', filters, function(res) {
                // 1. Update Metrics Cards
                if (res.metrics) {
                    $('#totalRegPointsCard').text(res.metrics.total);
                }

                const regPointsData = res.programFrees;
                let tbody = '';

                // 2. Render Rows
                if (!regPointsData.data || regPointsData.data.length === 0) {
                    tbody = `<tr><td colspan="4" class="text-center py-6 text-gray-500">No Program Frees found matching your criteria.</td></tr>`;
                } else {
                    regPointsData.data.forEach((item, index) => {
                        const sl = (regPointsData.current_page - 1) * regPointsData.per_page + index + 1;

                        tbody += `
                            <tr class="hover:bg-gray-50 transition">
                                <td class="px-4 py-3 text-xs font-mono text-gray-500">${sl}</td>
                                <td class="px-4 py-3 text-xs font-medium text-gray-900">${item.name}</td>
                                <td class="px-4 py-3 text-xs font-medium text-gray-900">${item.price}</td>
                                <td class="px-4 py-3 text-xs text-gray-500">${formatDate(item.create_date ?? item.created_date ?? item.created_at)}</td>
                                <td class="px-4 py-3 text-xs text-right space-x-2">
                                    <button class="text-indigo-600 hover:text-indigo-900 font-medium" onclick="editRegPoint(${item.id})">Edit</button>
                                    <button class="text-red-600 hover:text-red-900 font-medium" onclick="deleteRegPoint(${item.id})">Delete</button>
                                </td>
                            </tr>`;
                    });
                }
                $('#regPointTableBody').html(tbody);

                // 3. Render Pagination Info
                const from = regPointsData.from ?? 0;
                const to = regPointsData.to ?? 0;
                const total = regPointsData.total ?? 0;
                $('#paginationInfo').text(`Showing ${from} to ${to} of ${total} entries`);

                // 4. Render Pagination Controls
                let paginationHtml = '';
                if (regPointsData.last_page > 1) {
                    // Previous
                    paginationHtml += `<button onclick="loadRegPoints(${regPointsData.current_page - 1})"
                        class="px-3 py-1 border border-gray-300 rounded-md text-xs font-medium ${regPointsData.current_page === 1 ? 'opacity-50 cursor-not-allowed text-gray-400' : 'hover:bg-gray-100 text-gray-700'}"
                        ${regPointsData.current_page === 1 ? 'disabled' : ''}>&laquo;</button>`;

                    // Page Buttons
                    for (let i = 1; i <= regPointsData.last_page; i++) {
                        const isActive = i === regPointsData.current_page;
                        paginationHtml += `<button onclick="loadRegPoints(${i})"
                            class="px-3 py-1 border text-xs font-medium rounded-md ${isActive ? 'bg-indigo-600 text-white border-indigo-600' : 'border-gray-300 hover:bg-gray-100 text-gray-700'}">${i}</button>`;
                    }

                    // Next
                    paginationHtml += `<button onclick="loadRegPoints(${regPointsData.current_page + 1})"
                        class="px-3 py-1 border border-gray-300 rounded-md text-xs font-medium ${regPointsData.current_page === regPointsData.last_page ? 'opacity-50 cursor-not-allowed text-gray-400' : 'hover:bg-gray-100 text-gray-700'}"
                        ${regPointsData.current_page === regPointsData.last_page ? 'disabled' : ''}>&raquo;</button>`;
                }
                $('#pagination').html(paginationHtml);
            });
        }

        $(document).ready(function() {
            // Filter click
            $('#btnFilter').on('click', function() {
                loadRegPoints(1);
            });

            // Filter on Enter keypress
            $('#filterName').on('keypress', function(e) {
                if (e.which === 13) loadRegPoints(1);
            });

            // Per Page change
            $('#perPage').on('change', function() {
                loadRegPoints(1);
            });

            // Reset filters
            $('#btnReset').on('click', function() {
                $('#filterName').val('');
                loadRegPoints(1);
            });

            // Initial Load
            loadRegPoints();
        });

        // Actions
        function editRegPoint(id) {
            window.location.href = `/programFrees/${id}/edit`;
        }

        function deleteRegPoint(id) {
            Swal.fire({
                title: 'Are you sure?',
                text: "This registration point will be permanently deleted.",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#ef4444',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: '/programFrees/' + id,
                        type: 'DELETE',
                        data: { _token: '{{ csrf_token() }}' },
                        success: function(res) {
                            if (res.success) {
                                Swal.fire('Deleted!', res.message || 'Deleted successfully.', 'success');
                                loadRegPoints(currentPage);
                            } else {
                                Swal.fire('Error!', res.message || 'Action failed.', 'error');
                            }
                        },
                        error: function() {
                            Swal.fire('Error!', 'Something went wrong on the server.', 'error');
                        }
                    });
                }
            });
        }
    </script>
@endpush