@push('title')
    Control Slave server
@endpush
<x-app-layout>
<div class="content-wrapper">
        <h2 class="text-2xl font-semibold mb-6 text-gray-800">
            <i class="fas fa-network-wired mr-2"></i>Slave Servers
        </h2>

        <!-- Session Messages -->
        @if(session('message'))
        <div class="bg-green-500 text-white p-4 rounded mb-4">
            <i class="fas fa-check-circle mr-2"></i>{{ session('message') }}
        </div>
        @endif

        @if(session('error'))
        <div class="bg-red-500 text-white p-4 rounded mb-4">
            <i class="fas fa-exclamation-triangle mr-2"></i>{{ session('error') }}
        </div>
        @endif

        <div class="flex items-center mb-4 space-x-4">

            <!-- Bulk Action Form -->
            <form id="bulkActionForm" method="post" action="{{ route('server.bulkUpdateStatus') }}" class="flex items-center bg-white border border-gray-300 p-2 rounded shadow-sm">
                @csrf
                <!-- Actions dropdown -->
                <div class="relative mr-2">
                    <select name="action" class="block appearance-none w-full bg-white border border-gray-300 hover:border-gray-400 px-4 py-2 pr-8 rounded leading-tight focus:outline-none focus:shadow-outline">
                        <option value="pause"><i class="fas fa-pause mr-1"></i> Pause Selected</option>
                        <option value="stop"><i class="fas fa-stop mr-1"></i> Stop Selected</option>
                        <option value="resume"><i class="fas fa-play mr-1"></i> Resume Selected</option>
                        <option value="testSSH"><i class="fas fa-plug mr-1"></i> Test SSH for Selected</option>
                    </select>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                        <i class="fas fa-chevron-down"></i>
                    </div>
                </div>

                <button type="submit" class="ml-4 bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 border border-gray-300 rounded shadow-sm transition duration-150">
                    <i class="fas fa-check-circle mr-1"></i>Apply to Selected
                </button>
            </form>

            <!-- Update Python Scripts Button -->
            <form method="post" action="{{ route('server.updatePythonScripts') }}" class="ml-4">
                @csrf
                <button type="submit" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 border border-gray-300 rounded shadow-sm transition duration-150">
                    <i class="fas fa-sync-alt mr-1"></i> Update Python Scripts on All Servers
                </button>
            </form>
        </div>

        <!-- Server table -->
        <table class="min-w-full border-collapse block md:table">
            <thead>
                <tr class="bg-gray-100">
                    <th class="p-2 border-t border-b"><i class="fas fa-server mr-1"></i> Server Name</th>
                    <th class="p-2 border-t border-b"><i class="fas fa-globe mr-1"></i> IP Address</th>
                    <th class="p-2 border-t border-b"><i class="fas fa-info-circle mr-1"></i> Status</th>
                    <th class="p-2 border-t border-b"><i class="fas fa-shield-alt mr-1"></i> SSH Status</th>
                    <th class="p-2 border-t border-b"><i class="fas fa-tools mr-1"></i> Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($servers as $server)
                <tr data-server-id="{{ $server->id }}" onclick="toggleSelection(this)" class="cursor-pointer">
                    <td class="p-2 border-t">{{ $server->name }}</td>
                    <td class="p-2 border-t">{{ $server->ip }}</td>
                    <td class="p-2 border-t">{{ $server->status }}</td>
                    <td class="p-2 border-t">{{ ucfirst($server->ssh_status) }}</td>
                    <td class="p-2 border-t flex">
                        @if($server->isActive())
                        <a href="{{ route('server.pause', $server->id) }}" class="mr-2 text-yellow-500 hover:text-yellow-600">
                            <i class="fas fa-pause-circle fa-lg"></i>
                        </a>
                        <a href="{{ route('server.stop', $server->id) }}" class="mr-2 text-red-500 hover:text-red-600">
                            <i class="fas fa-stop-circle fa-lg"></i>
                        </a>
                        @elseif($server->isPaused() || $server->isStopped())
                        <a href="{{ route('server.resume', $server->id) }}" class="mr-2 text-green-500 hover:text-green-600">
                            <i class="fas fa-play-circle fa-lg"></i>
                        </a>
                        @endif
                        <form method="post" action="{{ route('server.testSSHConnection', $server->id) }}" class="inline">
                            @csrf
                            <button type="submit" class="ml-2 bg-transparent border-0 p-0 text-blue-500 hover:text-blue-600">
                                <i class="fas fa-plug fa-lg"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>

        <!-- Select All and Deselect All buttons -->
        <div class="mt-4 flex space-x-2">
            <button type="button" id="selectAll" class="bg-gray-500 hover:bg-gray-600 text-white rounded p-2">
                <i class="fas fa-check-square mr-1"></i>Select All
            </button>
            <button type="button" id="deselectAll" class="bg-gray-500 hover:bg-gray-600 text-white rounded p-2 ml-2">
                <i class="fas fa-square mr-1"></i>Deselect All
            </button>
        </div>

        <!-- JS scripts for bulk select/deselect -->
        <script>
            // ... [Your existing JS code remains the same]
        </script>
    </div>

        <!-- JS scripts for bulk select/deselect -->
        <script>
            function toggleSelection(row) {
                const serverId = row.dataset.serverId;
                const hiddenInput = document.createElement('input');
                hiddenInput.type = 'hidden';
                hiddenInput.name = 'server_ids[]';
                hiddenInput.value = serverId;

                if (row.classList.contains('bg-blue-200')) {
                    // Deselecting
                    row.classList.remove('bg-blue-200');
                    const existingInput = document.querySelector(`#bulkActionForm input[value="${serverId}"]`);
                    if (existingInput) existingInput.remove();
                } else {
                    // Selecting
                    row.classList.add('bg-blue-200');
                    document.getElementById('bulkActionForm').appendChild(hiddenInput);
                }
            }

            document.getElementById('selectAll').addEventListener('click', function() {
                const rows = document.querySelectorAll('tr[data-server-id]');
                rows.forEach(row => {
                    if (!row.classList.contains('bg-blue-200')) {
                        toggleSelection(row);
                    }
                });
            });

            document.getElementById('deselectAll').addEventListener('click', function() {
                const rows = document.querySelectorAll('tr.bg-blue-200');
                rows.forEach(row => toggleSelection(row));
            });
        </script>
</x-app-layout>