@push('title')
    Add Gsuite
@endpush
<div class="content-wrapper">

    <div class="main-content pl-250"> <!-- Padding to account for the sidebar -->


        <!-- Feedback message -->
        @if($message)
            <div class="alert {{ $alertClass }}">
                {{ $message }}
            </div>
        @endif

        <!-- Add or Edit Service Account Form -->
        <div class="card">
            <div class="card-header">
                {{ $isEditing ? 'Edit Service Account' : 'Add Service Account' }}
            </div>
            <div class="card-body">
                <!-- Select Server Dropdown -->
                <div class="mb-4">
                    <label for="selectedServer" class="form-label">Select Server:</label>
                    <select class="form-control" id="selectedServer" wire:model="selectedServer">
                        <option value="">-- Select a server --</option>
                        @foreach($slaveServers as $server)
                            <option value="{{ $server->id }}">{{ $server->name }}</option>
                        @endforeach
                    </select>
                    @error('selectedServer') <span class="text-danger">{{ $message }}</span> @enderror
                </div>

                <!-- Credential File Input -->
                <div class="form-group mb-4">
                    <label for="credential_file">Credential JSON File:</label>
                    <input type="file" id="credential_file" class="form-control" wire:model="credential_file">
                </div>

                <!-- Senders Textarea -->
                <div class="form-group mb-4">
                    <label for="senders">Senders:</label>
                    <textarea id="senders" class="form-control" wire:model="senders" rows="5" placeholder="Enter senders separated by a new line"></textarea>
                </div>

                <!-- Status Selection -->
                <div class="form-group mb-4">
                    <label for="status">Status:</label>
                    <select class="form-control" id="status" wire:model="status">
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                    </select>
                </div>

                <!-- Submit Button -->
                <div class="form-group">
                    @if($isEditing)
                        <button wire:click="updateServiceAccount" class="btn btn-warning">Update</button>
                        <button wire:click="cancelEditing" class="btn btn-secondary">Cancel</button>
                    @else
                        <button wire:click="createServiceAccount" class="btn btn-primary">Add Service Account</button>
                    @endif
                </div>
            </div>
        </div>

        <!-- List of Service Accounts -->
        <div class="mt-5">
            <h4>Service Accounts:</h4>
            <table class="table">
                <thead>
                    <tr>
                        <th>IP</th>
                        <th>Credential Path</th>
                        <th>Sender</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($serviceAccounts as $account)
                        <tr>
                            <td>{{ $account->ip }}</td>
                            <td>{{ $account->credential_path }}</td>
                            <td>{{ $account->sender }}</td>
                            <td>{{ $account->status }}</td>
                            <td>
                                <button wire:click="startEditing({{ $account->id }})" class="btn btn-sm btn-warning">Edit</button>
                                <button wire:click.prevent="deleteServiceAccount({{ $account->id }})" class="btn btn-sm btn-danger">Delete</button>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>