@if($customFields)
    <h5 class="col-12 pb-4">{!! trans('lang.main_fields') !!}</h5>
@endif
<div style="flex: 50%;max-width: 50%;padding: 0 4px;" class="column">
    <!-- App Logo Field -->
    <div class="form-group row">
        {!! Form::label('app_logo', trans("lang.configuration_app_logo"), ['class' => 'col-3 control-label text-right']) !!}
        <div class="col-9">
            <div style="width: 100%" class="dropzone app_logo" id="app_logo" data-field="app_logo">
                <input type="hidden" name="app_logo">
            </div>
            <a href="#loadMediaModal" data-dropzone="app_logo" data-toggle="modal" data-target="#mediaModal" class="btn btn-outline-{{setting('theme_color','primary')}} btn-sm float-right mt-1">{{ trans('lang.media_select')}}</a>
            <div class="form-text text-muted w-50">
                {{ trans("lang.configuration_app_logo_help") }}
            </div>
        </div>
    </div>
    @prepend('scripts')
        <script type="text/javascript">
            var var15406757111521283280ble = '';
            @if(isset($configuration) && $configuration->hasMedia('app_logo'))
                var15406757111521283280ble = {
                name: "{!! $configuration->getFirstMedia('app_logo')->name !!}",
                size: "{!! $configuration->getFirstMedia('app_logo')->size !!}",
                type: "{!! $configuration->getFirstMedia('app_logo')->mime_type !!}",
                collection_name: "{!! $configuration->getFirstMedia('app_logo')->collection_name !!}"
            };
                    @endif
            var dz_var15406757111521283280ble = $(".dropzone.app_logo").dropzone({
                    url: "{!!url('uploads/store')!!}",
                    addRemoveLinks: true,
                    maxFiles: 1,
                    init: function () {
                        @if(isset($configuration) && $configuration->hasMedia('app_logo'))
                        dzInit(this, var15406757111521283280ble, '{!! url($configuration->getFirstMediaUrl('app_logo','thumb')) !!}')
                        @endif
                    },
                    accept: function (file, done) {
                        dzAccept(file, done, this.element, "{!!config('medialibrary.icons_folder')!!}");
                    },
                    sending: function (file, xhr, formData) {
                        dzSending(this, file, formData, '{!! csrf_token() !!}');
                    },
                    maxfilesexceeded: function (file) {
                        dz_var15406757111521283280ble[0].mockFile = '';
                        dzMaxfile(this, file);
                    },
                    complete: function (file) {
                        dzComplete(this, file, var15406757111521283280ble, dz_var15406757111521283280ble[0].mockFile);
                        dz_var15406757111521283280ble[0].mockFile = file;
                    },
                    removedfile: function (file) {
                        dzRemoveFile(
                            file, var15406757111521283280ble, '{!! url("configurations/remove-media") !!}',
                            'app_logo', '{!! isset($configuration) ? $configuration->id : 0 !!}', '{!! url("uplaods/clear") !!}', '{!! csrf_token() !!}'
                        );
                    }
                });
            dz_var15406757111521283280ble[0].mockFile = var15406757111521283280ble;
            dropzoneFields['app_logo'] = dz_var15406757111521283280ble;
        </script>
    @endprepend

<!-- App Name Field -->
    <div class="form-group row ">
        {!! Form::label('app_name', trans("lang.configuration_app_name"), ['class' => 'col-3 control-label text-right']) !!}
        <div class="col-9">
            {!! Form::text('app_name', null,  ['class' => 'form-control','placeholder'=>  trans("lang.configuration_app_name_placeholder")]) !!}
            <div class="form-text text-muted">
                {{ trans("lang.configuration_app_name_help") }}
            </div>
        </div>
    </div>

    <!-- Main Color Field -->
    <div class="form-group row ">
        {!! Form::label('main_color', trans("lang.configuration_main_color"), ['class' => 'col-3 control-label text-right']) !!}
        <div class="col-9">
            <div id="main-colorpicker" class="input-group colorpicker-component">
                {!! Form::text('main_color', null,  ['class' => 'form-control','placeholder'=>  trans("lang.configuration_main_color_placeholder"),'autocomplete' => 'off']) !!}
                <div class=" input-group-append ">
                    <span class="input-group-addon input-group-text"><i></i></span>
                </div>
            </div>
            <div class="form-text text-muted">
                {{ trans("lang.configuration_main_color_help") }}
            </div>
        </div>
    </div>

    <!-- Background Img Field -->
    <div class="form-group row">
        {!! Form::label('background_img', trans("lang.configuration_background_img"), ['class' => 'col-3 control-label text-right']) !!}
        <div class="col-9">
            <div style="width: 100%" class="dropzone background_img" id="background_img" data-field="background_img">
                <input type="hidden" name="background_img">
            </div>
            <a href="#loadMediaModal" data-dropzone="background_img" data-toggle="modal" data-target="#mediaModal" class="btn btn-outline-{{setting('theme_color','primary')}} btn-sm float-right mt-1">{{ trans('lang.media_select')}}</a>
            <div class="form-text text-muted w-50">
                {{ trans("lang.configuration_background_img_help") }}
            </div>
        </div>
    </div>
    @prepend('scripts')
        <script type="text/javascript">
            var var15406757111353304369ble = '';
            @if(isset($configuration) && $configuration->hasMedia('background_img'))
                var15406757111353304369ble = {
                name: "{!! $configuration->getFirstMedia('background_img')->name !!}",
                size: "{!! $configuration->getFirstMedia('background_img')->size !!}",
                type: "{!! $configuration->getFirstMedia('background_img')->mime_type !!}",
                collection_name: "{!! $configuration->getFirstMedia('background_img')->collection_name !!}"
            };
                    @endif
            var dz_var15406757111353304369ble = $(".dropzone.background_img").dropzone({
                    url: "{!!url('uploads/store')!!}",
                    addRemoveLinks: true,
                    maxFiles: 1,
                    init: function () {
                        @if(isset($configuration) && $configuration->hasMedia('background_img'))
                        dzInit(this, var15406757111353304369ble, '{!! url($configuration->getFirstMediaUrl('background_img','thumb')) !!}')
                        @endif
                    },
                    accept: function (file, done) {
                        dzAccept(file, done, this.element, "{!!config('medialibrary.icons_folder')!!}");
                    },
                    sending: function (file, xhr, formData) {
                        dzSending(this, file, formData, '{!! csrf_token() !!}');
                    },
                    maxfilesexceeded: function (file) {
                        dz_var15406757111353304369ble[0].mockFile = '';
                        dzMaxfile(this, file);
                    },
                    complete: function (file) {
                        dzComplete(this, file, var15406757111353304369ble, dz_var15406757111353304369ble[0].mockFile);
                        dz_var15406757111353304369ble[0].mockFile = file;
                    },
                    removedfile: function (file) {
                        dzRemoveFile(
                            file, var15406757111353304369ble, '{!! url("configurations/remove-media") !!}',
                            'background_img', '{!! isset($configuration) ? $configuration->id : 0 !!}', '{!! url("uplaods/clear") !!}', '{!! csrf_token() !!}'
                        );
                    }
                });
            dz_var15406757111353304369ble[0].mockFile = var15406757111353304369ble;
            dropzoneFields['background_img'] = dz_var15406757111353304369ble;
        </script>
    @endprepend
</div>
<div style="flex: 50%;max-width: 50%;padding: 0 4px;" class="column">

    <!-- Background Color Field -->
    <div class="form-group row ">
        {!! Form::label('background_color', trans("lang.configuration_background_color"), ['class' => 'col-3 control-label text-right']) !!}
        <div class="col-9">
            {!! Form::text('background_color', null,  ['class' => 'form-control','placeholder'=>  trans("lang.configuration_background_color_placeholder")]) !!}
            <div class="form-text text-muted">
                {{ trans("lang.configuration_background_color_help") }}
            </div>
        </div>
    </div>

    <!-- Currency Field -->
    <div class="form-group row ">
        {!! Form::label('currency', trans("lang.configuration_currency"), ['class' => 'col-3 control-label text-right']) !!}
        <div class="col-9">
            {!! Form::text('currency', null,  ['class' => 'form-control','placeholder'=>  trans("lang.configuration_currency_placeholder")]) !!}
            <div class="form-text text-muted">
                {{ trans("lang.configuration_currency_help") }}
            </div>
        </div>
    </div>

    <!-- Language Field -->
    <div class="form-group row ">
        {!! Form::label('language', trans("lang.configuration_language"),['class' => 'col-3 control-label text-right']) !!}
        <div class="col-9">
            {!! Form::select('language', ['en' => 'English','fr' => 'Français','es' => 'Español','pt'=>'Português','de'=>'Deutsch'], null, ['class' => 'select2 form-control']) !!}
            <div class="form-text text-muted">{{ trans("lang.configuration_language_help") }}</div>
        </div>
    </div>

    @role('admin')
    <!-- Store Id Field -->
    <div class="form-group row ">
        {!! Form::label('store_id', trans("lang.configuration_store_id"),['class' => 'col-3 control-label text-right']) !!}
        <div class="col-9">
            {!! Form::select('store_id', $store, null, ['class' => 'select2 form-control']) !!}
            <div class="form-text text-muted">{{ trans("lang.configuration_store_id_help") }}</div>
        </div>
    </div>
    @endrole

</div>
@if($customFields)
    <div class="clearfix"></div>
    <div class="col-12 custom-field-container">
        <h5 class="col-12 pb-4">{!! trans('lang.custom_field_plural') !!}</h5>
        {!! $customFields !!}
    </div>
@endif
<!-- Submit Field -->
<div class="form-group col-12 text-right">
    <button type="submit" class="btn btn-{{setting('theme_color')}}"><i class="fa fa-save"></i> {{trans('lang.save')}} {{trans('lang.configuration')}}</button>
    <a href="{!! route('configurations.index') !!}" class="btn btn-default"><i class="fa fa-undo"></i> {{trans('lang.cancel')}}</a>
</div>