@extends('admin.layouts.app')

            @section('title', 'Department Permission')

            @section('content')

            <!-- TOPBAR -->
            <div class="top_bar page-content" style="min-height:534px">
                <!-- LOADER -->
                <div class="loader">
                    <div class="top_status_bar load">
                        <div class="progress_bar bar" style="left: 0px;">
                        </div>
                    </div>
                </div>
                <!-- END LOADER -->
                <!-- BREADCRUMBS -->
                <div class="breadcrumbs">
                    <ul>
                        <li><a href="{{ route('admin.dashboard') }}">Home</a></li>
                        <li><a href="{{ route('admin.settings.index') }}" class="">Settings</a></li>
                        <li><a href="#" class="breadcrumb_link" onclick="return false">Group Hierarchy</a></li>
                    </ul>
                    <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
                </div>
                <!-- END BREADCRUMBS -->
            </div>
            <!-- END TOPBAR -->
            <!-- PAGE CONTENT -->
            <div class="page-content">
                <div class="row">
                    <div class="col-md-12">
                        <!-- Begin: life time stats -->
                        <div class="portlet setting_landing">
                            <!-- MAIN CAPTION START -->
                            <div class="portlet-title">
                                <div class="caption">
                                    <h2>
                                        Group Hierarchy
                                        <span>Setup teams and hierarchy within your business in SaleSoft CRM.</span>
                                    </h2>
                                </div>
                            </div>
                            <!-- MAIN CAPTION END -->
                            <hr>
                            <!-- MAIN CONTENT START -->
                            <div class="portlet-body">
                                <div class="settings">
                                    <div class="settings_inner_row">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="col-md-4">
                                                    <span class="main_title">Define Groups</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row each_row">
                                            <div class="col-md-12">
                                                <div class="col-md-4">
                                                    <span class="sub_heading">How you group your team players?</span>
                                                    <span class="sub_heading">You can define the workgroups here, all the
                                                        registered employees and system users will list for you to manage
                                                        your workforce.</span>
                                                </div>
                                                <div class="col-md-1"></div>
                                                <div class="col-md-6">
                                                    <div class="row">
                                                        <div class="portlet-body">
                                                            <div class="products box team">
                                                                <div class="header_tbl">
                                                                    <div class="row">
                                                                        <div class="col-md-12">
                                                                            <div class="col-md-4 row_header">Group Name
                                                                            </div>
                                                                            <div class="col-md-4 row_header">Department
                                                                            </div>
                                                                            <div class="col-md-3 row_header b4_del_header">
                                                                                Group Head</div>
                                                                            <div class="del_header"></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <form id="group_hierarchy_create"
                                                                    action="{{ route('admin.settings.group-hierarchy.store') }}"
                                                                    method="POST">
                                                                    <div class="row_wrap groups" id="groups">
                                                                        <div class="row_inner_wrap">
                                                                            @if(!empty($data['groups']))
                                                                            @foreach($data['groups'] as $key => $group)
                                                                            <div class="row">
                                                                                <div class="col-md-12 add_group">
                                                                                    <div class="col-md-4 inner_row">

                                                                                        <input type="text" name=""
                                                                                            placeholder=""
                                                                                            value="{{ $group['title'] }}"
                                                                                            class="form-control group_name"
                                                                                            readonly="readonly">
                                                                                        <i class="fa fa-check edit_group_name edit_field"
                                                                                            data-uuid="{{ $group['group_uuid'] }}"
                                                                                            style="visibility: hidden;"></i>
                                                                                    </div>
                                                                                    <div class="col-md-4 inner_row">
                                                                                        <select
                                                                                            class="form-control dept select2 select2-hidden-accessible"
                                                                                            name="" tabindex="-1"
                                                                                            aria-hidden="true">
                                                                                            <option value=""></option>
                                                                                            @if(!empty($data['departments']))
                                                                                            @foreach($data['departments'] as
                                                                                            $key => $department)

                                                                                            <option
                                                                                                {{ ($group['department_uuid']==$department['department_uuid']) ? 'selected':'' }}
                                                                                                value="{{ $department['department_uuid'] }}">
                                                                                                {{ $department['title'] }}
                                                                                            </option>
                                                                                            @endforeach
                                                                                            @endif

                                                                                        </select>
                                                                                    </div>
                                                                                    <div
                                                                                        class="col-md-3 inner_row b4_del_header">
                                                                                        <select
                                                                                            class="form-control group_manager select2 select2-hidden-accessible"
                                                                                            tabindex="-1"
                                                                                            aria-hidden="true">
                                                                                            <option value=""></option>
                                                                                            @if(!empty($data['admins']))
                                                                                            @foreach($data['admins'] as $key
                                                                                            => $admin)
                                                                                            <option
                                                                                                {{ ($group['admin_uuid']==$admin['admin_uuid']) ? 'selected':'' }}
                                                                                                value="{{ $admin['admin_uuid'] }}">
                                                                                                {{ $admin['firstname'] ." ".$admin['lastname'] }}
                                                                                            </option>
                                                                                            @endforeach
                                                                                            @endif
                                                                                        </select>
                                                                                    </div>
                                                                                    <div class="del_icon">
                                                                                        <i class="fa fa-trash-o del"
                                                                                            data-uuid="{{ $group['group_uuid'] }}"></i>
                                                                                    </div>
                                                                                    <div class="add_icon"
                                                                                        style="display: none">
                                                                                        <i class="fa fa-plus add_row "
                                                                                            data-uuid="{{ $group['group_uuid'] }}"></i>
                                                                                    </div>
                                                                                    <div class="edit_icon"
                                                                                        style="display: none;">
                                                                                        <i class="fa fa-check edit_row"
                                                                                            data-uuid="{{ $group['group_uuid'] }}"></i>
                                                                                    </div>

                                                                                </div>
                                                                            </div>
                                                                            @endforeach
                                                                            @endif
                                                                        </div>
                                                                    </div>
                                                                    <div class="row_inner_wrap">
                                                                        <div class="row">
                                                                            <div class="col-md-12 ">
                                                                                <div class="col-md-4 inner_row">
                                                                                    <input type="text" name="test"
                                                                                        placeholder="Group name..." value=""
                                                                                        class="form-control group_name">
                                                                                    <i class="fa fa-check edit_group_name edit_field"
                                                                                        style="visibility: hidden;"></i>
                                                                                </div>
                                                                                <div class="col-md-4 inner_row">
                                                                                    <select
                                                                                        class="form-control dept select2 select2-hidden-accessible"
                                                                                        name="department[]" tabindex="-1"
                                                                                        aria-hidden="true">
                                                                                        <option value=""></option>
                                                                                        @if(!empty($data['departments']))
                                                                                        @foreach($data['departments'] as
                                                                                        $key => $department)
                                                                                        <option
                                                                                            value="{{ $department['department_uuid'] }}">
                                                                                            {{ $department['title'] }}
                                                                                        </option>
                                                                                        @endforeach
                                                                                        @endif

                                                                                    </select>
                                                                                </div>
                                                                                <div
                                                                                    class="col-md-3 inner_row b4_del_header">
                                                                                    <select
                                                                                        class="form-control group_manager select2 select2-hidden-accessible"
                                                                                        name="teamhead[]" tabindex="-1"
                                                                                        aria-hidden="true">
                                                                                        <option value=""></option>
                                                                                        @if(!empty($data['admins']))
                                                                                        @foreach($data['admins'] as $key =>
                                                                                        $admin)
                                                                                        <option
                                                                                            value="{{ $admin['admin_uuid'] }}">
                                                                                            {{ $admin['firstname'] ." ".$admin['lastname'] }}
                                                                                        </option>
                                                                                        @endforeach
                                                                                        @endif
                                                                                    </select>
                                                                                </div>
                                                                                <div class="del_icon" style="display: none">

                                                                                    <i class="fa fa-trash-o del"
                                                                                        data-uuid=""></i>
                                                                                </div>
                                                                                <div class="add_icon">
                                                                                    <i class="fa fa-plus add_row define_grp_row"
                                                                                        data-uuid=""></i>
                                                                                </div>
                                                                                <div class="edit_icon"
                                                                                    style="display: none;">
                                                                                    <i class="fa fa-check edit_row"
                                                                                        data-uuid=""></i>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="settings_inner_row">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="col-md-4">
                                                    <span class="main_title">Setup Team Members</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row each_row">
                                            <div class="col-md-12">
                                                <div class="col-md-4">
                                                    <span class="sub_heading">How you need to composite work groups?</span>
                                                    <span class="sub_heading">Setup group players from the pool of your employees
                                                        and system users, one can be a member of different groups as well.</span>
                                                </div>
                                                <div class="col-md-1"></div>
                                                <div class="col-md-6">
                                                    <form id="update_team_members">
                                                        <!--TEAM AND MANAGER SELECTOR-->
            
                                                        <div class="row" style="margin-bottom: 10px;">
                                                            <div class="col-md-6 pl_0 variable_column">
                                                                <label>Select a group</label>
                                                                <select id="group_select"
                                                                    class="select2 group_select select2-hidden-accessible"
                                                                    name="group_select" tabindex="-1" aria-hidden="true">
                                                                    <option value=""></option>
                                                                    @if(!empty($data['groups']))
                                                                    @foreach($data['groups'] as $key => $group)
                                                                    <option value="{{ $group['group_uuid'] }}">
                                                                        {{ $group['title'] }}
            
                                                                    </option>
                                                                    @endforeach
                                                                    @endif
                                                                </select>
                                                            </div>
                                                            <div class="col-md-6 pl_pr_0 variable_column">
            
                                                                <label>Group head</label>
                                                                <input id="group_manager" type="text" name=""
                                                                    class="group_manager form-control" value="" readonly="">
                                                            </div>
                                                        </div>
                                                        <!--TEAM AND MANAGER SELECTOR-->
                                                        <div class="row">
                                                            <div class="portlet-body">
                                                                <div class="products box member">
                                                                    <div class="header_tbl">
                                                                        <div class="row">
                                                                            <div class="col-md-12">
                                                                                <div class="col-md-11 row_header b4_del_header">Team
                                                                                    Player</div>
                                                                                <div class="del_header"></div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="row_wrap" id="group_details">
                                                                        <div class="row_inner_wrap clone">
                                                                            <div class="row">
                                                                                <div class="col-md-12">
                                                                                    <div class="col-md-11 inner_row b4_del_header">
                                                                                        <select
                                                                                            class="select2 player select2-hidden-accessible"
                                                                                            tabindex="-1" aria-hidden="true">
                                                                                            <option value=""></option>
                                                                                            <optgroup label="Staff">
                                                                                            </optgroup>
                                                                                        </select>
                                                                                    </div>
                                                                                    <div class="del_icon" style="display: none;">
                                                                                        <i class="fa fa-trash-o del_member"
                                                                                            aria-hidden="true"></i>
                                                                                    </div>
                                                                                    <div class="add_icon">
                                                                                        <i class="fa fa-plus add_row add_row_member"></i>
                                                                                    </div>
                                                                                    <div class="edit_icon" style="display: none;">
                                                                                        <i class="fa fa-check edit_row_member"></i>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            
                                                        </div>
                                                        <!--TEAM MEMBER CATEGORY-->
            
                                                    </form>
                                                    
                                                </div>
                                                
                                            </div>
                                            
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-11">
                                            <a href="{{ route('admin.settings.index') }}" class="btn theme_btn_round cancel_page float_btn">Cancel</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                           

                        </div>
                    </div>
                    <!-- MAIN CONTENT END -->

                </div>
                <!-- End: life time stats -->
                <!-- //SWEET_ALERT START// -->
                <div id="sweetalert_wrap" class="sweet_alert_wrap">
                    <!-- Sweet alert -->
                    <div class="sweet-alert showSweetAlert" data-custom-class="" data-has-cancel-button="true"
                        data-has-confirm-button="true" data-allow-outside-click="false" data-has-done-function="true"
                        data-animation="pop" data-timer="null">
                        <div class="sa-icon sa-warning pulseWarning" style="display: block;">
                            <span class="sa-body pulseWarningIns"></span>
                            <span class="sa-dot pulseWarningIns"></span>
                        </div>
                        <h2>Are You Sure?</h2>
                        <p>Your recently changed data in this model will be lost.</p>
                        <div class="sa-button-container">
                            <button class="cancel" tabindex="2">Cancel</button>
                            <div class="sa-confirm-button-container">
                                <button class="confirm" tabindex="1">Confirm</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- //SWEET_ALERT END// -->

            </div>
            <!-- END PAGE CONTENT -->

            @stop

            @section('styles')
            <link rel="stylesheet" type="text/css" href="{{ asset('css/settings.css') }}" />
            @stop

            @section('admin_js')
            <script type="text/javascript">
                $(document).ready(function () {

                    $(document).on('click', '.define_grp_row', function (e) {
                        e.preventDefault();
                        $('#busyloading').show();
                        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                        var action = $("#group_hierarchy_create").attr('action');
                        // console.log(action); return false;

                        var parent_target = $(this).parent().parent().parent().parent();
                        var button_parent = $(this).parent();
                        var flag = '0';
                        var group_name = parent_target.find('.group_name').val();


                        parent_target.find('.group_name, .dept, .group_manager').each(function () {
                            if ($(this).val() == '') {
                                $(this).addClass('error_custom');
                                $(this).parent().find(
                                        '.select2-container .select2-selection')
                                    .addClass('error_custom');
                                flag = '1';
                            } else {
                                $(this).removeClass('error_custom');
                                $(this).parent().find(
                                        '.select2-container .select2-selection')
                                    .removeClass('error_custom');
                            }
                        });

                        var arr = [];
                        $('#groups').find('.row_inner_wrap').each(function () {
                            //console.log($(this).find('.group_name').val());

                            var value = $(this).find('.group_name').val();

                            if (arr.indexOf(value) == -1) {
                                arr.push(value);
                                parent_target.find('.group_name').removeClass(
                                    'error_custom').removeAttr('readonly');
                            } else {
                                parent_target.find('.group_name').addClass('error_custom')
                                    .removeAttr('readonly');
                                flag = '1';
                                console.log(value);
                            }
                        });
                        //return false;
                        if (flag == 1) {
                            alertbox('danger', 'There are errors on page');
                            $('#busyloading').hide();
                            return false;
                        } else {
                            /*VALIDATE AND ADD NEW ROW SCRIPT*/
                            var group_name = parent_target.find('.group_name').val();
                            var department = parent_target.find('.dept').val();
                            var manager = parent_target.find('.group_manager').val();

                            var formData = new FormData();
                            formData.append('group_name', group_name);
                            formData.append('department', department);
                            formData.append('manager', manager);
                            formData.append('_token', CSRF_TOKEN);

                            $.ajax({
                                type: 'POST',
                                url: action,
                                data: formData,
                                contentType: false,
                                processData: false,
                                success: function (response) {

                                    var result = response;
                                    if (response.status ==
                                        "{{ config('globalConstants.response_status.success_response') }}"
                                    ) {

                                        if (parent_target.is(':last-child')) {
                                            var clone = parent_target.clone();
                                            clone.find('.dept').removeClass('select2');
                                            clone.find('.group_manager').removeClass(
                                                'select2');
                                            clone.find("span.select2").remove();
                                            clone.find(".dept").select2({
                                                'placeholder': '--Select--'
                                            });
                                            clone.find(".group_manager").select2({
                                                'placeholder': '--Select--'
                                            });
                                            clone.find('select').val(0);
                                            clone.find('input').val('');
                                            clone.find('.del_icon').hide();
                                            clone.find('.add_icon').show();
                                            clone.find('input').removeAttr('readonly');
                                            parent_target.parent().append(clone);
                                            parent_target.find('input').attr('readonly',
                                                'readonly');
                                        }
                                        button_parent.css('visibility', 'hidden');
                                        parent_target.find('.del_icon').show();

                                        parent_target.find('.del').attr('data-uuid',
                                            response.data.group_uuid);
                                        parent_target.find('.add_row').attr('data-uuid',
                                            response.data.group_uuid);
                                        parent_target.find('.edit_row').attr('data-uuid',
                                            response.data.group_uuid);
                                        parent_target.find('.edit_field').attr('data-uuid',
                                            response.data.group_uuid);
                                        var group_show_option = group_name;
                                        $('.group_select').append('<option value="' +
                                            response.data.group_uuid + '">' +
                                            group_show_option + '</option>');
                                        alertbox('success', response.message);
                                        $('#busyloading').hide();
                                    } else if (response.status ==
                                        "{{ config('globalConstants.response_status.warning_response') }}"
                                    ) {
                                        alertbox('warning', response.message);
                                        $('#busyloading').hide();

                                    } else if (response.status ==
                                        "{{ config('globalConstants.response_status.error_response') }}"
                                    ) {
                                        alertbox('danger', response.errors.group_select);
                                        $('#busyloading').hide();
                                    }
                                },
                                error: function (response) {
                                    console.log(response);
                                    $('#busyloading').hide();
                                    alertbox('danger', "Server error");
                                }
                            });
                        }
                    });


                    $('body').on('click', '.group_name', function () {
                        var attr = $(this).attr('readonly');
                        if (typeof attr !== typeof undefined && attr !== false) {
                            $(this).removeAttr('readonly').focus();
                            $(this).parent().find('.edit_group_name').css('visibility', 'visible');
                        }
                    });
                    $('body').on('click', '.edit_group_name', function () {
                        $('#busyloading').show();
                        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                        var current_field = $(this);
                        var parent_target = $(this).parent();
                        var group_uuid = $(this).attr('data-uuid');
                        var group_name = parent_target.find('.group_name').val();
                        var flag = '0';
                        var url = "{{ url('admin/settings/group-hierarchy') }}/" + group_uuid;
                        if (group_name == '') {
                            $(this).addClass('error_custom');
                            $(this).parent().find('.select2-container--bootstrap .select2-selection')
                                .addClass('error_custom');
                            flag = '1';
                        }
                        console.log(group_uuid);
                        if (flag == 1 || group_uuid == '' || group_uuid == undefined) {
                            alertbox('danger', 'There are errors on page');
                            $('#busyloading').hide();
                            return false;
                        } else {
                            var formData = new FormData();
                            formData.append('group_uuid', group_uuid);
                            formData.append('group_name', group_name);
                            formData.append('_token', CSRF_TOKEN);
                            formData.append('_method', "PUT");
                            formData.append('status', "2");
                            $.ajax({
                                type: 'POST',
                                url: url,
                                data: formData,
                                contentType: false,
                                processData: false,
                                success: function (response) {
                                    var result = response;
                                    if (response.status ==
                                        "{{ config('globalConstants.response_status.success_response') }}"
                                    ) {
                                        current_field.css('visibility', 'hidden');
                                        current_field.parent().find('.group_name').attr(
                                            'readonly', 'readonly');
                                        $("#group_select option[value='" + group_uuid +
                                            "']").text(group_name);
                                        alertbox('success', response.message);
                                        $('#busyloading').hide();
                                    } else if (response.status ==
                                        "{{ config('globalConstants.response_status.warning_response') }}"
                                    ) {
                                        alertbox('warning', response.message);
                                        $('#busyloading').hide();

                                    } else if (response.status ==
                                        "{{ config('globalConstants.response_status.error_response') }}"
                                    ) {
                                        alertbox('danger', response.errors.group_select);
                                        $('#busyloading').hide();
                                    }
                                },
                                error: function (response) {
                                    $('#busyloading').hide();
                                    alertbox('danger', "Server error");
                                }

                            });
                        }
                    });


                    $(document).on('change', '.dept, .group_manager', function () {

                        var parent_target = $(this).parent().parent();
                        var before_input = $(this).parent().parent().parent().find('.group_name');

                        if (parent_target.find('.group_name').val() != '' && before_input.is(
                                '[readonly]')) {
                            parent_target.find('.del_icon').hide();
                            parent_target.find('.edit_icon').show();
                        }
                        return false;
                    });
                    $(document).on('click', '.edit_row', function () {
                        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                        var parent_target = $(this).parent().parent();
                        var group_name = parent_target.find('.group_name').val();
                        var department = parent_target.find('.dept').val();
                        var group_manager = parent_target.find('.group_manager').val();
                        var group_uuid = $(this).attr('data-uuid');
                        var flag = '0';
                        var url = "{{ url('admin/settings/group-hierarchy') }}/" + group_uuid;
                        parent_target.find('.group_name, .dept, .group_manager').each(function () {
                            if ($(this).val() == '') {
                                $(this).addClass('error_custom');
                                $(this).parent().find(
                                        '.select2-container .select2-selection')
                                    .addClass('error_custom');
                                flag = '1';
                            } else {
                                $(this).removeClass('error_custom');
                                $(this).parent().find(
                                        '.select2-container .select2-selection')
                                    .removeClass('error_custom');
                            }
                        });
                        if (flag == 1) {
                            alertbox('danger', 'There are errors on page');
                            $('#busyloading').hide();
                            return false;
                        } else {
                            var formData = new FormData();
                            formData.append('group_name', group_name);
                            formData.append('department', department);
                            formData.append('group_manager', group_manager);
                            formData.append('group_uuid', group_uuid);
                            formData.append('_token', CSRF_TOKEN);
                            formData.append('_method', "PUT");
                            formData.append('status', "1");
                            $.ajax({
                                type: 'POST',
                                url: url,
                                data: formData,
                                contentType: false,
                                processData: false,
                                success: function (response) {
                                    var result = response;
                                    if (response.status ==
                                        "{{ config('globalConstants.response_status.success_response') }}"
                                    ) {
                                        parent_target.find('.del').attr('data-uuid', result[
                                            'uuid']);
                                        parent_target.find('.add_row').attr('data-uuid',
                                            result['uuid']);
                                        parent_target.find('.edit_row').attr('data-uuid',
                                            result['uuid']);
                                        parent_target.find('.edit_icon').hide();
                                        parent_target.find('.del_icon').show();
                                        alertbox('success', response.message);
                                        $('#busyloading').hide();
                                    } else if (response.status ==
                                        "{{ config('globalConstants.response_status.warning_response') }}"
                                    ) {
                                        alertbox('warning', response.message);
                                        $('#busyloading').hide();

                                    } else if (response.status ==
                                        "{{ config('globalConstants.response_status.error_response') }}"
                                    ) {
                                        alertbox('danger', response.errors.group_select);
                                        $('#busyloading').hide();
                                    }
                                },
                                error: function (response) {
                                    $('#busyloading').hide();
                                    alertbox('danger', "Server error");
                                }

                            });
                        }

                    });

                    var target1;
                    $(document).on('click', '.del', function () {
                        $('#sweetalert_wrap').show();
                        $('.confirm').addClass('group-hierarchy');
                       target1 = $(this).parent().parent().parent();
                        var group_uuid = $(this).attr('data-uuid');
                        $(".confirm").attr("member_id", group_uuid);
                    });

                        $(document).on('click', '.cancel', function () {
                            $(".confirm").removeAttr("member_id");
                        $('.confirm').removeClass('group-hierarchy')
                            $('#sweetalert_wrap').hide();
                            return false;
                        });
                       

                        $(document).on('click', '.group-hierarchy.confirm', function () {

                            target1 = target1;
                            var group_uuid = $(this).attr("member_id");
                            $.ajax({
                                type: 'DELETE',
                                url: "{{ url('admin/settings/group-hierarchy') }}/" +
                                    group_uuid,
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                },
                                success: function (response) {
                                    if (response.status ==
                                        "{{ config('globalConstants.response_status.success_response') }}"
                                    ) {
                                        target1.remove();
                                        $("#group_select option[value='" +group_uuid + "']").remove();
                                        $("#group_select").trigger('change');
                                        alertbox('success', response.success);
                                        $('#busyloading').hide();
                                    } else if (response.status ==
                                        "{{ config('globalConstants.response_status.warning_response') }}"
                                    ) {
                                        alertbox('warning', response.message);
                                        $('#busyloading').hide();

                                    } else if (response.status ==
                                        "{{ config('globalConstants.response_status.error_response') }}"
                                    ) {
                                        alertbox('danger', response.errors
                                            .group_select);
                                        $('#busyloading').hide();
                                    }
                                },
                                error: function (response) {
                                    $('#busyloading').hide();
                                    alertbox('danger', "Server error");
                                }


                            });

                            $('#sweetalert_wrap').hide();
                        });
                    



                    $('body').on('change', '#group_select', function () {

                        if ($(this).val() == "") {
                            $('#group_details .row_inner_wrap').not(".clone").remove();
                            $('#group_manager').val("");

                            return false;
                        }
                        var target_clone = $('#group_details .clone');
                        $('.player').html('<optgroup label="Staff">' + $('.group_manager ').html() +
                            '</optgroup>');
                        $(".player option[value='']").remove();
                        var group_uuid = $(this).val();
                        var url = "{{ url('admin/settings/group-member-admin') }}/" + group_uuid;

                        $('#busyloading').show();
                        $.ajax({
                            type: 'GET',
                            url: url,
                            success: function (response) {
                                if(response.status ==1000){
                                var result = response.data.team_head;
                                var res = response.data.group_member;
                                console.log(response);
                                $('#group_details .row_inner_wrap').not(".clone").remove();
                                $('#group_manager').val(result.firstname + ' ' + result
                                    .lastname);
                                var groups = $('.group_select').html();
                                $(".player optgroup[label='Groups']").remove();
                                var html = '<optgroup label="Groups">' + groups +
                                    '</optgroup>';
                                $('.player').prepend(html);
                                $('.player').prepend('<option value=""></option>');
                                $('.player').val('').trigger('change');
                                $(".player optgroup[label='Groups'] option[value='']")
                                    .remove();
                                target_clone.find(".player option[value='" + group_uuid +
                                    "']").remove();
                                target_clone.find(".player option[value='" + result
                                    .admin_uuid + "']").remove();
                                var players = '';
                             
                                    $.each(response.data.staff_details, function (i, v) {
                                        console.log("ubaid"+v.name);
                                        var clone = target_clone.clone();
                                        clone.find('.del_icon').show();
                                        clone.find('.add_icon').hide();
                                        clone.find('.del_member').attr('data-uuid', v
                                            .group_member_uuid);
                                        clone.find('.edit_icon').attr('data-uuid', v
                                            .group_member_uuid);
                                        clone.find('.player').val(v.member_uuid)
                                            .trigger('change').attr('disabled',
                                                'disabled');
                                        target_clone.find(".player option[value='" + v
                                            .member_uuid + "']").remove();
                                        clone.find('.player').removeClass('select2');
                                        clone.find('span.select2').remove();
                                        clone.removeClass('clone');
                                        clone.find('.player').select2({
                                            placeholder: '--select--'
                                        });
                                        $('#group_details').prepend(clone);
                                    });
                                
                                
                                $('#busyloading').hide();
                            }
                            else if(response.status == 2000){
                                $('#busyloading').hide();
                                    alertbox('danger', response.message);
                            }
                            }
                        });

                    });


                    $(document).on('click', '#group_details .add_row_member', function () {
                        $('#busyloading').show();
                        var parent_target = $(this).parent().parent().parent().parent();
                        var this_parent = $(this).parent();
                        var flag = '0';
                        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                        if ($('#group_select').val() == '') {
                            $('#group_select').addClass('error_custom');
                            $('#group_select').parent().find(
                                '.select2-container--bootstrap .select2-selection').addClass(
                                'error_custom');
                            flag = '1';
                        } else {
                            $('#group_select').removeClass('error_custom');
                            $('#group_select').parent().find(
                                '.select2-container--bootstrap .select2-selection').removeClass(
                                'error_custom');
                        }
                        parent_target.find('.player').each(function () {
                            if ($(this).val() == '') {
                                $(this).addClass('error_custom');
                                $(this).parent().find(
                                        '.select2-container--bootstrap .select2-selection')
                                    .addClass('error_custom');
                                flag = '1';
                            } else {
                                $(this).removeClass('error_custom');
                                $(this).parent().find(
                                        '.select2-container--bootstrap .select2-selection')
                                    .removeClass('error_custom');
                            }
                        });

                        if (flag == 1) {
                            // alert_msg('There are errors on page');
                            $('#busyloading').hide();
                            return false;
                        } else {
                            var member = parent_target.find('.player').val();
                            var group_uuid = $('#group_select').val();
                            var type = $('option:selected', parent_target).parent().attr(
                                "label");

                            var formData = new FormData();
                            formData.append('member', member);
                            formData.append('group_uuid', group_uuid);
                            formData.append('type', type);


                            formData.append('_token', CSRF_TOKEN);

                            $.ajax({
                                type: 'POST',
                                url: "{{ route('admin.settings.group-member.store') }}",
                                data: formData,
                                contentType: false,
                                processData: false,
                                success: function (response) {
                                    console.log(response);

                                    if (response.status ==
                                        "{{ config('globalConstants.response_status.success_response') }}"
                                    ) {
                                        $("#group_details .clone .player option[value='" +
                                            member + "']").remove();

                                        var clone = $('#group_details .clone').clone();
                                        clone.find('.player').removeClass('select2');
                                        clone.find('.select2').remove();
                                        clone.find(".player").select2({
                                            'placeholder': '--Select--'
                                        });
                                        clone.find('.del_icon').hide();
                                        clone.find('.add_icon').show();
                                        clone.find('.player').val('').trigger('change');
                                        $('#group_details').append(clone);
                                        parent_target.removeClass('clone');

                                        this_parent.hide();
                                        parent_target.find('.del_icon').show();
                                        parent_target.find(".player").attr('disabled',
                                            'disabled');

                                        parent_target.find('.del_member').attr('data-uuid',
                                            response.data.group_member_uuid);
                                        parent_target.find('.add_row').attr('data-uuid',
                                            response.data.group_member_uuid);
                                        parent_target.find('.edit_row').attr('data-uuid',
                                            response.data.group_member_uuid);

                                        $('#busyloading').hide();

                                    } else if (response.status ==
                                        "{{ config('globalConstants.response_status.warning_response') }}"
                                    ) {
                                        alertbox('warning', response.message);
                                        $('#busyloading').hide();

                                    } else if (response.status ==
                                        "{{ config('globalConstants.response_status.error_response') }}"
                                    ) {
                                        alertbox('danger', response.errors
                                            .group_select);
                                        $('#busyloading').hide();
                                    }
                                },
                                error: function (response) {
                                    $('#busyloading').hide();
                                    alertbox('danger', "Server error");
                                }

                            });
                        }
                        // });

                    });

                    var target;

                    $(document).on('click', '.del_member', function () {
                        $('#sweetalert_wrap').show();
                        target = $(this).parent().parent().parent();
                        $('.confirm').addClass('group-member');
                        var group_memebr_uuid = $(this).attr('data-uuid');
                        $(".confirm").attr("member_id", group_memebr_uuid);

                    });

                    $(document).on('click', '.cancel', function () {
                        $(".confirm").removeAttr("member_id");
                        $('.confirm').removeClass('group-member')
                        $('#sweetalert_wrap').hide();
                        return false;
                    });

                    $(document).on('click', '.group-member.confirm', function () {
                        target = target;
                        var group_memebr_uuid = $(this).attr("member_id");
                        var group_or_staff = $('option:selected', target).parent().attr("label");

                        var group_or_staff_uuid = $('option:selected', target).val();
                        var group_or_staff_text = $('option:selected', target).text();

                        $.ajax({
                            type: 'DELETE',
                            url: "{{ url('admin/settings/group-member') }}/" +
                                group_memebr_uuid,
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            success: function (response) {
                                if (response.status ==
                                    "{{ config('globalConstants.response_status.success_response') }}"
                                ) {
                                    $('.clone').find(
                                        ".player optgroup[label='" +
                                        group_or_staff + "']").append(
                                        '<option value="' +
                                        group_or_staff_uuid + '">' +
                                        group_or_staff_text + '</option>');
                                    $('.clone').find('.player').removeClass(
                                        'select2');
                                    $('.clone').find('.select2').remove();
                                    $('.clone').find(".player").select2({
                                        'placeholder': '--Select--'
                                    });

                                    target.remove();
                                    alertbox('success', response.success);
                                    setTimeout(function(){ location.reload();
                                     }, 2000);

                                    $('#busyloading').hide();

                                } else if (response.status ==
                                    "{{ config('globalConstants.response_status.warning_response') }}"
                                ) {
                                    alertbox('warning', response.message);
                                    $('#busyloading').hide();

                                } else if (response.status ==
                                    "{{ config('globalConstants.response_status.error_response') }}"
                                ) {
                                    console.log(response);
                                    alertbox('danger', response.errors);
                                    $('#busyloading').hide();
                                }
                            },
                            error: function (response) {
                                $('#busyloading').hide();
                                alertbox('danger', "Server error");
                            }


                        });

                        $('#sweetalert_wrap').hide();
                    });
                });

            </script>

            @stop