@extends('admin.layout.master')
@php
    $typeArr=[4=>__('obs.cm'),5=>__('obs.regional'),6=>__('obs.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;
        }

        /* treeee */
        ul,
        #myUL {
            list-style-type: none;
        }

        #myUL {
            margin: 0;
            padding: 0;
        }

        .caret {
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .caret::before {
            content: "\25B6";
            color: black;
            display: inline-block;
            margin-right: 6px !important;
        }

        .caret-down::before {
            -ms-transform: rotate(90deg);/* IE 9 */
            -webkit-transform: rotate(90deg);/* Safari */'
            transform: rotate(90deg);
        }

        .nested {
            display: none;
        }
        .nested_show {
            display: block;
        }

        .active {
            display: block;
        }
        /* 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)">{{__('obs.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"> 
                                @php
                                    $grFoundArray=[];
                                @endphp
                                <ul id="myUL">
                                    @forelse ($cms as $cm)
                                        
                                        <li>
                                            @if(count($cm->child))
                                                <span class="caret"><strong>{{$cm->id}}. {{$cm->name}}</strong></span>
                                                <span class="badge badge-danger">({{$cm->officer?($cm->officer->admin?$cm->officer->admin->email:'Admin Id Not Found'):'Not SET'}})</span>
                                                <ul class="nested_show" style="margin-left:5%">
                                                    @forelse ($cm->child as $rm)
                                                        <li>
                                                            @if(count($rm->child))
                                                                <span class="caret"><strong>{{$rm->id}}. {{$rm->name}}</strong></span>
                                                                @php
                                                                    $rm_officer=$rm->officer;
                                                                @endphp
                                                                @if($rm_officer)
                                                                    <span class="badge badge-dark">( {{($rm_officer->admin?$rm_officer->admin_id.' - '.$rm_officer->admin->email:'Admin Id Not Found')}})</span>
                                                                    <p>{{$rm_officer->group_ids}}@if(Request()->sync==1) <button class="btn-xs btn-warning" onclick="syncRmGroup({{$rm->id}},{{$rm_officer->id}})"><i class="fas fa-sync-alt"></i></button> @endif</p>
                                                                @else
                                                                    <span class="badge badge-danger"> {{'Not SET'}}</span>
                                                                @endif
                                                                <ul class="nested" style="margin-left:5%">
                                                                    @forelse ($rm->child as $zone)
                                                                        <li>
                                                                            <span class="caret"><strong><i>{{$zone->id}}. {{$zone->name}}</i></strong></span>
                                                                            @php
                                                                                $zm_officer=$zone->officer;
                                                                            @endphp
                                                                            @if($zm_officer)
                                                                                @php
                                                                                    $group=$allGroups->whereIn('id',array_filter(explode(',',$zm_officer->group_ids)))->first();
                                                                                    array_push($grFoundArray,$group->id);
                                                                                @endphp
                                                                                    <span class="badge badge-info-outline">({{$group?$group->id.'. '.$group->name_eng:'Group Not Found'}})</span>
                                                                                    <span class="badge badge-warning">( {{$zm_officer->admin?$zm_officer->admin_id.' - '.$zm_officer->admin->email:'Admin Id Not Found'}})</span>
                                                                                @else
                                                                                    <span class="badge badge-danger">({{'Not Assigned'}})</span>
                                                                                @endif

                                                                                {{-- for party --}}
                                                                                @if($group && $group->parties)
                                                                                    <ul class="nested" style="margin-left:5%;border:black 1px solid">
                                                                                        <li>
                                                                                            @forelse ($group->parties as $party)
                                                                                                <span class=""><b>* {{$party->id}}.</b> {{$party->name_eng}}</span>
                                                                                            @empty
                                                                                            @endforelse
                                                                                        </li>
                                                                                    </ul>
                                                                                @endif

                                                                                {{-- for party --}}
                                                                        </li>
                                                                    @empty
                                                                    @endforelse 
                                                                </ul>
                                                            @else
                                                                <strong>* {{$rm->id}}. {{$rm->name}}</strong> 
                                                            @endif

                                                        </li>
                                                    @empty
                                                    @endforelse
                                                </ul>
                                            @else
                                                <strong>* {{$cm->id}}. {{$cm->name}}</strong> 
                                            @endif
                                        </li>
                                        @empty
                                        @endforelse
                                </ul>
                                <p>
                                    <h5>GROUP NOT ASSIGNED YET</h5>
                                    @forelse ($allGroups->whereNotIn('id',$grFoundArray) as $item)
                                        <strong class="text-danger">{{$item->id}}. {{$item->name_eng}}</strong>,
                                    @empty
                                    @endforelse
                                </p>
                                    
                        </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