@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'General Setting')

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/spectrum-colorpicker2/dist/spectrum.min.css">
@endpush

@section('content')

    <div class="card">
        <div class="p-4">

            <div class="flex justify-between items-center mb-4">
                <h3 class="mb-1 text-2xl font-semibold">General Setting</h3>
                <a href="{{ route('admin.setting.index') }}" class="btn btn-primary">
                    <i class="fas fa-arrow-left me-2"></i> Back
                </a>
            </div>

            <form action="{{ route('admin.setting.general.save') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="input-with-label mb-4">
                    <label for="site_name" class="form-label">Site Name</label>
                    <input type="text" class="form-control @error('site_name') is-invalid @enderror" id="site_name"
                        name="site_name" value="{{ old('site_name', $setting?->site_name ?? '') }}">
                    @error('site_name')
                        <div class="text-red-500 text-xs">{{ $message }}</div>
                    @enderror
                </div>

                <div class="textarea-with-label mb-4">
                    <label for="site_description" class="form-label">Site Description</label>
                    <textarea type="text" class="form-control @error('site_description') is-invalid @enderror" id="site_description" name="site_description">{{ old('site_description', $setting?->site_description ?? '') }}</textarea>
                    @error('site_description')
                        <div class="text-red-500 text-xs">{{ $message }}</div>
                    @enderror
                </div>

                <div class="input-with-label mb-4">
                    <label for="site_url" class="form-label">Site Url</label>
                    <input type="text" class="form-control @error('site_url') is-invalid @enderror" id="site_url"
                        name="site_url" value="{{ old('site_url', $setting?->site_url ?? '') }}">
                    @error('site_url')
                        <div class="text-red-500 text-xs">{{ $message }}</div>
                    @enderror
                </div>

                <div class="input-with-label mb-4">
                    <label for="admin_email" class="form-label">Admin Email</label>
                    <input type="email" class="form-control @error('admin_email') is-invalid @enderror" id="admin_email"
                        name="admin_email" value="{{ old('admin_email', $setting?->admin_email ?? '') }}">
                    @error('admin_email')
                        <div class="text-red-500 text-xs">{{ $message }}</div>
                    @enderror
                </div>

                <div class="input-with-label mb-4">
                    <label for="phone" class="form-label">Phone</label>
                    <input type="text" class="form-control @error('phone') is-invalid @enderror" id="phone"
                        name="phone" value="{{ old('phone', $setting?->phone ?? '') }}">
                    @error('phone')
                        <div class="text-red-500 text-xs">{{ $message }}</div>
                    @enderror
                </div>

                <div class="input-with-label mb-4">
                    <label for="location" class="form-label">Location</label>
                    <input type="text" class="form-control @error('location') is-invalid @enderror" id="location"
                        name="location" value="{{ old('location', $setting?->location ?? '') }}">
                    @error('location')
                        <div class="text-red-500 text-xs">{{ $message }}</div>
                    @enderror
                </div>

                <div class="input-with-label mb-4">
                    <label for="copyright_text" class="form-label">Copyright Text</label>
                    <input type="text" class="form-control @error('copyright_text') is-invalid @enderror"
                        id="copyright_text" name="copyright_text"
                        value="{{ old('copyright_text', $setting?->copyright_text ?? '') }}">
                    @error('copyright_text')
                        <div class="text-red-500 text-xs">{{ $message }}</div>
                    @enderror
                </div>

                <div class="input-with-label mb-4">
                    <label for="commission_per_sale" class="form-label">Commission Per Sale (%)</label>
                    <input type="number" step="1" min="0" max="100"
                        class="form-control @error('commission_per_sale') is-invalid @enderror" id="commission_per_sale"
                        name="commission_per_sale"
                        value="{{ old('commission_per_sale', $setting?->commission_per_sale ?? '') }}">
                    @error('commission_per_sale')
                        <div class="text-red-500 text-xs">{{ $message }}</div>
                    @enderror
                </div>

                <div class="input-with-label mb-4">
                    <label for="preloader_status" class="form-label">Preloader Status</label>
                    <div>
                        <label class="switch">
                            <input type="checkbox" id="preloader_status" @checked(old('preloader_status', $setting?->preloader_status ?? ''))
                                class="form-check-input" name="preloader_status"
                                {{ old('preloader_status') ? 'checked' : '' }}>
                            <span class="slider round"></span>
                        </label>
                        @error('preloader_status')
                            <div class="text-red-500 text-xs">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <div class="input-with-label mb-4">
                    <label for="preloader_text" class="form-label">Preloader Text</label>
                    <input type="text" class="form-control @error('preloader_text') is-invalid @enderror"
                        id="preloader_text" name="preloader_text"
                        value="{{ old('preloader_text', $setting?->preloader_text ?? '') }}">
                    @error('preloader_text')
                        <div class="text-red-500 text-xs">{{ $message }}</div>
                    @enderror
                </div>

                <div class="input-with-label mb-4">
                    <label for="blog_layout" class="form-label">Blog Layout</label>
                    <select class="form-select @error('blog_layout') is-invalid @enderror" id="blog_layout"
                        name="blog_layout">
                        <option value="all_layout"
                            {{ old('blog_layout', $setting?->blog_layout ?? '') === 'all_layout' ? 'selected' : '' }}>
                            All Layout
                        </option>
                        <option value="default"
                            {{ old('blog_layout', $setting?->blog_layout ?? '') === 'default' ? 'selected' : '' }}>
                            Default
                        </option>
                        <option value="right_sidebar"
                            {{ old('blog_layout', $setting?->blog_layout ?? '') === 'right_sidebar' ? 'selected' : '' }}>
                            Right Sidebar
                        </option>
                        <option value="grid_right_sidebar"
                            {{ old('blog_layout', $setting?->blog_layout ?? '') === 'grid_right_sidebar' ? 'selected' : '' }}>
                            Grid Right Sidebar
                        </option>
                    </select>
                    @error('blog_layout')
                        <div class="text-red-500 text-xs">{{ $message }}</div>
                    @enderror
                </div>

                <div class="input-with-label mb-4">
                    <label for="blog_detail_layout" class="form-label">Blog Detail Layout</label>
                    <select class="form-select @error('blog_detail_layout') is-invalid @enderror" id="blog_detail_layout"
                        name="blog_detail_layout">
                        <option value="all_layout"
                            {{ old('blog_detail_layout', $setting?->blog_detail_layout ?? '') === 'all_layout' ? 'selected' : '' }}>
                            All Layout
                        </option>
                        <option value="default"
                            {{ old('blog_detail_layout', $setting?->blog_detail_layout ?? '') === 'default' ? 'selected' : '' }}>
                            Default
                        </option>
                        <option value="left_sidebar"
                            {{ old('blog_detail_layout', $setting?->blog_detail_layout ?? '') === 'left_sidebar' ? 'selected' : '' }}>
                            Left Sidebar
                        </option>
                    </select>
                    @error('blog_detail_layout')
                        <div class="text-red-500 text-xs">{{ $message }}</div>
                    @enderror
                </div>

                <div class="input-with-label mb-4">
                    <label for="primary_color" class="form-label">Primary Color</label>
                    <input type="text" class="form-control color-picker @error('primary_color') is-invalid @enderror"
                        id="primary_color" name="primary_color"
                        value="{{ old('primary_color', $setting?->primary_color ?? '') }}">
                    @error('primary_color')
                        <div class="text-red-500 text-xs">{{ $message }}</div>
                    @enderror
                </div>

                <div class="input-with-label mb-4">
                    <label for="secondary_color" class="form-label">Secondary Color</label>
                    <input type="text"
                        class="form-control color-picker @error('secondary_color') is-invalid @enderror"
                        id="secondary_color" name="secondary_color"
                        value="{{ old('secondary_color', $setting?->secondary_color ?? '') }}">
                    @error('secondary_color')
                        <div class="text-red-500 text-xs">{{ $message }}</div>
                    @enderror
                </div>

                <div class="input-with-label mb-4">
                    <label for="timezone" class="form-label">Timezone</label>
                    @include('backend::setting.general.timezone')
                    @error('timezone')
                        <div class="text-red-500 text-xs">{{ $message }}</div>
                    @enderror
                </div>

                <div class="flex flex-wrap gap-6">
                    <div class="input-with-label w-auto !flex-row items-center">
                        <div>
                            <label class="switch">
                                <input type="checkbox" id="back_top_status" @checked(old('back_top_status', isset($setting->back_top_status) && $setting?->back_top_status ?? ''))
                                    class="form-check-input" name="back_top_status"
                                    {{ old('back_top_status') ? 'checked' : '' }}>
                                <span class="slider round"></span>
                            </label>
                            @error('back_top_status')
                                <div class="text-red-500 text-xs">{{ $message }}</div>
                            @enderror
                        </div>
                        <label for="back_top_status" class="form-label">Back to Top Status</label>
                    </div>
                    <div class="input-with-label w-auto !flex-row items-center">

                        <div>
                            <label class="switch">
                                <input type="checkbox" id="dark_light_mode_status" @checked(old('dark_light_mode_status', isset($setting->dark_light_mode_status) && $setting?->dark_light_mode_status ?? ''))
                                    class="form-check-input" name="dark_light_mode_status"
                                    {{ old('dark_light_mode_status') ? 'checked' : '' }}>
                                <span class="slider round"></span>
                            </label>
                            @error('dark_light_mode_status')
                                <div class="text-red-500 text-xs">{{ $message }}</div>
                            @enderror
                        </div>
                        <label for="dark_light_mode_status" class="form-label">Dark/Light Mode Status</label>
                    </div>
                    <div class="input-with-label w-auto !flex-row items-center">
                        <div>
                            <label class="switch">
                                <input type="checkbox" id="show_search_bar_status" @checked(old('show_search_bar_status', isset($setting->show_search_bar_status) && $setting?->show_search_bar_status ?? ''))
                                    class="form-check-input" name="show_search_bar_status"
                                    {{ old('show_search_bar_status') ? 'checked' : '' }}>
                                <span class="slider round"></span>
                            </label>
                            @error('show_search_bar_status')
                                <div class="text-red-500 text-xs">{{ $message }}</div>
                            @enderror
                        </div>
                        <label for="show_search_bar_status" class="form-label">Show Search Bar</label>
                    </div>
                    <div class="input-with-label w-auto !flex-row items-center">
                        <div>
                            <label class="switch">
                                <input type="checkbox" id="show_wishlist_icon" @checked(old('show_wishlist_icon', isset($setting->show_wishlist_icon) && $setting?->show_wishlist_icon ?? ''))
                                    class="form-check-input" name="show_wishlist_icon"
                                    {{ old('show_wishlist_icon') ? 'checked' : '' }}>
                                <span class="slider round"></span>
                            </label>
                            @error('show_wishlist_icon')
                                <div class="text-red-500 text-xs">{{ $message }}</div>
                            @enderror
                        </div>
                        <label for="show_wishlist_icon" class="form-label">Show Wishlist Icon</label>
                    </div>
                    <div class="input-with-label w-auto !flex-row items-center">
                        <div>
                            <label class="switch">
                                <input type="checkbox" id="show_cart_icon" @checked(old('show_cart_icon', isset($setting->show_cart_icon) && $setting?->show_cart_icon ?? ''))
                                    class="form-check-input" name="show_cart_icon"
                                    {{ old('show_cart_icon') ? 'checked' : '' }}>
                                <span class="slider round"></span>
                            </label>
                            @error('show_cart_icon')
                                <div class="text-red-500 text-xs">{{ $message }}</div>
                            @enderror
                        </div>
                        <label for="show_cart_icon" class="form-label">Show Cart Icon</label>
                    </div>
                    <div class="input-with-label w-auto !flex-row items-center">
                        <div>
                            <label class="switch">
                                <input type="checkbox" id="multi_theme_blog" @checked(old('multi_theme_blog', isset($setting->multi_theme_blog) && $setting?->multi_theme_blog ?? ''))
                                    class="form-check-input" name="multi_theme_blog"
                                    {{ old('multi_theme_blog') ? 'checked' : '' }}>
                                <span class="slider round"></span>
                            </label>
                            @error('multi_theme_blog')
                                <div class="text-red-500 text-xs">{{ $message }}</div>
                            @enderror
                        </div>
                        <label for="multi_theme_blog" class="form-label">Multi Theme Blog</label>
                    </div>
                    <div class="input-with-label w-auto !flex-row items-center">
                        <div>
                            <label class="switch">
                                <input type="checkbox" id="language_switch_status" @checked(old('language_switch_status', isset($setting->language_switch_status) && $setting?->language_switch_status ?? ''))
                                    class="form-check-input" name="language_switch_status"
                                    {{ old('language_switch_status') ? 'checked' : '' }}>
                                <span class="slider round"></span>
                            </label>
                            @error('language_switch_status')
                                <div class="text-red-500 text-xs">{{ $message }}</div>
                            @enderror
                        </div>
                        <label for="language_switch_status" class="form-label">Language Switch Status</label>
                    </div>
                </div>

                <div class="mt-4 flex justify-end gap-2">
                    <a href="{{ route('admin.setting.index') }}" class="btn btn-secondary">Back</a>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('backend/assets/js/jquery-3.7.1.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/spectrum-colorpicker2/dist/spectrum.min.js"></script>
    <script>
        (function($) {
            "use strict"
            $(document).ready(function() {
                // Initialize Select2
                $('#timezone').select2({
                    theme: 'bootstrap-5'
                });

                // Initialize color picker
                $('.color-picker').spectrum({
                    type: "component",
                    showInput: true,
                    showInitial: true,
                    showAlpha: false,
                    allowEmpty: true,
                    preferredFormat: "hex"
                });
            });
        })(jQuery);
    </script>
@endpush