@push('title')
Google Storage
@endpush

<div class="content-wrapper">
    <!-- Display Success/Error Messages -->
    <div class="row mb-4">
        <div class="col">
            @if (session()->has('message'))
                <div class="alert alert-success">{{ session('message') }}</div>
            @endif

            @if (session()->has('error'))
                <div class="alert alert-danger">{{ session('error') }}</div>
            @endif
        </div>
    </div>

    <!-- Main Sections -->
    <div class="row justify-content-center">
        <div class="col-md-8">
            <h4 class="card-title"><i class="bi bi-cloud-plus-fill"></i> Google Storage</h4>
            <div class="card shadow-sm">
                <div class="card-body">
                    <!-- Horizontal Sections -->
                    <div class="row mb-4">
                        <!-- Section 1: Load Buckets -->
                        <div class="col-md-3">
                            <button wire:click="loadBuckets" class="btn btn-outline-primary btn-sm w-100"><i class="bi bi-cloud-arrow-down-fill"></i> Load Buckets</button>
                        </div>

                        <!-- Section 2: Create Bucket -->
                        <div class="col-md-9">
                            <form wire:submit.prevent="createBucket">
                                <div class="input-group input-group-sm">
                                    <input type="text" id="bucketName" wire:model="bucketName" class="form-control" placeholder="Enter new bucket name">
                                    <button type="submit" class="btn btn-outline-success"><i class="bi bi-bucket-fill"></i> Create</button>
                                </div>
                                @error('bucketName') <span class="text-danger">{{ $message }}</span> @enderror
                            </form>
                        </div>
                    </div>

                    <!-- Section 3: Upload Files -->
                    <form wire:submit.prevent="createBucketAndUploadFile">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <select id="selectedBucket" wire:model="selectedBucket" class="form-control form-control-sm">
                                    <option value="">-- Select Bucket --</option>
                                    @foreach($buckets as $bucket)
                                        <option value="{{ $bucket }}">{{ $bucket }}</option>
                                    @endforeach
                                </select>
                                @error('selectedBucket') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>
                            <div class="col-md-6">
                                <input type="file" id="files" wire:model="files" class="form-control form-control-sm" multiple>
                                @error('files.*') <span class="text-danger">{{ $message }}</span> @enderror
                            </div>
                        </div>

                        @foreach($files as $index => $file)
                            <div class="input-group input-group-sm mb-2" wire:key="file-{{ $index }}">
                                <input type="text" id="fileName-{{ $index }}" wire:model="fileNames.{{ $index }}" class="form-control" placeholder="Rename {{ $file->getClientOriginalName() }}">
                            </div>
                        @endforeach

                        <button type="submit" class="btn btn-primary btn-sm w-100"><i class="bi bi-cloud-arrow-up-fill"></i> Upload</button>
                    </form>

                    <!-- Section 4: Random String Generator -->
                    <div class="mt-4">
                        <h5 class="small">Generate Random String</h5>
                        <div class="row mb-2">
                            <div class="col-md-3">
                                <input type="number" id="randomLength" wire:model="randomLength" class="form-control form-control-sm" min="0" max="100" step="1">
                            </div>
                            <div class="col-md-9">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" id="includeUppercase" wire:model="includeUppercase">
                                    <label class="form-check-label small" for="includeUppercase">Uppercase</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" id="includeLowercase" wire:model="includeLowercase">
                                    <label class="form-check-label small" for="includeLowercase">Lowercase</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" id="includeNumbers" wire:model="includeNumbers">
                                    <label class="form-check-label small" for="includeNumbers">Numbers</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" id="includeSymbols" wire:model="includeSymbols">
                                    <label class="form-check-label small" for="includeSymbols">Symbols</label>
                                </div>
                            </div>
                        </div>
                        <button wire:click="generateRandomString" class="btn btn-outline-secondary btn-sm w-100"><i class="bi bi-arrow-repeat"></i> Generate</button>
                        <div class="input-group input-group-sm mt-2">
                            <input type="text" id="randomString" wire:model="randomString" class="form-control" readonly>
                            <button class="btn btn-outline-secondary" onclick="copyRandomString()"><i class="bi bi-clipboard"></i> Copy</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Display URLs of Uploaded Files -->
    @if(count($uploadedFileUrls) > 0)
        <div class="row mt-4">
            <div class="col">
                <div class="alert alert-info">
                    <strong class="small"><i class="bi bi-link-45deg"></i> Uploaded File URLs:</strong>
                    <ul id="uploadedUrls" class="small">
                        @foreach($uploadedFileUrls as $url)
                            <li><a href="{{ $url }}" target="_blank">{{ $url }}</a></li>
                        @endforeach
                    </ul>
                    <!-- Button to copy all URLs -->
                    <button class="btn btn-sm btn-outline-secondary" onclick="copyAllUrls()">
                        <i class="bi bi-clipboard"></i> Copy All URLs
                    </button>
                </div>
            </div>
        </div>
    @endif
</div>

<!-- Script to Copy Random String to Clipboard -->
<script>
function copyRandomString() {
    const randomString = document.getElementById('randomString').value;

    if (navigator.clipboard) {
        navigator.clipboard.writeText(randomString).then(function() {
            alert("Random string copied to clipboard!");
        }).catch(function(error) {
            alert("Failed to copy random string: " + error);
        });
    } else {
        // Fallback method
        var textArea = document.createElement("textarea");
        textArea.value = randomString;
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            alert('Fallback: Copying text command was ' + msg);
        } catch (err) {
            alert('Fallback: Oops, unable to copy', err);
        }
        document.body.removeChild(textArea);
    }
}
</script>

<!-- Script to Copy All URLs to Clipboard -->
<script>
function copyAllUrls() {
    const urls = Array.from(document.querySelectorAll('#uploadedUrls li a')).map(a => a.href).join('\n');
    
    if (navigator.clipboard) {
        navigator.clipboard.writeText(urls).then(function() {
            alert("All URLs copied to clipboard!");
        }).catch(function(error) {
            alert("Failed to copy URLs: " + error);
        });
    } else {
        // Fallback method
        var textArea = document.createElement("textarea");
        textArea.value = urls;
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            alert('Fallback: Copying text command was ' + msg);
        } catch (err) {
            alert('Fallback: Oops, unable to copy', err);
        }
        document.body.removeChild(textArea);
    }
}
</script>

<!-- Styles -->
<style>
    .card-title i { margin-right: 10px; }
    .form-label i { margin-right: 5px; }
    .input-group-sm input, .input-group-sm button, .btn-sm { font-size: 0.875rem; }
    .form-control-sm { font-size: 0.875rem; }
    .small { font-size: 0.75rem; }
    ul { list-style-type: none; padding: 0; }
    li { margin-bottom: 10px; }
</style>