@extends('admin.layout.master')
@section('title', __('admin.setting'))
@section('styles')

@endsection
@section('scripts')

    <script>
        function previewImage(button, input, perview) {
            $('#' + button).style = 'display: none !important';
            // change img when upload
            $('#' + input).on('change', function() {
                let reader = new FileReader();
                reader.onload = (e) => {
                    $('#' + perview).attr('src', e.target.result);
                    // add reset button
                    $('#' + button).style = 'display: block !important';
                }
            })

            $('#' + button).on('click', function() {
                $('#' + input).val('');
                $('#' + perview).attr('src', '{{ $setting->fav_icon }}');
                $('#' + button).style = 'display: none !important';
            })
        }
        $(document).ready(function() {
            // change icon when upload
            previewImage('fav_icon_button', 'fav_icon_input', 'fav_icon_perview');

            // change light logo when upload
            previewImage('light_logo_button', 'light_logo_input', 'light_logo_perview');

            // change dark logo when upload
            previewImage('dark_logo_button', 'dark_logo_input', 'dark_logo_perview');
        });
    </script>

@endsection
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="row">
            <div class="col-md-12">
                @include('admin.setting.menu')

                <div class="card mb-6">
                    <!-- Account -->

                    <div class="card-body pt-4">
                        <form id="formAccountSettings" method="post" action="{{ route('admin.settings.identity.update') }}"
                            enctype="multipart/form-data">
                            @csrf
                            {{-- name filed multiple language --}}

                            <div class="row">
                                @foreach (Config::get('laravellocalization.supportedLocales') as $key => $lang)
                                    <div class="mb-4 col-md-6">
                                        <label for="name"
                                            class="form-label">{{ __('admin.name') . ' (' . $lang['native'] . ')' }}</label>
                                        <input class="form-control" type="text" id="name"
                                            name="name[{{ $key }}]"
                                            value="{{ $setting->getTranslation('name', $key) }}" autofocus />
                                    </div>
                                @endforeach
                            </div>
                            <div class="row">
                                <div class="mb-4 col-md-6">
                                    <label for="fav_icon_input" class="form-label">{{ __('admin.icon') }}</label>
                                    <input class="form-control" type="file" id="fav_icon_input" name="icon" />
                                    @error('icon')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                    <div class="mt-2">
                                        <img src="{{ $setting->fav_icon }}" id="fav_icon_perview" alt="icon"
                                            width="50px" height="50px" class="rounded-circle">
                                    </div>

                                    <div class="mt-2"></div>
                                    <button class="btn btn-primary " style="display: none !important" type="button"
                                        id="fav_icon_button"><i class="fa fa-x"></i></button>
                                </div>



                                <div class="mb-4 col-md-3">
                                    <label for="color" class="form-label">{{ __('admin.color') }}</label>
                                    <input class="form-control" type="color" value="{{ $setting->color }}" id="color"
                                        name="color" />
                                    @error('color')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="mb-4 col-md-3">
                                    <label for="hover_color" class="form-label">{{ __('admin.hover_color') }}</label>
                                    <input class="form-control" type="color" value="{{ $setting->hover_color }}"
                                        id="hover_color" name="hover_color" />
                                    @error('hover_color')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>

                            </div>
                            <div class="row">
                                <div class="mb-4 col-md-6">
                                    <label for="light_logo_input" class="form-label">{{ __('admin.lightLogo') }}</label>
                                    <input class="form-control" type="file" id="light_logo_input" name="lightLogo" />

                                    @error('lightLogo')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                    <div class="mt-2">
                                        <img src="{{ $setting->light_logo }}" id="light_logo_perview" alt="lightLogo"
                                            class="rounded-circle">
                                    </div>

                                    <div class="mt-2"></div>
                                    <button class="btn btn-primary " style="display: none !important" type="button"
                                        id="light_logo_button"><i class="fa fa-x"></i></button>
                                </div>


                                <div class="mb-4 col-md-6">
                                    <label for="dark_logo_input" class="form-label">{{ __('admin.darkLogo') }}</label>
                                    <input class="form-control" type="file" id="dark_logo_input" name="darkLogo" />
                                    @error('darkLogo')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                    <div class="mt-2">
                                        <img src="{{ $setting->dark_logo }}" id="dark_logo_perview" alt="darkLogo"
                                            class="rounded-circle">
                                    </div>

                                    <div class="mt-2"></div>
                                    <button class="btn btn-primary " style="display: none !important" type="button"
                                        id="dark_logo_button"><i class="fa fa-x"></i></button>
                                </div>
                            </div>
                            <div class="mt-2">
                                <button type="submit" class="btn btn-primary me-3">{{ __('admin.save') }}</button>
                            </div>
                        </form>
                    </div>
                    <!-- /Account -->
                </div>
            </div>
        </div>
    </div>
@endsection