@extends('Layout.master')

@section('title', $relief->relief_name)

@section('content')

    <section id="content">
        <form method="POST" role="form" class="vbox form-horizontal clearfix">
            {{ csrf_field() }}
            <section class="scrollable padder">
                <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
                    <li><a href="."><i class="fa fa-home"></i>Home</a></li>
                    <li><a href="/relief">Relief</a></li>
                    <li>View a relief</li>
                </ul>
                <section class="panel panel-default col-md-6 no-padder" style="margin-right:30px;">
                    <div class="panel-body range-preview clearfix">
                        @include('Layout.errors')
                        <div class="col-md-12">
                            <h3 style="margin-top:0;"><b>{{ $relief->relief_name }}</b></h3>
                        </div>

                        <div class="range-title clearfix">
                            <h4 class="col-md-12 padder-v"><b>Available groups</b> <a href="/relief/employees/{{ $relief->id }}" class="pull-right btn btn-default btn-sm" style=""><span><i class="fa fa-plus"></i>Create group</span></a></h4>
                            <div class="col-md-3"><b>Group</b></div>
                            <div class="col-md-6"><b>Members</b></div>
                            <div class="col-md-3"><b>Action</b></div>
                        </div>
                        <?php
                            if (count($groups_in_relief) > 0){
                                for ($i=0;$i<count($groups_in_relief);$i++){
                                    $group = $groups_in_relief[$i]->value;
                                    $group_id = $groups_in_relief[$i]->id;
                                    $member_count = count($employee_groups[$group_id]);

                                    echo
                                    "
                                    <div class='range-item clearfix' id='row-{$group_id}'>
                                        <div class='col-md-3'>{$group} ({$member_count} Members)</div>
                                        <div class='col-md-6'>";
                                        for($m=0;$m<$member_count;$m++){
                                            if ($m == $member_count - 1){
                                                echo $employee_groups[$group_id][$m];
                                                continue;
                                            }

                                            echo $employee_groups[$group_id][$m].", ";
                                        }
                                    echo "</div>
                                                <div class='col-md-3'>
                                                    <a href='/relief/edit_group/{$group_id}'><span class='btn btn-default btn-sm'><i class='fa fa-edit'></i></span></a>
                                                    <span class='btn btn-danger btn-sm delete-group' data-group-id='{$group_id}'><i class='fa fa-trash'></i></span>
                                                </div>
                                          </div>
                                         ";
                                }
                            }else{
                                echo
                                "
                                    <div class='range-item clearfix'>
                                        <div class='col-md-12 text-center'>Create a new group by clicking &apos;Create group&apos;</div>
                                    </div>
                                ";
                            }
                        ?>
                        <div class="col-md-12" style="margin-top:10px;">
                            <div class="pull-right">
                                <a href="/relief"  class="btn btn-default"><i class="fa fa-close"></i>Close</a>
                            </div>
                        </div>
                    </div>
                </section>
            </section>
            <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen, open" data-target="#nav,html"></a>
        </form>
    </section>

@endsection

@section('footer-include')
    <!-- fuelux -->
    <script src="/js/libs/underscore-min.js"></script>
    <script src="/js/fuelux/fuelux.js"></script>
    {{--<script src="js/fuelux/demo.datagrid.js"></script>--}}
    <!-- select2 -->
    <script src="/js/select2/select2.min.js"></script>
@endsection

@section('j-script')
    <!-- Jquery -->
    <script>
        $(document).on('ready', function(){
            $(document).on('click', '.delete-group', function(){
                let el = $(this);

                if (!confirm("Are you sure you want to delete this group?")){
                    return false;
                }

                let deleteGroupRequest = $.ajax({
                    type:'POST',
                    url:'/allowances/employees/delete_group',
                    data:{
                        groupId:el.data('groupId')
                    },
                    dataType:'json',
                    timeout:10000,
                    beforeSend:function(){
                        el.addClass('disabled');
                    },
                    success:function(response){
                        el.removeClass('disabled');
                        if (response.status !== 1){
                            alert(errorMessage);
                        }else{
                            $('#row-' + el.data('groupId')).fadeOut();
                        }
                    },
                    error(x,t,m){
                        el.removeClass('disabled');
                        if (t === "timeout"){
                            deleteGroupRequest.abort();
                            console.log('Request time out');
                        }
                    }
                });
            });
        });
    </script>
@endsection