@extends('admin.layouts.master')

@section('page-header')
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">تعديل المستوى: {{ $level->name }}</h4>
            </div>
        </div>
        <div class="d-flex align-items-center">
            <a href="{{ route('admin.levels.index') }}" class="btn btn-secondary btn-sm">رجوع</a>
        </div>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-12 col-lg-10 col-xl-8">
            <div class="card">
                <div class="card-header pb-0">
                    <div class="d-flex justify-content-between">
                        <h4 class="card-title mg-b-0">بيانات المستوى</h4>
                    </div>
                </div>
                <div class="card-body">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('admin.levels.update', $level) }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label">{{ __('Key') }}</label>
                            <input type="text" class="form-control" value="{{ $level->key }}" disabled>
                            <small class="text-muted">{{ __('Key cannot be changed') }}</small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{{ __('Tier Order') }}</label>
                            <input type="number" class="form-control" value="{{ $level->tier_order }}" disabled>
                            <small class="text-muted">{{ __('Tier order cannot be changed') }}</small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{{ __('Name') }}</label>
                            <input name="name" type="text" class="form-control"
                                value="{{ old('name', $level->name) }}" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{{ __('Description') }}</label>
                            <textarea name="description" class="form-control" rows="3">{{ old('description', $level->description) }}</textarea>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{{ __('Benefits') }}</label>
                            <textarea name="benefits" class="form-control" rows="4" placeholder="- Benefit 1&#10;- Benefit 2">{{ old('benefits', $level->benefits) }}</textarea>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{{ __('Required Points') }}</label>
                            <input name="required_points" type="number" min="0" class="form-control"
                                value="{{ old('required_points', $level->required_points) }}" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{{ __('Discount Percent') }}</label>
                            <input name="discount_percent" type="number" min="0" max="100" class="form-control"
                                value="{{ old('discount_percent', $level->discount_percent) }}">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{{ __('Icon (optional)') }}</label>
                            @php
                                $iconOptions = [
                                    'user'         => 'Person',
                                    'award'        => 'Award',
                                    'star'         => 'Star',
                                    'star-half'    => 'Star Half',
                                    'gem'          => 'Gem',
                                    'trophy'       => 'Trophy',
                                    'sparkles'     => 'Sparkles',
                                    'heart'        => 'Heart',
                                    'gift'         => 'Gift',
                                    'zap'          => 'Lightning',
                                    'rocket'       => 'Rocket',
                                    'shield-check' => 'Shield Check',
                                    'flag'         => 'Flag',
                                    'smile'        => 'Smile',
                                    'badge-check'  => 'Badge Check',
                                ];
                                $aliases = [
                                    'personfill'  => 'user',
                                    'awardfill'   => 'award',
                                    'starfill'    => 'star',
                                    'starhalf'    => 'star-half',
                                    'gem'         => 'gem',
                                    'trophyfill'  => 'trophy',
                                    'stars'       => 'sparkles',
                                    'person'      => 'user',
                                ];
                                $currentIcon = trim(($errors->any() ? old('icon_class') : $level->icon_class) ?? '');
                                $normalize = fn($s) => strtolower(str_replace([' ', '-', '_'], '', trim((string) $s)));
                                $normalizedKey = $normalize($currentIcon);
                                $previewIconName = $currentIcon;
                                if (isset($aliases[$normalizedKey])) {
                                    $previewIconName = $aliases[$normalizedKey];
                                }
                                $normalizedOptions = [];
                                foreach ($iconOptions as $k => $lbl) {
                                    $normalizedOptions[$normalize($k)] = $k;
                                }
                                $selectedNormalized = $normalize($currentIcon);
                                $selectedExists = $currentIcon && array_key_exists($selectedNormalized, $normalizedOptions);

                                // Pre-render all icon SVGs server-side for use in JS
                                $iconSvgMap = [];
                                foreach ($iconOptions as $name => $label) {
                                    $iconSvgMap[$name] = svg('lucide-' . $name, ['width' => 18, 'height' => 18])->toHtml();
                                }
                            @endphp
                            <select name="icon_class" class="form-control select2-icon"
                                data-placeholder="{{ __('Select an icon...') }}" data-current="{{ $currentIcon }}"
                                data-current-icon="{{ $previewIconName }}">
                                <option value="">{{ __('No icon') }}</option>
                                @foreach ($iconOptions as $cls => $label)
                                    @php $isSelected = $selectedNormalized === $normalize($cls); @endphp
                                    <option value="{{ $cls }}" data-icon="{{ $cls }}"
                                        @selected($isSelected)>
                                        {{ $label }}
                                    </option>
                                @endforeach
                                @if ($currentIcon && !$selectedExists)
                                    <option value="{{ $currentIcon }}" data-icon="{{ $previewIconName }}" selected>
                                        {{ __('Custom') }}: {{ $currentIcon }}
                                    </option>
                                @endif
                            </select>
                            <small class="text-muted d-block mt-1">{{ __('You can choose from common icons or type a custom Lucide icon name (e.g., star, trophy).') }}</small>
                            <div class="mt-2" id="icon-preview" style="display:none">
                                <span class="me-2">{{ __('Preview') }}:</span>
                                <span id="preview-icon-container" style="display:inline-flex;align-items:center;"></span>
                            </div>
                        </div>

                        <div class="d-flex gap-2">
                            <button class="btn btn-primary" type="submit">{{ __('Save changes') }}</button>
                            <a href="{{ route('admin.levels.index') }}" class="btn btn-light">{{ __('Cancel') }}</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('css')
    <link rel="stylesheet" href="{{ vasset('assets/plugins/select2/css/select2.min.css') }}">
    <style>
        .select2-results__option .icon-option {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
        }

        .select2-results__option .icon-option svg {
            width: 1.1rem;
            height: 1.1rem;
            flex-shrink: 0;
        }

        .select2-selection__rendered .icon-option svg {
            width: 1.1rem;
            height: 1.1rem;
            margin-inline-end: .35rem;
        }
    </style>
@endsection

@section('js')
    <script src="{{ vasset('assets/plugins/select2/js/select2.min.js') }}"></script>
    <script>
        (function() {
            const iconSvgMap = @json($iconSvgMap);

            const aliasMap = {
                personfill: 'user',
                awardfill: 'award',
                starfill: 'star',
                starhalf: 'star-half',
                gem: 'gem',
                trophyfill: 'trophy',
                stars: 'sparkles',
                person: 'user'
            };

            function resolveIconName(state) {
                let icon = '';
                if (state && state.element) {
                    icon = state.element.getAttribute('data-icon') || '';
                }
                if (!icon && state && state.id) {
                    const id = String(state.id);
                    const norm = id.toLowerCase().replace(/[\s_-]/g, '');
                    if (aliasMap[norm]) icon = aliasMap[norm];
                    else icon = id; // treat as lucide name directly
                }
                return icon;
            }

            function getSvg(iconName) {
                return iconSvgMap[iconName] || '';
            }

            function formatOption(state) {
                if (!state || !state.id) return state && state.text ? state.text : '';
                var icon = resolveIconName(state);
                var svg = getSvg(icon);
                if (!svg) return state.text;
                return '<span class="icon-option">' + svg + state.text + '</span>';
            }

            const $select = $('.select2-icon');
            $select.select2({
                width: '100%',
                allowClear: true,
                tags: true,
                templateResult: formatOption,
                templateSelection: formatOption,
                escapeMarkup: function(m) {
                    return m;
                }
            });

            // Enforce initial value from data-current if Select2 didn't pick it up
            $select.each(function() {
                const $el = $(this);
                const currentVal = ($el.data('current') || '').toString().trim();
                const currentIcon = ($el.data('current-icon') || '').toString().trim();
                if (!currentVal) return;
                const hasVal = !!$el.find('option').filter(function() {
                    return $(this).val() === currentVal;
                }).length;
                if (!hasVal) {
                    const text = 'Custom: ' + currentVal;
                    const opt = new Option(text, currentVal, true, true);
                    if (currentIcon) opt.setAttribute('data-icon', currentIcon);
                    $el.append(opt);
                }
                $el.val(currentVal).trigger('change');
            });

            function updatePreview() {
                const val = $select.val();
                const preview = document.getElementById('icon-preview');
                const container = document.getElementById('preview-icon-container');
                if (!val) {
                    container.innerHTML = '';
                    preview.style.display = 'none';
                    return;
                }
                const $opt = $select.find('option:selected');
                let icon = ($opt.attr('data-icon') || '').trim();
                if (!icon) {
                    const norm = String(val).toLowerCase().replace(/[\s_-]/g, '');
                    if (aliasMap[norm]) icon = aliasMap[norm];
                    else icon = val;
                }
                const svgHtml = getSvg(icon);
                if (svgHtml) {
                    container.innerHTML = svgHtml;
                    preview.style.display = '';
                } else {
                    container.innerHTML = '';
                    preview.style.display = 'none';
                }
            }

            $select.on('change', updatePreview);
            updatePreview();
        })();
    </script>
@endsection