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

@section('content')
    <x-dashboard.form.form :action="route('restaurant.colors.update')" method="PATCH" id="designForm">
        <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="$color->font_family" container-classes="col-lg" :ajax="false" />
                        <x-dashboard.form.input name="header_bg" type='color' :value="$color->header_bg" container-classes="col-lg" />
                        <x-dashboard.form.input name="main_bg" type='color' :value="$color->main_bg" container-classes="col-lg" />
                        <x-dashboard.form.input name="button_bg" type='color' :value="$color->button_bg" container-classes="col-lg" :help="__('messages.tooltips.restaurants.buttons_bg_color')" />
                        <x-dashboard.form.input name="button_font" type='color' :value="$color->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="$color->section_bg" container-classes="col-lg-3" />
                        <x-dashboard.form.input name="section_font" type='color' :value="$color->section_font" container-classes="col-lg-3" />
                    </div>
                </div>
            </div>
        </div>

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

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

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

        <div class="col-12">
            <div class="card text-left">
                <div class="card-body">
                    <div class="row">
                        <x-dashboard.form.input name="tag_bg" type='color' :value="$color->tag_bg" container-classes="col-lg-3" />
                        <x-dashboard.form.input name="tag_title_font" type='color' :value="$color->tag_title_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="$color->modal_header_bg" container-classes="col-lg-3" />
                        <x-dashboard.form.input name="modal_header_font" type='color' :value="$color->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.menu')])" icon='i-Eye-2' color='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="$restaurant->branches" :value-fn="fn($branch) => route('website.branches.menu', ['branch' => $branch])" container-classes="col-12" :ajax="false" />
            <x-dashboard.form.button :title="__('global.previewX', ['X' => __('global.menu')])" icon='i-Eye-2' color='dark' type="button" id="previewMenuButton" />
        </div>
    </x-bootstrap.modal>
@endsection