@extends('master-user')

@section('content')
<section class="py-8">
    <div class="max-w-xl mx-auto px-4">
        <div class="bg-white rounded-xl shadow-lg p-8">
            <h1 class="text-2xl font-bold text-[#3a3058] mb-6 flex items-center gap-2">
                <svg class="w-6 h-6 text-yellow-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M12 20a8 8 0 100-16 8 8 0 000 16z" /></svg>
                Generate ShortUrl
            </h1>
            @if(session('success'))
                <div class="mb-4 rounded-lg bg-green-100 border border-green-300 text-green-800 px-4 py-3 text-sm font-medium flex items-center gap-2">
                    <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /></svg>
                    {{ session('success') }}
                </div>
            @endif
            <form action="{{ route('user.shorturl.generate') }}" method="POST" class="space-y-6">
                @csrf
                <div>
                    <label for="full_url" class="block text-sm font-semibold text-gray-700 mb-1">Full URL</label>
                    <input type="url" id="full_url" name="full_url" class="block w-full rounded-md border border-gray-300 px-4 py-2 text-base focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400 placeholder-gray-400" placeholder="Enter full URL" required>
                </div>
                <div>
                    <label for="prefix" class="block text-sm font-semibold text-gray-700 mb-1">Prefix (Optional)</label>
                    <select id="prefix" name="prefix" class="block w-full rounded-md border border-gray-300 px-4 py-2 text-base focus:ring-2 focus:ring-yellow-300 focus:border-yellow-400">
                        <option value="">Select Prefix</option>
                        @foreach($userPrefixes as $prefix)
                            <option value="{{ $prefix->prefix }}">{{ $prefix->prefix }}</option>
                        @endforeach
                    </select>
                </div>
                <button type="submit" class="w-full bg-gradient-to-r from-yellow-400 to-yellow-500 text-[#3a3058] font-semibold rounded-md px-4 py-2 transition-colors duration-150 shadow focus:outline-none focus:ring-2 focus:ring-yellow-300 hover:from-yellow-500 hover:to-yellow-400 hover:text-white">Generate Short URL</button>
            </form>
        </div>
    </div>
</section>
@endsection

@section('js')
@endsection