<!DOCTYPE html>
<html>
<head>
    <title>Notification Tables</title>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <link href="{{ asset('css/tables.css') }}" rel="stylesheet">
    <style>
        .table-container { margin: 24px; padding: 24px 0; }
        .table-header { display: flex; justify-content: space-between; margin-bottom: 25px; }
        .action-icons { color: rgb(231, 70, 16); cursor: pointer; padding: 5px 14px 5px 0; }
    </style>
</head>
<body>
    @if (session('success'))
        <div style="color: green;">{{ session('success') }}</div>
    @endif
    <div class="table-container">
        <div class="table-header">
            <div>
                <input type="text" name="search" value="{{ request()->input('search') }}" placeholder="Search" onkeyup="this.form.submit()" style="width: 300px;">
            </div>
            <div>
                <button onclick="window.location.href='{{ route('notification-tables.index') }}?page=1&page_size=10'">Clear Filters</button>
                <a href="{{ route('dropdown.export') }}">Export CSV</a>
            </div>
        </div>
        <table border="1" cellpadding="5" cellspacing="0">
            <thead>
                <tr>
                    @foreach ($columns as $column)
                        <th>
                            {{ $column['title'] }}
                            <a href="{{ route('notification-tables.index') }}?_sort_by={{ $column['dataIndex'] }}&_sort_order={{ request()->input('_sort_by') === $column['dataIndex'] && request()->input('_sort_order') === 'asc' ? 'desc' : 'asc' }}">
                                {{ request()->input('_sort_by') === $column['dataIndex'] && request()->input('_sort_order') === 'asc' ? '↓' : '↑' }}
                            </a>
                        </th>
                    @endforeach
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($paginatedData as $item)
                    <tr>
                        @foreach ($columns as $column)
                            <td>{{ $item[$column['dataIndex']] }}</td>
                        @endforeach
                        <td>
                            @foreach ($actions as $action)
                                @if ($action['key'] === 'edit')
                                    <a href="{{ route('edit', $item['id']) }}" class="action-icons">Edit</a>
                                @elseif ($action['key'] === 'delete')
                                    <form action="{{ route('notification-tables.destroy', $item['id']) }}" method="POST" style="display: inline;">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="action-icons" onclick="return confirm('Are you sure?')">Delete</button>
                                    </form>
                                @endif
                            @endforeach
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
        <div style="margin-top: 20px; display: flex; justify-content: space-between;">
            <div>
                @if ($paginatedData->total() == 0)
                    <p>No records found.</p>
                @endif
            </div>
            <div>
                {{ $paginatedData->links() }}
                <select name="page_size" onchange="this.form.submit()" style="margin-left: 10px;">
                    <option value="10" {{ $paginatedData->perPage() == 10 ? 'selected' : '' }}>10</option>
                    <option value="20" {{ $paginatedData->perPage() == 20 ? 'selected' : '' }}>20</option>
                </select>
            </div>
        </div>
    </div>
</body>
</html>