@extends('mall.layouts.index', ['without_card' => true])

@section('content')
    <x-dashboard.form.form :action="route('mall.themes.update')" method="PATCH" id="themeForm">
        <div class="col-12">
            <h4 class="mb-3">@lang('global.main_design')</h4>
        </div>

        <div class="col-12">
            <div class="card text-left">
                <div class="card-body">
                    <div class="row">
                        <x-dashboard.form.select :data-array="$fonts" name="font_family" :value="$theme->font_family" container-classes="col-lg" :ajax="false" />
                        <x-dashboard.form.input name="header_bg" type='color' :value="$theme->header_bg" container-classes="col-lg" />
                        <x-dashboard.form.input name="main_bg" type='color' :value="$theme->main_bg" container-classes="col-lg" />
                        <x-dashboard.form.input name="button_bg" type='color' :value="$theme->button_bg" container-classes="col-lg" :help="__('messages.tooltips.themes.buttons_bg_color')" />
                        <x-dashboard.form.input name="button_font" type='color' :value="$theme->button_font" container-classes="col-lg" />
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12">
            <h4 class="mt-5 mb-3">@lang('global.sections_design')</h4>
        </div>

        <div class="col-12">
            <div class="card text-left">
                <div class="card-body">
                    <div class="row">
                        <x-dashboard.form.input name="section_bg" type='color' :value="$theme->section_bg" container-classes="col-lg-3" />
                        <x-dashboard.form.input name="section_font" type='color' :value="$theme->section_font" container-classes="col-lg-3" />
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12">
            <h4 class="mt-5 mb-3">@lang('global.stores_design')</h4>
        </div>

        <div class="col-12">
            <div class="card text-left">
                <div class="card-body">
                    <div class="row">
                        <x-dashboard.form.input name="product_bg" :title="__('global.store_bg')" type='color' :value="$theme->product_bg" container-classes="col-lg-3" />
                        <x-dashboard.form.input name="product_title_font" :title="__('global.store_title_font')" type='color' :value="$theme->product_title_font" container-classes="col-lg-3" />
                        <x-dashboard.form.input name="product_description_font" :title="__('global.store_description_font')" type='color' :value="$theme->product_description_font" container-classes="col-lg-3" />
                    </div>
                </div>
            </div>
        </div>

        <div class="col-12">
            <h4 class="mt-5 mb-3">@lang('global.modals_design')</h4>
        </div>

        <div class="col-12">
            <div class="card text-left">
                <div class="card-body">
                    <div class="row">
                        <x-dashboard.form.input name="modal_header_bg" type='color' :value="$theme->modal_header_bg" container-classes="col-lg-3" />
                        <x-dashboard.form.input name="modal_header_font" type='color' :value="$theme->modal_header_font" container-classes="col-lg-3" />
                    </div>
                </div>
            </div>
        </div>

        <x-dashboard.form.button container-classes='nothing' />
        <x-dashboard.form.button :title="__('global.previewX', ['X' => __('global.portfolio')])" icon='i-Eye-2' theme='dark' type="button" data-toggle="modal" data-target="#previewMenuModal" container-classes='nothing' input-width="nothing" />

    </x-dashboard.form.form>

    <x-bootstrap.modal id="previewMenuModal" :title="__('global.previewX', ['X' => __('global.menu')])" content-type='slot'>
        <div class="row">
            <x-dashboard.form.select name="branch" :data-array="mall_admin()->mall->branches" :value-fn="fn($branch) => route('branches.portfolio', ['branch' => $branch])" container-classes="col-12" :ajax="false" />
            <x-dashboard.form.button :title="__('global.previewX', ['X' => __('global.portfolio')])" icon='i-Eye-2' theme='dark' type="button" id="previewMenuButton" />
        </div>
    </x-bootstrap.modal>
@endsection