@section('optional_css')
    <!-- summernote -->
    <link rel="stylesheet" href="{{ asset('plugins/summernote/summernote-bs4.min.css') }}">
    <!-- CodeMirror -->
    <link rel="stylesheet" href="{{ asset('plugins/codemirror/codemirror.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/codemirror/theme/monokai.css') }}">
    <style>

        .controls {
            margin-top: 10px;
            border: 1px solid transparent;
            border-radius: 2px 0 0 2px;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            height: 32px;
            outline: none;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        }

        #pac-input {
            background-color: #fff;
            font-family: Roboto;
            font-size: 15px;
            font-weight: 300;
            text-overflow: ellipsis;
            width: 300px;
            position: absolute;
            left: 16px !important;
            top: 16px !important;
            padding: 8px 16px;
            border: none;
        }

        #pac-input:focus {
            border-color: #4d90fe;
        }

        .pac-container {
            font-family: Roboto;
        }

        #type-selector {
            color: #fff;
            background-color: #4d90fe;
            padding: 5px 11px 0px 11px;
        }

        #type-selector label {
            font-family: Roboto;
            font-size: 13px;
            font-weight: 300;
        }

    </style>
@endsection

@section('optional_js')
    <!-- Summernote -->
    <script src="{{ asset('plugins/summernote/summernote-bs4.min.js') }}"></script>
    <!-- CodeMirror -->
    <script src="{{ asset('plugins/codemirror/codemirror.js') }}"></script>
    <script src="{{ asset('plugins/codemirror/mode/css/css.js') }}"></script>
    <script src="{{ asset('plugins/codemirror/mode/xml/xml.js') }}"></script>
    <script src="{{ asset('plugins/codemirror/mode/htmlmixed/htmlmixed.js') }}"></script>

    <script src="{{ asset('plugins/fileinput/fileinput.min.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('.summernote').summernote({
                height: 300,
                callbacks: {
                    onImageUpload: function(files, editor, welEditable) {
                        sendFile(files[0], editor, welEditable);
                    }
                }
            });

            function sendFile(file, editor, welEditable) {
                data = new FormData();
                data.append("file", file);
                data.append('_token', "{{ csrf_token() }}");
                $.ajax({
                    data: data,
                    type: "POST",
                    url: "{{ route('admin.summernote.upload') }}",
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(url) {
                        $('.summernote').summernote('editor.insertImage', url);
                    }
                });
            }
        });

        $('.test_sound').click(function() {
            var value = $('.sound option:selected').val();
            var audio = new Audio('{{ Storage::url("audio/") }}'+value+'.mp3');
            audio.play();
        });
    </script>
@endsection

<x-app-layout>
    <x-slot name="header">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">{{ __('Setting') }}</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
            </div><!-- /.col -->
        </div><!-- /.row -->
    </x-slot>
    @if(session('success'))
        <x-alert-success>
            {{ session('success') }}
        </x-alert-success>
    @endif
    <form class="form-horizontal" action="{{ route('admin.setting.update') }}" method="POST" enctype="multipart/form-data">
        @php $maps = false @endphp
        <x-card class="col-sm-12">
            <x-slot name="title">{{ __('Setting') }}</x-slot>
            @csrf
            @method('PUT')
            @foreach($settings as $setting)
                <div class="form-group row">
                    <x-label class="col-sm-2">{{ $setting->name }}</x-label>
                    <div class="col-sm-10">
                        @if($setting->type == 'string')
                            <x-input type="text" name="value[{{ $setting->id }}]" :value="$setting->value"/>
                        @endif
                        @if($setting->type == 'integer')
                            <x-input type="number" name="value[{{ $setting->id }}]" :value="$setting->value"/>
                        @endif
                        @if($setting->type == 'text')
                            <textarea class="summernote" name="value[{{ $setting->id }}]">{{ $setting->value }}</textarea>
                        @endif
                        @if($setting->type == 'image')
                        <div class="fileinput fileinput-new" data-provides="fileinput">
                            <div class="fileinput-preview img-thumbnail text-center mb-2" data-trigger="fileinput">
                                <img src="{{ Storage::url($setting->value) }}">
                            </div>
                            <div>
                                <span class="btn btn-info btn-file">
                                    <span class="fileinput-new">Select Image</span>
                                    <input type="file" name="value[{{ $setting->id }}]">
                                </span>
                                <a href="#" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remove</a>
                            </div>
                            <p style="margin-top: 15px"><em>Upload image if change featured image</em></p>
                        </div>
                        @endif
                    </div>
                </div>
            @endforeach
            <x-slot name="footer">
                <x-button>{{ __('Save') }}</x-button>
            </x-slot>
        </x-card>
    </form>
</x-app-layout>