@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.index',$theme) }}
            </div>
            <div class="content-header-left col-md-6 col-12 mb-2">
                <a href="{{route('admin.themes.components.insert',['theme_id'=>$theme->id])}}"
                   class="btn btn-sm btn-info float-right">
                    <i class="fa fa-plus"></i> {{trans('admin/themes.components.btn_insert')}}
                </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.title',['title'=>$theme->title]) !!}</h4>

                            </div>
                            <div class="card-content collapse show">
                                <div class="card-body pb-15">
                                    <div class="cf nestable-lists" style="margin-bottom: 15px;display: inline-block">

                                        <div class="dd" id="menuNestable">
                                            <ol class="dd-list">
                                                @foreach($themeComponentRelationals as $themeComponentRelational)
                                                    @php

                                                        $status=$themeComponentRelational["status"];
                                                        $statusBg="black";
                                                        $statusTitle=$status===1 ? 'Aktif': 'Pasif';
                                                        $statusSearch=collect($statuses)->where('value','=',$status)->first();
                                                        $componenType=$themeComponentRelational["theme_component_detail"]!==null ? $themeComponentRelational["theme_component_detail"]["title"]:$themeComponentRelational["component_type"];
                                                        if($statusSearch!==null){
                                                            $statusBg=$statusSearch["color"];
                                                            $statusTitle=$statusSearch["title"];
                                                        }
                                                    @endphp
                                                    <li class="dd-item dd3-item"
                                                        data-id="{{$themeComponentRelational["id"]}}">
                                                        <div class="dd-handle dd3-handle"><i class="fa fa-arrows"
                                                                                             style="font-size: 12px;color: #fff;"></i>
                                                        </div>
                                                        <div class="dd3-content">
                                                            <div class="menu-content">
                                                        <span>
                                                            <b>{{$themeComponentRelational["title"]}} </b> / {{trans('admin/themes.components.list.component_type_title',['title'=>$componenType])}}
                                                                                                                            /
                                                                <span
                                                                    style="background-color: {{$statusBg}};border-radius:0;padding:5px 10px;color:#fff;font-size:11px;">{{$statusTitle}}</span>

                                                        </span>

                                                                <div class="actions">

                                                                    <a
                                                                        data-bs-toggle="tooltip" data-bs-placement="top"
                                                                        href="{{route('admin.themes.components.delete',['theme_id'=>$theme->id,'theme_component_id'=>$themeComponentRelational["theme_component_id"],'theme_component_rel_id'=>$themeComponentRelational["id"]])}}"

                                                                        style="float: right;margin-left: 5px"
                                                                        class="btn btn-danger  btn-sm btnSil  "
                                                                        aria-label="Sil"
                                                                        data-bs-original-title="Sil"><i
                                                                            class="fa fa-trash"
                                                                            style="font-size: 12px;color: #fff"></i>
                                                                    </a>
                                                                    <a data-bs-toggle="tooltip" data-bs-placement="top"
                                                                       style="float: right"
                                                                       href="{{route('admin.themes.components.detail',['theme_id'=>$theme->id,'theme_component_id'=>$themeComponentRelational["id"]])}}"
                                                                       class="btn btn-info  btn-sm  "
                                                                       aria-label="Detaylar"
                                                                       data-bs-original-title="Detaylar"><i
                                                                            class="fa fa-search"
                                                                            style="font-size: 12px;color: #fff;"></i></a>
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </li>
                                                @endforeach
                                            </ol>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


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

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

        const $_COMPONENT_AJAX_ORDER = '