@extends('layouts.user')

@section('page-title', __('New Subscription'))

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="bg-white rounded-xl border border-gray-200 p-6">
        <p class="text-sm text-gray-500 mb-6">{{ __('Automatically send likes/views to your new posts. Set it once and it runs automatically.') }}</p>
        @if($services->isEmpty())
            <p class="p-8 text-center text-gray-500 border border-dashed border-gray-300 rounded-lg">{{ __('No subscription services available right now.') }}</p>
        @else
            <form action="{{ route('user.subscriptions.store') }}" method="POST">
                @csrf
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('Service') }}</label>
                        <select name="service_id" required class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
                            @foreach($services as $service)
                                <option value="{{ $service->id }}">{{ $service->name }} — {{ currency($service->rate) }}/1000</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('Username') }} <span class="text-red-500">*</span></label>
                        <input type="text" name="username" required placeholder="@username"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('Link') }} <span class="text-red-500">*</span></label>
                        <input type="text" name="link" required placeholder="{{ __('https://...') }}"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
                    </div>
                    <div class="grid grid-cols-3 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('Posts') }}</label>
                            <input type="number" name="posts" min="1" max="1000" value="10" required
                                   class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('Qty / post') }}</label>
                            <input type="number" name="quantity" min="1" value="100" required
                                   class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('Delay (min)') }}</label>
                            <input type="number" name="delay" min="0" value="60"
                                   class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
                        </div>
                    </div>
                    <div class="p-4 bg-indigo-50 rounded-lg flex items-center justify-between">
                        <p class="text-sm text-gray-600">{{ __('Total cost (charged upfront)') }}</p>
                        <p class="font-bold text-indigo-600">{{ __('Calculated on submit') }}</p>
                    </div>
                    <button type="submit" class="w-full py-3 text-white font-semibold bg-indigo-600 rounded-lg hover:bg-indigo-700">{{ __('Create Subscription') }}</button>
                </div>
            </form>
        @endif
    </div>
</div>
@endsection