@extends('layouts.guest-meeting')
@section('content')

    <style>
        .main-view {
            width: 800px;
            height: 600px;
            margin: 0 1rem;
            background: #444;
            border-radius: 3px;
        }

        .tp-bar {
            width: 140px;
        }

        .tp-bar .tp-item img {
            border-radius: 3px;
            opacity: 0.8;
            cursor: pointer;
        }

        .tp-bar .tp-item img:hover, .tp-bar .tp-item.active img {
            opacity: 1;
        }

        .tp-bar .tp-item.active img {
            box-shadow: 0 0 0 0.3rem #44bdad85;
        }
    </style>

    <div id="meetingComponent">

        <h5 class="bg-dark font-weight-bold text-white m-0 py-3 px-4 d-flex">
            <span>Meeting</span>
            <span class="ml-auto"><i class="fa fa-clock mr-1 text-light"></i>02:34</span>
        </h5>

        <div class="d-flex align-items-stretch mt-4 justify-content-center flex-nowrap">
            <div class="tp-bar">
                <div v-for="(guest, index) of guests"
                     class="tp-item mb-4"
                     :class="activeParticipant && activeType === 'guest' && activeParticipant.id === guest.id ? 'active' : ''"
                     v-on:click="setActiveView('guest', guest)">
                    <img :src="guest.image" alt="" class="w-100">
                    <p class="font-weight-bold text-center mt-1 mb-0">@{{ guest.name }}</p>
                </div>
                <div v-if="!guest" class="tp-item mb-4">
                    <img src="/images/person/guest.png" alt="" class="w-100">
                    <p class="font-weight-bold text-center mt-1">Invite Guest</p>
                </div>
            </div>
            <div class="main-view" style="width: 800px; min-height: 600px;">
                <div class="p-4 w-100 h-100 d-flex align-items-stretch justify-content-stretch flex-column">
                    <img :src="activeParticipant.image" class="d-block mw-100 mh-100 mx-auto">
                    <p class="font-weight-bold text-center text-white mt-2">Feed from @{{ activeParticipant.name }}</p>
                </div>
            </div>
            <div class="tp-bar">
                <div v-for="(pro, index) of pros"
                     class="tp-item mb-4"
                     :class="activeParticipant && activeType === 'pro' && activeParticipant.id === pro.id ? 'active' : ''"
                     v-on:click="setActiveView('pro', pro)">
                    <div v-if="pro.status === 'active'">
                        <img :src="pro.image" alt="" class="w-100">
                        <p class="font-weight-bold text-center mt-1 mb-0">@{{ pro.name }}</p>
                        <p class="font-weight-normal text-center">@{{ pro.type }}</p>
                    </div>
                    <div v-if="pro.status === 'connecting'">
                        <img src="/images/person/connecting.jpg" alt="" class="w-100">
                        <p class="font-weight-normal text-center mt-1 d-flex align-items-center justify-content-center">
                            <img src="/images/loading.gif" class="mr-1">
                            Connecting
                        </p>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script>
        new Vue({
            el: '#meetingComponent',
            delimiters: ['@{{', '}}'],
            data: {
                guest: false,
                activeType: false,
                activeParticipant: false,
                guests: [
                    {
                        id: 1,
                        name: 'You',
                        image: '/images/person/you.jpg',
                        status: 'active',
                    },
                ],
                pros: [
                    {
                        id: 1,
                        name: 'Nancy Drew',
                        type: 'Receptionist',
                        image: '/images/person/nancy.jpg',
                        status: 'connecting',
                    }
                ]
                // pros: []
            },
            methods: {
                setActiveView: function(_type, _participant) {
                    if(_participant.status === 'active') {
                        this.activeType = _type;
                        this.activeParticipant = _participant;
                    }
                }
            },
            mounted: function() {
                this.activeType = 'guest';
                this.activeParticipant = this.guests[0];

                var self = this;

                // after 2 seconds, connect recep
                window.setTimeout(function() {
                    self.pros[0].status = 'active';

                    // after 1 second, add 2 docs in connecting state
                    window.setTimeout(function() {
                        self.pros.push({
                            id: 2,
                            name: 'Dr. Strange',
                            type: 'Dietitian',
                            image: '/images/person/strange.0.jpg',
                            status: 'connecting',
                        });
                        self.pros.push({
                            id: 3,
                            name: 'Dr. Do Little',
                            type: 'Cardiologist',
                            image: '/images/person/dl.jpg',
                            status: 'connecting',
                        });

                        // after a second, connect strange
                        window.setTimeout(function() {
                            self.pros[1].status = 'active';

                            window.setTimeout(function() {
                                self.pros[2].status = 'active';
                            }, 1000);

                        }, 1000);

                    }, 1000);

                }, 2000);
            }
        });
    </script>

@endsection