@extends('Frontend.partials.layout')

@section('content')
<style>
    .select2-dropdown {
        z-index: 999999 !important;
    }

    @media only screen and (max-width: 576px) {
        .add-group-button {
            padding: 8px;
        }

        .add-group-button .fa-plus-square {
            margin-right: 0px !important;
        }
    }
</style>
<section class="group-list">
    @php
        $authuser = Auth::user();
    @endphp
    <div class="row analysis_header_flex justify-content-between align-items-center mx-0 px-1">
        <div class="">
            <div class="analysis-content-header d-flex align-items-center">
                <div class="logo">
                    <i class="fas fa-home primary-color"></i>
                </div>
                <div class="heading primary-color">
                    <h2>{{trans('action.page_heading1_group_list')}}</h2>
                    <p>{{trans('action.page_heading2_user_list', ['siteName' => env('APP_NAME')])}}</p>
                </div>
            </div>
        </div>
        <div class="">
            @if($authuser->user_type != 4)
                <div class="add-user-group-button text-right m-0" data-toggle="tooltip" data-placement="bottom" data-state="secondary" title="{{trans('action.add_user_group')}}">
                    <button class="btn btn-lg btn-outline-success m-0 add-group-button" data-toggle="modal"  data-target="#addGroupModal">
                        <i class="far fa-plus-square text-warning mr-2"></i> <span class="d-mobile-none">{{trans('action.add_user_group')}}</span>
                    </button>

                </div>
            @endif
        </div>
    </div>
    <div class="row mt-3">
        <div class="col-md-12">

            <div class="card">
                <div class="card-datatable table-responsive" id="card-datatable">
                    <table id="user-group-table" class="datatables-demo table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>{{trans('action.sno')}}</th>
                                <th>{{trans('action.name')}}</th>
                                <th>{{trans('action.action')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $index = 1;
                            @endphp
                            @if($authuser->user_type != 4)
                                <tr>
                                    <td>{{$index}}</td>
                                    <td>{{ trans('action.staff') }}</td>
                                    <td>
                                        <a type="button" href="#view_group_staff_modal" class="staff-view-btn act-btn edit-btn text-primary" data-toggle="modal" style="max-width: fit-content;margin-bottom: 2px;">
                                            <i class="far fas fa-eye"></i>&nbsp;<span class="hide-table-btn-text">{{trans('action.view')}}</span>
                                        </a>
                                    </td>

                                </tr>
                            @endif

                            @foreach ($group_list as $group)
                            <tr>
                                <td>{{ ++$index}}</td>
                                <td>{{ $group->group_name }}</td>
                                <td style="width: 8%">
                                    <div class="d-flex flex-column">
                                        <a type="button" onclick="viewGroupUsers(this)" style="max-width: fit-content;margin-bottom: 2px;" data-id="{{ $group->id }}" data-url="{{ url('') }}" href="#view_group{{ $group->id }}" data-toggle="modal" class="btnact-btn edit-btn text-primary"> <i class="far fas fa-eye"></i>&nbsp;<span class="hide-table-btn-text">{{trans('action.view')}}</span></a>
                                        @if($authuser->user_type != 4)
                                            <a type="button" href="javascript:void(0)" onclick="editGroup({{ $group->id }})" id="editgroup{{ $group->id }}" data-name="{{ $group->group_name }}" class="btnact-btn edit-btn text-info" style="max-width: fit-content;margin-bottom: 2px;"><i class="far fas fa-edit"></i>&nbsp;<span class="hide-table-btn-text">{{trans('action.edit')}}</span></a>

                                            <a href="javascript:void(0)" id="deleteGroup" onclick="deleteGroup({{$group->id}})"  class="act-btn delete-btn text-danger " style="max-width: fit-content;margin-bottom: 2px;"><i class="fas fa-trash-alt"> </i>&nbsp;<span class="hide-table-btn-text">{{trans('action.delete')}}</span></a>
                                        @endif
                                    </div>
                                    <!-- Modal Group view -->
                                    <div class="show_group_users{{ $group->id }}"> </div>
                                </td>
                            </tr>
                            @endforeach
                        </table>
                    </div>
                </div>
            </div>
        </div>

    {{-- Group Add Modal  --}}
    <div class="modal modal-top fade" id="addGroupModal">
        <div class="modal-dialog">
            <form id="group" class="modal-content" method="">
                <div class="modal-header">
                    <h5 class="modal-title">
                        {{trans('action.add_new_group')}}
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
                </div>

                <div class="modal-body">
                    <div class="form-group">
                        <label for="" class="mb-2">{{trans('action.enter_group_name')}}</label>
                        <input type="text" id="group_name_own" name="group_name" class="form-control" placeholder="{{trans('action.enter_group_name')}}" required="required">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{trans('action.close')}}</button>
                    <button type="button" id="submit" onclick="groupAdd()" class="btn btn-primary">{{trans('action.to_save')}}</button>
                </div>
            </form>
        </div>
    </div>

    {{--  Group Modal for add user --}}
    <div class="addGroupMemberModal"></div>


    {{--Assign group to a staff modal  --}}
    <div class="modal fade" style="z-index:9999 !important" id="assignGroupOnStaff">
        <div class="modal-dialog">
            <form id="group" class="modal-content" method="">
                <div class="modal-header bg-success">
                    <h5 class="modal-title">{{ trans('action.add_new_member') }} <span id="assign_group_name"></span> </h5>
                    <button type="button" class="close text-danger" data-dismiss="modal" aria-label="Close">×</button>
                </div>

                <div class="modal-body">
                    <input type="hidden" name="assign_group_id" id="assign_group_id">
                    <div class="form-group">
                        <label for="" class="mb-2">{{trans('action.staff_list')}}</label>
                        <select class="form-control m-0 col-md-12 select2" multiple data-live-search="true" name="staff_id" id="assign_staff">
                            {{-- <option disabled>{{__('action.Select')}}</option> --}}
                            {{-- @forelse ($authuser->subusers()->get() as $user)
                                <option value="{{$user->id}}" >{{$user->fullName}}</option>
                            @empty
                                <option selected class="text-danger">{{__('action.no_data_datatable')}}</option>
                            @endforelse --}}
                        </select>
                        {{-- <input type="text" id="group_name_own" name="group_name" class="form-control" placeholder="{{trans('action.enter_group_name')}}" required="required"> --}}
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{trans('action.close')}}</button>
                    <button type="button" id="submit" onclick="saveStaffOnGroup()" class="btn btn-primary">{{trans('action.to_save')}}</button>
                </div>
            </form>
        </div>
    </div>
    {{-- Start Staff Modal Activity --}}

    <!-- Staff Details View Modal -->
    <div class="modal fade"  id="view_group_staff_modal" style="z-index:9997 !important" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-users">&nbsp;{{trans('action.staff_group')}}</i> </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                @php
                    $staffs = (count($authuser->staffs) > 0) ? $authuser->staffs : getStaffList();
                @endphp
                <form class="" action="" method="">
                    <div class="modal-body">
                        <div class="row">
                            <div class="form-group gedit col-6">
                                <label for="" class="mb-2"><dt>{{trans('action.name')}}</dt></label>
                                <input type="text" id="group_name" name="group_name" value="{{trans('action.staff')}}" disabled class="form-control" placeholder="{{trans('action.enter_group_name')}}" required="required">
                            </div>
                            @if ($authuser->managelimitation->max_staff > 0)
                                <div class="form-group col-3">
                                    <label class="mb-2" for=""><dt>{{trans('action.add_user_group')}}</dt><span class="badge badge-outline-success"> {{trans('action.max_staff')}} : <span class="max-limit">{{$authuser->managelimitation->max_staff - $authuser->staffs()->count()}} </span></span></label>
                                    <a href="javascript:void(0)" onclick="openStaffUserAddModal(e)" data-id="staff" data-url="{{url('')}}" data-name='staff' class="btn btn-success"><i class="fas fa-user-plus d-block">{{trans('action.add')}}</i></a>
                                </div>
                            @endif

                        </div>

                        <div class="modal-footer">
                            <div class="card-datatable table-responsive">
                                <label for="" class="mb-2"><h5><i class="fas fa-users text-muted">&nbsp;{{trans('action.staff_list')}}</i></h5></label>
                                <table id="" class="table table-striped table-bordered staff_list_table">
                                    <thead>
                                        <tr>
                                            <th>{{trans('action.user_id')}}</th>
                                            <th>{{trans('action.name')}}</th>
                                            @if($authuser->user_type != 4)
                                                <th>{{trans('action.action')}}</th>
                                            @endif
                                        </tr>
                                    </thead>
                                    <tbody id="show_staff_result">
                                        @if($staffs != null)
                                            @forelse ($staffs as $item)
                                                <tr>
                                                    <td>{{$item->id}}</td>
                                                    <td>{{$item->name}}</td>
                                                    @if($authuser->user_type != 4)
                                                        <td>
                                                            <button type="button" id="delete" title="Remove form staff" onclick="delclick({{ $item->id }})" class="btn btn-white">
                                                                <i class="fas fa-trash-alt mr-2 text-danger"></i>
                                                            </button>
                                                        </td>
                                                    @endif
                                                </tr>

                                            @empty
                                                <tr>
                                                    <td colspan="3">{{trans('action.no_records_available')}}</td>
                                                </tr>
                                            @endforelse
                                        @endif
                                    </tbody>
                                </table>
                            </div>

                            {{-- <button type="button" class="btn btn-secondary" data-dismiss="modal">{{trans('action.close')}}</button>
                            <button type="button" id="groupUpdateBTN" onclick="GroupUpdate({{ $group->id }})" class="btn btn-primary">{{trans('action.to_save')}}</button> --}}
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Staff Add Member Modal  --}}
    <div class="addStaffModal"></div>


    {{-- END Staff Modal --}}

    <!-- Modal Group edit -->
    <div class="modal fade edit_group" id="edit_group" tabindex="-1" role="dialog" aria-labelledby="GroupEditModal" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">{{trans('action.Edit_Group_Name')}}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <form class="" action="" method="">
                    <div class="modal-body">
                        <div class="form-group">
                            <div class="form-group gedit{{$group->id}}">
                                <input type="hidden" id="edit_group_id">
                                <label for="" class="mb-2">{{trans('action.enter_group_name')}}</label>
                                <input type="text" id="edit_group_name" name="edit_group_name" value="{{$group->group_name}}" class="form-control" placeholder="{{trans('action.enter_group_name')}}" required="required">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{trans('action.close')}}</button>
                            <button type="button" id="groupUpdateBTN" onclick="GroupUpdate()" class="btn btn-primary">{{trans('action.to_save')}}</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>

    </div>

</section>

@endsection
@section('scripts')

<script src="{!! asset('/js/select2.min.js') !!}"></script>
<script>
    let max_limit = parseInt($('.max-limit').text());

    function addMemberOnGroup(e) {
        let id = $(e).data('id');
        let name = $(e).data('groupname');
        let url = $(e).data('url')+'/group/get_add_user_modal/'+id;
        $.ajax({
            url: url,
            type:'GET',
            cache: false,
            dataType:"json",
            beforeSend: function(){
                Swal.fire({
                    title: `{{__('action.processing')}}`,
                    imageUrl: "{!! asset('/') !!}"+"ezgif.com-gif-maker.webp",
                    showConfirmButton: false,
                    allowOutsideClick: true,
                    confirm: true,
                    showLoaderOnConfirm: true,
                    timer: 3500,
                    width: '300px',
                    height: '180px'
                })
            },
            success: function(msg){
                $('#group_name_show').html(name);
                $('#group_id').val(id);
                $('.addGroupMemberModal').find('#addGroupMemberModal').remove();
                $('.addGroupMemberModal').append(msg.userlists);
                Swal.close()
                $('#addGroupMemberModal').modal('show');
            },
            error:function(msg){
                console.log(msg);
            }
        });
    }

    function openStaffUserAddModal() {
        let id = $(e).data('id');
        let name = $(e).data('name');
        let url = $(e).data('url')+'/group/get_staff_add_user_modal/'+id;
        $.ajax({
            url: url,
            type:'GET',
            cache: false,
            dataType:"json",
            beforeSend: function(){
                Swal.fire({
                    title: `{{__('action.processing')}}`,
                    imageUrl: "{!! asset('/') !!}"+"ezgif.com-gif-maker.webp",
                    showConfirmButton: false,
                    allowOutsideClick: true,
                    confirm: true,
                    showLoaderOnConfirm: true,
                    timer: 3500,
                    width: '300px',
                    height: '180px'
                })
            },
            success: function(msg){
                $('#group_name_show').html(name);
                $('#group_id_staff').val(id);
                $('.addStaffModal').find('#addStaffModal').remove();
                $('.addStaffModal').append(msg.userlists);
                Swal.close()
                $('#addStaffModal').modal('show');
            },
            error:function(msg){
                console.log(msg);
            }
        });
    }
    //Group assign to any staff
    function getStaffList(id,name) {
        $('#assign_staff').empty();
        $('#assign_group_name').html(name);
        $('#assign_group_id').val(id);
        $.ajax({
            url: "Sajax/getGroupUsers/"+id,
            type:'GET',
            cache: false,
            success: function(msg){
                if(msg.success){
                    // $('.viewtable tbody').append(msg.html);
                    $.each(msg.users, function (key, value) {
                        $('#assign_staff').append(`<option value="${value.id}">${value.name}</option>`);
                    })
                    $('#assign_staff').select2({
                        width: '100%',
                        placeholder: 'Select or Add',
                        language: {
                            noResults: function() {
                                return '<a id="no-results-btn" onclick="javascript:void(0)">No Result Found</a>';
                            },
                        },
                        escapeMarkup: function(markup) {
                            return markup;
                        }
                    });
                    $('#assignGroupOnStaff').modal('show');
                }
            }
        })
    }

    // Save Assign staff on DB
    function saveStaffOnGroup() {
        let id = $('#assign_group_id').val();
        let user_id = $('#assign_staff').val();
        if(user_id.length < 1 || user_id == undefined){
            return toastr.warning(`{{__('action.nothingselected')}}`);
        }
        $.ajax({
            url: "Sajax/save_assign_staff",
            type:'POST',
            cache: false,
            data: {
                userID: user_id,
                groupID: id
            },
            success: function(msg){
                let table = []
                $('#assignGroupOnStaff').modal('hide');
                if(msg.success){
                    if(msg.users.length != 0 || msg.users != undefined){
                        $.each(msg.users, function (key, value) {
                            table += `<tr><td>${value.id}</td>
                                <td>${value.first_name} ${value.last_name}</td>
                                <td>
                                    <button type="button" id="delete" title="Remove form" onclick="delfromgroup( ${value.id})" class="btn btn-white">
                                    <i class="fas fa-trash-alt mr-2 text-danger"></i>
                                    </button>
                                </td></tr>`;
                            })
                        $('.staffViewTable tbody').append(table);
                    }
                    if(msg.duplicate.length != 0 || msg.duplicate != undefined){
                        $.each(msg.duplicate, function (key, dup) {
                            toastr.warning(`{{__('action.already_linked_user')}} ${dup.first_name} ${dup.last_name}`);
                        })
                    }
                }
            }
        });
    }
    //Add Staff on staff group
    function addStaff() {
        let id = $('#group_id_staff').val();
        let user_id = $('#group_user_id').val();
        if(user_id.length < 1 || user_id == undefined){
            return toastr.warning(`{{__('action.nothingselected')}}`);
        }
        $.ajax({
            url: "{{route('Sajax.staff_add')}}",
            type:'POST',
            cache: false,
            data: {
                userID: user_id,
                groupID: id
            },
            success: function(msg){
                let table = []
                if(msg.success){
                    $.each(msg.users, function (key, value) {
                       table += `<tr><td>${value.id}</td>
                        <td>${value.first_name} ${value.last_name}</td>
                        <td>
                            <button type="button" id="delete" title="Remove form" onclick="delfromgroup( ${value.id})" class="btn btn-white">
                            <i class="fas fa-trash-alt mr-2 text-danger"></i>
                            </button>
                        </td></tr>`;
                    })
                    $('.staff_list_table tbody').append(table);
                    $('#addStaffModal').modal('hide');
                }else{
                    $('#addStaffModal').modal('hide');
                    toastr.warning(`{{__('action.already_linked_user')}}`);
                }
            }
        });


    }
    //Add User On Selected Group
    function addGroupMember() {
        let id = $('#group_id').val();
        let user_id = $('#group_userid').val();
        if(user_id.length < 1 || user_id == undefined){
            return toastr.warning(`{{__('action.nothingselected')}}`);
        }
        $.ajax({
            url: "{{route('Sajax.group_member_add')}}",
            type:'POST',
            cache: false,
            data: {
                userID: user_id,
                groupID: id
            },
            success: function(msg){
                let table = []
                if(msg.success){
                    $.each(msg.users, function (key, value) {
                       table += `<tr><td>${value.id}</td>
                        <td>${value.first_name} ${value.last_name}</td>
                        <td>
                            <button type="button" id="delete" title="Remove form" onclick="delfromgroup( ${value.id})" class="btn btn-white">
                            <i class="fas fa-trash-alt mr-2 text-danger"></i>
                            </button>
                        </td></tr>`;
                    })
                    $('.viewtable tbody').append(table);
                    $('#addGroupMemberModal').modal('hide');
                }else{
                    $('#addGroupMemberModal').modal('hide');
                    toastr.warning(`{{__('action.already_linked_user')}}`);
                }
            }
        });


    }

    function editGroup(id) {
        let name = $('#editgroup'+id).data('name');
        $('#edit_group_id').val(id);
        $('#edit_group_name').val(name);
        $('.edit_group').modal('show');
    }

    function removeStaffFromAssign(uid,gid) {
        Swal.fire({
            title: `{{__('action.you_want_to_delete')}}`,
            text: `{{__('action.you_cant_revert')}}`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#fb0404',
            cancelButtonColor: '#d33',
            confirmButtonText: `{{__('action.yes_delete')}}`,
            cancelButtonText:  `{{__('action.cancel')}}`,
        }).then((result) => {
            if (result.value) {
                $.ajax({
                    url: "Sajax/removeStaffFromAssign/"+uid+'/'+gid,
                    type:'DELETE',
                    cache: false,
                    success: function(msg){
                        if (msg.success) {
                            $('#remove'+gid).remove();
                            toastr.warning(`{{trans('action.delete_success')}}`);
                        }
                    },
                    error:function(msg){
                        console.log(msg);
                    }
                });
            }
        })
    }


    $('#group_user_id').select2({
        width: '100%',
        placeholder: 'Select or Add',
        maximumSelectionLength: parseInt(max_limit),
        formatSelectionTooBig: function (limit) {
            return 'No allowed';
        },
        language: {
            noResults: function() {
                return '<button id="no-results-btn" onclick="javascript:void(0)">No Result Found</a>';
            },
        },
        escapeMarkup: function(markup) {
            return markup;
        },
    });

    function viewGroupUsers(e){
        let groupid = $(e).data('id');
        let url = $(e).data('url')+'/group/get_group_users_by_id/'+groupid;
        $.ajax({
            url: url,
            type:'GET',
            cache: false,
            dataType:"json",beforeSend: function(){
                Swal.fire({
                    title: `{{__('action.processing')}}`,
                    imageUrl: "{!! asset('/') !!}"+"ezgif.com-gif-maker.webp",
                    showConfirmButton: false,
                    allowOutsideClick: true,
                    confirm: true,
                    showLoaderOnConfirm: true,
                    timer: 3500,
                    width: '300px',
                    height: '180px'
                })
            },
            success: function(msg){
                $('.modal-backdrop').remove();
                $('.show_group_users'+groupid).find('#view_group'+groupid).remove();
                $('.show_group_users'+groupid).append(msg.userlists);
                Swal.close();
                $('#view_group'+groupid).modal('show');
            },
            error:function(msg){
                console.log(msg);
            }
        });
    }
</script>


@endsection