@extends('admin.layout.master')

@section('admin')
    <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.insert',$theme) }}
            </div>
            <div class="content-header-left col-md-6 col-12 mb-2">
                <a href="{{route('admin.themes.components.index',['theme_id'=>$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 match-height">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title"
                                    id="pageHeaderTitle">{!! trans('admin/themes.components.insert.title',['title'=>$theme->title]) !!}</h4>
                            </div>
                        </div>

                    </div>
                </div>
                @if($themeComponentDetailStatus)

                    <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["title"]}}">
                                    <div class="card-body">
                                        {!! trans('admin/themes.components.component_detail.title',['title'=>$themeComponentDetail["title"]]) !!}
                                        <br>
                                        {!! trans('admin/themes.components.component_detail.type',['type'=>$themeComponentDetail["type"]]) !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-content collapse show">


                                    <div class="card-body">
                                        <h4 class="card-title">
                                            {{trans("admin/themes.components.component_detail.general")}}
                                        </h4>
                                        @if($errors->any())
                                            <div class="alert alert-info">
                                                @foreach ($errors->all() as $error)
                                                    {{ $error }} <br>
                                                @endforeach
                                            </div>
                                        @endif

                                        {{ html()->form()->method('POST')->class("form modulForm")->id("modulForm")->autocomplete("off")->attribute('enctype','multipart/form-data')->open() }}
                                        {{html()->hidden("component_type")->name("component_type")->value($themeComponentDetail["type"])}}
                                        <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")->value(null)->id("title")->class("form-control")->required(true)}}
                                                </div>
                                            </div>
                                        </div>
                                        @include("admin.pages.themes.components.partials.".$themeComponentDetail["type"],['form'=>$form,'themeComponentRelational'=>[]])

                                        <div class="form-actions text-center" style="border: none">
                                            {{ html()->button()->type("submit")->class("btn btn-info btn-sm")->id("btnAction")->html('   <i class="fa fa-check-square-o"></i> '.trans("admin/themes.components.insert.form.btn_insert")) }}
                                        </div>
                                        {{ html()->form()->close() }}
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                @endif

                @if(!$themeComponentDetailStatus)

                 <div class="row">
                     <div class="col-12">
                         <div class="card">
                             <div class="card-content">
                                 <ul class="nav nav-tabs nav-topline">
                                     @php
                                         $cnt=0;
                                         $tcnt=0;
                                     @endphp
                                     @foreach($componentTypes as $componentTypeKey=>$componentTypeVal)
                                         <li class="nav-item">
                                             <a class="nav-link @if($cnt===0) active @endif"
                                                id="tab-{{$componentTypeKey}}" data-toggle="tab"
                                                aria-controls="tab-{{$componentTypeKey}}"
                                                href="#tabPane{{$componentTypeKey}}"
                                                aria-expanded="true">{{$componentTypeVal}}</a>
                                         </li>
                                         @php
                                             $cnt++;
                                         @endphp
                                     @endforeach
                                 </ul>
                                 <div
                                     class="tab-content tab-validate px-1 pt-1 border-grey border-lighten-2 border-0-top">
                                     @foreach($componentTypes as $componentTypeKey_2=>$componentTypeVal_2)

                                         @php
                                             $list=array_key_exists($componentTypeKey_2,$groupedListData) ? $groupedListData[$componentTypeKey_2]:[];
                                         @endphp

                                         <div role="tabpanel" class="tab-pane @if($tcnt===0) active @endif"
                                              id="tabPane{{$componentTypeKey_2}}" aria-expanded="true"
                                              aria-labelledby="base-tabPane{{$componentTypeKey_2}}">
                                             <div class="form-body">
                                                 <div class="row">
                                                     @foreach($list as $lst)
                                                         <div class="col-xl-3 col-md-6 col-sm-12">
                                                             <div class="card">
                                                                 <div class="card-content">
                                                                     <div class="preview-image" style=" width: 100%;min-height: 170px;
    display: flex;
    justify-content: center;
    align-items: center;">   <img class="card-img-top img-fluid" src="{{$lst["preview_image"]}}"
                                                                              alt="{{$lst["title"]}}">
                                                                     </div>
                                                                     <div class="card-body">
                                                                         <h4 class="card-title">{{$lst["title"]}}</h4>
                                                                         <a href="?componentId={{$lst["id"]}}"
                                                                            class="btn btn-purple btn-block">{{trans('admin/themes.components.insert.sec_btn')}}</a>
                                                                     </div>
                                                                 </div>
                                                             </div>
                                                         </div>
                                                     @endforeach
                                                 </div>

                                             </div>
                                         </div>
                                         @php
                                             $tcnt++;
                                         @endphp
                                     @endforeach
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>


                @endif

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

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

        const $_THEME_COMPONENT_TRANS = {
            LOADING_MESSAGE: '