@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.other.update') }}"
                            enctype="multipart/form-data">
                            @csrf
                            {{-- name filed multiple language --}}

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

                                    @error('no_data_icon')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                    <div class="mt-2">
                                        <img src="{{ $setting->no_data_icon }}" 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.default_user') }}</label>
                                    <input class="form-control" type="file" id="dark_logo_input" name="default_user" />
                                    @error('default_user')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                    <div class="mt-2">
                                        <img src="{{ $setting->default_user }}" 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