@extends('backEnd.master')

@section('title')
    Background Settings
@endsection

@section('mainContent')
    <section class="sms-breadcrumb mb-20 up_breadcrumb">
        <div class="container-fluid">
            <div class="row justify-content-between">
                <h1>Background Settings</h1>
                <div class="bc-pages">
                    <a href="{{ route('dashboard') }}">@lang('common.dashboard')</a>
                    <a href="#">Utilities</a>
                    <a href="#">Style</a>
                    <a href="#">Background Settings</a>
                </div>
            </div>
        </div>
    </section>

    <section class="admin-visitor-area up_admin_visitor">
        <div class="container-fluid p-0">
            <div class="white-box">
                <div class="main-title">
                    <h3 class="mb-15">Global Background Tokens</h3>
                </div>

                <form method="POST" action="{{ route('ui-style.background.update') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        @foreach ($backgroundKeys as $key => $label)
                            @continue(in_array($key, ['background_image', 'enable_background_gradient', 'enable_glass_effect'], true))
                            <div class="col-xl-4 col-lg-6 col-md-6">
                                <div class="primary_input mb-25">
                                    <label class="primary_input_label" for="{{ $key }}">{{ $label }}</label>
                                    <div class="ui-color-field">
                                        <input class="ui-color-swatch" type="color" id="{{ $key }}_picker" value="{{ $settings[$key] ?? '#F8FAFC' }}" data-color-picker="{{ $key }}">
                                        <input class="primary_input_field form-control{{ $errors->has($key) ? ' is-invalid' : '' }}" type="text" id="{{ $key }}" name="{{ $key }}" value="{{ old($key, $settings[$key] ?? '#F8FAFC') }}" maxlength="7" data-color-input="{{ $key }}">
                                    </div>
                                    @if ($errors->has($key))
                                        <span class="text-danger">{{ $errors->first($key) }}</span>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="row">
                        <div class="col-xl-6">
                            <div class="primary_input mb-25">
                                <label class="primary_input_label" for="background_image">Optional background image</label>
                                <div class="primary_file_uploader">
                                    <input class="primary_input_field" id="placeholderBackgroundImage" type="text" placeholder="{{ $settings['background_image'] ?: trans('common.file') }}" readonly>
                                    <button type="button">
                                        <label class="primary-btn small fix-gr-bg" for="background_image">@lang('common.browse')</label>
                                        <input type="file" class="d-none" id="background_image" name="background_image" accept="image/*">
                                    </button>
                                </div>
                                @if (!empty($settings['background_image']))
                                    <label class="ui-toggle mt-15">
                                        <input type="checkbox" name="remove_background_image" value="1">
                                        <span>Remove current image</span>
                                    </label>
                                @endif
                                @if ($errors->has('background_image'))
                                    <span class="text-danger d-block">{{ $errors->first('background_image') }}</span>
                                @endif
                            </div>
                        </div>
                        <div class="col-xl-6">
                            <div class="ui-toggle-group">
                                <label class="ui-toggle">
                                    <input type="checkbox" name="enable_background_gradient" value="1" {{ old('enable_background_gradient', $settings['enable_background_gradient'] ?? '0') == '1' ? 'checked' : '' }}>
                                    <span>Enable background gradient</span>
                                </label>
                                <label class="ui-toggle">
                                    <input type="checkbox" name="enable_glass_effect" value="1" {{ old('enable_glass_effect', $settings['enable_glass_effect'] ?? '0') == '1' ? 'checked' : '' }}>
                                    <span>Enable glass effect</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="ui-theme-preview mb-30">
                        <div>
                            <span class="ui-badge">Preview</span>
                            <h4>Light and dark surfaces</h4>
                            <p>Dashboard, finance, homework, exams, notifications, settings, and login surfaces use these background tokens.</p>
                        </div>
                    </div>

                    <div class="text-center">
                        <button type="submit" class="primary-btn fix-gr-bg">
                            <span class="ti-check"></span>
                            @lang('common.save')
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection

@push('script')
    <script>
        document.querySelectorAll('[data-color-picker]').forEach(function (picker) {
            picker.addEventListener('input', function () {
                var input = document.querySelector('[data-color-input="' + picker.dataset.colorPicker + '"]');
                if (input) {
                    input.value = picker.value.toUpperCase();
                }
            });
        });

        document.querySelectorAll('[data-color-input]').forEach(function (input) {
            input.addEventListener('input', function () {
                var picker = document.querySelector('[data-color-picker="' + input.dataset.colorInput + '"]');
                if (picker && /^#[0-9A-Fa-f]{6}$/.test(input.value)) {
                    picker.value = input.value;
                }
            });
        });

        var backgroundImage = document.getElementById('background_image');
        if (backgroundImage) {
            backgroundImage.addEventListener('change', function () {
                var placeholder = document.getElementById('placeholderBackgroundImage');
                if (placeholder && backgroundImage.files.length) {
                    placeholder.value = backgroundImage.files[0].name;
                }
            });
        }
    </script>
@endpush
