@extends('admin.layout.master')

@section('admin')

    @php
        $componentSettings=$themeComponentRelational->component_settings;
        $componentSettings=json_decode($componentSettings,true);

    @endphp
    <div class="content-wrapper">
        <div class="content-header row">
            <div class="content-header-left col-md-6 col-12 mb-2">
                {{ Breadcrumbs::render('admin.themes.components.detail',$theme,$themeComponentRelational) }}
            </div>
            <div class="content-header-left col-md-6 col-12 mb-2">
                <a href="{{route('admin.themes.components.index',['theme_id'=>$themeComponentRelational->theme_id])}}"
                   class="btn btn-sm btn-info float-right">
                    {{trans('admin/themes.components.btn_list')}}
                </a>
            </div>

        </div>
        <div class="content-body">
            <section id="basic-form-layouts">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title"
                                    id="pageHeaderTitle">{!! trans('admin/themes.components.detail.title',['title'=>$themeComponentRelational->title]) !!}</h4>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">


                        @if(session()->has('validationErrors'))
                            <div class="alert alert-info">
                                {!! session()->get('validationErrors') !!}
                            </div>
                        @endif
                        @if($errors->any())
                            <div class="alert alert-info">
                                @foreach ($errors->all() as $error)
                                    {!! $error !!} <br>
                                @endforeach
                            </div>
                        @endif

                    </div>
                </div>
                @include("admin.pages.themes.components.component.".$themeComponentDetail["preview_type"].".index",['form'=>$form,'themeComponentRelational'=>$themeComponentRelational->toArray()])

                <div class="row">
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-content">
                                <img class="card-img-top img-fluid"
                                     src="{{ $themeComponentDetail["preview_image"]}}"
                                     alt="{{$themeComponentDetail["preview_title"]}}">
                                <div class="card-body">
                                    {!! trans('admin/themes.components.component_detail.title',['title'=>$themeComponentDetail["preview_title"]]) !!}
                                    <br>
                                    {!! trans('admin/themes.components.component_detail.type',['type'=>$themeComponentDetail["preview_type"]]) !!}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8">
                        {{ html()->form()->method('POST')->class("form modulForm")->id("modulForm")->autocomplete("off")->attribute('enctype','multipart/form-data')->open() }}


                        @if($themeComponentDetail["preview_type"]==="content" || $themeComponentDetail["preview_type"]==="slider")
                            <div class="card">
                                <div class="card-content">
                                    <div class="card-body">
                                        <h4 class="card-title">
                                            {{trans("admin/themes.components.component_detail.component_settings.title")}}
                                        </h4>
                                        <ul class="nav nav-tabs nav-topline">
                                            @foreach($form["languages"] as $language)
                                                <li class="nav-item">
                                                    <a class="nav-link @if($language["default"]) active @endif"
                                                       id="tab-{{$language["id"]}}" data-toggle="tab"
                                                       aria-controls="tab-PaneCompSetting-{{$language["id"]}}"
                                                       href="#tabPaneCompSetting{{$language["id"]}}"
                                                       aria-expanded="true">{{$language["title"]}}</a>
                                                </li>
                                            @endforeach
                                        </ul>
                                        <div
                                                class="tab-content tab-validate px-1 pt-1 border-grey border-lighten-2 border-0-top">
                                            @foreach($form["languages"] as $lang)
                                                @php
                                                    $langID=$lang["id"];
                                                    $langCode=$lang["code"];

$componentSettingTitle="";
$componentSettingDescription="";
$componentSettingLink="";
$componentSettingLinkText="";
                                                    if(is_array($componentSettings)){
                                                    $componentSettingTitle=array_key_exists($langCode,$componentSettings) ? array_key_exists('title',$componentSettings[$langCode]) ? $componentSettings[$langCode]["title"]:"":"";
                                                    $componentSettingDescription=array_key_exists($langCode,$componentSettings) ? array_key_exists('description',$componentSettings[$langCode]) ? $componentSettings[$langCode]["description"]:"":"";
                                                    $componentSettingLink=array_key_exists($langCode,$componentSettings) ? array_key_exists('link',$componentSettings[$langCode]) ? $componentSettings[$langCode]["link"]:"":"";
                                                    $componentSettingLinkText=array_key_exists($langCode,$componentSettings) ? array_key_exists('link_text',$componentSettings[$langCode]) ? $componentSettings[$langCode]["link_text"]:"":"";
}
                                                @endphp
                                                <div role="tabpanel"
                                                     class="tab-pane @if($lang["default"]) active @endif"
                                                     id="tabPaneCompSetting{{$lang["id"]}}" aria-expanded="true"
                                                     aria-labelledby="base-tabPaneCompSetting{{$lang["id"]}}">
                                                    <div class="form-body">
                                                        <div class="row">
                                                            <div class="col-md-4">
                                                                <div class="form-group mb-0">
                                                                    {{html()->label()->for("lang")->html(trans("admin/contents.form.lang")) }}
                                                                    {{html()->span()->id("lang-".$langID)->html($lang["title"])->style(['font-size'=>'12px','margin'=>' 5px 0','font-weight'=>'bold']) }}
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="table-responsive">

                                                                    {{html()->label("componentSettingTitle")->for("componentSettingTitle")->text(trans("admin/themes.components.component_detail.component_settings.form.title"))}}
                                                                    <div class="form-group">
                                                                        {{html()->input()->name("componentSettings[".$langCode."][title]")->value($componentSettingTitle)->id("componentSettingTitle")->class("form-control")}}
                                                                    </div>

                                                                    {{html()->label("componentSettingDescription")->for("componentSettingDescription")->text(trans("admin/themes.components.component_detail.component_settings.form.description"))}}
                                                                    <div class="form-group">
                                                                        {{html()->textarea()->name("componentSettings[".$langCode."][description]")->value($componentSettingDescription)->id("componentSettingDescription")->class("form-control")->style(['min-height'=>'100px','max-height'=>'100px'])}}
                                                                    </div>


                                                                    {{html()->label("componentSettingTitle")->for("componentSettingTitle")->text(trans("admin/themes.components.component_detail.component_settings.form.link"))}}
                                                                    <div class="form-group">
                                                                        {{html()->input()->name("componentSettings[".$langCode."][link]")->value($componentSettingLink)->id("componentSettingLink")->class("form-control")}}
                                                                    </div>
                                                                    {{html()->label("componentSettingTitle")->for("componentSettingTitle")->text(trans("admin/themes.components.component_detail.component_settings.form.link_text"))}}
                                                                    <div class="form-group">
                                                                        {{html()->input()->name("componentSettings[".$langCode."][link_text]")->value($componentSettingLinkText)->id("componentSettingLinkText")->class("form-control")}}
                                                                    </div>



                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                        <div class="card">
                            <div class="card-content">
                                <div class="card-body">
                                    <h4 class="card-title">
                                        {{trans("admin/themes.components.component_detail.general")}}
                                    </h4>
                                    {{html()->hidden("component_type")->name("component_type")->value($themeComponentDetail["preview_type"])}}
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                {{html()->label()->for("status")->text(trans("admin/themes.components.form.status")) }}
                                                {{html()->select()->options( $form["statuses"])->name("status")->required(true)->value($themeComponentRelational->status)->id("status")->class("form-control")}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                {{html()->label()->for("title")->text(trans("admin/themes.components.form.title")) }}
                                                {{html()->input()->name("title")->required(true)->value($themeComponentRelational->title)->id("title")->class("form-control")}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                {{html()->label()->for("margin_top")->text(trans("admin/themes.components.form.margin_top")) }}
                                                {{html()->number()->required(true)->name("margin_top")->value($themeComponentRelational->margin_top)->id("margin_top")->class("form-control")}}
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                {{html()->label()->for("margin_right")->text(trans("admin/themes.components.form.margin_right")) }}
                                                {{html()->number()->required(true)->name("margin_right")->value($themeComponentRelational->margin_right)->id("margin_right")->class("form-control")}}
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                {{html()->label()->for("margin_bottom")->text(trans("admin/themes.components.form.margin_bottom")) }}
                                                {{html()->number()->required(true)->name("margin_bottom")->value($themeComponentRelational->margin_bottom)->id("margin_bottom")->class("form-control")}}
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                {{html()->label()->for("margin_left")->text(trans("admin/themes.components.form.margin_left")) }}
                                                {{html()->number()->required(true)->name("margin_left")->value($themeComponentRelational->margin_left)->id("margin_left")->class("form-control")}}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                {{html()->label()->for("padding_top")->text(trans("admin/themes.components.form.padding_top")) }}
                                                {{html()->number()->required(true)->name("padding_top")->value($themeComponentRelational->padding_top)->id("padding_top")->class("form-control")}}
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                {{html()->label()->for("padding_right")->text(trans("admin/themes.components.form.padding_right")) }}
                                                {{html()->number()->required(true)->name("padding_right")->value($themeComponentRelational->padding_right)->id("padding_right")->class("form-control")}}
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                {{html()->label()->for("padding_bottom")->text(trans("admin/themes.components.form.padding_bottom")) }}
                                                {{html()->number()->required(true)->name("padding_bottom")->value($themeComponentRelational->padding_bottom)->id("padding_bottom")->class("form-control")}}
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                {{html()->label()->for("padding_left")->text(trans("admin/themes.components.form.padding_left")) }}
                                                {{html()->number()->name("padding_left")->required(true)->value($themeComponentRelational->padding_left)->id("padding_left")->class("form-control")}}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                {{html()->label()->for("bg_color")->text(trans("admin/themes.components.form.bg_color")) }}
                                                {{html()->input()->name("bg_color")->value($themeComponentRelational->bg_color)->id("bg_color")->attribute('data-control','hue')->style(['padding-left'=>'40px'])->class("form-control arkplanRengiPicker")}}
                                            </div>
                                        </div>
                                    </div>


                                    @include("admin.pages.themes.components.partials.".$themeComponentDetail["preview_type"],['form'=>$form,'themeComponentRelational'=>$themeComponentRelational->toArray()])
                                    <div class="form-actions text-center" style="border: none">
                                        {{ html()->button()->type("submit")->class("btn btn-info btn-sm")->id("btnAction")->html(trans("admin/themes.components.detail.form.btn_update")) }}
                                    </div>

                                </div>
                            </div>
                        </div>
                        {{ html()->form()->close() }}
                    </div>
                </div>


            </section>
        </div>
    </div>
@endsection

@section('admin.javascript')
    <script>

        const $_THEME_COMPONENT_TRANS = {
            LOADING_MESSAGE: '