@extends('admin._layout')

@section('title', 'عيادة جديدة')

@php
    $autoCreate = (bool) config('database.tenant.auto_create', true);
    $dbPrefix = (string) config('database.tenant.prefix', 'clinic_');
    $tenantUser = config('database.connections.tenant.username');
@endphp

@section('content')
<div class="page-header">
    <div class="row align-items-center">
        <div class="col">
            <h2 class="page-title">عيادة جديدة</h2>
            <div class="text-muted small">
                @if($autoCreate)
                    سيتم إنشاء قاعدة بيانات مستقلة وتشغيل الترحيلات تلقائياً.
                @else
                    قاعدة البيانات لازم تُنشأ يدوياً من cPanel قبل الإرسال — تفاصيل أسفل الصفحة.
                @endif
            </div>
        </div>
        <div class="col-auto">
            <a href="{{ route('admin.clinics') }}" class="btn btn-link">↩ رجوع</a>
        </div>
    </div>
</div>

@unless($autoCreate)
    <div class="alert alert-warning mb-3" role="alert">
        <h4 class="alert-title"><i class="ti ti-alert-triangle me-1"></i> خطوة يدوية مطلوبة قبل الإنشاء</h4>
        <div class="text-muted">قبل ما تضغط "إنشاء العيادة"، اعمل الآتي في <strong>cPanel → MySQL Databases</strong>:</div>
        <ol class="mb-0 mt-2 ps-3">
            <li>أنشئ قاعدة بيانات بالاسم الظاهر تحت (<span class="fw-bold text-primary" id="dbNamePreview">{{ $dbPrefix }}…</span>).</li>
            <li>اربط المستخدم <code>{{ $tenantUser }}</code> بالقاعدة وامنحه <strong>ALL PRIVILEGES</strong>.</li>
            <li>ارجع هنا واضغط إنشاء.</li>
        </ol>
    </div>
@endunless

<form action="{{ route('admin.clinics.store') }}" method="POST">
    @csrf

    <div class="row row-cards">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header"><h3 class="card-title">المعلومات الأساسية</h3></div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">اسم العيادة (عربي) <span class="text-danger">*</span></label>
                            <input name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" required>
                            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">الاسم بالإنجليزية (اختياري)</label>
                            <input name="name_en" class="form-control" value="{{ old('name_en') }}">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">الـ Slug (subdomain) <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <input name="slug" class="form-control @error('slug') is-invalid @enderror" value="{{ old('slug') }}" placeholder="my-clinic" pattern="[a-z0-9][a-z0-9\-]*" required>
                                <span class="input-group-text">.{{ config('app.central_domain') }}</span>
                            </div>
                            @error('slug')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                            <small class="form-hint">حروف صغيرة وأرقام وشرطات فقط.</small>
                            @unless($autoCreate)
                                <div class="mt-2 small">
                                    اسم قاعدة البيانات اللي لازم تنشئها في cPanel:
                                    <code class="text-primary fw-bold" id="dbNameInline">{{ $dbPrefix }}…</code>
                                </div>
                            @endunless
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">رقم الهاتف</label>
                            <input name="phone" class="form-control" value="{{ old('phone') }}">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">واتساب</label>
                            <input name="whatsapp" class="form-control" value="{{ old('whatsapp') }}" placeholder="مثلاً 9665xxxxxxx">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">المدينة</label>
                            <input name="city" class="form-control" value="{{ old('city') }}">
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label">العنوان</label>
                            <input name="address" class="form-control" value="{{ old('address') }}" maxlength="255">
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    <h3 class="card-title">الإعدادات الإقليمية</h3>
                    <div class="text-muted small mt-1">
                        العملة بتحدد سعر اشتراك العيادة من الباقة، واللغة والتوقيت بيستخدموا في عرض البيانات للعيادة.
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">العملة <span class="text-danger">*</span></label>
                            <select name="currency" class="form-select @error('currency') is-invalid @enderror">
                                @foreach(\App\Support\Currency::SUPPORTED as $code => $meta)
                                    <option value="{{ $code }}" @selected(old('currency', 'SAR') === $code)>
                                        {{ $meta['flag'] }} {{ $code }} — {{ $meta['name'] }}
                                    </option>
                                @endforeach
                            </select>
                            @error('currency')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">الدولة</label>
                            <select name="country" class="form-select">
                                <option value="SA" @selected(old('country', 'SA') === 'SA')>🇸🇦 السعودية</option>
                                <option value="EG" @selected(old('country') === 'EG')>🇪🇬 مصر</option>
                                <option value="US" @selected(old('country') === 'US')>🇺🇸 الولايات المتحدة</option>
                                <option value="AE" @selected(old('country') === 'AE')>🇦🇪 الإمارات</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">اللغة الافتراضية</label>
                            <select name="locale" class="form-select">
                                <option value="ar" @selected(old('locale', 'ar') === 'ar')>العربية</option>
                                <option value="en" @selected(old('locale') === 'en')>English</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">المنطقة الزمنية</label>
                            <select name="timezone" class="form-select">
                                <option value="Asia/Riyadh" @selected(old('timezone', 'Asia/Riyadh') === 'Asia/Riyadh')>Asia/Riyadh (السعودية)</option>
                                <option value="Africa/Cairo" @selected(old('timezone') === 'Africa/Cairo')>Africa/Cairo (مصر)</option>
                                <option value="Asia/Dubai" @selected(old('timezone') === 'Asia/Dubai')>Asia/Dubai (الإمارات)</option>
                                <option value="America/New_York" @selected(old('timezone') === 'America/New_York')>America/New_York</option>
                                <option value="America/Los_Angeles" @selected(old('timezone') === 'America/Los_Angeles')>America/Los_Angeles</option>
                                <option value="UTC" @selected(old('timezone') === 'UTC')>UTC</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header"><h3 class="card-title">حساب المالك</h3></div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">اسم المالك <span class="text-danger">*</span></label>
                            <input name="owner_name" class="form-control @error('owner_name') is-invalid @enderror" value="{{ old('owner_name') }}" required>
                            @error('owner_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">البريد الإلكتروني <span class="text-danger">*</span></label>
                            <input name="owner_email" type="email" class="form-control @error('owner_email') is-invalid @enderror" value="{{ old('owner_email') }}" required>
                            @error('owner_email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">كلمة المرور</label>
                            <input name="password" type="text" class="form-control @error('password') is-invalid @enderror" placeholder="اتركها فارغة لتوليد كلمة مرور تلقائياً">
                            @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            <small class="form-hint">8 أحرف على الأقل. ستظهر مرة واحدة في الصفحة التالية.</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-header"><h3 class="card-title">الباقة والفترة التجريبية</h3></div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">الباقة الابتدائية</label>
                        <select name="plan_id" id="planSelect" class="form-select">
                            <option value="">— بدون (تجريبي فقط) —</option>
                            @foreach($plans as $p)
                                @php
                                    $pricesMap = is_array($p->prices) ? $p->prices : [];
                                    if (empty($pricesMap) && $p->price > 0) {
                                        $pricesMap = [$p->currency => (float) $p->price];
                                    }
                                @endphp
                                <option value="{{ $p->id }}"
                                        data-prices='@json($pricesMap)'
                                        data-duration="{{ $p->duration_days }}"
                                        @selected(old('plan_id') == $p->id)>
                                    {{ $p->name }} ({{ $p->duration_days }} يوم)
                                </option>
                            @endforeach
                        </select>
                        <div class="form-hint mt-1" id="planPriceHint">
                            يمكنك إضافة اشتراك مدفوع لاحقاً من صفحة العيادة.
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">أيام الفترة التجريبية</label>
                        <input name="trial_days" type="number" class="form-control" value="{{ old('trial_days', 14) }}" min="0" max="365">
                    </div>
                </div>
            </div>

            <button type="submit" class="btn btn-primary w-100 mt-3" id="submitBtn">
                <i class="ti ti-plus me-1"></i> إنشاء العيادة
            </button>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
const DB_PREFIX = @json($dbPrefix);
const MAX_DB_LEN = 64;

function previewDbName(slug) {
    const cleaned = (slug || '').toLowerCase().replace(/[^a-z0-9_]+/g, '_');
    if (! cleaned) return DB_PREFIX + '…';
    return (DB_PREFIX + cleaned).slice(0, MAX_DB_LEN);
}

function syncDbPreview() {
    const slug = $('input[name="slug"]').val();
    const name = previewDbName(slug);
    $('#dbNamePreview, #dbNameInline').text(name);
}

$('input[name="name"]').on('input', function () {
    const $slug = $('input[name="slug"]');
    if (!$slug.val() || $slug.data('auto')) {
        const slug = $(this).val()
            .toLowerCase()
            .replace(/[؀-ۿ]/g, '') // strip Arabic for slug
            .replace(/\s+/g, '-')
            .replace(/[^a-z0-9\-]/g, '')
            .replace(/-+/g, '-')
            .replace(/^-|-$/g, '');
        $slug.val(slug).data('auto', true);
        syncDbPreview();
    }
});
$('input[name="slug"]').on('input', function () {
    $(this).data('auto', false);
    syncDbPreview();
});
syncDbPreview();

$('form').on('submit', function () {
    $('#submitBtn').prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>جاري الإنشاء... قد يستغرق 5-10 ثوان');
});

// Show the plan price in the selected clinic currency, so the admin
// sees what the clinic will actually pay before subscribing.
function refreshPlanPriceHint() {
    const planSel = document.getElementById('planSelect');
    const currency = document.querySelector('select[name="currency"]')?.value || 'SAR';
    const hint = document.getElementById('planPriceHint');
    if (! planSel || ! hint) return;
    const opt = planSel.selectedOptions[0];
    if (! opt || ! opt.value) {
        hint.textContent = 'يمكنك إضافة اشتراك مدفوع لاحقاً من صفحة العيادة.';
        return;
    }
    let prices = {};
    try { prices = JSON.parse(opt.dataset.prices || '{}'); } catch (e) { prices = {}; }
    const duration = opt.dataset.duration;
    const amount = prices[currency];
    if (amount !== undefined && amount !== null) {
        hint.innerHTML = `<i class="ti ti-cash me-1"></i> سعر الباقة بالعملة المختارة: <strong>${Number(amount).toLocaleString()} ${currency}</strong> / ${duration} يوم`;
    } else {
        const available = Object.keys(prices).join(' / ');
        hint.innerHTML = `<i class="ti ti-alert-triangle me-1 text-warning"></i> الباقة مش متسعرة بـ <strong>${currency}</strong>. متاحة بـ: ${available || '—'}.`;
    }
}
document.querySelector('select[name="currency"]')?.addEventListener('change', refreshPlanPriceHint);
document.getElementById('planSelect')?.addEventListener('change', refreshPlanPriceHint);
refreshPlanPriceHint();
</script>
@endpush