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

@section('content')
<div class="toolbar">
    <h2 style="font-size: 18px;">🔗 Create 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.store') }}" style="background:#1a2a1a;border-radius:8px;padding:24px;border:1px solid #2a4a2a;">
        @csrf

        {{-- 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') }}</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') == $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') }}"
                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. Jika kosong, akan menggunakan random 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') }}"
                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">Create 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