@extends('admin.layouts.master')

@section('css')
    <style>
        .config-card {
            transition: all 0.3s ease;
            border: 1px solid #e9ecef;
        }

        .config-card:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .group-badge {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }

        .type-badge {
            font-size: 0.7rem;
            background: #f8f9fa;
            color: #6c757d;
            padding: 0.2rem 0.4rem;
            border-radius: 4px;
        }

        .config-input {
            transition: border-color 0.3s ease;
        }

        .config-input:focus {
            border-color: #5e72e4;
            box-shadow: 0 0 0 0.2rem rgba(94, 114, 228, 0.25);
        }

        .config-input.is-modified {
            border-color: #fb6340;
        }

        .group-section {
            margin-bottom: 2rem;
        }

        .group-header {
            background: linear-gradient(135deg, #5e72e4 0%, #825ee4 100%);
            color: white;
            padding: 0.75rem 1rem;
            border-radius: 8px 8px 0 0;
            font-weight: 600;
        }

        .nav-pills .nav-link.active {
            background: linear-gradient(135deg, #5e72e4 0%, #825ee4 100%);
        }

        .nav-pills .nav-link {
            color: #5e72e4;
            border: 1px solid #e9ecef;
            margin: 0 0.25rem;
        }

        .preview-image {
            max-width: 100px;
            max-height: 60px;
            object-fit: contain;
            border-radius: 4px;
            border: 1px solid #e9ecef;
        }

        .color-preview {
            width: 30px;
            height: 30px;
            border-radius: 4px;
            border: 2px solid #e9ecef;
            display: inline-block;
            vertical-align: middle;
            margin-right: 8px;
        }

        .encrypted-badge {
            background: #ffc107;
            color: #212529;
        }

        .public-badge {
            background: #28a745;
        }

        .save-indicator {
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .save-indicator.visible {
            opacity: 1;
        }
    </style>
@endsection

@section('page-header')
    <div class="breadcrumb-header justify-content-between align-items-center">
        <div class="my-auto">
            <div class="d-flex align-items-center">
                <h4 class="content-title mb-0 my-auto">الإعدادات المتقدمة</h4>
                <span class="text-muted mr-2 mt-1 tx-13">/ {{ count($configs) }} إعداد</span>
            </div>
        </div>
        <div class="d-flex gap-2">
            <button type="button" class="btn btn-outline-primary btn-sm" id="clearCacheBtn">
                <x-lucide-refresh-cw width="20" height="20" /> مسح الكاش
            </button>
            <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addConfigModal">
                <x-lucide-plus width="20" height="20" /> إضافة إعداد
            </button>
        </div>
    </div>
@endsection

@section('content')
    <div class="row">
        <!-- Sidebar - Groups Filter -->
        <div class="col-md-3 col-lg-2">
            <div class="card">
                <div class="card-header py-2">
                    <h6 class="mb-0">المجموعات</h6>
                </div>
                <div class="card-body p-2">
                    <nav class="nav flex-column nav-pills">
                        <a class="nav-link {{ $group === 'all' ? 'active' : '' }}"
                            href="{{ route('admin.settings.site-config.index') }}">
                            <x-lucide-layout-grid width="20" height="20" class="ml-2" /> الكل
                            <span class="badge bg-secondary float-left">{{ count($configs) }}</span>
                        </a>
                        @foreach ($groups as $groupKey => $groupName)
                            @php $count = $configsByGroup->get($groupKey)?->count() ?? 0; @endphp
                            @if ($count > 0)
                                <a class="nav-link {{ $group === $groupKey ? 'active' : '' }}"
                                    href="{{ route('admin.settings.site-config.index', ['group' => $groupKey]) }}">
                                    @switch($groupKey)
                                        @case('branding')
                                            <x-lucide-palette width="20" height="20" class="ml-2" />
                                        @break

                                        @case('contact')
                                            <x-lucide-phone width="20" height="20" class="ml-2" />
                                        @break

                                        @case('social')
                                            <x-lucide-share-2 width="20" height="20" class="ml-2" />
                                        @break

                                        @case('seo')
                                            <x-lucide-search width="20" height="20" class="ml-2" />
                                        @break

                                        @case('general')
                                            <x-lucide-settings width="20" height="20" class="ml-2" />
                                        @break

                                        @case('notification')
                                            <x-lucide-bell width="20" height="20" class="ml-2" />
                                        @break

                                        @case('security')
                                            <x-lucide-shield width="20" height="20" class="ml-2" />
                                        @break

                                        @case('payment')
                                            <x-lucide-credit-card width="20" height="20" class="ml-2" />
                                        @break

                                        @default
                                            <x-lucide-folder width="20" height="20" class="ml-2" />
                                    @endswitch
                                    {{ $groupName }}
                                    <span class="badge bg-secondary float-left">{{ $count }}</span>
                                </a>
                            @endif
                        @endforeach
                    </nav>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="col-md-9 col-lg-10">
            @foreach ($configsByGroup as $groupKey => $groupConfigs)
                <div class="group-section">
                    <div class="group-header">
                        <x-lucide-folder-open width="20" height="20" class="ml-2" />
                        {{ $groups[$groupKey] ?? $groupKey }}
                        <span class="badge bg-light text-dark float-left">{{ count($groupConfigs) }}</span>
                    </div>
                    <div class="card rounded-top-0">
                        <div class="card-body">
                            <div class="row">
                                @foreach ($groupConfigs as $config)
                                    <div class="col-md-6 col-lg-4 mb-3">
                                        <div class="config-card card h-100">
                                            <div class="card-body p-3">
                                                <div class="d-flex justify-content-between align-items-start mb-2">
                                                    <div>
                                                        <h6 class="mb-0">{{ $config->display_name_ar }}</h6>
                                                        <small class="text-muted">{{ $config->key }}</small>
                                                    </div>
                                                    <div class="d-flex gap-1">
                                                        <span
                                                            class="type-badge">{{ $types[$config->type] ?? $config->type }}</span>
                                                        @if ($config->is_public)
                                                            <span class="badge public-badge" title="عام"><x-lucide-globe width="20" height="20" /></span>
                                                        @endif
                                                        @if ($config->is_encrypted)
                                                            <span class="badge encrypted-badge" title="مشفر"><x-lucide-lock width="20" height="20" /></span>
                                                        @endif
                                                    </div>
                                                </div>

                                                @if ($config->description_ar)
                                                    <small
                                                        class="text-muted d-block mb-2">{{ $config->description_ar }}</small>
                                                @endif

                                                <form class="config-form" data-key="{{ $config->key }}">
                                                    @switch($config->type)
                                                        @case('boolean')
                                                            <div class="form-check form-switch">
                                                                <input type="checkbox" class="form-check-input config-input"
                                                                    id="config_{{ $config->key }}" name="value"
                                                                    {{ $config->getCastedValue() ? 'checked' : '' }}>
                                                                <label class="form-check-label" for="config_{{ $config->key }}">
                                                                    {{ $config->getCastedValue() ? 'مفعل' : 'معطل' }}
                                                                </label>
                                                            </div>
                                                        @break

                                                        @case('text')
                                                            <textarea class="form-control form-control-sm config-input" name="value" rows="2"
                                                                placeholder="{{ $config->display_name_ar }}">{{ $config->getCastedValue() }}</textarea>
                                                        @break

                                                        @case('image')
                                                            @if ($config->value)
                                                                <img src="{{ $config->value }}" class="preview-image mb-2"
                                                                    alt="Preview">
                                                            @endif
                                                            <input type="file" class="form-control form-control-sm config-input"
                                                                name="value" accept="image/*">
                                                        @break

                                                        @case('file')
                                                            @if ($config->value)
                                                                <a href="{{ $config->value }}" target="_blank"
                                                                    class="btn btn-sm btn-outline-primary mb-2">
                                                                    <x-lucide-file width="20" height="20" /> عرض الملف
                                                                </a>
                                                            @endif
                                                            <input type="file" class="form-control form-control-sm config-input"
                                                                name="value">
                                                        @break

                                                        @case('color')
                                                            <div class="d-flex align-items-center">
                                                                <span class="color-preview"
                                                                    style="background: {{ $config->value ?? '#000000' }}"></span>
                                                                <input type="color"
                                                                    class="form-control form-control-sm config-input" name="value"
                                                                    value="{{ $config->value ?? '#000000' }}"
                                                                    style="width: 60px; height: 35px;">
                                                            </div>
                                                        @break

                                                        @case('select')
                                                            <select class="form-control form-control-sm config-input"
                                                                name="value">
                                                                @foreach ($config->options['choices'] ?? [] as $choice)
                                                                    <option value="{{ $choice }}"
                                                                        {{ $config->value === $choice ? 'selected' : '' }}>
                                                                        {{ $choice }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        @break

                                                        @case('integer')
                                                        @case('decimal')
                                                            <input type="number" class="form-control form-control-sm config-input"
                                                                name="value" value="{{ $config->getCastedValue() }}"
                                                                step="{{ $config->type === 'decimal' ? '0.01' : '1' }}">
                                                        @break

                                                        @default
                                                            <input
                                                                type="{{ $config->type === 'email' ? 'email' : ($config->type === 'url' ? 'url' : 'text') }}"
                                                                class="form-control form-control-sm config-input {{ $config->is_encrypted ? 'encrypted-input' : '' }}"
                                                                name="value"
                                                                value="{{ $config->is_encrypted ? '' : $config->getCastedValue() }}"
                                                                placeholder="{{ $config->is_encrypted ? '••••••••' : $config->display_name_ar }}">
                                                    @endswitch

                                                    <div class="d-flex justify-content-between align-items-center mt-2">
                                                        <button type="submit" class="btn btn-primary btn-sm">
                                                            <x-lucide-save width="20" height="20" /> حفظ
                                                        </button>
                                                        <span class="save-indicator text-success">
                                                            <x-lucide-check width="20" height="20" /> تم الحفظ
                                                        </span>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <!-- Add Config Modal -->
    <div class="modal fade" id="addConfigModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">إضافة إعداد جديد</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="addConfigForm">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">المفتاح (key)</label>
                            <input type="text" class="form-control" name="key" required pattern="[a-z_]+"
                                placeholder="مثال: site_name">
                            <small class="text-muted">أحرف إنجليزية صغيرة و _ فقط</small>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">الاسم بالعربي</label>
                            <input type="text" class="form-control" name="display_name_ar" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">الاسم بالإنجليزي</label>
                            <input type="text" class="form-control" name="display_name_en">
                        </div>
                        <div class="row">
                            <div class="col-6 mb-3">
                                <label class="form-label">المجموعة</label>
                                <select class="form-control" name="group" required>
                                    @foreach ($groups as $groupKey => $groupName)
                                        <option value="{{ $groupKey }}">{{ $groupName }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-6 mb-3">
                                <label class="form-label">النوع</label>
                                <select class="form-control" name="type" required>
                                    @foreach ($types as $typeKey => $typeName)
                                        <option value="{{ $typeKey }}">{{ $typeName }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">القيمة الافتراضية</label>
                            <input type="text" class="form-control" name="value">
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" name="is_public" id="is_public">
                                    <label class="form-check-label" for="is_public">عام (يظهر في API)</label>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" name="is_encrypted"
                                        id="is_encrypted">
                                    <label class="form-check-label" for="is_encrypted">مشفر</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                        <button type="submit" class="btn btn-primary">إضافة</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(document).ready(function() {
            // Handle individual config form submission
            $('.config-form').on('submit', function(e) {
                e.preventDefault();

                const form = $(this);
                const key = form.data('key');
                const input = form.find('.config-input');
                const saveIndicator = form.find('.save-indicator');
                const submitBtn = form.find('button[type="submit"]');

                let formData = new FormData();
                formData.append('key', key);
                formData.append('_token', '{{ csrf_token() }}');

                // Handle different input types
                if (input.attr('type') === 'file' && input[0].files.length > 0) {
                    formData.append('value', input[0].files[0]);
                } else if (input.attr('type') === 'checkbox') {
                    formData.append('value', input.is(':checked') ? '1' : '0');
                } else {
                    formData.append('value', input.val());
                }

                submitBtn.prop('disabled', true).html(`{!! svg("lucide-loader-2", ["class" => "animate-spin", "width" => 20, "height" => 20])->toHtml() !!} جاري...`);

                $.ajax({
                    url: '{{ route('admin.settings.site-config.update') }}',
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        if (!response.err) {
                            saveIndicator.addClass('visible');
                            setTimeout(() => saveIndicator.removeClass('visible'), 2000);

                            // Update checkbox label
                            if (input.attr('type') === 'checkbox') {
                                input.siblings('label').text(input.is(':checked') ? 'مفعل' :
                                    'معطل');
                            }

                            // Update color preview
                            if (input.attr('type') === 'color') {
                                form.find('.color-preview').css('background', input.val());
                            }

                            toastr.success(response.msg);
                        } else {
                            toastr.error(response.msg);
                        }
                    },
                    error: function(xhr) {
                        toastr.error(xhr.responseJSON?.msg || 'حدث خطأ');
                    },
                    complete: function() {
                        submitBtn.prop('disabled', false).html(
                            `{!! svg("lucide-save", ["width" => 20, "height" => 20])->toHtml() !!} حفظ`);
                    }
                });
            });

            // Handle add config form
            $('#addConfigForm').on('submit', function(e) {
                e.preventDefault();

                const form = $(this);
                const submitBtn = form.find('button[type="submit"]');

                submitBtn.prop('disabled', true).html(
                    `{!! svg("lucide-loader-2", ["class" => "animate-spin", "width" => 20, "height" => 20])->toHtml() !!} جاري الإضافة...`);

                $.ajax({
                    url: '{{ route('admin.settings.site-config.store') }}',
                    method: 'POST',
                    data: form.serialize() + '&_token={{ csrf_token() }}',
                    success: function(response) {
                        if (!response.err) {
                            toastr.success(response.msg);
                            $('#addConfigModal').modal('hide');
                            location.reload();
                        } else {
                            toastr.error(response.msg);
                        }
                    },
                    error: function(xhr) {
                        const errors = xhr.responseJSON?.errors;
                        if (errors) {
                            Object.values(errors).forEach(err => toastr.error(err[0]));
                        } else {
                            toastr.error(xhr.responseJSON?.msg || 'حدث خطأ');
                        }
                    },
                    complete: function() {
                        submitBtn.prop('disabled', false).html('إضافة');
                    }
                });
            });

            // Clear cache button
            $('#clearCacheBtn').on('click', function() {
                const btn = $(this);
                btn.prop('disabled', true).html(`{!! svg("lucide-loader-2", ["class" => "animate-spin", "width" => 20, "height" => 20])->toHtml() !!}`);

                $.post('{{ route('admin.settings.site-config.clear-cache') }}', {
                    _token: '{{ csrf_token() }}'
                }, function(response) {
                    if (!response.err) {
                        toastr.success(response.msg);
                    } else {
                        toastr.error(response.msg);
                    }
                }).always(function() {
                    btn.prop('disabled', false).html(`{!! svg("lucide-refresh-cw", ["width" => 20, "height" => 20])->toHtml() !!} مسح الكاش`);
                });
            });

            // Track changes
            $('.config-input').on('input change', function() {
                $(this).addClass('is-modified');
            });
        });
    </script>
@endsection