@extends('layouts.app')
@section('content')
    <!-- Main Content Wrapper -->
    <main class="main-content w-full px-[var(--margin-x)] pb-8">
        <div class="flex items-center justify-between flex-wrap py-5 lg:py-6">
            <!-- Left side: Heading + Breadcrumbs -->
            <div class="flex items-center space-x-4">
                <h2 class="text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl">
                    All Designations
                </h2>
                <div class="hidden h-full py-1 sm:flex">
                    <div class="h-full w-px bg-slate-300 dark:bg-navy-600"></div>
                </div>
                <ul class="hidden flex-wrap items-center space-x-2 sm:flex">
                    <li class="flex items-center space-x-2">
                        <a class="text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent" href="#">
                            Designations
                        </a>
                        <svg xmlns="http://www.w3.org/2000/svg" class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </li>
                    <li>List</li>
                </ul>
            </div>

            <!-- Right side: Add button -->
            <a href="{{ route('designations.add') }}">
                <button class="btn px-3 py-1.5 text-sm space-x-2 bg-primary font-medium text-white shadow-md shadow-primary/40 hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:shadow-accent/40 dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-indigo-50" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                    </svg>
                    <span>Add</span>
                </button>
            </a>
        </div>

        <!-- Designations Table -->
        <div class="card mt-3">
            <div class="is-scrollbar-hidden min-w-full overflow-x-auto">
                <table class="is-hoverable w-full text-left" id="designation-table">
                    <thead>
                        <tr>
                            <th class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">Date</th>
                            <th class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">Designation</th>
                            <th class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">Status</th>
                            <th class="whitespace-nowrap bg-slate-200 px-4 py-3 font-semibold uppercase text-slate-800 dark:bg-navy-800 dark:text-navy-100 lg:px-5">Action</th>
                        </tr>
                    </thead>
                    <tbody id="designation-list">
                        <!-- rows injected by JS -->
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Pagination & Show Entries -->
        <div
                class="flex flex-col justify-between space-y-4 px-4 py-4 sm:flex-row sm:items-center sm:space-y-0 sm:px-5"
                >
                <div id="entry-range" class="text-xs-plus">1 - 10 of 10 entries</div>
                <!-- Page numbers -->
                <ol id="pagination" class="pagination">
                    <!-- JS will populate -->
                </ol>

                <!-- Info -->
                <div id="pagination-info" class="text-xs-plus">
                    <!-- JS will populate -->
                </div>
              </div>
    </main>

    <script>
        let currentPage = 1;
        let pageSize = 10;
        let totalEntries = 0;
        const BASE_URL = "{{ config('app.base_url') }}";
        document.addEventListener('DOMContentLoaded', () => {
            loadPage(currentPage);
            document.getElementById('entries-select').addEventListener('change', (e) => {
                pageSize = parseInt(e.target.value, 10);
                currentPage = 1;
                loadPage(currentPage);
            });
        });

        function loadPage(page) {
            const token = "{{ session('token') }}";
            fetch(`${BASE_URL}:1007/api/master/getAllDesignation?pageNo=${page - 1}&pageSize=${pageSize}`, {
                    method: 'GET',
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Accept': 'application/json'
                    }
                })
                .then(res => res.json())
                .then(json => {
                    if (json.status !== 0) throw new Error('API error');
                    const resp = json.response;
                    totalEntries = resp.totalElements;
                    renderTable(resp.dataSet);
                    renderPagination(resp.totalPages);
                    renderInfo(page);
                })
                .catch(err => console.error(err));
        }

        function renderTable(rows) {
            const tbody = document.getElementById('designation-list');
            tbody.innerHTML = '';
            rows.forEach(item => {
                const d = new Date(item.updatedAt);
                const date = d.toLocaleDateString('en-GB',{day:'2-digit',month:'short',year:'numeric'});
                const time = d.toLocaleTimeString('en-GB',{hour:'2-digit',minute:'2-digit'});
                const status = item.isActive ? 'Active' : 'Inactive';

                tbody.insertAdjacentHTML('beforeend', `
                    <tr class="border-y border-transparent border-b-slate-200 dark:border-b-navy-500">
                      <td class="whitespace-nowrap px-2 py-2 sm:px-3 lg:px-5">
                        <p class="font-medium">${date}</p>
                        <p class="mt-0.5 text-xs">${time}</p>
                      </td>
                      <td class="whitespace-nowrap px-2 py-2 sm:px-3 lg:px-5">
                        <span class="font-medium text-slate-700 dark:text-navy-100">${item.designationName}</span>
                      </td>
                      <td class="whitespace-nowrap px-2 py-2 sm:px-3 lg:px-5">
                        <label class="inline-flex items-center space-x-2">
                            <input
                                class="form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:!bg-success checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:before:bg-white"
                                type="checkbox"
                                ${item.isActive ? 'checked' : ''}
                                onchange="updateStatus(this.checked, '${item.designationMasterId}')"
                                />

                        </label>
                      </td>
                      <td class="whitespace-nowrap px-2 py-2 sm:px-3 lg:px-5">
                        <div class="flex space-x-2">
                          <a href="/designations/update/${item.designationMasterId}" class="btn size-8 p-0 text-info hover:bg-info/20">
                            <i class="fa fa-edit"></i>
                          </a>
                          <button onclick="confirmDelete(${item.designationMasterId})" class="btn size-8 p-0 text-error hover:bg-error/20">
                            <i class="fa fa-trash-alt"></i>
                          </button>
                        </div>
                      </td>
                    </tr>
                `);
            });
        }

        function renderPagination(totalPages) {
            const ol = document.getElementById('pagination');
            ol.innerHTML = '';

            // Show Previous button
            ol.insertAdjacentHTML('beforeend', `
                <li>
                <a href="#" 
                    onclick="if(currentPage > 1) { currentPage--; loadPage(currentPage); } return false;"
                    class="flex size-8 items-center justify-center rounded-full bg-slate-150 text-slate-500 hover:bg-slate-300">
                    <svg xmlns="http://www.w3.org/2000/svg" class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                    </svg>
                </a>
                </li>
            `);

            // Calculate page range to show
            let startPage = Math.max(1, currentPage - 2);
            let endPage = Math.min(totalPages, currentPage + 2);

            // Adjust if near beginning
            if (currentPage <= 3) {
                endPage = Math.min(5, totalPages);
            }

            // Adjust if near end
            if (currentPage >= totalPages - 2) {
                startPage = Math.max(1, totalPages - 4);
            }

            // Show page numbers within range
            for (let i = startPage; i <= endPage; i++) {
                ol.insertAdjacentHTML('beforeend', `
                <li>
                    <a href="#" 
                    onclick="currentPage = ${i}; loadPage(currentPage); return false;"
                    class="flex h-8 w-8 items-center justify-center rounded-full ${currentPage === i ? 'bg-primary text-white' : 'bg-slate-150 text-slate-500 hover:bg-slate-300'}">
                    ${i}
                    </a>
                </li>
                `);
            }

            // Show Next button
            ol.insertAdjacentHTML('beforeend', `
                <li>
                <a href="#" 
                    onclick="if(currentPage < totalPages) { currentPage++; loadPage(currentPage); } return false;"
                    class="flex size-8 items-center justify-center rounded-full bg-slate-150 text-slate-500 hover:bg-slate-300">
                    <svg xmlns="http://www.w3.org/2000/svg" class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </a>
                </li>
            `);
        }



        function renderInfo(page) {
            const start = (page - 1) * pageSize + 1;
            const end = Math.min(page * pageSize, totalEntries);
            document.getElementById('pagination-info').textContent =
              `${start} - ${end} of ${totalEntries} entries`;
        }

        function confirmDelete(id) {
            if (confirm("Are you sure you want to delete this designation?")) {
                window.location.href = "{{ url('/designations/delete') }}/" + id;
            }
        }

        function updateStatus(isChecked, roleId) {
            const token = "{{ session('token') }}";
            fetch(`${BASE_URL}:1007/api/master/changeStatusDesignation?roleId=${roleId}`, {
                method: 'PUT',
                headers: {
                    'Authorization': `Bearer ${token}`,
                    'Content-Type': 'application/json'
                }
            })
            .then(response => {
                if (!response.ok) throw new Error('Failed');
                return response.json();
            })
            .then(data => {
                alert('Status updated successfully');
                // Reload the updated table data
                loadPage(currentPage);

            })
            .catch(error => {
                console.error('Error updating status:', error);
                alert('Failed to update status');
            });
        }
    </script>
@endsection