@extends('layouts.usermaster')

@section('title')
Voice Sync: My Meetings
@endsection

@section('content.header.title')
Meetings
@endsection

@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <!-- Custom Tabs -->
                <div class="card">
                    <div class="card-header d-flex p-0">
                        <ul class="nav nav-pills p-2 ">
                            <li class="nav-item"><a class="nav-link active" href="#tab_1"
                                    data-toggle="tab">
                                    Upcoming
                                </a></li>
                            <li class="nav-item"><a class="nav-link" href="#tab_2"
                                    data-toggle="tab">
                                    Previous
                                </a></li>
                            <li class="nav-item"><a class="nav-link" href="#tab_3"
                                    data-toggle="tab">
                                    Personal Room
                                </a></li>
                        </ul>
                        <div class="ml-auto p-2 bd-highligh">
                            <a href="{{ url('user/meetings/0') }}"
                                class="btn btn-primary"
                                role="button"
                                aria-pressed="true">Schedule new meeting</a>
                        </div>
                    </div><!-- /.card-header -->
                    <div class="card-body">
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab_1">
                                <div class="card card-primary card-outline">
                                    <div class="card-body p-0">
                                        <div class="table-responsive mailbox-messages">
                                            @if(isset($upMeetings) && count($upMeetings) > 0)
                                            <table class="table table-hover table-striped">
                                                <tbody>
                                                    @foreach($upMeetings as $upMtg)
                                                    <tr>
                                                        <td><a
                                                                href="{{ url('user/meetings/') }}/{{ $upMtg->id }}">{{ $upMtg->title }}</a>
                                                        </td>
                                                        <td>
                                                            {{ \Carbon\Carbon::parse($upMtg->start_datetime)->format('m/d/Y h:i a')}}
                                                            -
                                                            {{ \Carbon\Carbon::parse($upMtg->end_datetime)->format('m/d/Y h:i a')}}
                                                        </td>
                                                        <td>
                                                            Meeting ID: {{ $upMtg->meeting_num }}
                                                        </td>
                                                        <td>
                                                            <button
                                                                type="button"
                                                                class="btn btn-primary btn-sm">Start</button>

                                                            <a href="{{ url('user/meetings/') }}/{{ $upMtg->id }}"
                                                                class="btn btn-outline-primary
                                                                    btn-sm"
                                                                role="button"
                                                                aria-pressed="true">Edit</a>
                                                            <a href="{{ url('user/meetings/') }}/{{ $upMtg->id }}/c"
                                                                class="btn btn-warning
                                                                    btn-sm"
                                                                role="button"
                                                                aria-pressed="true">Clone</a>
                                                            <button type="button"
                                                                class="btn btn-outline-danger
                                                            btn-sm"
                                                                data-toggle="modal"
                                                                data-mtg-id="{{ $upMtg->id }}"
                                                                data-mtg-title="{{ $upMtg->title }}"
                                                                data-target="#md-delete">
                                                                Delete
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    @endforeach

                                                </tbody>
                                            </table>
                                            @else
                                            <p class="p-2">You do not have any current meetings
                                            </p>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /.tab-pane -->
                            <div class="tab-pane" id="tab_2">
                                <div class="card card-primary card-outline">
                                    <div class="card-body p-0">
                                        <div class="table-responsive mailbox-messages">
                                            @if(isset($pastMeetings) && count($pastMeetings) > 0)
                                            <table class="table table-hover table-striped">
                                                <tbody>
                                                    @foreach($pastMeetings as $upMtg)
                                                    <tr>
                                                        <td><a
                                                                href="{{ url('user/meetings/') }}/{{ $upMtg->id }}">{{ $upMtg->title }}</a>
                                                        </td>
                                                        <td>
                                                            {{ \Carbon\Carbon::parse($upMtg->start_datetime)->format('m/d/Y h:i a')}}
                                                            -
                                                            {{ \Carbon\Carbon::parse($upMtg->end_datetime)->format('m/d/Y h:i a')}}
                                                        </td>
                                                        <td>
                                                            Meeting ID: {{ $upMtg->meeting_num }}
                                                        </td>
                                                        <td>
                                                            <a href="{{ url('user/meetings/') }}/{{ $upMtg->id }}/c"
                                                                class="btn btn-warning
                                                                    btn-sm"
                                                                role="button"
                                                                aria-pressed="true">Clone</a>
                                                        </td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                            @else
                                            <p class="p-2">You do not have any previous meetings
                                            </p>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /.tab-pane -->
                            <div class="tab-pane" id="tab_3">
                                <div class="card card-primary card-outline">
                                    <div class="card-body p-0">
                                        <p class="p-2">Coming soon. . .</p>
                                    </div>
                                </div>
                            </div>
                            <!-- /.tab-pane -->
                        </div>
                        <!-- /.tab-content -->
                    </div><!-- /.card-body -->
                </div>
                <!-- ./card -->
            </div>
            <!-- /.col -->
        </div>
    </div>

    <div class="modal fade" id="md-delete">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Delete Meeting</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="mtg_id" name="mtg_id" value="">
                    Are you sure you wish to delete this '<span id="mtg_title"></span>'?
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default"
                        data-dismiss="modal">Cancel</button>
                    <div class="col-5">
                        <a class="btn btn-block btn-danger" href="javascript:;" role="button"
                            id="delButton">
                            Delete
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

</section>
@endsection('content')

@section('javascript')
<script src="{{ asset('js/pages/page_base.js') }}"></script>
<script src="{{ asset('js/pages/meeting.js') }}"></script>
@endsection


@section('page_script')
<script>
window.onload = function () {
    setDeleteModal();
    setDeleteAction();
};

    </script>
@endsection