<!DOCTYPE html>
<html lang="mn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Бүртгүүлэх — NSMA</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>tailwind.config = { theme: { extend: { colors: { 'nsma-red':'#FF3D3D','nsma-dark':'#0F1729'}, fontFamily:{sans:['Inter','sans-serif']} }}}</script>
</head>
<body class="font-sans bg-gray-50 min-h-screen flex items-center justify-center p-4">

<div class="w-full max-w-lg">
    <div class="text-center mb-8">
        <a href="{{ url('/') }}" class="inline-block">
            <div class="font-black text-3xl">NSMA<span class="text-nsma-red">.</span></div>
        </a>
        <p class="mt-2 text-sm text-gray-500">Шинэ бүртгэл нээх</p>
    </div>

    <div class="bg-white rounded-2xl shadow-xl p-8">
        <h1 class="text-2xl font-black mb-2">Бүртгүүлэх</h1>
        <p class="text-sm text-gray-500 mb-6">Хувийн булан үүсгээд захиалга өгч, ажлынхаа явцыг хянах боломжтой.</p>

        <div id="register-error" class="hidden mb-4 px-4 py-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm"></div>
        @if($errors->any())
            <div class="mb-4 px-4 py-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm">
                @foreach($errors->all() as $error) <div>{{ $error }}</div> @endforeach
            </div>
        @endif

        <form id="register-form" action="{{ route('client.register.post') }}" method="POST" class="space-y-4">
            @csrf
            <div>
                <label class="block text-sm font-semibold mb-1">Бүтэн нэр <span class="text-nsma-red">*</span></label>
                <input type="text" name="name" value="{{ old('name') }}" required class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-nsma-red outline-none">
            </div>

            <div>
                <label class="block text-sm font-semibold mb-1">Байгууллагын нэр</label>
                <input type="text" name="company_name" value="{{ old('company_name') }}" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-nsma-red outline-none">
            </div>

            <div class="grid md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-semibold mb-1">И-мэйл <span class="text-nsma-red">*</span></label>
                    <input type="email" name="email" value="{{ old('email') }}" required class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-nsma-red outline-none">
                </div>
                <div>
                    <label class="block text-sm font-semibold mb-1">Утас <span class="text-nsma-red">*</span></label>
                    <input type="tel" name="phone" value="{{ old('phone') }}" required class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-nsma-red outline-none">
                </div>
            </div>

            <div class="grid md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-semibold mb-1">Албан тушаал</label>
                    <input type="text" name="position" value="{{ old('position') }}" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-nsma-red outline-none">
                </div>
                <div>
                    <label class="block text-sm font-semibold mb-1">Салбар</label>
                    <input type="text" name="industry" value="{{ old('industry') }}" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-nsma-red outline-none">
                </div>
            </div>

            <div class="grid md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-semibold mb-1">Нууц үг <span class="text-nsma-red">*</span></label>
                    <input type="password" name="password" required minlength="8" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-nsma-red outline-none">
                </div>
                <div>
                    <label class="block text-sm font-semibold mb-1">Нууц үг давтах <span class="text-nsma-red">*</span></label>
                    <input type="password" name="password_confirmation" required class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-nsma-red outline-none">
                </div>
            </div>

            <button type="submit" class="w-full bg-nsma-red text-white font-semibold py-3 rounded-lg hover:bg-red-600 transition">Бүртгүүлэх</button>
        </form>

        <p class="text-center text-sm text-gray-500 mt-6">
            Бүртгэлтэй юу? <a href="{{ route('client.login') }}" class="text-nsma-red font-semibold">Нэвтрэх</a>
        </p>
    </div>
</div>

<script>
    document.getElementById('register-form').addEventListener('submit', async (e) => {
        e.preventDefault();
        const form = e.target;
        const errorBox = document.getElementById('register-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.location.href = data.redirect;
        } else {
            errorBox.innerHTML = '';
            if (data.errors) {
                Object.values(data.errors).flat().forEach(msg => {
                    const div = document.createElement('div');
                    div.textContent = msg;
                    errorBox.appendChild(div);
                });
            } else {
                errorBox.textContent = data.message || 'Алдаа гарлаа.';
            }
            errorBox.classList.remove('hidden');
        }
    });
</script>

</body>
</html>
