@include('layouts.sidebar')
	
<!-- =============== Left side End ================-->

<div class="main-content-wrap sidenav-open d-flex flex-column">
<!-- ============ Body content start ============= -->
<div class="main-content">
<div class="row">
@if(Session::has('message'))
<p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('message') }}</p>
@endif
</div>  				
<div class="row">
<div class="card text-left">
<div class="card-body">
<div class="row">
<div class="col-md-12">
<h4 class="card-title mb-3"> Meetings </h4> 
<p> {{ $count }} Meetings </p>			
</div>
</div>
<ul class="nav nav-tabs" id="myIconTab" role="tablist">
<li class="nav-item"><a class="nav-link active show" id="home-icon-tab" data-toggle="tab" href="#homeIcon" role="tab" aria-controls="homeIcon" aria-selected="true"><i class="nav-icon i-Pen-2 mr-1"></i> All Meetings </a></li>
</ul>
<div class="tab-content" id="myIconTabContent">
<div class="tab-pane fade active show" id="homeIcon" role="tabpanel" aria-labelledby="home-icon-tab">
<div class="row" style="margin-bottom:15px">
<!-- <div class="col-md-2">
<div id="myDropdown" class="dropdown-content">
    <input type="text" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id='role_search' placeholder="Search" style="padding: 5px;border-radius: 4px;background: #f6f8fc;">
    <div class="dropdown-menu" id="roles" style="display: none;">
    </div>
</div>      
</div> -->
<div class="col showlist">
<span>Show </span><button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="color: #6a88c7!important;">{{$perpage}}</button><span> entries</span>
<div class="dropdown-menu"><a class="dropdown-item" href="?perpage=10">10</a><a class="dropdown-item" href="?perpage=25">25</a><a class="dropdown-item" href="?perpage=50">50</a><a class="dropdown-item" href="?perpage=100">100</a></div>
</div>
<div class="col-md-2">
<div id="myDropdown" class="dropdown-content">
    <input type="text" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id='role_search' placeholder="Search" style="padding: 5px;border-radius: 4px;background: #f6f8fc;">
    <div class="dropdown-menu" id="roles" style="display: none;">
    </div>
</div>      
</div>
</div>
                        <div class="tab-content" id="myIconTabContent">
                            <div class="tab-pane fade active show" id="homeIcon" role="tabpanel" aria-labelledby="home-icon-tab">
                               <div class="table-responsive tableFixHead" style="height: 420px;">
                                @include('meetings.ajax')
                                </div>
                            </div>
                        </div>
                    </div>
				</div>
            </div>
        </div>
    </div>
    <div class="flex-grow-1"></div>

    <script src="{{ asset('js/jquery-3.3.1.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('js/perfect-scrollbar.min.js') }}"></script>
    <script src="{{ asset('js/script.min.js') }}"></script>
    <script src="{{ asset('js/sidebar.large.script.min.js') }}"></script>
    <script src="{{ asset('js/echarts.min.js') }}"></script>
    <script src="{{ asset('js/echart.options.min.js') }}"></script>
    <script src="{{ asset('js/dashboard.v1.script.min.js') }}"></script>
    <!-- ============ bootstrap-datetimepicker ============= -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
    <!-- ============ jquery-dataTables ============= -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
    <!-- ============ jquery-confirm ============= -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.1/jquery-confirm.min.js"></script>
    <!-- ============ jquery-ui ============= -->
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>
    <script type="text/javascript">
        var toggled = false;
        function getMeetings(id) {
            icon = document.getElementById("icon"+id);
            tr = document.getElementById("tr"+id);
            if(toggled == false){
                $(icon).removeClass('fa fa-angle-double-down').addClass('fa fa-angle-double-up');
                $(tr).show();
                if (id != '') {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $.ajax({
                        type: "POST",
                        url:"{{route('meetings.getMeetings')}}",
                        dataType: 'json',
                        data: {'id': id},
                        success: function (data) {
                            $('#tbody'+id).empty();
                            $.each(data, function (key, value){
                                key = key + 1;
                                $('#tbody'+id).append("<tr><td>"+key+"</td><td>"+value.meetingID+"</td><td>"+value.full_name+"</td><td>"+value.attendeePW+"</td><td>"+value.moderatorPW+"</td><td>"+value.createDate+"</td><td>"+value.hasUserJoined+"</td><td>"+value.duration+"</td><td><button class='btn btn-info' type='button' onclick='startMeeting(`"+value.meetingID+"`, `"+value.first_name+"`, `"+value.moderatorPW+"`)' ><i class='fa fa-link'></i></button><button class='btn btn-warning' type='button' onclick='isMeetingRunning(`"+value.meetingID+"`)' ><i class='fa fa-info-circle'></i></i></button><button class='btn btn-danger' type='button' onclick='closeMeeting(`"+value.meetingID+"`, `"+value.moderatorPW+"`)' ><i class='fas fa-ban'></i></i></button></tr>");
                            });
                        },
                        complete: function () {
                        },
                        error: function () {
                        }
                    });
                }
               toggled = true;
            }else{
                $(icon).removeClass('fa fa-angle-double-up').addClass('fa fa-angle-double-down');
                $(tr).hide();
               toggled = false;
            }
        }
        function startMeeting(meetingID, first_name, moderatorPW) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: "POST",
                url:"{{route('meetings.startMeeting')}}",
                dataType: 'json',
                data: {'meetingID': meetingID, 'first_name': first_name, 'moderatorPW': moderatorPW},
                success: function (data) {
                    if (data.code == 200) {
                        window.location.href = data.startMeetingUrl;
                    } else {
                        alert('failure');
                    }
                },
                complete: function () {
                },
                error: function () {
                }
            });
        }
        function isMeetingRunning(meetingID) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: "POST",
                url:"{{route('meetings.isMeetingRunning')}}",
                dataType: 'json',
                data: {'meetingID': meetingID},
                success: function (data) {
                    if (data.code == 200) {
                        alert('success');
                    } else {
                        alert('failure');
                    }
                },
                complete: function () {
                },
                error: function () {
                }
            });
        }
        function closeMeeting(meetingID, moderatorPW) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: "POST",
                url:"{{route('meetings.closeMeeting')}}",
                dataType: 'json',
                data: {'meetingID': meetingID, 'moderatorPW': moderatorPW},
                success: function (data) {
                    if (data.code == 200) {
                        alert('success');
                    } else {
                        alert('failure');
                    }
                },
                complete: function () {
                },
                error: function () {
                }
            });
        }
    </script>
    <style type="text/css">
        input#role_search {
    margin-left: -58px;
}
.col.showlist {
    margin-left: 16px;
}
    </style>
</body>
</html>