@extends('admin.layout.default')

@section('title', trans('admin.general-setting.title'))

@if(true)
@section('styles')
    <style>
        .vue-dropzone.dropzone {
            text-align: center;
        }

        .vue-dropzone.dropzone .dz-preview .dz-image {
            width: auto !important;
            height: auto !important;
        }

        @foreach($locales as $locale)
            #logo_colored_{{$locale}}.vue-dropzone.dropzone .dz-preview .dz-image {
            min-width: 100px !important;
            min-height: 56px !important;
        }

        #logo_colored_{{$locale}}.vue-dropzone.dropzone .dz-preview .dz-image img {
            width: auto !important;
            height: auto !important;
            max-width: 100% !important;
            max-height: 100% !important;
        }

        #logo_negative_{{$locale}}.vue-dropzone.dropzone .dz-preview .dz-image {
            min-width: 100px !important;
            min-height: 56px !important;
        }

        #logo_negative_{{$locale}}.vue-dropzone.dropzone .dz-preview .dz-image img {
            width: auto !important;
            height: auto !important;
            max-width: 100% !important;
            max-height: 100% !important;
        }
        @endforeach
    </style>

    <style>
        /* FAVICON */
        #favicon.vue-dropzone.dropzone {
            text-align: center;
            min-height: unset !important;
            padding: .5rem !important;
        }

        #favicon.vue-dropzone.dropzone .dz-preview {
            min-width: 100px;
            margin: 0;
        }

        #favicon.vue-dropzone.dropzone .dz-preview .dz-image img {
            width: 100px !important;
            height: 100px !important;
        }

        #favicon.vue-dropzone .dz-preview .dz-remove {
            margin-left: 14px !important;
            padding: 4px !important;
            font-size: .7rem !important;
        }

        #favicon.vue-dropzone .dz-preview .dz-details {
            text-align: center !important;
        }

        #favicon.dropzone .dz-preview .dz-details .dz-size {
            margin-bottom: 0.5em !important;
        }

        #favicon.dropzone .dz-preview .dz-details {
            padding: 1em !important;
            line-height: 110% !important;
        }

        /* ICON_APP */
        #icon_app.vue-dropzone.dropzone {
            text-align: center;
            min-height: unset !important;
            padding: .5rem !important;
        }

        #icon_app.vue-dropzone.dropzone .dz-preview {
            min-width: 100px;
            margin: 0;
        }

        #icon_app.vue-dropzone.dropzone .dz-preview .dz-image, #icon_app.vue-dropzone.dropzone .dz-preview .dz-image img {
            width: 100px !important;
            height: 100px !important;
        }

        #icon_app.vue-dropzone .dz-preview .dz-remove {
            margin-left: 14px !important;
            padding: 4px !important;
            font-size: .7rem !important;
        }

        #icon_app.vue-dropzone .dz-preview .dz-details {
            text-align: center !important;
        }

        #icon_app.dropzone .dz-preview .dz-details .dz-size {
            margin-bottom: 0.5em !important;
        }

        #icon_app.dropzone .dz-preview .dz-details {
            padding: 1em !important;
            line-height: 110% !important;
        }
    </style>

    <style>
        .nav-tabs .nav-link.active {
            font-weight: 600;
        }

        #corporate.vue-dropzone.dropzone .dz-preview .dz-image img,
        #service.vue-dropzone.dropzone .dz-preview .dz-image img,
        #project.vue-dropzone.dropzone .dz-preview .dz-image img,
        #reference.vue-dropzone.dropzone .dz-preview .dz-image img,
        #dynamic-page.vue-dropzone.dropzone .dz-preview .dz-image img,
        #faq.vue-dropzone.dropzone .dz-preview .dz-image img,
        #faqs.vue-dropzone.dropzone .dz-preview .dz-image img
        {
            width: auto !important;
            height: auto !important;
            max-width: 100% !important;
            max-height: 100% !important;
        }
    </style>

    <style>
        .dropzone .dz-preview .dz-details {
            opacity: 0!important;
        }
        .dropzone .dz-preview:hover .dz-details {
            opacity: 1!important;
        }
    </style>
@endsection
@endif


@section('body')

    <div class="container-xl">
        <div class="card">

            <general-setting-form
                    :action="'{{ $generalSetting->resource_url }}'"
                    :data="{{ $generalSetting->toJsonAllLocales() }}"
                    :locales="{{ json_encode($locales) }}"
                    :faq_categories="{{ $faq_categories->toJson() }}"
                    :send-empty-locales="false"
                    :media-collection-names="['logo_colored_','logo_negative_','services_files']"
                    :nolang-media-collection-names="[
                        'favicon','icon_app',
                        'corporate','service','project','reference','dynamic-page','faq','faqs'
                    ]"
                    v-cloak
                    inline-template>

                <form class="form-horizontal form-edit" method="post" @submit.prevent="onSubmit" :action="action" novalidate>


                    <div class="card-header">
                        <i class="fa fa-cogs"></i> {{ trans('admin.general-setting.title') }}
                    </div>

                    <div class="card-body">

                        <!-- SEO Section-->
                        <div class="card card-accent-dark">
                            <div class="card-header bg-light text-yahoo py-3"><i class="fa fa-search-plus" aria-hidden="true"></i>{{ trans('admin.general-setting.seo_settings') }}</div>
                            <div class="card-body" :class="isFormLocalized ? 'px-4' : ''">
                                @include('admin.general-setting.components.form-elements')
                            </div>
                        </div>

                        <!-- LOGO Section-->
                        <div class="row">
                            <div class="col-sm-12">

                                <div class="card card-accent-dark mt-4">
                                    <div class="card-header bg-light text-reddit py-3"><i class="fa fa-flag" aria-hidden="true"></i>{{ trans('admin.general-setting.logo_settings') }}</div>
                                    <div class="card-body p-sm-3 p-0">

                                        <!-- for Manage Translate Control Unit edit.03062021-->
                                        <div class="row form-inline m-3 m-sm-0 mx-sm-1" style="padding-bottom: 10px;" v-cloak>
                                            <div :class="{'col-xl-10 col-md-11 text-right': !isFormLocalized, 'col text-center': isFormLocalized, 'hidden': onSmallScreen }">
                                                <small>{{ trans('admin.forms.currently_editing_translation') }}<span v-if="!isFormLocalized && otherLocales.length > 1"> {{ trans('admin.forms.more_can_be_managed') }}</span><span v-if="!isFormLocalized"> | <a href="#" @click.prevent="showLocalization">{{ trans('admin.forms.manage_translations') }}</a></span></small>
                                                <i class="localization-error" v-if="!isFormLocalized && showLocalizedValidationError"></i>
                                            </div>

                                            <div class="col text-center" :class="{'language-mobile': onSmallScreen, 'has-error': !isFormLocalized && showLocalizedValidationError}" v-if="isFormLocalized || onSmallScreen" v-cloak>
                                                <small>{{ trans('admin.forms.choose_translation_to_edit') }}
                                                    <select class="form-control" v-model="currentLocale">
                                                        <option :value="defaultLocale" v-if="onSmallScreen">@{{defaultLocale.toUpperCase()}}</option>
                                                        <option v-for="locale in otherLocales" :value="locale">@{{locale.toUpperCase()}}</option>
                                                    </select>
                                                    <i class="localization-error" v-if="isFormLocalized && showLocalizedValidationError"></i>
                                                    <span>|</span>
                                                    <a href="#" @click.prevent="hideLocalization">{{ trans('admin.forms.hide') }}</a>
                                                </small>
                                            </div>
                                        </div>

                                        <!-- LOGO -->
                                        <div class="row">

                                            <div class="col-md">
                                                <div class="row border pb-4 m-sm-1 m-4">
                                                @foreach($locales as $locale)
                                                    <div class="col-md" :class="!isFormLocalized ? 'px-xl-5' : 'col-12'" v-show="shouldShowLangGroup('{{ $locale }}')" v-cloak>
                                                        @include('admin.includes.media-uploader', [
                                                            'mediaCollection' => app(App\Models\GeneralSetting::class)->getMediaCollection('logo_colored_'.$locale),
                                                            'media' => $generalSetting->getThumbsColoredForCollection('logo_colored_'.$locale),
                                                            'label' => trans('admin.general-setting.logo_colored').' '.Str::upper($locale)
                                                        ])
                                                    </div>
                                                @endforeach
                                                </div>
                                            </div>

                                            <div class="col-md">
                                                <div class="row border pb-4 m-sm-1 m-4">
                                                @foreach($locales as $locale)
                                                    <div class="col-md" :class="!isFormLocalized ? 'px-xl-5' : 'col-12'" v-show="shouldShowLangGroup('{{ $locale }}')" v-cloak>
                                                        @include('admin.includes.media-uploader', [
                                                            'mediaCollection' => app(App\Models\GeneralSetting::class)->getMediaCollection('logo_negative_'.$locale),
                                                            'media' => $generalSetting->getThumbsNegativeForCollection('logo_negative_'.$locale),
                                                            'label' => trans('admin.general-setting.logo_negative').' '.Str::upper($locale)
                                                        ])
                                                    </div>
                                                @endforeach
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- FAVICON Section-->
                        <div class="row">
                            <div class="col-sm-12">

                                <div class="card card-accent-dark mt-4">
                                    <div class="card-header bg-light text-vine py-3"><i class="fa fa-star" aria-hidden="true"></i>{{ trans('admin.general-setting.icon_settings') }}</div>
                                    <div class="card-body px-4 pt-0">
                                        <!-- FAVICON -->
                                        <div class="row justify-content-center">
                                            <div class="col-md-3 col-6">
                                                @include('admin.includes.media-uploader', [
                                                        'mediaCollection' => app(App\Models\GeneralSetting::class)->getMediaCollection('favicon'),
                                                        'media' => $generalSetting->getThumbs200ForCollection('favicon'),
                                                        'label' => 'Favicon'
                                                    ])
                                                <small>Pure Icon | Recommended sizes 512x512, background color transparent.</small>
                                            </div>
                                            <div class="col-md-3 col-6">
                                                @include('admin.includes.media-uploader', [
                                                        'mediaCollection' => app(App\Models\GeneralSetting::class)->getMediaCollection('icon_app'),
                                                        'media' => $generalSetting->getThumbs200ForCollection('icon_app'),
                                                        'label' => 'App Icon'
                                                    ])
                                                <small>Masked Icon | Recommended sizes 512x512, background color fill required.</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- DESIGN Section-->
                        @include('admin.general-setting.components.form-elements_design')

                        <!-- Section Manager -->
                        @include('admin.general-setting.components.form-elements_section-manager')

                    </div>


                    <div class="card-footer pt-0 pt-sm-3 pt-md-4 pt-xl-5 text-md-left text-right">
                        <button type="submit" class="btn btn-primary" :disabled="submiting">
                            <i class="fa" :class="submiting ? 'fa-spinner' : 'fa-download'"></i>
                            {{ trans('admin.btn.save') }}
                        </button>
                    </div>

                </form>

            </general-setting-form>

        </div>
    </div>

    <div class="container-xl">
        <div class="card card-accent-warning">
            <div class="card-header">
                <i class="fa fa-id-card-o"></i> {{ trans('admin.general-setting.about_app_title') }}
            </div>

            <div class="card-body text-black">
                @php(is_file(storage_path('lic_set.json')) ? $lic_set = json_decode(file_get_contents(storage_path('lic_set.json'))) : $lic_set = 'null')
                <p class="text-success">{!! trans('admin.general-setting.about_app_info', ['app_name' => '<span class="font-weight-bold font-italic">'.($lic_set->app_name ?? '').'</span>', 'activated_at' => '<span class="font-weight-bold font-italic">'.($lic_set->activated_at ? \Carbon\Carbon::parse($lic_set->activated_at)->isoFormat('D MMM YYYY') : '').'</span>' ]) !!} 🎊</p>

                <p>
                    <span>
                        {{ trans('admin.general-setting.about_app_line1') }}<br>
                        {!! trans('admin.general-setting.about_app_line2', ['cart-icon' => '🛒']) !!}
                    </span>
                    <br>
                    <span>
                    {{ trans('admin.general-setting.about_app_line3') }} 😎
                    </span>
                </p>
            </div>

            <div class="card-footer pt-0 text-md-left text-right">
                <license-component
                        deactivate-license-url="{{ url('license/deactive') }}"
                        button-label="{{ trans('admin.general-setting.about_app_button') }}"
                        dialog-title="{{ trans('admin.general-setting.about_app_dialog_title') }}"
                        dialog-text="{{ trans('admin.general-setting.about_app_dialog_text') }}"
                        :dialog-button-labels="{
                            'no': '{{ trans('admin.general-setting.about_app_dialog_no') }}',
                            'yes': '<span class=\'btn-dialog btn-danger\'>{{ trans('admin.general-setting.about_app_dialog_yes') }}</span>',
                        }"
                ></license-component>
            </div>
        </div>
    </div>

@endsection