@extends('layouts.auth.app')
@section('title', 'MDA Services')
@section('content')
<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">
        <div class="flex items-center justify-between">
            <div>
                <h3 class="text-lg font-semibold text-gray-900">MDA Services</h3>
                <p class="text-sm text-gray-500 mt-1">View and manage MDA service profiles</p>
            </div>
            <div class="flex items-center space-x-3">
                <div class="relative">
                    <button type="button" onclick="toggleTaxYearDropdown()" class="inline-flex items-center px-4 py-2 bg-purple-600 text-white text-sm font-medium rounded-lg hover:bg-purple-700">
                        Tax Year
                        <svg class="ml-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                        </svg>
                    </button>
                    <div id="taxYearDropdown" class="hidden absolute right-0 z-10 mt-1 w-32 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5">
                        <div class="py-1" id="taxYearOptions">
                            <!-- Tax year options will be populated dynamically -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="px-6 py-4 border-b border-gray-200">
        <div class="relative">
            <input type="text" id="searchInput" placeholder="Search by service name, rule run, frequency..." class="w-full px-4 py-2 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
            <svg class="absolute left-3 top-2.5 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="11" cy="11" r="8"></circle>
                <path d="m21 21-4.35-4.35"></path>
            </svg>
        </div>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Tax Year</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Service Name</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Rule Run</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Frequency</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Amount</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Action</th>
                </tr>
            </thead>
            <tbody id="tableBody" class="divide-y divide-gray-200"></tbody>
        </table>
    </div>
    <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
        <div class="flex items-center justify-between">
            <p class="text-sm text-gray-700">Showing <span id="showingFrom">0</span> to <span id="showingTo">0</span> of <span id="totalRecords">0</span></p>
            <div class="flex items-center space-x-4">
                <select id="itemsPerPage" class="px-2 py-1 text-sm border border-gray-300 rounded-md">
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
                <div id="paginationControls" class="flex items-center space-x-1"></div>
            </div>
        </div>
    </div>
</div>
@include('pages.mda-service.partials.details-modal')
@include('pages.mda-service.partials.items-modal')
@endsection
@push('scripts')
<script>const dataUrl = "{{ route('mda-service.load-data') }}"; const detailsUrl = "{{ url('MDAService/GetDetails') }}"; const itemListUrl = "{{ url('MDAService/GetItemList') }}";</script>
<script src="{{ asset('js/mda-service/mda-service-list.js') }}"></script>
@endpush