@extends('layouts.main')

@section('title')
    Team Management
@endsection

@section('style')
@endsection
@section('content')
    @if($errors->any())
        @foreach ($errors->all() as $error)
            <div class="alert alert-danger mb-2" role="alert">
                <strong>{{$error}}</strong>
            </div>
        @endforeach
    @endif
    @if ($message = Session::get('success'))
        <div class="alert alert-success mb-2" role="alert">
            <strong>{{$message}}</strong>
        </div>
    @endif

    <div class="content-wrapper"><!--Statistics cards Starts-->
        <div class="row">
            <div class="col-xl-3 col-lg-6 col-12">
                <div class="card">
                    <div class="card-content">
                        <div class="px-3 py-3">
                            <div class="media">
                                <div class="media-body text-left">
                                    <h3 class="mb-1 danger">{{$teams->count()}}</h3>
                                    <span>Total Teams</span>
                                </div>
                                <div class="media-right align-self-center">
                                    <i class="icon-rocket danger font-large-2 float-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-lg-6 col-12">
                <div class="card">
                    <div class="card-content">
                        <div class="px-3 py-3">
                            <div class="media">
                                <div class="media-body text-left">
                                    <h3 class="mb-1 success">{{$total_members}}</h3>
                                    <span>Total Members</span>
                                </div>
                                <div class="media-right align-self-center">
                                    <i class="icon-user success font-large-2 float-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-lg-6 col-12">
                <div class="card">
                    <div class="card-content">
                        <div class="px-3 py-3">
                            <div class="media">
                                <div class="media-body text-left">
                                    <h3 class="mb-1 warning">{{$invited_members}}</h3>
                                    <span>Invited Members</span>
                                </div>
                                <div class="media-right align-self-center">
                                    <i class="icon-support warning font-large-2 float-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-lg-6 col-12">
                <div class="card">
                    <div class="card-content">
                        <div class="px-3 py-3">
                            <div class="media">
                                <div class="media-body text-left">
                                    <h3 class="mb-1 primary">{{$refused_members}}</h3>
                                    <span>Refused Members</span>
                                </div>
                                <div class="media-right align-self-center">
                                    <i class="icon-user-unfollow primary font-large-2 float-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row" matchHeight="card">
            <div class="col-xl-3 col-lg-6 col-12">
                <div class="card bg-warning">
                    <div class="card-content">
                        <div class="px-3 py-3">
                            <div class="media">
                                <div class="media-body white text-left">
                                    <h3>{{$v_total_members+$total_members}}</h3>
                                    <span>Total Team Users</span>
                                </div>
                                <div class="media-right align-self-center">
                                    <i class="icon-rocket white font-large-2 float-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-12">
                <div class="card bg-success">
                    <div class="card-content">
                        <div class="px-3 py-3">
                            <div class="media">
                                <div class="media-body white text-left">
                                    <h3>{{$v_total_members}}</h3>
                                    <span>Total Viewers</span>
                                </div>
                                <div class="media-right align-self-center">
                                    <i class="icon-user white font-large-2 float-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-3 col-lg-6 col-12">
                <div class="card bg-danger">
                    <div class="card-content">
                        <div class="px-3 py-3">
                            <div class="media">
                                <div class="media-body white text-left">
                                    <h3>{{$v_invited_members}}</h3>
                                    <span>Total Invited Viewers</span>
                                </div>
                                <div class="media-right align-self-center">
                                    <i class="icon-support white font-large-2 float-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-lg-6 col-12">
                <div class="card bg-primary">
                    <div class="card-content">
                        <div class="px-3 py-3">
                            <div class="media">
                                <div class="media-body white text-left">
                                    <h3>{{$v_refused_members}}</h3>
                                    <span>Total Refused Viewers</span>
                                </div>
                                <div class="media-right align-self-center">
                                    <i class="icon-user-unfollow white font-large-2 float-right"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4"><button class="btn btn-danger" id="createButton"><i class="ft-users mr-1"></i>Create New Team</button></div>
        </div>

        <div class="row">
            @foreach($teams as $team)
                <div class="col-lg-4 col-md-12">
                    <div class="card text-center">
                        <div class="card-header">
                            <div class="row">
                                <div class="col-md-10 text-center">
                                    <a href="{{route('team_page',['id'=>$team->id])}}" data-toggle="tooltip" data-placement="top" title="Click link for viewing details about this team" ><h4 class="card-title info">{{$team->name}}</h4></a>
                                </div>
                                <div class="col-md-2 text-right">
                                    <button class="btn btn-secondary btn-sm" data-toggle="tooltip" data-placement="top" title="Click this button to delete this team" onclick="removeTeam({{$team->id}})"><i class="ft-trash-2"></i></button>
                                </div>
                            </div>
                        </div>
                        <div class="card-content">
                            <div class="card-body">
                                <p class="card-text">{{$team->description}}</p>
                            </div>
                            <div class="card-footer text-muted">
                                <span class="float-left">{{Carbon\Carbon::createFromFormat('Y-m-d H:i:s',$team->created_at)->format('m/d/Y')}}</span>
                                <span class="tags float-right">
                                <span class="badge bg-success white">{{$team->members()->count()}} Members</span>
                                <span class="badge bg-indigo white">Working</span>
                                </span>
                            </div>

                        </div>
                    </div>
            </div>
            @endforeach

        </div>
    </div>


    <div class="modal fade text-left" id="createModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel9"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-danger white">
                    <h4 class="modal-title" id="myModalLabel9"><i class="fa ft-users mr-1"></i> Create New Team</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form class="form" id="createForm" method="post" action="{{route('create_team')}}">
                    @csrf
                    <div class="modal-body">
                        <div class="form-body">
                            <input type="hidden" name="user_id" value="{{Auth::user()->id}}">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="new_name">Team Name</label>
                                        <input type="text" id="new_name" class="form-control" name="name" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="new_name">Description</label>
                                        <textarea id="new_description" class="form-control" name="description" required></textarea>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-outline-success">Submit</button>
                    </div>

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

@endsection

@section('script')
<script>
    $(document).ready(function () {

        $("#createButton").click(function () {
            $("#new_name").val("");
            $("#new_description").val("");
            $("#createModal").modal('show');
        });

    });
    
    function removeTeam(id) {
        swal({
            title: 'Are you sure?',
            text: "You want to remove this team ?",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#0CC27E',
            cancelButtonColor: '#FF586B',
            confirmButtonText: 'Yes',
            cancelButtonText: "No, cancel"
        }).then(function (isConfirm) {
            if (isConfirm) {
                $.post("{{route('remove_team')}}",{
                    _token:'{{csrf_token()}}',
                    id:id,
                }).done(
                    function (data) {
                        document.location.reload(true);

                    }
                );

            }
        }).catch(swal.noop);

    }
</script>
@endsection