@extends('layouts.app2')

@section('title', 'ROOT ERP | إنشاء الحساب')

@section('content')

    <style>
        .register-container {
            max-width: 520px;
            margin: 80px auto;
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
            padding: 45px 35px;
            border-top: 6px solid #1563ff;
        }

        .register-container h2 {
            text-align: center;
            margin-bottom: 30px;
            color: #1563ff;
            font-weight: 700;
            font-size: 1.4rem;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            color: #333;
            margin-bottom: 6px;
            font-weight: 600;
            font-size: 0.95rem;
        }

        input {
            width: 100%;
            padding: 10px 5px;
            border: 1px solid #ccc;
            border-radius: 8px;
            font-size: 0.95rem;
            direction: rtl;
            transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        }

        input:focus {
            outline: none;
            border-color: #1563ff;
            box-shadow: 0 0 4px rgba(21, 99, 255, 0.3);
        }

        input[readonly] {
            background-color: #f3f6fa;
            cursor: not-allowed;
            color: #555;
        }

        .btn {
            background: #1563ff;
            color: #fff;
            border: none;
            padding: 12px 0;
            width: 100%;
            border-radius: 10px;
            font-size: 1rem;
            cursor: pointer;
            font-weight: 600;
            transition: background 0.25s ease-in-out, transform 0.15s ease-in-out;
        }

        .btn:hover {
            background: #0f4ed6;
            transform: translateY(-1px);
        }

        .error {
            color: #e74c3c;
            font-size: 0.9rem;
            margin-top: 4px;
        }

        hr {
            margin: 28px 0;
            border: none;
            border-top: 1px solid #eee;
        }
    </style>
    <div class="register-container">
        <h2>@lang('lang_v1.create_admin_account')</h2>
        <form method="POST" action="/register-complete">
            @csrf
            <input type="hidden" name="token" value="{{ request('token') }}">

            <div class="form-group">
                <label>@lang('lang_v1.full_name')</label>
                <input type="text" name="first_name" value="{{ old('first_name') }}">
                @error('first_name')
                    <div class="error">{{ $message }}</div>
                @enderror
            </div>
            <div class="form-group">
                <label>@lang('نوع النشاط التجاري')</label>
                <select name="business_type_id"
                    style="
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #d0d7e2;
            border-radius: 8px;
            background-color: #fff;
            font-size: 15px;
            color: #333;
            appearance: none;
            outline: none;
            transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
            box-sizing: border-box;
        "
                    onfocus="this.style.borderColor='#1563ff'; this.style.boxShadow='0 0 0 2px rgba(21,99,255,0.1)'"
                    onblur="this.style.borderColor='#d0d7e2'; this.style.boxShadow='none'">
                    <option value="">@lang('أختر نوع النشاط التجاري')</option>
                    @foreach ($types as $id => $name)
                        <option value="{{ $id }}"
                            {{ old('business_type_id', $client->business_type_id) == $id ? 'selected' : '' }}>
                            {{ $name }}
                        </option>
                    @endforeach
                </select>
                @error('business_type_id')
                    <div class="error">{{ $message }}</div>
                @enderror
            </div>
            <div class="form-group">
                <label>@lang('lang_v1.business_name')</label>
                <input type="text" id="business-name" name="name" value="{{ old('name') }}" class="form-control"
                    required>
                @error('name')
                    <div class="error">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-group">
                <label>@lang('lang_v1.subdomain')</label>
                <div style="display: flex; gap: 8px; align-items: center;">
                    <input type="text" id="subdomain" name="subdomain" value="{{ old('subdomain') }}"
                        class="form-control" required>
                    <button type="button" id="check-subdomain" class="btn btn-secondary"
                        style="white-space: nowrap;">تحقق</button>
                </div>

                <div id="subdomain-preview" style="font-size: 0.9rem; color: #555; margin-top: 4px;">
                    سيتم إنشاء نطاق فرعي فريد استنادًا إلى اسم النشاط التجاري.
                </div>

                @error('subdomain')
                    <div class="error">{{ $message }}</div>
                @enderror
            </div>
            <div class="form-group">
                <label>@lang('lang_v1.email')</label>
                <input type="email" name="email" value="{{ old('email') }}">
                @error('email')
                    <div class="error">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-group">
                <label>@lang('lang_v1.phone')</label>
                <input type="tel" name="phone" value="{{ old('phone', $client->phone) }}" readonly>

            </div>

            <div class="form-group">
                <label>@lang('lang_v1.city')</label>
                <select name="city_id"
                    style="
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #d0d7e2;
            border-radius: 8px;
            background-color: #fff;
            font-size: 15px;
            color: #333;
            appearance: none;
            outline: none;
            transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
            box-sizing: border-box;
        "
                    onfocus="this.style.borderColor='#1563ff'; this.style.boxShadow='0 0 0 2px rgba(21,99,255,0.1)'"
                    onblur="this.style.borderColor='#d0d7e2'; this.style.boxShadow='none'">
                    <option value="">@lang('أختر المدينة')</option>
                    @foreach ($cities as $id => $name)
                        <option value="{{ $id }}"
                            {{ old('city_id', $client->city_id) == $id ? 'selected' : '' }}>
                            {{ $name }}
                        </option>
                    @endforeach
                </select>
                @error('city_id')
                    <div class="error">{{ $message }}</div>
                @enderror
            </div>

            <hr>

            <div class="form-group">
                <label>@lang('lang_v1.username')</label>
                <input type="text" name="username" value="{{ old('username') }}">
                @error('username')
                    <div class="error">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-group">
                <label>@lang('lang_v1.password')</label>
                <input type="password" name="password">
                @error('password')
                    <div class="error">{{ $message }}</div>
                @enderror
            </div>



            <button type="submit" class="btn">@lang('lang_v1.create_account')</button>
        </form>
    </div>
@endsection
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const businessName = document.getElementById('business-name');
        const subdomainInput = document.getElementById('subdomain');
        const checkBtn = document.getElementById('check-subdomain');
        const preview = document.getElementById('subdomain-preview');
        const form = document.querySelector('form');
        let subdomainChecked = false;

        const appDomain = "{{ env('CPANEL_DOMAIN') }}";

        // Convert Arabic to English (used only for business name)
        function slugify(text) {
            const arabicMap = {
                'ا': 'a',
                'أ': 'a',
                'إ': 'i',
                'آ': 'a',
                'ب': 'b',
                'ت': 't',
                'ث': 'th',
                'ج': 'j',
                'ح': 'h',
                'خ': 'kh',
                'د': 'd',
                'ذ': 'th',
                'ر': 'r',
                'ز': 'z',
                'س': 's',
                'ش': 'sh',
                'ص': 's',
                'ض': 'd',
                'ط': 't',
                'ظ': 'z',
                'ع': 'a',
                'غ': 'gh',
                'ف': 'f',
                'ق': 'q',
                'ك': 'k',
                'ل': 'l',
                'م': 'm',
                'ن': 'n',
                'ه': 'h',
                'و': 'w',
                'ي': 'y',
                'ى': 'a',
                'ئ': 'y',
                'ء': 'a',
                'ؤ': 'w'
            };
            return text
                .trim()
                .split('')
                .map(ch => arabicMap[ch] || ch)
                .join('')
                .toLowerCase()
                .replace(/[^a-z0-9-]/g, '-') // remove non-English chars
                .replace(/-+/g, '-') // merge multiple dashes
                .replace(/^-|-$/g, ''); // trim dashes
        }

        // Update the preview under the subdomain field
        function updatePreview() {
            const sub = subdomainInput.value.trim();
            if (sub) {
                preview.innerHTML = `سيكون النطاق الفرعي: <strong>${sub}.${appDomain}</strong>`;
                preview.style.color = '#555';
            } else {
                preview.textContent = '';
            }
        }

        // Auto-fill subdomain when typing business name
        businessName.addEventListener('input', function() {
            if (!subdomainChecked) {
                const slug = slugify(this.value);
                subdomainInput.value = slug;
                updatePreview();
            }
        });

        // Validate subdomain input (only English letters, numbers, and dashes)
        subdomainInput.addEventListener('input', function() {
            let value = this.value.toLowerCase();
            if (/[^a-z0-9-]/.test(value)) {
                preview.textContent =
                    '❌ يُسمح فقط بالحروف الإنجليزية والأرقام والشرطات (-) في النطاق الفرعي.';
                preview.style.color = 'red';
                this.value = value.replace(/[^a-z0-9-]/g, '');
                subdomainChecked = false;
                return;
            }
            subdomainChecked = false;
            updatePreview();
        });

        // Check availability via AJAX
        checkBtn.addEventListener('click', function() {
            const subdomain = subdomainInput.value.trim();
            if (!subdomain) {
                preview.textContent = 'يرجى إدخال النطاق الفرعي أولاً.';
                preview.style.color = 'red';
                subdomainChecked = false;
                return;
            }

            checkBtn.disabled = true;
            checkBtn.textContent = 'جاري التحقق...';

            fetch("{{ route('check.subdomain') }}", {
                    method: "POST",
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    body: JSON.stringify({
                        subdomain
                    })
                })
                .then(res => res.json())
                .then(data => {
                    if (data.available) {
                        preview.innerHTML = `✅ متاح: <strong>${subdomain}.${appDomain}</strong>`;
                        preview.style.color = '#198754'; // Bootstrap success
                        subdomainChecked = true;
                    } else {
                        preview.innerHTML =
                        `❌ غير متاح: <strong>${subdomain}.${appDomain}</strong>`;
                        preview.style.color = '#dc3545'; // Bootstrap danger
                        subdomainChecked = false;
                    }
                })
                .catch(() => {
                    preview.textContent = 'حدث خطأ أثناء التحقق.';
                    preview.style.color = '#dc3545';
                    subdomainChecked = false;
                })
                .finally(() => {
                    checkBtn.disabled = false;
                    checkBtn.textContent = 'تحقق';
                });
        });

        // Prevent form submission unless subdomain is verified
        form.addEventListener('submit', function(e) {
            if (!subdomainChecked) {
                e.preventDefault();
                preview.textContent = 'يرجى التحقق من توفر النطاق أولاً.';
                preview.style.color = '#dc3545';
            }
        });

        updatePreview();
    });
</script>