@include('components/header')
@include('components/sidebar')
<style type="text/css">
    .select2-container--open .select2-dropdown{z-index: 9999;}

</style>
<div id="content" class="main-content">
    <div class="topbar_content mt-3">
        <h2>Organogram</h2>
        <div class="viewAll mr-4">
            <a href="/admin_dashboard" class="viewAllBtn">
                <button class="btn btn-danger mr-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg> Back</button>
            </a>
            <a class="btn btn-primary" data-toggle="modal" data-target=".edit_organogram">
                Edit Organogram
            </a>
        </div>
    </div>
    <div class="layout-px-spacing layout-top-spacing">
        <div class="modal-footer">
        </div>
        <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
                <div class="card">
                    <div class="card-body search-filter">
                        <form action="/employee_list" method="post" class="form-group">
                            <div class="row emp-filter-areaes ">
                                <div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-12 pr-0 mb-2">
                                    {{csrf_field()}}
                                    <select class="form-control" id="filter_check">
                                        <option selected disabled>Filter By:</option>
                                        <option value="employee">Employee</option>
                                        <option value="department">Department</option>
                                    </select>
                                </div>
                                <div class="d-none col-10" id="employee_filter">
                                    <div class="row">
                                        <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12 pr-0 mb-2">
                                            <div class="input-group">
                                                <select class="form-control" name="employee_name" id="employee_name">
                                                    <option value="Select Employee Name">Select Employee Name</option>
                                                    @if(isset($all_employee))
                                                        @foreach($employee as $employees)
                                                            @foreach($all_employee as $e)
                                                                @if(Session('emp_id') != null)
                                                                    @if($e->id == Session('emp_id')) 
                                                                        @if(Session('emp_id') == $employees->id)
                                                                            <option selected value="{{$employees->id}}"> {{$employees->first_name}} {{$employees->last_name}}
                                                                            </option>
                                                                        @else
                                                                            <option value="{{$e->id}}">{{$e->first_name}} {{$e->last_name}}</option>
                                                                        @endif
                                                                    @else
                                                                          <option value="{{$e->id}}">{{$e->first_name}} {{$e->last_name}}</option>
                                                                    @endif
                                                                @else
                                                                      <option value="{{$e->id}}">{{$e->first_name}} {{$e->last_name}}</option>
                                                                @endif
                                                            @endforeach
                                                        @endforeach
                                                    @else
                                                        @foreach($employee as $employees)
                                                            <option value="{{$employees->id}}">{{$employees->first_name}} {{$employees->last_name}}</option>
                                                        @endforeach
                                                    @endif
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">
                                            <div class="form-group">
                                                <input type="text" readonly name="emp_id" placeholder="Enter Employee ID" class="form-control" id="employee_id" value="">                          
                                            </div>
                                        </div>
                                        <div id="department_section" class="row col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12"></div>
                                    </div>
                                </div>
                                <div class="col-10 d-none" id="department_filter">
                                    <div class="row emp-filter-areaes">
                                        <div class="col-sm-6 col-xl-3 col-12 pr-0 mb-2">
                                            <div class="input-group">
                                                <select class="form-control tagging" name="select_department" id="departments">
                                                    <option value="select_dept">Select Department</option>
                                                    @foreach($department as $department)
                                                        <option value="{{$department->id}}">{{$department->department}}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-6 col-xl-3 col-12 pr-0 mb-2">
                                            <div class="input-group">
                                                <select class="form-control tagging" name="select_designation" id="domain">
                                                    <option value="Select Domain">Select Domain</option>
                                                    @foreach($domain as $domain)
                                                        <option value="{{$domain->id}}">{{$domain->domain}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-6 col-xl-3 col-12 pr-0 mb-2">
                                            <button type="button" class="btn btn-primary" id="department_filter_submit">Search</button>
                                            <a href="/admin/organogram"><button type="button" class="btn btn-primary clear-filter d-none">Clear</button></a>
                                        </div>
                                    </div>
                                </div>
                                
                            </div>
                        </form>
                    </div>
                </div>
                <div class="widget widget-card-one widget-table-two category-tree">
                    <div class="widget-content">
                        <div class="org-chart">
                            @foreach($categories as $catkey => $category)
                                <div class="organizational">
                                    <ul class="main-person no-border">
                                        <li class="branch-one no-line">
                                            <div class="profile team">
                                                @if($category->profile_picture =='')
                                                    <img width="50px" height="50px" class="mainImage{{ $catkey }}" src="{{asset('design/img/profiles/default.svg')}}">
                                                @else
                                                    <img src='{{asset("root/documents/$category->id/profile/$category->profile_picture")}}'  width="50px" height="50px" class="rounded-circle mainImage{{ $catkey }}">
                                                @endif
                                            </div>
                                            <span>({{$category->id}})</span>
                                            <p>{{$category->first_name}}  {{$category->last_name}}</p>
                                            @if(count($category->childs) > 0)
                                                @include('admin.organogram',['class_name' => 'block','emp_id' => '','childs' => $category->childs,'class_add' => count($category->childs) == 0 ? '' : '','id' => $category->id])
                                            @endif
                                        </li>
                                    </ul>
                                </div>
                            @endforeach 
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade edit_organogram" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content m-4">
                <form class="form-group" action="{{route('edit_reporting')}}" id="editReporting" method="post">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">Edit Organogram</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    {{csrf_field()}}
                    <div class="m-4">
                        <div class="row">
                            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
                                <div class="form-group">
                                    <label for="phone">Employee*</label>
                                    <select class="form-control taggings" name="emp_name" id="emp_name">
                                        <option value="Select Employee Name">Select Employee Name</option>          
                                        @foreach($employee as $emp)
                                            <option value="{{$emp->id}}">{{$emp->first_name}} {{$emp->last_name}}</option>
                                        @endforeach
                                    </select>
                                    <span class="text-danger" id="emp_name_error"></span>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
                                <div class="form-group">
                                    <label for="phone">Employee ID*</label>
                                    <input type="text" readonly name="emp_id" placeholder="Enter Employee ID" class="form-control" id="employee_ids" value="">                          
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
                                <div class="form-group">
                                    <label for="phone">Reporting To*</label>
                                    <select class="form-control" name="reporting_to" id="reporting_to">
                                        <option value="Select Employee Name">Select Employee Name</option>
                                    </select>
                                    <span class="text-danger" id="reporting_to_error"></span>
                                </div>
                            </div>
                        </div>
                        <div id="department_div" class="row"></div>
                        <div class="row">
                            <input class="btn btn-primary col-2 m-2" id="edit_organogram" type="button" name="submit" value="Submit">
                            <input class="btn btn-danger col-2 m-2" type="reset" name="reset" value="Cancel">
                        </div>
                    </div>
                </form>
                <div class="emp_organogram"></div>
                </div>
            </div>
        </div>
    </div>

@include('components/footer')
<script type="text/javascript">

    $("body").on('click','.profile',function(){
        // console.log($(this).parent().children('ul'));
        $(this).parent().children('ul').toggleClass('d-none');
    })

    $("#edit_organogram").on('click',function(e){
        var reporting = $("#reporting_to").val();
        var emp_name = $("#emp_name").val();
        var des_atlas = $("body #des_atlas").val();
        var domain = $("body #domains").val();
        var flag = 0;
        if(reporting == "Select Employee Name") {
            flag = 1;
            $("#reporting_to_error").text("This field is required");
        } else {
            $("#reporting_to_error").text("");
        }
        if(emp_name == "Select Employee Name") {
            flag = 1;
            $("#emp_name_error").text("This field is required");
        } else {
            $("#emp_name_error").text("");
        }
        if(des_atlas == "") {
            flag = 1;
            $("body #des_atlas_error").text("This field is required");
        } else {
            $("body #des_atlas_error").text("");
        }

        if(domain == "Select Domain") {
            flag = 1;
            $("body #domain_error").text("This field is required");
        } else {
            $("body #domain_error").text("");
        }

        if(flag == 0) {
            $.ajax({
                url : "{{ route('edit_reporting') }}",
                data : $('#editReporting').serialize(),
                method: "POST",
                success:function(res){
                    if(res.department_error) {
                        $('body #department_error').text(res.department_error);
                    }
                    if(res.success == true) {
                        swal.fire({
                            title: res.message,
                            icon: 'success',
                            padding: '2em'
                        }).then(function() {
                            location.reload();
                        });
                    } else if(res.success == false) {
                        swal.fire({
                            title: res.message,
                            icon: 'error',
                            padding: '2em'
                        }).then(function() {
                            location.reload();
                        });
                    }
                } 
            })
        }
    })

    $("#emp_name").on("change",function(){
        $("#employee_ids").val($(this).val());
        $.ajax({
            url : "{{ route('get_reporting') }}",
            data : {emp_id : $(this).val()},
            method : "Get",
            success : function(res) {
                $('#reporting_to').html(res);
            }
        })
        $.ajax({
            url : "{{ route('get_emp_organogram') }}",
            data : {emp_id : $(this).val()},
            method: "Get",
            success:function(res){
                $(".emp_organogram").html(res);
            } 
        })
        $.ajax({
            url : "{{ route('get_designation') }}",
            data : {emp_id : $(this).val(), type:"edit"},
            method: "Get",
            success:function(res){
                $("#department_div").html(res);
            } 
        })
    });

    $("#employee_name").on("change",function(){
        if($("#employee_name").val() == 'Select Employee Name'){
            location.reload();
        } else {            
            $("#employee_id").val($(this).val());
            $.ajax({
                url : "{{ route('get_designation') }}",
                data : {emp_id : $(this).val(), 'type' : 'filter'},
                method: "Get",
                success:function(res){
                    $("#department_section").html(res);
                } 
            })

            $.ajax({
                url : "{{ route('get_emp_organogram') }}",
                data : {emp_id : $(this).val()},
                method: "Get",
                success:function(res){
                    $(".org-chart").html(res);
                } 
            })
        }
    });

    $('body').on('change','#department', function() {
        var department_id = $(this).val();
        if (department_id) {
            if($("#return_domain").val() != null){
                var return_domain = $("#return_domain").val();
            }else{
                var return_domain = null;
            }
            $.ajax({
                url: "{{ url('designation')}}",
                type: "get",
                data: { designation_id: department_id, return_domain: return_domain},
                success: function(html) {
                    $("#domains").html(html);
                }
            });
        }else {
            $("#domains").html('<option value="">Select Domain</option>');
        }
    })


    $('body').on('change','#departments', function() {
        var department_id = $(this).val();
        if (department_id) {
            if($("#return_domain").val() != null){
                var return_domain = $("#return_domain").val();
            }else{
                var return_domain = null;
            }
            $.ajax({
                url: "{{ url('designation')}}",
                type: "get",
                data: { designation_id: department_id, return_domain: return_domain},
                success: function(html) {
                    $("#domain").html(html);
                }
            });
        }else {
            $("#domain").html('<option value="">Select Domain</option>');
        }
    })

    $("#filter_check").on('change',function(){
        var filter_type = $(this).val();
        if(filter_type == 'employee') {
            $("#employee_filter").removeClass('d-none');
            $("#department_filter").addClass('d-none');
        } else if(filter_type == 'department') {
            $("#employee_filter").addClass('d-none');
            $("#department_filter").removeClass('d-none');
        }
    })

    $("#department_filter_submit").on('click',function(){
        $('.clear-filter').removeClass('d-none');
        var dept = $('#departments').val();
        var domain = $('#domain').val();

        $.ajax({
            url: "{{ url('get_emp_organogram')}}",
            type: "get",
            data: { department_id: dept, domain: domain},
            success: function(html) {
                $(".org-chart").html(html);
            }
        });
    })

    $('.edit_organogram').on('shown.bs.modal', function () {
        $(".taggings").select2();
        $('.taggings').on('select2:open', function() {
      $('.select2-search__field').trigger('focus');
    });
    });

</script>