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

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

@if($errors->any())
    <div class="alert alert-danger">
        <ul style="margin:0;padding-left:20px;">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div style="max-width:600px;margin:0 auto;">
    <form method="POST" action="{{ route('admin.shortened-urls.update', $shortenedUrl) }}" style="background:#1a2a1a;border-radius:8px;padding:24px;border:1px solid #2a4a2a;">
        @csrf
        @method('PATCH')

        {{-- Display Short URL Info --}}
        <div style="background:#0a1a0a;border-radius:4px;padding:16px;margin-bottom:20px;border:1px solid #2a4a2a;">
            <p style="margin:0 0 8px;font-size:12px;color:#888;">Short URL:</p>
            <p style="margin:0;font-weight:600;color:#6fafdf;word-break:break-all;">
                <a href="{{ $shortenedUrl->full_short_url }}" target="_blank" style="text-decoration:none;">
                    {{ $shortenedUrl->full_short_url }}
                </a>
            </p>
            <p style="margin:8px 0 0;font-size:12px;color:#666;">
                Short Code: <code style="background:#1a2a1a;padding:2px 6px;border-radius:2px;">{{ $shortenedUrl->short_code }}</code>
            </p>
            <p style="margin:6px 0 0;font-size:12px;color:#666;">
                Clicks: <strong style="color:#6fafdf;">{{ $shortenedUrl->click_count }}</strong>
            </p>
        </div>

        {{-- Long URL --}}
        <div style="margin-bottom:20px;">
            <label style="display:block;margin-bottom:8px;color:#888;font-size:13px;font-weight:600;">
                📌 Long URL <span style="color:#bf6f6f;">*</span>
            </label>
            <textarea 
                name="long_url"
                placeholder="https://example.com/very/long/url/path"
                required
                style="width:100%;padding:10px;border:1px solid #2a4a2a;border-radius:4px;background:#0a1a0a;color:#aaa;font-size:13px;font-family:monospace;resize:vertical;min-height:80px;"
            >{{ old('long_url', $shortenedUrl->long_url) }}</textarea>
            @error('long_url')
                <span style="color:#bf6f6f;font-size:12px;">{{ $message }}</span>
            @enderror
        </div>

        {{-- Domain Selection --}}
        <div style="margin-bottom:20px;">
            <label style="display:block;margin-bottom:8px;color:#888;font-size:13px;font-weight:600;">
                🌐 Domain <span style="color:#bf6f6f;">*</span>
            </label>
            <select 
                name="domain_id"
                required
                style="width:100%;padding:10px;border:1px solid #2a4a2a;border-radius:4px;background:#0a1a0a;color:#aaa;font-size:13px;"
            >
                <option value="">-- Select Domain --</option>
                @foreach($domains as $domain)
                    <option value="{{ $domain->id }}" {{ old('domain_id', $shortenedUrl->domain_id) == $domain->id ? 'selected' : '' }}>
                        {{ $domain->domain_name }}
                    </option>
                @endforeach
            </select>
            @error('domain_id')
                <span style="color:#bf6f6f;font-size:12px;">{{ $message }}</span>
            @enderror
        </div>

        {{-- Alias (Optional) --}}
        <div style="margin-bottom:20px;">
            <label style="display:block;margin-bottom:8px;color:#888;font-size:13px;font-weight:600;">
                🔤 Alias (Optional)
            </label>
            <input 
                type="text"
                name="alias"
                placeholder="custom-link-name"
                value="{{ old('alias', $shortenedUrl->alias) }}"
                style="width:100%;padding:10px;border:1px solid #2a4a2a;border-radius:4px;background:#0a1a0a;color:#aaa;font-size:13px;font-family:monospace;"
            />
            <p style="margin:6px 0 0;font-size:12px;color:#666;">
                💡 Minimal 5 karakter. Kosongkan untuk menggunakan short code.
            </p>
            @error('alias')
                <span style="color:#bf6f6f;font-size:12px;">{{ $message }}</span>
            @enderror
        </div>

        {{-- Expiration Date (Optional) --}}
        <div style="margin-bottom:24px;">
            <label style="display:block;margin-bottom:8px;color:#888;font-size:13px;font-weight:600;">
                ⏰ Expiration Date (Optional)
            </label>
            <input 
                type="datetime-local"
                name="expires_at"
                value="{{ old('expires_at', $shortenedUrl->expires_at ? $shortenedUrl->expires_at->format('Y-m-d\TH:i') : '') }}"
                style="width:100%;padding:10px;border:1px solid #2a4a2a;border-radius:4px;background:#0a1a0a;color:#aaa;font-size:13px;"
            />
            <p style="margin:6px 0 0;font-size:12px;color:#666;">
                💡 Kosongkan jika tidak ingin ada tanggal kadaluarsa.
            </p>
            @error('expires_at')
                <span style="color:#bf6f6f;font-size:12px;">{{ $message }}</span>
            @enderror
        </div>

        {{-- Submit Buttons --}}
        <div style="display:flex;gap:12px;justify-content:flex-end;">
            <a href="{{ route('admin.shortened-urls.index') }}" class="btn btn-secondary">Cancel</a>
            <button type="submit" class="btn btn-primary">Update Shortened URL</button>
        </div>
    </form>
</div>

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

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

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

.btn-secondary {
    background: #2a2a2a;
    color: #888;
    border: 1px solid #3a3a3a;
}

.btn-secondary:hover {
    background: #3a3a3a;
}

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

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

.toolbar {
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #1a3a1a;
}

input, textarea, select {
    box-sizing: border-box;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: #2a6a6a;
    box-shadow: 0 0 0 2px rgba(111, 175, 223, 0.1);
}
</style>
@endsection