@push('title')
    Manage Delivery Servers Configuration
@endpush
<div class="content-wrapper">
    <h1 class="mb-4">Manage Delivery Servers Configuration</h1>
    <!-- Section for Important Links Configuration -->
    <div class="card p-3 mt-4 shadow-sm">
        <h2 class="mb-3 text-secondary">Important Links Configuration</h2>
        <form wire:submit.prevent="saveLinks">
            <div class="row mb-3">
                <div class="col-md-5">
                    <label for="link-name" class="form-label">Link Name</label>
                    <input type="text" id="link-name" class="form-control rounded-3" wire:model.defer="linkName" placeholder="Enter link name">
                </div>
                <div class="col-md-5">
                    <label for="link-url" class="form-label">Link URL</label>
                    <input type="url" id="link-url" class="form-control rounded-3" wire:model.defer="linkUrl" placeholder="Enter link URL">
                </div>
                <div class="col-md-2 d-flex align-items-end justify-content-center">
                    @if($selectedLinkName)
                        <button type="button" class="btn btn-warning btn-icon" wire:click="updateLink">
                            <i class="fas fa-edit"></i>
                        </button>
                    @else
                        <button type="button" class="btn btn-success btn-icon" wire:click="addLink">
                            <i class="fas fa-plus"></i>
                        </button>
                    @endif
                </div>
            </div>
        </form>

        <!-- Display Links in Table Format -->
        <table class="table table-hover table-sm mt-3 text-center">
            <thead class="table-light">
                <tr>
                    <th>Name</th>
                    <th>Link</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($links as $name => $url)
                    <tr>
                        <td class="align-middle">{{ $name }}</td>
                        <td class="align-middle">
                            <input type="text" class="form-control-plaintext text-truncate" value="{{ $url }}" readonly onclick="copyLinkToClipboard('{{ $url }}')">
                        </td>
                        <td class="align-middle">
                            <button class="btn btn-sm btn-primary me-1" wire:click="editLink('{{ $name }}')">
                                <i class="fas fa-pen"></i>
                            </button>
                            <button class="btn btn-sm btn-danger" wire:click="deleteLink('{{ $name }}')">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Section for Servers Configuration -->
    <div class="card p-3 mb-4 shadow-sm">
        <h2 class="mb-3 text-secondary">Servers Configuration</h2>
        @if (session()->has('message'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('message') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        @if (session()->has('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif


        <form wire:submit.prevent="save">
            <div class="form-group mb-3">
                <label for="servers" class="form-label">Servers Configuration</label>
                <textarea id="servers" class="form-control rounded-3" wire:model="servers" rows="8" placeholder="Enter server configurations"></textarea>
            </div>
            
            <button type="submit" class="btn btn-primary btn-sm">Save Configuration</button>
        </form>
    </div>

    <!-- Section for Bulk Install Formatter -->
    <div class="card p-3 shadow-sm">
        <h2 class="mb-3 text-secondary">Bulk Install Formatter</h2>
        <div class="row">
            <div class="col-md-6">
                <div class="form-group mb-3">
                    <label for="bulk-input" class="form-label">Bulk Install Input</label>
                    <textarea id="bulk-input" class="form-control rounded-3" wire:model="bulkInput" rows="5" placeholder="Enter IP and credentials (e.g., IP\tPassword)"></textarea>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group mb-3">
                    <label for="formatted-output" class="form-label">Formatted Output</label>
                    <textarea id="formatted-output" class="form-control rounded-3" readonly rows="5">{{ $bulkOutput }}</textarea>
                </div>
            </div>
        </div>
        <div class="text-center">
            <button wire:click="bulkInstall" class="btn btn-secondary btn-sm">Format for Bulk Installation</button>
            <button class="btn btn-info btn-sm" onclick="copyToClipboard('formatted-output')">Copy to Clipboard</button>
        </div>
    </div>

    
</div>

<script>
function copyToClipboard(elementId) {
    var copyText = document.getElementById(elementId);
    copyText.select();
    copyText.setSelectionRange(0, 99999); // For mobile devices
    document.execCommand("copy");
}

function copyLinkToClipboard(link) {
    const tempInput = document.createElement('input');
    document.body.appendChild(tempInput);
    tempInput.value = link;
    tempInput.select();
    tempInput.setSelectionRange(0, 99999); // For mobile devices
    document.execCommand("copy");
    document.body.removeChild(tempInput);
}
</script>