@extends('backend.app')
@section("content")
    <div class="content-header row">
        <div class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new">
            <h3 class="content-header-title mb-0 d-block">Modül Sıralama</h3>
            <div class="row breadcrumbs-top d-inline-block">
                <div class="breadcrumb-wrapper col-12">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url('panel')}}">Anasayfa</a>
                        </li>
                        <li class="breadcrumb-item active">Modül Ayarları
                        </li>
                    </ol>
                </div>
            </div>
        </div>
        <div class="content-header-right col-md-6 col-12">
            <div class="dropdown float-md-right">
                <a href="{{url('panel')}}" class="btn btn-dark round btn-glow px-2">Geri Dön</a>
            </div>
        </div>
    </div>
    <div class="content-body">
        <div class="row">
            <div id="recent-sales" class="col-7 col-md-7">
                <div class="card">
                    <div class="card-header">
                        <h4>Ana Sayfa Modülleri</h4>
                    </div>
                    <div class="card-body pt-0">
                        <ul class="list-group" id="ust-moduller">
                            @if($moduller)
                                @foreach($moduller as $modul)
                                    @if(isset($ayar->{$modul->code}))
                                        @if($ayar->{$modul->code} == 1)
                                            <li class="list-group-item py-1 drag mb-1" style="background-color: #f8f8f8" data-id="{{$modul->id}}" id="{{$modul->id}}">
                                                <span class="float-left">
                                                  <i class="la la-arrows-v mr-1"></i>
                                                </span>
                                                <span class="d-inline-block float-left text-dark text-bold-600">{{$modul->isim}}</span>
                                                @if(count($modul->kategoriler) != 0)
                                                    <div class="clearfix"></div>
                                                    <span class="d-block w-50">
                                                      <select class="form-control my-1" name="ozel1" onchange="degistir(this.value,'{{$modul->id}}')">
                                                          <option selected disabled>Kategori Seçiniz</option>
                                                          @foreach($modul->kategoriler as $kategori)
                                                                <option value="{{$kategori->id}}" @if($kategori->id == $modul->kategori){{'selected'}}@endif>{{$kategori->baslik}}</option>
                                                          @endforeach
                                                      </select>
                                                    </span>
                                                @endif
                                            </li>
                                        @endif
                                    @else
                                        <li class="list-group-item py-1 drag mb-1" style="background-color: #f8f8f8" data-id="{{$modul->id}}" id="{{$modul->id}}">
                                            <span class="float-left">
                                              <i class="la la-arrows-v mr-1"></i>
                                            </span>
                                            <span class="d-inline-block float-left text-dark text-bold-600">{{$modul->isim}}</span>
                                            @if(count($modul->childs))
                                                <br><br>
                                                <ul class="list-group">
                                                    @foreach($modul->childs as $child)
                                                        <li class="list-group-item py-1 mb-1" style="background-color: #f8f8f8" data-id="{{$child->id}}" id="{{$child->id}}">
                                                            <span class="float-left">
                                                              <i class="la la-arrows-v mr-1"></i>
                                                            </span>
                                                            <span class="d-inline-block float-left text-dark text-bold-600">{{$child->isim}}</span>
                                                            @if($child->code == 'gundemhaber' || $child->code == 'sporhaber' || $child->code == 'ikilikategori1' || $child->code == 'ikilikategori2')
                                                                <div class="clearfix"></div>
                                                                <span class="d-block w-50">
                                                                  <select class="form-control my-1" name="ozel1" onchange="degistir(this.value,'{{$child->id}}')">
                                                                      <option selected disabled>Kategori Seçiniz</option>
                                                                      @foreach($kategoriler as $kat)
                                                                          <option value="{{$kat->id}}" @if($kat->id == $child->kategori){{'selected'}}@endif>{{$kat->baslik}}</option>
                                                                      @endforeach
                                                                  </select>
                                                                </span>
                                                            @endif
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            @else
                                                @if(count($modul->kategoriler) != 0)
                                                    <div class="clearfix"></div>
                                                    <span class="d-block w-50">
                                                      <select class="form-control my-1" name="ozel1" onchange="degistir(this.value,'{{$modul->id}}')">
                                                          <option selected>Kategori Seçiniz</option>
                                                          @foreach($modul->kategoriler as $kategori)
                                                              <option value="{{$kategori->id}}" @if($kategori->id == $modul->kategori){{'selected'}}@endif>{{$kategori->baslik}}</option>
                                                          @endforeach
                                                      </select>
                                                    </span>
                                                @endif
                                            @endif
                                        </li>
                                    @endif
                                @endforeach
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
            <div id="" class="col-5 col-md-5">
                <div class="card">
                    <div class="card-header">
                        <h4>Sidebar (Site Sağ) Modülleri</h4>
                    </div>
                    <div class="card-body pt-0">
                        <ul class="list-group" id="sag-moduller">
                            @if($modullerSide)
                                @foreach($modullerSide as $side)
                                    @if(isset($ayar->{$side->code}))
                                        @if($ayar->{$side->code} == 1)
                                            <li class="list-group-item py-1 drag mb-1" style="background-color: #f8f8f8" data-id="{{$side->id}}" id="{{$side->id}}">
                                                <span class="float-left">
                                                  <i class="la la-arrows-v mr-1"></i>
                                                </span>
                                                <span class="d-inline-block float-left text-dark text-bold-600">{{$side->isim}}</span>
                                            </li>
                                        @endif
                                    @else
                                        <li class="list-group-item py-1 drag mb-1" style="background-color: #f8f8f8" data-id="{{$side->id}}" id="{{$side->id}}">
                                                <span class="float-left">
                                                  <i class="la la-arrows-v mr-1"></i>
                                                </span>
                                            <span class="d-inline-block float-left text-dark text-bold-600">{{$side->isim}}</span>
                                        </li>
                                    @endif
                                @endforeach
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push("customJs")
    <script src="{{asset('assets/backend/app-assets/vendors/js/ui/jquery-ui.min.js')}}" type="text/javascript"></script>
    <script>
        let cats = $("#ust-moduller").sortable({
            items:'.drag',
            revert: true,
            group: 'nested',
            cursor: 'move',
            opacity: 0.5,
            distance: 20,
            tolerance: 'pointer',
            update: function(event, ui){
                /*var order = $('#card-drag-area').sortable('serialize');
                console.log(order);*/

            },
            change: function (event, ui) {
                ui.placeholder.css({visibility: 'visible', border: '1px solid #29C5FF',backgroundColor: '#C5D3E2'});
            },
            stop: function(event, ui) {
                let itemOrder = $('#ust-moduller').sortable("toArray");
                for (let i = 0; i < itemOrder.length; i++) {
                    console.log("Position: " + (i +1) + " ID: " + itemOrder[i]);
                    let id = itemOrder[i];
                    let order = (i+1);
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': '{{csrf_token()}}'
                        },
                        type: 'POST',
                        url: "/panel/modul-ayarlari/order/"+id,
                        data: {id: id,order:order},
                        success: function (data){
                            //console.log(data.success + "id li kategori sıralama yapıldı.");
                            //location.reload();
                        },
                        error: function(e) {
                            console.log(e);
                        }
                    });
                }
            }
        });
        let cat = $("#sag-moduller").sortable({
            items:'.drag',
            revert: true,
            cursor: 'move',
            opacity: 0.5,
            distance: 20,
            tolerance: 'pointer',
            update: function(event, ui){
                /*var order = $('#card-drag-area').sortable('serialize');
                console.log(order);*/
            },
            change: function (event, ui) {
                ui.placeholder.css({visibility: 'visible', border: '1px solid #29C5FF',backgroundColor: '#C5D3E2'});
            },
            stop: function(event, ui) {
                let itemOrder = $('#sag-moduller').sortable("toArray");
                for (let i = 0; i < itemOrder.length; i++) {
                    console.log("Position: " + (i +1) + " ID: " + itemOrder[i]);
                    let id = itemOrder[i];
                    let order = (i+1);
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': '{{csrf_token()}}'
                        },
                        type: 'POST',
                        url: "/panel/modul-ayarlari/order/"+id,
                        data: {id: id,order:order},
                        success: function (data){
                            //console.log(data.success + "id li kategori sıralama yapıldı.");
                            //location.reload();
                        },
                        error: function(e) {
                            console.log(e);
                        }
                    });
                }
            }
        });

        function degistir(value,id) {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{csrf_token()}}'
                },
                type: 'POST',
                url: "/panel/modul-ayarlari/degistir",
                data: {id: id,value:value},
                success: function (data){
                    swal({
                        title: 'Ayarlar Kaydedildi',
                        text: 'Kategori Değiştirildi',
                        type: "success",
                        timer: 2000,
                        confirmButtonText: 'Tamam'
                    });
                },
                error: function(e) {
                    console.log(e);
                }
            });
        }
    </script>
@endpush

@push("customCss")

@endpush