@extends('layouts.app')

@section('title', 'Add Rate Card')
@section('page-title', 'Add Service 💰')

@section('content')
<div class="max-w-lg mx-auto">
    <div class="cat-card p-4 lg:p-8">
        <form action="{{ route('rate-cards.store') }}" method="POST" class="space-y-4">
            @csrf
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">Service Name <span class="text-pink-400">*</span></label>
                <input type="text" name="service_name" value="{{ old('service_name') }}" class="input-soft" required
                       placeholder="e.g. Instagram Reel (Paid Partnership)">
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">Description</label>
                <textarea name="description" rows="2" class="input-soft resize-none"
                          placeholder="Short description of what's included...">{{ old('description') }}</textarea>
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Platform</label>
                    <select name="platform" class="input-soft">
                        <option value="general">⭐ General</option>
                        <option value="instagram">📸 Instagram</option>
                        <option value="tiktok">🎵 TikTok</option>
                        <option value="youtube">▶️ YouTube</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Content Type</label>
                    <input type="text" name="content_type" value="{{ old('content_type') }}" class="input-soft"
                           placeholder="Reel, Story, Feed...">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Price <span class="text-pink-400">*</span></label>
                    <input type="number" name="price" value="{{ old('price') }}" class="input-soft"
                           min="0" step="100000" required placeholder="0">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Currency</label>
                    <select name="currency" class="input-soft">
                        <option value="IDR" selected>IDR</option>
                        <option value="USD">USD</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Price Unit</label>
                    <select name="price_unit" class="input-soft">
                        <option value="per_content">Per Content</option>
                        <option value="per_month">Per Month</option>
                        <option value="per_campaign">Per Campaign</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Sort Order</label>
                    <input type="number" name="sort_order" value="{{ old('sort_order', 0) }}" class="input-soft" min="0">
                </div>
            </div>
            <label class="flex items-center gap-3 cursor-pointer py-1">
                <input type="checkbox" name="is_negotiable" value="1" {{ old('is_negotiable') ? 'checked' : '' }}
                       class="w-4 h-4 accent-yellow-400">
                <span class="text-sm text-gray-600">Price is negotiable</span>
            </label>
            <div class="flex flex-col sm:flex-row gap-3 pt-1">
                <button type="submit" class="btn-sakura flex-1 py-3">💰 Add Service</button>
                <a href="{{ route('rate-cards.index') }}"
                   class="flex-1 py-3 text-center rounded-full border border-pink-200 text-gray-600 hover:bg-pink-50 font-semibold text-sm">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>
@endsection