@push('styles')
    <style>
        .ck-editor__editable {
            min-height: 200px;
        }
    </style>
@endpush
<div class="card mt-3">
    <div class="card-header">
        <div class="row align-items-center">
            <div class="col">
                <h4 class="card-title">@lang('config.global.page.title')</h4>
            </div>
            <div class="col-auto">
                <!-- <button wire:click="list" class="btn btn-primary">@lang('common.btn.list')</button> -->
            </div>
        </div>
    </div>
    <div class="card-body">
        <form class="my-1 form" autocomplete="off">
            <div class="row">
                <div class="col-md-6 col-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h4 class="card-title">@lang('config.global.card.title.application')</h4>
                                </div>
                                <div class="col-auto">
                                    <!-- <button wire:click="list" class="btn btn-primary">@lang('common.btn.list')</button> -->
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12 col-sm-12 col-xs m-auto">
                                    <label for="keys.application_name" class="mb-2">@lang('config.global.lbl.application_name')</label>
                                    <div class="input-group mb-3">
                                        <input type="text" id="keys.application_name"
                                            class="form-control @error('keys.application_name') is-invalid @enderror"
                                            wire:model.lazy="keys.application_name">
                                        <x-ui-kit.input-error field="keys.application_name" />
                                    </div>
                                    <div wire:ignore class="mb-3">
                                        <label for="keys.application_overview" class="mb-2">@lang('config.global.lbl.application_overview')</label>
                                        <textarea class="form-control" id="application_overview"
                                            class="form-control @error('keys.application_overview') is-invalid @enderror"
                                            wire:model.lazy="keys.application_overview" rows="2">
                                            </textarea>
                                        <x-ui-kit.input-error field="keys.application_overview" />
                                    </div>
                                    @if ($errors->has('keys.application_overview'))
                                        <p class="text-danger">{{ $errors->first('keys.application_overview') }}</p>
                                    @endif
                                    <label for="keys.company_name" class="mb-2">@lang('config.global.lbl.company_name')</label>
                                    <div class="input-group mb-3">
                                        <input type="text" id="keys.company_name"
                                            class="form-control @error('keys.company_name') is-invalid @enderror"
                                            wire:model.lazy="keys.company_name">
                                        <x-ui-kit.input-error field="keys.company_name" />
                                    </div>
                                    <label for="keys.company_address" class="mb-2">@lang('config.global.lbl.company_address')</label>
                                    <div class="input-group mb-3">
                                        <input type="text" id="keys.company_address"
                                            class="form-control @error('keys.company_address') is-invalid @enderror"
                                            wire:model.lazy="keys.company_address">
                                        <x-ui-kit.input-error field="keys.company_address" />
                                    </div>
                                    <label for="keys.application_logo" class="mb-2">@lang('config.global.lbl.application_logo')</label>
                                    <div class="met-profile-main-pic">

                                        <img src="{{ asset('storage/logo/' . $keys['application_logo']) }}"
                                            alt="" height="110" class="rounded-circle">
                                        @permission('glob-conf-update')
                                            <div class="d-grid">
                                                <input type="file" id="input-file" name="input-file" class="disabled"
                                                    wire:model="keys.application_logo" accept="image/*" hidden />
                                                <label class="btn-upload btn btn-primary mt-4"
                                                    for="input-file">@lang('config.global.lbl.logo')</label>
                                            </div>
                                            <x-ui-kit.input-error field="keys.application_logo" />
                                        @endpermission
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h4 class="card-title">@lang('config.global.card.title.sales')</h4>
                                </div>
                                <div class="col-auto">
                                    <!-- <button wire:click="list" class="btn btn-primary">@lang('common.btn.list')</button> -->
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12 col-sm-12 col-xs m-auto">
                                    <label for="keys.tax_percentage" class="mb-2">@lang('config.global.lbl.tax_percentage')</label>
                                    <div class="input-group mb-3">
                                        <input type="text" id="keys.tax_percentage"
                                            class="form-control @error('keys.tax_percentage') is-invalid @enderror"
                                            wire:model.lazy="keys.tax_percentage">
                                        <span class="input-group-text">%</span>
                                        <x-ui-kit.input-error field="keys.tax_percentage" />
                                    </div>

                                    <div class="row">
                                        <div class="col-md-4">
                                            <label for="" class="mb-2">@lang('config.global.lbl.reservation_amount_type')</label>
                                            <div class="mt-1">
                                                <div class="col-md-12">
                                                    <div class="d-flex align-items-center">
                                                        <div>
                                                            <x-ui-kit.form-radio field="keys.reservation_amount_type"
                                                                id="keys.reservation_amount_type_percentage"
                                                                label="config.global.lbl.percentage" class="pi-item-type-rating"
                                                                inline="true" :display-error="false" value="percentage" />
                                                            <x-ui-kit.form-radio field="keys.reservation_amount_type"
                                                                id="keys.reservation_amount_type_fixed" label="config.global.lbl.fixed"
                                                                class="pi-item-type-query" inline="true"
                                                                :display-error="false" value="fixed" />
                                                            <x-ui-kit.input-error
                                                                field="keys.reservation_amount_type" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-8">
                                            <label for="keys.reservation_fee"
                                                class="mb-2">@lang('config.global.lbl.reservation_fee')</label>
                                            <div class="input-group mb-3">
                                                <input type="text" id="keys.reservation_fee"
                                                    class="form-control @error('keys.reservation_fee') is-invalid @enderror"
                                                    wire:model.lazy="keys.reservation_fee">
                                                @if (isset($keys['reservation_amount_type']) && $keys['reservation_amount_type'] == 'percentage')
                                                    <span class="input-group-text">%</span>
                                                @endif
                                                <x-ui-kit.input-error field="keys.reservation_fee" />
                                            </div>

                                        </div>

                                    </div>





                                    <label for="keys.invoice-header" class="mb-2">@lang('config.global.lbl.invoice-header')</label>
                                    <div class="input-group mb-3">
                                        <input type="text" id="keys.invoice-header"
                                            class="form-control @error('keys.invoice_header') is-invalid @enderror"
                                            wire:model.lazy="keys.invoice_header">
                                        <x-ui-kit.input-error field="keys.invoice_header" />
                                    </div>
                                    <label for="keys.invoice-footer" class="mb-2">@lang('config.global.lbl.invoice-footer')</label>
                                    <div class="input-group mb-3">
                                        <input type="text" id="keys.invoice-footer"
                                            class="form-control @error('keys.invoice_footer') is-invalid @enderror"
                                            wire:model.lazy="keys.invoice_footer">
                                        <x-ui-kit.input-error field="keys.invoice_footer" />
                                    </div>
                                    <div wire:ignore class="mb-3">
                                        <label for="keys.sale_terms_conditions"
                                            class="mb-2">@lang('config.global.lbl.sale_terms_conditions')</label>
                                        <textarea class="form-control" id="sale_terms_conditions"
                                            class="form-control @error('keys.sale_terms_conditions') is-invalid @enderror"
                                            wire:model.lazy="keys.sale_terms_conditions" rows="2">
                                            </textarea>
                                        <x-ui-kit.input-error field="keys.sale_terms_conditions" />
                                    </div>
                                    @if ($errors->has('keys.sale_terms_conditions'))
                                        <p class="text-danger">{{ $errors->first('keys.sale_terms_conditions') }}</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h4 class="card-title">@lang('config.global.card.title.password')</h4>
                                </div>
                                <div class="col-auto">
                                    <!-- <button wire:click="list" class="btn btn-primary">@lang('common.btn.list')</button> -->
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12 col-sm-12 col-xs m-auto">
                                    <div class="mb-3">
                                        <label for="keys.password_token_expire_time"
                                            class="mb-2">@lang('config.global.lbl.password_token_expire_time')</label>
                                        <div class="input-group">
                                            <input type="text" id="keys.password_token_expire_time"
                                                class="form-control @error('keys.password_token_expire_time') is-invalid @enderror"
                                                wire:model.lazy="keys.password_token_expire_time" />
                                            <span class="input-group-text">@lang('config.global.lbl.minutes')</span>
                                            <x-ui-kit.input-error field="keys.password_token_expire_time" />
                                        </div>
                                    </div>
                                    <div wire:ignore class="mb-3">
                                        <label for="keys.password_reset_message"
                                            class="mb-2">@lang('config.global.lbl.password_reset_message')</label>
                                        <textarea class="form-control" id="password_reset_message"
                                            class="form-control @error('keys.password_reset_message') is-invalid @enderror"
                                            wire:model.lazy="keys.password_reset_message" rows="2">
                                            </textarea>
                                        <x-ui-kit.input-error field="keys.password_reset_message" />
                                    </div>
                                    @if ($errors->has('keys.password_reset_message'))
                                        <p class="text-danger">{{ $errors->first('keys.password_reset_message') }}</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="row align-items-center">
                                <div class="col">
                                    <h4 class="card-title">@lang('config.global.card.title.contract')</h4>
                                </div>
                                <div class="col-auto">
                                    <!-- <button wire:click="list" class="btn btn-primary">@lang('common.btn.list')</button> -->
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12 col-sm-12 col-xs m-auto">
                                    <div wire:ignore class="mb-3">
                                        <label for="keys.contract_template" class="mb-2">@lang('config.global.lbl.contract_template')</label>
                                        <textarea class="form-control" id="contract_template"
                                            class="form-control @error('keys.contract_template') is-invalid @enderror"
                                            wire:model.lazy="keys.contract_template" rows="2">
                                            </textarea>
                                        <x-ui-kit.input-error field="keys.contract_template" />
                                    </div>
                                    @if ($errors->has('keys.contract_template'))
                                        <p class="text-danger">{{ $errors->first('keys.contract_template') }}</p>
                                    @endif
                                    <div wire:ignore class="mb-3">
                                        <label for="keys.contract_mail_message"
                                            class="mb-2">@lang('config.global.lbl.contract_mail_message')</label>
                                        <textarea class="form-control" id="contract_mail_message"
                                            class="form-control @error('keys.contract_mail_message') is-invalid @enderror"
                                            wire:model.lazy="keys.contract_mail_message" rows="2">
                                            </textarea>
                                        <x-ui-kit.input-error field="keys.contract_mail_message" />
                                    </div>
                                    @if ($errors->has('keys.contract_mail_message'))
                                        <p class="text-danger">{{ $errors->first('keys.contract_mail_message') }}</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </form>
    </div>
    <div class="card-footer">
        <div class="row mt-2 mb-2 align-items-center">
            <div class="col"></div>
            <div class="col col-sm col-xs m-auto text-end">
                {{-- @if (auth()->user()->hasPermission('sys-conf-edit-schedule-backup')) --}}
                <button type="button" wire:loading.attr="disabled" wire:click="store"
                    class="btn btn-primary
                    @notpermission('glob-conf-update')
disabled
@endnotpermission
                    "><i
                        wire:loading wire:target="store" class="fa fa-spin fa-spinner"></i>
                    @lang('common.btn.update')</button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
    <script>
        tinymce.init({
            selector: 'textarea#sale_terms_conditions',
            plugins: ['advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'code', ],
            toolbar: 'undo redo | blocks | bold italic strikethrough forecolor backcolor blockquote | media | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat',
            setup: function(editor) {
                editor.on('change', function() {
                    @this.set('keys.sale_terms_conditions', editor.getContent());
                    // window.livewire.emit('validateEditor', editor.getContent());
                });
                editor.on('init', () => {
                    editor.getContainer().style.transition =
                        'border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out';
                });
                editor.on('focus', () => {
                    editor.getContainer().style.boxShadow = '0 0 0 .2rem rgba(0, 123, 255, .25)';
                    editor.getContainer().style.borderColor = '#80bdff';
                });
                editor.on('blur', () => {
                    editor.getContainer().style.boxShadow = '';
                    editor.getContainer().style.borderColor = '';
                });
            },
            menubar: false,
            branding: false,
            height: 300,
            resize: 'both'
        });
        tinymce.init({
            selector: 'textarea#application_overview',
            plugins: ['advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'code', ],
            toolbar: 'undo redo | blocks | bold italic strikethrough forecolor backcolor blockquote | media | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat',
            setup: function(editor) {
                editor.on('change', function() {
                    @this.set('keys.application_overview', editor.getContent());
                    // window.livewire.emit('validateEditor', editor.getContent());
                });
                editor.on('init', () => {
                    editor.getContainer().style.transition =
                        'border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out';
                });
                editor.on('focus', () => {
                    editor.getContainer().style.boxShadow = '0 0 0 .2rem rgba(0, 123, 255, .25)';
                    editor.getContainer().style.borderColor = '#80bdff';
                });
                editor.on('blur', () => {
                    editor.getContainer().style.boxShadow = '';
                    editor.getContainer().style.borderColor = '';
                });
            },
            menubar: false,
            branding: false,
            height: 300,
            resize: 'both'
        });
        tinymce.init({
            selector: 'textarea#contract_template',
            plugins: ['advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'code', ],
            toolbar: 'undo redo | blocks | bold italic strikethrough forecolor backcolor blockquote | media | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat',
            setup: function(editor) {
                editor.on('change', function() {
                    @this.set('keys.contract_template', editor.getContent());
                    // window.livewire.emit('validateEditor', editor.getContent());
                });
                editor.on('init', () => {
                    editor.getContainer().style.transition =
                        'border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out';
                });
                editor.on('focus', () => {
                    editor.getContainer().style.boxShadow = '0 0 0 .2rem rgba(0, 123, 255, .25)';
                    editor.getContainer().style.borderColor = '#80bdff';
                });
                editor.on('blur', () => {
                    editor.getContainer().style.boxShadow = '';
                    editor.getContainer().style.borderColor = '';
                });
            },
            menubar: false,
            branding: false,
            height: 700,
            resize: 'both'
        });
        tinymce.init({
            selector: 'textarea#password_reset_message',
            plugins: ['advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'code', ],
            toolbar: 'undo redo | blocks | bold italic strikethrough forecolor backcolor blockquote | media | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat',
            setup: function(editor) {
                editor.on('change', function() {
                    @this.set('keys.password_reset_message', editor.getContent());
                    // window.livewire.emit('validateEditor', editor.getContent());
                });
                editor.on('init', () => {
                    editor.getContainer().style.transition =
                        'border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out';
                });
                editor.on('focus', () => {
                    editor.getContainer().style.boxShadow = '0 0 0 .2rem rgba(0, 123, 255, .25)';
                    editor.getContainer().style.borderColor = '#80bdff';
                });
                editor.on('blur', () => {
                    editor.getContainer().style.boxShadow = '';
                    editor.getContainer().style.borderColor = '';
                });
            },
            menubar: false,
            branding: false,
            height: 400,
            resize: 'both'
        });
        tinymce.init({
            selector: 'textarea#contract_mail_message',
            plugins: ['advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'code', ],
            toolbar: 'undo redo | blocks | bold italic strikethrough forecolor backcolor blockquote | media | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | removeformat',
            setup: function(editor) {
                editor.on('change', function() {
                    @this.set('keys.contract_mail_message', editor.getContent());
                    // window.livewire.emit('validateEditor', editor.getContent());
                });
                editor.on('init', () => {
                    editor.getContainer().style.transition =
                        'border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out';
                });
                editor.on('focus', () => {
                    editor.getContainer().style.boxShadow = '0 0 0 .2rem rgba(0, 123, 255, .25)';
                    editor.getContainer().style.borderColor = '#80bdff';
                });
                editor.on('blur', () => {
                    editor.getContainer().style.boxShadow = '';
                    editor.getContainer().style.borderColor = '';
                });
            },
            menubar: false,
            branding: false,
            height: 400,
            resize: 'both'
        });
    </script>
@endpush