<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta content="Insura is an online Insurance Agency Management System" name="description">
    <meta content="Simcy Creative" name="author">
    <meta content="<?php echo e(csrf_token()); ?>" name="csrf-token">
    <title><?php echo e(trans('inbox.title')); ?> - <?php echo e(config('insura.name')); ?> | Insurance Agency Management System</title>
    <base href="<?php echo e(env('BASE_HREF', '')); ?>" />
    <!-- Favicon -->
    <link href="<?php echo e(asset('favicon.ico')); ?>" rel="icon" sizes="16x16" type="image/x-icon">
    <link href="<?php echo e(asset('uploads3/images/' . config('insura.favicon'))); ?>" rel="icon" type="<?php echo e(mime_content_type(storage_path() . '/app/images/' . config('insura.favicon'))); ?>">
    <!-- Font and Icon Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans:300,400,500,700" rel="stylesheet">
    <link href="<?php echo e(asset('assets/fonts/ionicons/css/ionicons.min.css')); ?>" rel="stylesheet">
    <!-- Core CSS -->
    <link href="<?php echo e(asset('assets/libs/bootstrap/bootstrap.min.css')); ?>" rel="stylesheet">
    <link href="<?php echo e(asset('assets/libs/semantic-UI/semantic.min.css')); ?>" rel="stylesheet">
    <!-- Page Specific CSS -->
    <link href="<?php echo e(asset('assets/libs/scrollbars/jquery.scrollbar.css')); ?>" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="<?php echo e(asset('assets/css/style.css')); ?>" rel="stylesheet">
    <link href="<?php echo e(asset('assets/css/chat.css')); ?>" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

    <?php echo $__env->make('global.header', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
    
    <?php echo $__env->make($user->role . '.sidebar', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>

    <!-- Start message list -->
    <div class="inbox-left">
        <div class="top">
            <div class="ui fluid selection search dropdown">
                <input type="hidden" id="contact" value="X"/>
                <i class="dropdown icon"></i>
                <div class="default text"> <i class="chat icon"></i> <?php echo e(trans('inbox.input.label.new_chat')); ?> </div>
                <div class="menu">
                    <div class="item active disabled selected" data-value="X">
                        <i class="chat icon"></i> <?php echo e(trans('inbox.input.placeholder.new_chat')); ?>

                    </div>
                    <?php $__empty_1 = true; foreach($contacts->keyBy('id')->except($chatees->all()) as $contact): $__empty_1 = false; ?>
                    <div class="item" data-value="<?php echo e($contact->id); ?>">
                        <img class="ui mini avatar image" src="<?php echo e(asset('uploads3/images/users/' . $contact->profile_image_filename)); ?>">
                        <?php echo e($contact->fullName); ?>

                    </div>
                    <?php endforeach; if ($__empty_1): ?>
                    <div class="item disabled" data-value="">
                        <i class="ion-alert-circled icon"></i> <?php echo e(trans('inbox.input.option.empty.new_chat')); ?>

                    </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
        <div class="people-list">
            <ul class="people">
                <li class="person" data-person="X">
                    <i class="chat icon"></i>
                    <span class="name">New Chat</span>
                    <span class="preview text-ellipsis"><?php echo e(trans('inbox.bubble.new')); ?></span>
                </li>
                <?php foreach($contacts as $contact): ?>
                <li class="person" data-person="<?php echo e($contact->id); ?>"<?php echo in_array($contact->id, $chatees->all()) ? '' : ' style="display:none;"'; ?>>
                    <img src="<?php echo e(asset('uploads3/images/users/' . $contact->profile_image_filename)); ?>" alt="<?php echo e($contact->first_name); ?>'s Profile Photo" />
                    <span class="name">
                        <?php echo e($contact->fullName); ?> 
                        <?php if($contact->unreadChats->count() > 0): ?>
                        <span class="ui tiny green circular label"><?php echo e($contact->unreadChats->count()); ?></span>
                        <?php endif; ?>
                    </span>
                    <span class="time"><?php echo e($contact->chats->count() > 0 ? $contact->chats->last()->peopleListTime : ''); ?></span>
                    <span class="preview text-ellipsis" data-message="<?php echo e(isset($contact->chats->last()->id) ? $contact->chats->last()->id : ''); ?>"><?php echo e(isset($contact->chats->last()->message) ? $contact->chats->last()->message : ''); ?></span>
                    <span class="status" data-message="<?php echo e(isset($contact->chats->last()->id) ? $contact->chats->last()->id : ''); ?>">
                        <?php if($contact->chats->count() > 0 && $contact->chats->last()->class === 'me'): ?>
                        <i class="ion-android-done<?php echo e(array(
                            'received'  => '-all',
                            'seen'      => '-all message-seen',
                            'sent'      => ''
                        )[$contact->chats->last()->status]); ?> icon"></i>
                        <?php endif; ?>
                    </span>
                </li>
                <?php endforeach; ?>
            </ul>
        </div>
    </div>
    <!-- End message list -->

    <!-- Start inbox view -->
    <div class="inbox-right">
        <div class="top">
        <button class="ui left floated mini button inbox-back"> <?php echo e(trans('inbox.button.back')); ?> </button>
        <span><?php echo e(trans('inbox.label.top.to')); ?>: <span class="name"> <?php echo e(trans('inbox.label.top.you')); ?> </span></span>
        </div>
        <div class="chat active-chat" data-chat="X">
            <div class="conversation-start">
                <span> <?php echo e(trans('inbox.label.start')); ?> </span>
            </div>
            <div class="bubble you">
                <?php echo e(trans('inbox.bubble.new')); ?>

                <span><?php echo e(date('Y-m-d H:i:s')); ?></span>
            </div>
        </div>
        <?php foreach($contacts as $contact): ?>
        <div class="chat" data-chat="<?php echo e($contact->id); ?>">
            <?php foreach($contact->chats as $key => $chat): ?>
            <?php if($key === 0 || $contact->chats->all()[$key - 1]->inboxTime != $chat->inboxTime): ?>
            <div class="conversation-start">
                <span><?php echo e($chat->inboxTime); ?></span>
            </div>
            <?php endif; ?>
            <div class="bubble <?php echo e($chat->class); ?>" data-message="<?php echo e($chat->id); ?>">
                <?php echo e($chat->message); ?>

                <?php if($chat->class === 'me'): ?>
                <i class="ion-android-done<?php echo e(array(
                    'received'  => '-all grey',
                    'seen'      => '-all blue',
                    'sent'      => ' grey'
                )[$chat->status]); ?> icon"></i>
                <?php endif; ?>
                <span><?php echo e($chat->created_at); ?></span>
            </div>
            <?php endforeach; ?>
            <?php if($contact->chats->count() === 0 || $contact->chats->last()->inboxTime !== trans('inbox.label.time.today')): ?>
            <div class="conversation-start">
                <span><?php echo e(trans('inbox.label.time.today')); ?></span>
            </div>
            <?php endif; ?>
        </div>
        <?php endforeach; ?>
        <form action="<?php echo e(action('ChatController@send')); ?>" class="write">
            <input type="hidden" name="recipient" value=""/>
            <input type="text" disabled name="message" placeholder="<?php echo e(trans('inbox.input.placeholder.message')); ?>" required/>
            <button class="circular right floated ui icon button transparent" type="submit"> <i class="icon send"></i></button>
        </form>
    </div>
    <!-- End inbox view -->

    <!-- Core Scripts -->
    <script src="<?php echo e(asset('assets/js/jquery-3.2.1.min.js')); ?>" type="text/javascript"></script> 
    <script src="<?php echo e(asset('assets/libs/semantic-UI/semantic.min.js')); ?>" type="text/javascript"></script>
    <script src="<?php echo e(asset('assets/js/insura.js')); ?>" type="text/javascript"></script>
    <!-- Page Specific Scripts -->
    <script src="<?php echo e(asset('assets/libs/scrollbars/jquery.scrollbar.min.js')); ?>" type="text/javascript"></script>
    <script type="text/javascript">
        (function($insura, $) {
            $insura.vars = {
                lastChatee: '<?php echo e($chatees ->last()); ?>'
            };
            $(document).ready(function() {
                $insura.helpers.initDropdown('div.dropdown');
                $insura.helpers.initScrollbar('div.scrollbar');
            });
        })(window.insura, window.jQuery);
    </script>
    <!-- Custom Scripts -->
    <script src="<?php echo e(asset('assets/js/app.js')); ?>" type="text/javascript"></script>
    <script src="<?php echo e(asset('assets/js/inbox.js')); ?>" type="text/javascript"></script>
</body>
</html>