@extends('layouts.user')

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

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-xl border border-gray-200 p-6">
        <form action="{{ route('user.orders.store') }}" method="POST" id="order-form">
            @csrf
            <div class="space-y-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('Service') }}</label>
                    <select name="service_id" id="service-select" required class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
                        @foreach($categories as $category)
                            <optgroup label="{{ $category->name }}">
                                @foreach($category->services as $service)
                                    <option value="{{ $service->id }}"
                                            data-min="{{ $service->min }}" data-max="{{ $service->max }}"
                                            data-rate="{{ $service->rateFor(auth()->user()) }}"
                                            data-custom="{{ $service->requiresCustomField() ? '1' : '0' }}"
                                            {{ ($service->id ?? null) === ($service->id ?? null) && isset($service) && old('service_id', request('service')) == $service->id ? 'selected' : '' }}>
                                        {{ $service->name }} — {{ currency($service->rateFor(auth()->user())) }}/1000
                                    </option>
                                @endforeach
                            </optgroup>
                        @endforeach
                    </select>
                </div>

                <div id="custom-field-wrapper" class="hidden">
                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('Custom Data') }} <span class="text-red-500">*</span></label>
                    <textarea name="custom_field" rows="4" placeholder="{{ __('Enter custom comments or data (one per line)') }}"
                              class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"></textarea>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('Link / Username') }} <span class="text-red-500">*</span></label>
                    <input type="text" name="link" value="{{ old('link') }}" required
                           placeholder="{{ __('https://... or @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">{{ __('Quantity') }} <span class="text-red-500">*</span></label>
                    <input type="number" name="quantity" id="quantity-input" value="{{ old('quantity', 100) }}" required min="1"
                           class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500">
                    <p id="quantity-hint" class="text-xs text-gray-400 mt-1"></p>
                </div>

                <div id="dripfeed-wrapper" class="hidden p-4 bg-gray-50 rounded-lg">
                    <p class="text-sm font-medium text-gray-700 mb-3">{{ __('Drip-feed Settings') }}</p>
                    <div class="grid grid-cols-3 gap-3">
                        <div>
                            <label class="block text-xs text-gray-500 mb-1">{{ __('Runs') }}</label>
                            <input type="number" name="dripfeed_runs" min="1" value="{{ old('dripfeed_runs', 1) }}" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
                        </div>
                        <div>
                            <label class="block text-xs text-gray-500 mb-1">{{ __('Interval (min)') }}</label>
                            <input type="number" name="dripfeed_interval" min="0" value="{{ old('dripfeed_interval', 30) }}" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
                        </div>
                        <div>
                            <label class="block text-xs text-gray-500 mb-1">{{ __('Qty per run') }}</label>
                            <input type="number" name="dripfeed_quantity" min="1" value="{{ old('dripfeed_quantity', 50) }}" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg">
                        </div>
                    </div>
                </div>

                <div class="p-4 bg-indigo-50 rounded-lg flex items-center justify-between">
                    <div>
                        <p class="text-sm text-gray-600">{{ __('Total Charge') }}</p>
                        <p class="text-xs text-gray-400">{{ __('Balance') }}: {{ currency(auth()->user()->balance) }}</p>
                    </div>
                    <p id="total-charge" class="text-2xl font-bold text-indigo-600">{{ currency(0) }}</p>
                </div>

                <button type="submit" class="w-full py-3 text-white font-semibold bg-indigo-600 rounded-lg hover:bg-indigo-700 transition">
                    {{ __('Place Order') }}
                </button>
            </div>
        </form>
    </div>
</div>

<script>
const form = document.getElementById('order-form');
const serviceSelect = document.getElementById('service-select');
const quantityInput = document.getElementById('quantity-input');
const totalEl = document.getElementById('total-charge');
const hintEl = document.getElementById('quantity-hint');
const customWrapper = document.getElementById('custom-field-wrapper');
const dripWrapper = document.getElementById('dripfeed-wrapper');
const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

function selectedOption() {
    return serviceSelect.options[serviceSelect.selectedIndex];
}

function updateCharge() {
    const opt = selectedOption();
    const rate = parseFloat(opt.dataset.rate || 0);
    const qty = parseInt(quantityInput.value || 0, 10);
    const min = parseInt(opt.dataset.min || 1, 10);
    const max = parseInt(opt.dataset.max || 100000, 10);

    hintEl.textContent = `Min: ${min.toLocaleString()} · Max: ${max.toLocaleString()}`;

    if (qty < min || qty > max) {
        totalEl.textContent = '—';
        totalEl.classList.add('text-red-600');
        return;
    }

    totalEl.classList.remove('text-red-600');
    fetch('{{ route("user.orders.charge") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
        body: JSON.stringify({ service_id: opt.value, quantity: qty })
    })
    .then(r => r.json())
    .then(data => { totalEl.textContent = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(data.total); })
    .catch(() => { totalEl.textContent = (rate * qty / 1000).toFixed(2); });
}

function toggleFields() {
    const opt = selectedOption();
    customWrapper.classList.toggle('hidden', opt.dataset.custom !== '1');
    dripWrapper.classList.toggle('hidden', false);
}

serviceSelect.addEventListener('change', () => { updateCharge(); toggleFields(); });
quantityInput.addEventListener('input', updateCharge);
toggleFields();
updateCharge();
</script>
@endsection