@extends('layouts.auth.app')

@section('title', 'Set Tax Office Target')

@section('content')
<!-- Page Header -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden mb-6">
    <div class="px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-semibold text-gray-900">Operation Manager - Set Tax Office Target</h3>
        <p class="text-sm text-gray-500 mt-1">Select a tax office to set yearly targets by revenue stream</p>
    </div>
</div>

<!-- Tax Office List -->
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-semibold text-gray-900">Tax Office List</h3>
    </div>

    <!-- Table Controls -->
    <div class="px-6 py-3 bg-white border-b border-gray-200">
        <div class="flex items-center justify-between flex-wrap gap-4">
            <div class="flex items-center space-x-2">
                <span class="text-sm text-gray-700">Show:</span>
                <select id="itemsPerPage" class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
                <span class="text-sm text-gray-700">entries</span>
            </div>
            <div class="flex items-center space-x-2">
                <label for="tableSearch" class="text-sm text-gray-700">Search:</label>
                <input type="text" id="tableSearch" placeholder="Type to filter..." class="px-3 py-1 text-sm border border-gray-300 rounded-md focus:ring-2 focus:ring-teal-500 focus:border-teal-500 w-48">
            </div>
        </div>
    </div>

    <!-- Table -->
    <div class="overflow-x-auto">
        <table id="tblTaxOffice" class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Tax Office
                    </th>
                    <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Action
                    </th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @foreach($taxOffices as $item)
                <tr class="hover:bg-gray-50 transition-colors" data-name="{{ strtolower($item->TaxOfficeName) }}">
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ $item->TaxOfficeName }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-center">
                        <button type="button"
                                onclick="jsfn_SelectTaxYear({{ $item->TaxOfficeID }})"
                                class="inline-flex items-center px-3 py-1.5 bg-teal-600 text-white text-xs font-medium rounded-lg hover:bg-teal-700 transition-colors">
                            Set Tax Office Target
                        </button>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
        <div class="flex items-center justify-between flex-wrap gap-4">
            <p class="text-sm text-gray-700">
                Showing <span id="showingFrom" class="font-medium">0</span> to <span id="showingTo" class="font-medium">0</span> of <span id="totalRecords" class="font-medium">0</span> results
            </p>
            <div id="paginationControls" class="flex items-center space-x-1">
                <!-- Will be populated by JavaScript -->
            </div>
        </div>
    </div>
</div>

<!-- Select Tax Year Modal -->
<div id="dvTaxYear" class="fixed inset-0 z-50 hidden overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <!-- Background overlay -->
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="closeModal()"></div>

        <!-- Modal panel -->
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
            <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                <div class="flex justify-between items-center border-b border-gray-200 pb-3">
                    <h3 class="text-lg font-semibold text-gray-900" id="modal-title">Set Tax Office Target</h3>
                    <button type="button" onclick="closeModal()" class="text-gray-400 hover:text-gray-500">
                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>

                <div class="mt-4">
                    <div id="dvMessage" class="hidden mb-4 p-3 rounded-md bg-red-50 text-red-800 text-sm"></div>
                    <input type="hidden" id="hdnTaxOfficeID" value="0" />

                    <div class="mb-4">
                        <label for="cboTaxYear" class="block text-sm font-medium text-gray-700 mb-1">
                            Select Tax Year <span class="text-red-500">*</span>
                        </label>
                        <select id="cboTaxYear" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                            <option value="">Select Tax Year</option>
                            @foreach($yearList as $year)
                            <option value="{{ $year->TaxYear }}">{{ $year->TaxYear }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                <button type="button" id="btnSetTaxOfficeTarget" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-teal-600 text-base font-medium text-white hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 sm:ml-3 sm:w-auto sm:text-sm">
                    Submit
                </button>
                <button type="button" onclick="closeModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    let currentPage = 1;
    let itemsPerPage = 10;
    let allRows = [];

    // Initialize data from table
    function initializeData() {
        allRows = [];
        $('#tblTaxOffice tbody tr').each(function() {
            allRows.push($(this));
        });
        updatePagination();
    }

    // Filter and paginate
    function filterAndPaginate() {
        const searchTerm = $('#tableSearch').val().toLowerCase();

        let filteredRows = allRows.filter(function($row) {
            const name = $row.data('name') || '';
            return name.includes(searchTerm);
        });

        // Hide all rows
        allRows.forEach(function($row) {
            $row.hide();
        });

        // Show filtered and paginated rows
        const startIndex = (currentPage - 1) * itemsPerPage;
        const endIndex = startIndex + itemsPerPage;

        filteredRows.slice(startIndex, endIndex).forEach(function($row) {
            $row.show();
        });

        // Update pagination info
        const total = filteredRows.length;
        const from = total > 0 ? startIndex + 1 : 0;
        const to = Math.min(endIndex, total);

        $('#showingFrom').text(from);
        $('#showingTo').text(to);
        $('#totalRecords').text(total);

        updatePaginationControls(total);
    }

    function updatePagination() {
        filterAndPaginate();
    }

    function updatePaginationControls(total) {
        const totalPages = Math.ceil(total / itemsPerPage);
        let html = '';

        if (totalPages > 0) {
            html += '<button class="px-3 py-1 text-sm border border-gray-300 rounded-md ' + (currentPage === 1 ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50') + '" ' + (currentPage === 1 ? 'disabled' : '') + ' data-page="prev">Previous</button>';

            let startPage = Math.max(1, currentPage - 2);
            let endPage = Math.min(totalPages, currentPage + 2);

            if (startPage > 1) {
                html += '<button class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50" data-page="1">1</button>';
                if (startPage > 2) html += '<span class="px-2 text-gray-500">...</span>';
            }

            for (let i = startPage; i <= endPage; i++) {
                html += '<button class="px-3 py-1 text-sm border rounded-md ' + (i === currentPage ? 'bg-teal-600 text-white border-teal-600' : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50') + '" data-page="' + i + '">' + i + '</button>';
            }

            if (endPage < totalPages) {
                if (endPage < totalPages - 1) html += '<span class="px-2 text-gray-500">...</span>';
                html += '<button class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50" data-page="' + totalPages + '">' + totalPages + '</button>';
            }

            html += '<button class="px-3 py-1 text-sm border border-gray-300 rounded-md ' + (currentPage === totalPages ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-white text-gray-700 hover:bg-gray-50') + '" ' + (currentPage === totalPages ? 'disabled' : '') + ' data-page="next">Next</button>';
        }

        $('#paginationControls').html(html);

        // Bind pagination click events
        $('#paginationControls button:not(:disabled)').on('click', function() {
            const page = $(this).data('page');
            if (page === 'prev') {
                currentPage = Math.max(1, currentPage - 1);
            } else if (page === 'next') {
                currentPage = currentPage + 1;
            } else {
                currentPage = parseInt(page);
            }
            filterAndPaginate();
        });
    }

    // Items per page change
    $('#itemsPerPage').on('change', function() {
        itemsPerPage = parseInt($(this).val());
        currentPage = 1;
        filterAndPaginate();
    });

    // Search with debounce
    let searchTimeout;
    $('#tableSearch').on('keyup', function() {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(function() {
            currentPage = 1;
            filterAndPaginate();
        }, 300);
    });

    // Initialize
    initializeData();
});

// Modal functions
function jsfn_SelectTaxYear(taxOfficeId) {
    $('#hdnTaxOfficeID').val(taxOfficeId);
    $('#cboTaxYear').val('');
    $('#dvMessage').addClass('hidden').text('');
    $('#dvTaxYear').removeClass('hidden');
}

function closeModal() {
    $('#dvTaxYear').addClass('hidden');
}

// Submit button click
$('#btnSetTaxOfficeTarget').on('click', function() {
    const taxOfficeId = $('#hdnTaxOfficeID').val();
    const taxYear = $('#cboTaxYear').val();

    if (!taxYear) {
        $('#dvMessage').removeClass('hidden').text('Please select a tax year.');
        return;
    }

    // Redirect to set tax office target page
    window.location.href = '{{ route("operation-manager.set-tax-office-target") }}?toid=' + taxOfficeId + '&year=' + taxYear;
});
</script>
@endpush