@extends('layouts.app')

@section('title', 'إعدادات العيادة')

@php
    // Group titles + icons + descriptions. Anything not listed falls
    // back to a generic "متفرقات" entry — keeps the page extensible
    // without view edits when new groups appear in the controller payload.
    $groupMeta = [
        'general'       => ['title' => 'عام',          'icon' => 'ti-settings',         'desc' => 'اسم العيادة، اللغة، العملة والمعلومات الأساسية'],
        'appointments'  => ['title' => 'المواعيد',     'icon' => 'ti-calendar-event',   'desc' => 'ساعات العمل، مدة الموعد، التذكيرات والحجز الإلكتروني'],
        'invoices'      => ['title' => 'الفواتير',     'icon' => 'ti-receipt',          'desc' => 'بادئة الفاتورة، الضريبة، شروط السداد'],
        'notifications' => ['title' => 'الإشعارات',    'icon' => 'ti-bell',             'desc' => 'إشعارات المرضى عبر البريد الإلكتروني والرسائل النصية'],
        'patients'      => ['title' => 'المرضى',       'icon' => 'ti-users',            'desc' => 'إعدادات ملفات المرضى وأرقامها'],
        'business'      => ['title' => 'العمل',        'icon' => 'ti-building',         'desc' => 'العملة، اللغة، التوقيت'],
        'security'      => ['title' => 'الأمان',       'icon' => 'ti-shield',           'desc' => 'الصلاحيات وسياسات كلمة المرور'],
    ];

    // Localized labels for individual settings — keyed by the raw key
    // stored in the database. Anything not listed falls back to the
    // setting's `description` column, then finally to its raw key.
    $settingLabels = [
        'locale'                       => 'لغة النظام',
        'timezone'                     => 'المنطقة الزمنية',
        'currency'                     => 'العملة (الكود)',
        'currency_symbol'              => 'رمز العملة',
        'date_format'                  => 'صيغة التاريخ',
        'working_hours_start'          => 'بداية ساعات العمل',
        'working_hours_end'            => 'نهاية ساعات العمل',
        'default_slot_duration'        => 'مدة الموعد الافتراضية (دقائق)',
        'advance_booking_days'         => 'أقصى عدد أيام للحجز المسبق',
        'reminder_hours_before'        => 'إرسال التذكير قبل الموعد بـ (ساعات)',
        'allow_online_booking'         => 'السماح بالحجز الإلكتروني',
        'invoice_prefix'               => 'بادئة رقم الفاتورة',
        'invoice_starting_number'      => 'أول رقم فاتورة',
        'tax_rate'                     => 'نسبة الضريبة (%)',
        'tax_label'                    => 'اسم الضريبة كما يظهر للمريض',
        'invoice_terms'                => 'شروط الدفع المطبوعة على الفاتورة',
        'file_number_prefix'           => 'بادئة رقم ملف المريض',
        'notification_email_enabled'   => 'تفعيل إشعارات البريد الإلكتروني',
        'notification_sms_enabled'     => 'تفعيل إشعارات الرسائل النصية (SMS)',
    ];

    // Some inputs benefit from picker UI (timezone select, locale select,
    // currency dropdown) instead of free-text. This map drives that.
    $settingChoices = [
        'locale' => [
            'ar' => 'العربية',
            'en' => 'English',
        ],
        'currency' => [
            'EGP' => 'EGP — جنيه مصري',
            'SAR' => 'SAR — ريال سعودي',
            'AED' => 'AED — درهم إماراتي',
            'USD' => 'USD — دولار أمريكي',
            'EUR' => 'EUR — يورو',
        ],
        'date_format' => [
            'Y-m-d'  => 'سنة-شهر-يوم (2026-05-09)',
            'd/m/Y'  => 'يوم/شهر/سنة (09/05/2026)',
            'd-m-Y'  => 'يوم-شهر-سنة (09-05-2026)',
            'd M Y'  => 'يوم اسم-الشهر سنة (09 May 2026)',
        ],
        'timezone' => [
            'Africa/Cairo'      => 'القاهرة',
            'Asia/Riyadh'       => 'الرياض',
            'Asia/Dubai'        => 'دبي',
            'Asia/Kuwait'       => 'الكويت',
            'Asia/Amman'        => 'عمّان',
            'Asia/Beirut'       => 'بيروت',
            'Asia/Baghdad'      => 'بغداد',
            'Africa/Casablanca' => 'الدار البيضاء',
            'UTC'               => 'UTC (التوقيت العالمي)',
        ],
    ];

    $groups = collect($grouped);
    $totalCount = $groups->reduce(fn ($carry, $items) => $carry + count($items), 0);
@endphp

@section('content')
<x-clinic-hero
    title="إعدادات العيادة"
    subtitle="ضبط تفصيلي لطريقة عمل النظام داخل عيادتك"
    icon="ti-settings"
    tone="settings"
    :stats="[
        ['icon' => 'ti-list-details', 'value' => $totalCount, 'label' => 'إعداد'],
        ['icon' => 'ti-folder', 'value' => $groups->count(), 'label' => 'مجموعة'],
    ]"
/>

<form id="settingsForm" class="settings-form">
    @csrf

    <div class="card clinic-section">
        <div class="row g-0">
            {{-- Group navigation (sidebar) --}}
            <div class="col-md-3 settings-nav">
                <div class="list-group list-group-flush" role="tablist">
                    @foreach($groups as $group => $items)
                        @php $meta = $groupMeta[$group] ?? ['title' => ucfirst($group), 'icon' => 'ti-dots', 'desc' => null]; @endphp
                        <a href="#tab-{{ $group }}" class="list-group-item list-group-item-action {{ $loop->first ? 'active' : '' }}"
                           data-bs-toggle="list" role="tab">
                            <div class="d-flex align-items-center gap-2">
                                <span class="settings-nav-icon"><i class="ti {{ $meta['icon'] }}"></i></span>
                                <div class="flex-grow-1 min-w-0">
                                    <div class="fw-semibold">{{ $meta['title'] }}</div>
                                    <div class="text-muted small text-truncate">{{ count($items) }} إعداد</div>
                                </div>
                                <span class="dirty-dot d-none" data-dirty-for="{{ $group }}"></span>
                            </div>
                        </a>
                    @endforeach

                    {{-- Password change tab — not a ClinicSetting row, but
                         rendered alongside so users find it in the same
                         place as "my preferences". --}}
                    <a href="#tab-password" class="list-group-item list-group-item-action"
                       data-bs-toggle="list" role="tab">
                        <div class="d-flex align-items-center gap-2">
                            <span class="settings-nav-icon"><i class="ti ti-key"></i></span>
                            <div class="flex-grow-1 min-w-0">
                                <div class="fw-semibold">كلمة المرور</div>
                                <div class="text-muted small text-truncate">تغيير كلمة المرور الشخصية</div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            {{-- Active group content --}}
            <div class="col-md-9 settings-pane border-start">
                <div class="tab-content">
                    @foreach($groups as $group => $items)
                        @php $meta = $groupMeta[$group] ?? ['title' => ucfirst($group), 'icon' => 'ti-dots', 'desc' => null]; @endphp
                        <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="tab-{{ $group }}" role="tabpanel">
                            <div class="settings-pane-header">
                                <h3 class="mb-0">
                                    <i class="ti {{ $meta['icon'] }} me-1 text-primary"></i> {{ $meta['title'] }}
                                </h3>
                                @if($meta['desc'])
                                    <div class="text-muted small mt-1">{{ $meta['desc'] }}</div>
                                @endif
                            </div>

                            <div class="settings-list">
                                @foreach($items as $s)
                                    @php
                                        $label = $settingLabels[$s->key] ?? ($s->description ?: $s->key);
                                        $choices = $settingChoices[$s->key] ?? null;
                                        $isTimeField = in_array($s->key, ['working_hours_start', 'working_hours_end']);
                                    @endphp
                                    <div class="setting-row">
                                        <div class="setting-label">
                                            <div class="setting-title">{{ $label }}</div>
                                        </div>
                                        <div class="setting-control">
                                            @if($s->type === 'boolean')
                                                <label class="form-check form-switch form-switch-lg m-0 d-inline-flex align-items-center gap-2">
                                                    <input type="hidden" name="settings[{{ $s->key }}]" value="0">
                                                    <input class="form-check-input setting-input" type="checkbox"
                                                           name="settings[{{ $s->key }}]" value="1"
                                                           data-group="{{ $group }}"
                                                           data-original="{{ $s->value == '1' ? '1' : '0' }}"
                                                           {{ $s->value == '1' ? 'checked' : '' }}>
                                                    <span class="form-check-label switch-state"></span>
                                                </label>
                                            @elseif($choices)
                                                <select name="settings[{{ $s->key }}]" class="form-select setting-input"
                                                        data-group="{{ $group }}" data-original="{{ $s->value }}">
                                                    @foreach($choices as $val => $arabicLabel)
                                                        <option value="{{ $val }}" {{ (string) $s->value === (string) $val ? 'selected' : '' }}>{{ $arabicLabel }}</option>
                                                    @endforeach
                                                </select>
                                            @elseif($isTimeField)
                                                <input type="time" name="settings[{{ $s->key }}]"
                                                       value="{{ $s->value }}" class="form-control setting-input"
                                                       data-group="{{ $group }}" data-original="{{ $s->value }}">
                                            @elseif($s->type === 'integer' || $s->type === 'float')
                                                <input type="number" name="settings[{{ $s->key }}]"
                                                       value="{{ $s->value }}" class="form-control setting-input"
                                                       data-group="{{ $group }}" data-original="{{ $s->value }}"
                                                       step="{{ $s->type === 'float' ? '0.01' : '1' }}">
                                            @elseif($s->type === 'text' || (is_string($s->value) && mb_strlen($s->value) > 80))
                                                <textarea name="settings[{{ $s->key }}]" class="form-control setting-input"
                                                          rows="2" data-group="{{ $group }}" data-original="{{ $s->value }}">{{ $s->value }}</textarea>
                                            @else
                                                <input type="text" name="settings[{{ $s->key }}]"
                                                       value="{{ $s->value }}" class="form-control setting-input"
                                                       data-group="{{ $group }}" data-original="{{ $s->value }}">
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endforeach

                    {{-- Password change pane. Separate from the main
                         settings form because it submits to its own
                         endpoint and the field-level "dirty" tracker
                         shouldn't fire on password typing. --}}
                    <div class="tab-pane fade" id="tab-password" role="tabpanel">
                        <div class="settings-pane-header">
                            <h3 class="mb-0">
                                <i class="ti ti-key me-1 text-primary"></i> تغيير كلمة المرور
                            </h3>
                            <div class="text-muted small mt-1">
                                غيّر كلمة المرور الخاصة بحسابك الشخصي. هتحتاج تكتب كلمة المرور الحالية.
                            </div>
                        </div>

                        <form id="passwordForm" class="settings-list" autocomplete="off">
                            @csrf
                            <div class="setting-row">
                                <div class="setting-label">
                                    <div class="setting-title">كلمة المرور الحالية</div>
                                </div>
                                <div class="setting-control">
                                    <input type="password" name="current_password"
                                           class="form-control" autocomplete="current-password" required>
                                    <div class="invalid-feedback d-block" data-pwd-error="current_password"></div>
                                </div>
                            </div>
                            <div class="setting-row">
                                <div class="setting-label">
                                    <div class="setting-title">كلمة المرور الجديدة</div>
                                    <div class="text-muted small">8 أحرف على الأقل.</div>
                                </div>
                                <div class="setting-control">
                                    <input type="password" name="password"
                                           class="form-control" autocomplete="new-password" minlength="8" required>
                                    <div class="invalid-feedback d-block" data-pwd-error="password"></div>
                                </div>
                            </div>
                            <div class="setting-row">
                                <div class="setting-label">
                                    <div class="setting-title">تأكيد كلمة المرور الجديدة</div>
                                </div>
                                <div class="setting-control">
                                    <input type="password" name="password_confirmation"
                                           class="form-control" autocomplete="new-password" minlength="8" required>
                                </div>
                            </div>
                            <div class="setting-row">
                                <div class="setting-label"></div>
                                <div class="setting-control">
                                    <button type="submit" class="btn btn-primary" id="pwdSubmitBtn">
                                        <span class="btn-label">
                                            <i class="ti ti-key me-1"></i> تغيير كلمة المرور
                                        </span>
                                        <span class="spinner-border spinner-border-sm d-none ms-1"></span>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Sticky save bar --}}
    <div class="settings-savebar">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
            <div class="text-muted small">
                <i class="ti ti-info-circle me-1"></i>
                <span id="dirtyMessage">لا تغييرات معلقة.</span>
            </div>
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-outline-secondary" id="resetBtn" disabled>
                    <i class="ti ti-rotate me-1"></i> إلغاء التعديلات
                </button>
                <button type="submit" class="btn btn-primary" id="saveBtn" disabled>
                    <span class="btn-label"><i class="ti ti-device-floppy me-1"></i> حفظ الإعدادات</span>
                    <span class="spinner-border spinner-border-sm d-none ms-1"></span>
                </button>
            </div>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
(function () {
    const $form = $('#settingsForm');
    const $saveBtn = $('#saveBtn');
    const $resetBtn = $('#resetBtn');
    const $dirtyMsg = $('#dirtyMessage');

    /* ----- Switch state label ("مفعّل"/"معطّل") ----- */
    function syncSwitchLabel($input) {
        const $label = $input.closest('.form-switch').find('.switch-state');
        if ($input.is(':checked')) {
            $label.text('مفعّل').removeClass('text-muted').addClass('text-success fw-semibold');
        } else {
            $label.text('معطّل').removeClass('text-success fw-semibold').addClass('text-muted');
        }
    }
    $form.find('.form-switch input[type="checkbox"]').each(function () { syncSwitchLabel($(this)); });
    $form.on('change', '.form-switch input[type="checkbox"]', function () { syncSwitchLabel($(this)); });

    /* ----- Dirty tracking ----- */
    function isDirty($input) {
        const original = String($input.data('original') ?? '');
        const current = $input.is(':checkbox') ? ($input.is(':checked') ? '1' : '0') : String($input.val() ?? '');
        return original !== current;
    }

    function updateDirtyState() {
        const dirtyByGroup = {};
        let totalDirty = 0;
        $form.find('.setting-input').each(function () {
            if (isDirty($(this))) {
                const g = $(this).data('group');
                dirtyByGroup[g] = (dirtyByGroup[g] || 0) + 1;
                totalDirty++;
            }
        });

        $('[data-dirty-for]').addClass('d-none');
        Object.keys(dirtyByGroup).forEach(g => {
            $(`[data-dirty-for="${g}"]`).removeClass('d-none').attr('title', `${dirtyByGroup[g]} تغيير`);
        });

        $saveBtn.prop('disabled', totalDirty === 0);
        $resetBtn.prop('disabled', totalDirty === 0);
        $dirtyMsg.text(totalDirty === 0
            ? 'لا تغييرات معلقة.'
            : `${totalDirty} ${totalDirty === 1 ? 'تغيير معلّق' : 'تغييرات معلقة'} — لم تُحفظ بعد.`);
    }

    $form.on('input change', '.setting-input', updateDirtyState);

    /* ----- Reset button: revert all inputs to data-original ----- */
    $resetBtn.on('click', function () {
        $form.find('.setting-input').each(function () {
            const $i = $(this);
            const orig = $i.data('original');
            if ($i.is(':checkbox')) {
                $i.prop('checked', String(orig) === '1');
                syncSwitchLabel($i);
            } else {
                $i.val(orig ?? '');
            }
        });
        updateDirtyState();
        Notify.info('تمّ إلغاء التعديلات.');
    });

    /* ----- Save (PUT, native — no method-override hack needed) ----- */
    $form.on('submit', function (e) {
        e.preventDefault();
        $saveBtn.prop('disabled', true);
        $saveBtn.find('.spinner-border').removeClass('d-none');
        $saveBtn.find('.btn-label').addClass('d-none');

        $.ajax({
            url: @json(route('settings.update')),
            method: 'PUT',
            data: $form.serialize(),
            globalErrorHandled: true,
        }).done(res => {
            Notify.success(res.message || 'تم حفظ الإعدادات.');
            // Stamp the new values as the new "original" so dirty
            // tracking starts fresh after a successful save.
            $form.find('.setting-input').each(function () {
                const $i = $(this);
                const newVal = $i.is(':checkbox') ? ($i.is(':checked') ? '1' : '0') : String($i.val() ?? '');
                $i.attr('data-original', newVal).data('original', newVal);
            });
            updateDirtyState();
        }).fail(xhr => {
            Notify.error(xhr.responseJSON?.message || 'تعذر الحفظ.');
        }).always(() => {
            $saveBtn.find('.spinner-border').addClass('d-none');
            $saveBtn.find('.btn-label').removeClass('d-none');
            $saveBtn.prop('disabled', false);
        });
    });

    /* ----- Warn before navigating away with unsaved changes ----- */
    window.addEventListener('beforeunload', e => {
        if ($form.find('.setting-input').filter(function () { return isDirty($(this)); }).length) {
            e.preventDefault();
            e.returnValue = '';
        }
    });
})();

/*
 * --------------------------------------------------------------------
 * Password change tab
 * --------------------------------------------------------------------
 * Separate IIFE so it doesn't share state with the settings form (the
 * settings form's dirty tracker would otherwise fire on every keystroke
 * inside the password fields).
 */
(function () {
    const $pwdForm = $('#passwordForm');
    if (! $pwdForm.length) return;

    $pwdForm.on('submit', function (e) {
        e.preventDefault();
        const $btn = $('#pwdSubmitBtn');
        $btn.prop('disabled', true).find('.spinner-border').removeClass('d-none');
        $pwdForm.find('[data-pwd-error]').text('');
        $pwdForm.find('.is-invalid').removeClass('is-invalid');

        $.ajax({
            url: @json(route('settings.password')),
            method: 'POST',
            data: $pwdForm.serialize(),
            globalErrorHandled: true,
        }).done(res => {
            Notify.success(res.message || 'تم تغيير كلمة المرور.');
            $pwdForm[0].reset();
        }).fail(xhr => {
            if (xhr.status === 422 && xhr.responseJSON?.errors) {
                Object.entries(xhr.responseJSON.errors).forEach(([field, msgs]) => {
                    $pwdForm.find(`[name="${field}"]`).addClass('is-invalid');
                    $pwdForm.find(`[data-pwd-error="${field}"]`).text(msgs[0]);
                });
                Notify.warning(xhr.responseJSON.message || 'يوجد أخطاء في النموذج.');
            } else {
                Notify.error(xhr.responseJSON?.message || 'تعذّر تغيير كلمة المرور.');
            }
        }).always(() => {
            $btn.prop('disabled', false).find('.spinner-border').addClass('d-none');
        });
    });
})();
</script>
@endpush