@extends('admin.layout.master')
@php
    $typeArr=[4=>'CM',5=>'REGIONAL',6=>'ZONE'];    
    $routeName=[4=>'shop.store',5=>'shop.store',6=>'shop.store'];    
    $editRouteName=[4=>'shop.edit',5=>'shop.edit',6=>'shop.edit'];    
@endphp
@section('title',$typeArr[$type])
@section ('content')
    <style>
        label {
            font-size: 13px
        }

        .sm-pd-t th,
        .sm-pd-t td {
            padding: 0rem;
            padding-right: 0.35rem;
            padding-left: 0.35rem;
        }

        .nav-tabs .nav-link.active,
        .nav-tabs .nav-item.show .nav-link {
            border-top: 1px solid #2c7f6f;
            border-bottom: 1px solid #e2e2e2;
            border-left: 1px solid #2c7f6f;
            border-right: 1px solid #2c7f6f;
            background: none !important;
            color: #2c7f6f;
        }

        .nav-link:hover {
            border-bottom: #2c7f6f !important;
        }

        a.nav-link.active:hover {
            border-bottom: #e2e2e2 !important;
        }

        a.nav-link {
            color: #9e9e9e;
        }

        .nav-tabs {
            border-bottom: 1px solid #2c7f6f;
        }

        ul.tree, ul.tree ul {
    list-style: none;
     margin: 0;
     padding: 0;
   } 
   ul.tree ul {
     margin-left: 10px;
   }
   ul.tree li {
     margin: 0;
     padding: 0 7px;
     line-height: 20px;
     color: #369;
     font-weight: bold;
     border-left:1px solid rgb(100,100,100);

   }
   ul.tree li:last-child {
       border-left:none;
   }
   ul.tree li:before {
      position:relative;
      top:-0.3em;
      height:1em;
      width:12px;
      color:white;
      border-bottom:1px solid rgb(100,100,100);
      content:"";
      display:inline-block;
      left:-7px;
   }
   ul.tree li:last-child:before {
      border-left:1px solid rgb(100,100,100);   
   }
        /* treee */
        
    </style> 
    <div class="card sina-card">
        <div class="card-header card-header-s d-flex flex-wrap align-items-center">
            <div class="col-md-6 col-12 pl-0">
                <h4 >{{$typeArr[$type]}}</h4>
            </div>
        </div> 
        <div class="card-body">

            <!-- Tab panes -->
            <div class="tab-content pt-0">
                {{-- Branch Tab --}}
                <div id="area" class="container tab-pane active">
                    <div class="row mt-3 mb-3">
                        <div class="col-6">
                            <h5 class="text-bold card-title">{{$typeArr[$type]}}</h5>
                        </div>
                        <div class="col-6 text-right">
                                <button class="btn btn-primary btn-icon-sm" onclick="showChild(0)">Show All</button>
                                {{-- <button href="" data-toggle="modal" data-target="#modal" class="btn btn-primary btn-icon-sm">Add New</button> --}}
                        </div>
                    </div> 
                    <div class="row">
                        <div class="col-lg-12"> 
                            <ul class="tree">
                                <li>Animals
                                 <ul>
                                  <li>Birds</li>
                                  <li>Mammals
                                   <ul>
                                    <li>Elephant</li>
                                    <li class="last">Mouse</li>
                                   </ul>
                                  </li>
                                  <li class="last">Reptiles</li>
                                 </ul>
                                </li>
                                <li class="last">Plants
                                 <ul>
                                  <li>Flowers
                                   <ul>
                                    <li>Rose</li>
                                    <li class="last">Tulip</li>
                                   </ul>
                                  </li>
                                  <li class="last">Trees</li>
                                 </ul>
                                </li>
                               </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
    </div> 

  
@include('inventory.forms.officer_level_form')
@include('inventory.forms.officer_level_edit_form')
               

@endsection
@section('script')
<script>
    var toggler = document.getElementsByClassName("caret");
    var i;
    
    for (i = 0; i < toggler.length; i++) {
        toggler[i].addEventListener("click", function() {
        this.parentElement.querySelector(".nested").classList.toggle("active");
        this.classList.toggle("caret-down");
        });
    }
    $('.parent_id').select2();
    $('.store_table_type').select2();
    const showChild=()=>{
        var toggler = document.getElementsByClassName("caret");
        var p;
        for (p = 0; p < toggler.length; p++) {
                toggler[p].parentElement.querySelector(".nested").classList.toggle("active");
                toggler[p].classList.toggle("caret-down");
        }
    }
    const setEditDataModel=(data)=>{
        $("#edit_modal").modal("hide");
        var str ='';
        $('#edit_id').val(data.id);
        $('#edit_name').val(data.name);
        $('#edit_name_local').val(data.name_local);
        $('#edit_parent_id').val(data.parent_id).trigger('change');
        $("#edit_modal").modal("show");
    }
    const syncRmGroup=(parent_id,office_level_id)=>{
        let link= "{{route('officer.level_tree_update')}}";
            let data_param={
                parent_id:parent_id,
                office_level_id:office_level_id,
            }
            const reloadPlease = data => {
                location.reload();
            }
            ajaxCall(link,'GET',data_param, reloadPlease);
    }


</script>
@endsection