@extends('admin.layout')
@section('title', 'Shortened URL Management')

@section('content')
<div class="toolbar">
    <h2 style="font-size: 18px;">🔗 Shortened URL Management</h2>
</div>

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

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

<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;">
    <h3 style="font-size:14px;color:#888;">Total Shortened URLs: {{ $shortenedUrls->total() }}</h3>
    <a href="{{ route('admin.shortened-urls.create') }}" class="btn btn-primary">+ Shorten URL</a>
</div>

<div style="background:#1a2a1a;border-radius:8px;padding:12px 16px;margin-bottom:20px;border:1px solid #2a4a2a;">
    <p style="font-size:13px;color:#6fbf6f;margin:0;">
        💡 <strong>Tip:</strong> Gunakan fitur ini untuk membuat link pendek yang mudah dibagikan dengan domain pilihan Anda.
    </p>
</div>

@if($shortenedUrls->isEmpty())
    <div class="empty-state">
        <p>Belum ada shortened URL. <a href="{{ route('admin.shortened-urls.create') }}" style="color:#6fafdf;">Buat yang pertama</a></p>
    </div>
@else
    <div style="overflow-x:auto;">
        <table style="width:100%;">
            <thead>
                <tr>
                    <th style="text-align:left;">Short URL</th>
                    <th style="text-align:left;">Long URL</th>
                    <th style="text-align:center;">Clicks</th>
                    <th style="text-align:center;">Expires</th>
                    <th style="text-align:center;">Created</th>
                    <th style="text-align:right;">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @foreach($shortenedUrls as $url)
                <tr style="border-bottom:1px solid #2a3a3a;">
                    <td style="padding:12px 0;font-weight:600;">
                        <a href="{{ $url->full_short_url }}" target="_blank" style="color:#6fafdf;text-decoration:none;">
                            @if($url->alias)
                                {{ $url->full_short_url }}
                            @else
                                {{ $url->full_short_url }} <span style="font-size:10px;color:#666;">(short code)</span>
                            @endif
                        </a>
                    </td>
                    <td style="padding:12px 0;font-size:12px;color:#888;">
                        <span title="{{ $url->long_url }}">
                            {{ substr($url->long_url, 0, 50) }}{{ strlen($url->long_url) > 50 ? '...' : '' }}
                        </span>
                    </td>
                    <td style="padding:12px 0;text-align:center;font-weight:600;">
                        <span class="badge" style="background:#1a2a3a;color:#6fafdf;">{{ $url->click_count }}</span>
                    </td>
                    <td style="padding:12px 0;text-align:center;font-size:12px;">
                        @if($url->expires_at)
                            <span style="color:{{ $url->isExpired() ? '#bf6f6f' : '#6fbf6f' }};">
                                {{ $url->isExpired() ? '✗ Expired' : $url->expires_at->format('d M Y') }}
                            </span>
                        @else
                            <span style="color:#888;">-</span>
                        @endif
                    </td>
                    <td style="padding:12px 0;text-align:center;font-size:12px;">{{ $url->created_at->format('d M Y') }}</td>
                    <td style="padding:12px 0;text-align:right;">
                        <div style="display:flex;gap:4px;justify-content:flex-end;">
                            {{-- Copy to clipboard --}}
                            <button 
                                type="button" 
                                class="btn btn-sm btn-info" 
                                title="Copy short URL"
                                onclick="copyToClipboard('{{ $url->full_short_url }}', this)"
                                style="background:#1a3a3a;border:1px solid #2a5a5a;padding:6px 8px;border-radius:4px;cursor:pointer;color:#6fafdf;font-size:11px;"
                            >
                                📋
                            </button>

                            {{-- Edit --}}
                            <a href="{{ route('admin.shortened-urls.edit', $url) }}" class="btn btn-sm btn-warning" title="Edit" style="padding:6px 8px;border-radius:4px;">
                                ✏️
                            </a>

                            {{-- Delete --}}
                            <form method="POST" action="{{ route('admin.shortened-urls.destroy', $url) }}" style="display:inline;" onsubmit="return confirm('Yakin ingin menghapus?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger" title="Delete" style="padding:6px 8px;border-radius:4px;background:#3a1a1a;border:1px solid #5a2a2a;color:#bf6f6f;">
                                    🗑️
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    {{-- Pagination --}}
    @if($shortenedUrls->hasPages())
        <div style="margin-top:24px;">
            {{ $shortenedUrls->links() }}
        </div>
    @endif
@endif

<script>
function copyToClipboard(text, button) {
    navigator.clipboard.writeText(text).then(() => {
        const original = button.textContent;
        button.textContent = '✓ Copied';
        button.style.color = '#6fbf6f';
        setTimeout(() => {
            button.textContent = original;
            button.style.color = '#6fafdf';
        }, 2000);
    });
}
</script>

<style>
.btn {
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.btn-primary {
    background: #1a4a1a;
    color: #6fbf6f;
    border: 1px solid #2a7a2a;
}

.btn-primary:hover {
    background: #2a6a2a;
}

.btn-sm {
    padding: 6px 8px;
    font-size: 11px;
}

.btn-warning {
    background: #3a3a1a;
    color: #bfaf6f;
    border: 1px solid #5a5a2a;
}

.btn-warning:hover {
    background: #4a4a2a;
}

.btn-danger {
    background: #3a1a1a;
    color: #bf6f6f;
    border: 1px solid #5a2a2a;
}

.btn-danger:hover {
    background: #4a2a2a;
}

.btn-info {
    background: #1a3a3a;
    color: #6fafdf;
    border: 1px solid #2a5a5a;
}

.btn-info:hover {
    background: #2a4a4a;
}

.badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.badge-active {
    background: #1a3a1a;
    color: #6fbf6f;
}

.badge-disabled {
    background: #3a1a1a;
    color: #bf6f6f;
}

.alert {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 13px;
}

.alert-success {
    background: #1a3a1a;
    color: #6fbf6f;
    border: 1px solid #2a5a2a;
}

.alert-danger {
    background: #3a1a1a;
    color: #bf6f6f;
    border: 1px solid #5a2a2a;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: #0a1a0a;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #1a3a1a;
}

table thead {
    background: #1a2a1a;
    border-bottom: 1px solid #2a4a2a;
}

table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: #888;
    font-size: 12px;
}

table td {
    padding: 12px;
    color: #aaa;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.empty-state p {
    font-size: 14px;
    margin: 0;
}

.toolbar {
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #1a3a1a;
}
</style>
@endsection