@extends('client.layouts.app')

@section('title', 'Шинэ захиалга')
@section('page_title', 'Шинэ захиалга өгөх')

@section('content')

<form id="order-form" action="{{ route('client.orders.store') }}" method="POST" enctype="multipart/form-data" class="max-w-3xl bg-white rounded-2xl border border-gray-100 p-6 lg:p-8 space-y-5">
    @csrf

    <div>
        <label class="block text-sm font-semibold mb-1">Үйлчилгээ <span class="text-nsma-red">*</span></label>
        <select name="service_id" required class="w-full px-4 py-3 border border-gray-200 rounded-lg outline-none">
            <option value="">Сонгоно уу</option>
            @foreach($services as $s)
                <option value="{{ $s->id }}" @selected(old('service_id') == $s->id)>{{ $s->title }}</option>
            @endforeach
        </select>
    </div>

    <div>
        <label class="block text-sm font-semibold mb-1">Захиалгын гарчиг <span class="text-nsma-red">*</span></label>
        <input type="text" name="title" value="{{ old('title') }}" required placeholder="Жнь: 2026 оны зуны кампанит ажил" class="w-full px-4 py-3 border border-gray-200 rounded-lg outline-none">
    </div>

    <div>
        <label class="block text-sm font-semibold mb-1">Дэлгэрэнгүй тайлбар <span class="text-nsma-red">*</span></label>
        <textarea name="description" rows="6" required placeholder="Танай байгууллагын зорилго, хүлээж буй үр дүн, цаг хугацаа, төсөв болон бусад чухал мэдээллийг бичнэ үү." class="w-full px-4 py-3 border border-gray-200 rounded-lg outline-none">{{ old('description') }}</textarea>
    </div>

    <div class="grid md:grid-cols-3 gap-4">
        <div>
            <label class="block text-sm font-semibold mb-1">Эцсийн өдөр</label>
            <input type="date" name="deadline" value="{{ old('deadline') }}" min="{{ now()->format('Y-m-d') }}" class="w-full px-4 py-3 border border-gray-200 rounded-lg outline-none">
        </div>
        <div>
            <label class="block text-sm font-semibold mb-1">Төсөв (₮)</label>
            <input type="number" name="budget" value="{{ old('budget') }}" min="0" placeholder="Заавал биш" class="w-full px-4 py-3 border border-gray-200 rounded-lg outline-none">
        </div>
        <div>
            <label class="block text-sm font-semibold mb-1">Ач холбогдол</label>
            <select name="priority" class="w-full px-4 py-3 border border-gray-200 rounded-lg outline-none">
                <option value="low">Бага</option>
                <option value="normal" selected>Хэвийн</option>
                <option value="high">Өндөр</option>
                <option value="urgent">Яаралтай</option>
            </select>
        </div>
    </div>

    <div>
        <label class="block text-sm font-semibold mb-1">Хавсралт файлууд</label>
        <input type="file" name="attachments[]" multiple class="w-full">
        <p class="text-xs text-gray-500 mt-1">PDF, Word, зураг г.м. (тус бүр 10MB-аас бага)</p>
    </div>

    <div id="form-error" class="hidden px-4 py-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm"></div>

    <div class="flex gap-3 pt-4 border-t border-gray-100">
        <button type="submit" class="bg-nsma-red text-white font-semibold px-6 py-3 rounded-lg hover:bg-red-600">Захиалга илгээх</button>
        <a href="{{ route('client.orders.index') }}" class="text-gray-600 self-center">Цуцлах</a>
    </div>
</form>

<script>
    document.getElementById('order-form').addEventListener('submit', async (e) => {
        e.preventDefault();
        const form = e.target;
        const errorBox = document.getElementById('form-error');
        errorBox.classList.add('hidden');

        const res = await fetch(form.action, {
            method: 'POST',
            body: new FormData(form),
            headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
        });
        const data = await res.json().catch(() => ({}));

        if (res.ok && data.success) {
            window.showToast('Захиалга амжилттай илгээгдлээ!');
            setTimeout(() => window.location.href = data.redirect, 800);
        } else {
            errorBox.textContent = data.message || 'Алдаа гарлаа.';
            errorBox.classList.remove('hidden');
        }
    });
</script>

@endsection