<?php
echo $this->render("header.phtml");
echo $this->headLink();
echo $this->headScript();
$AgencySysId = Travel_Model_AgencyAuth::getIdentity()->AgencySysId;
$ExtensionNo = Travel_Model_AgencyAuth::getIdentity()->ExtensionNo;
?>
<style>
    /* The Modal (background) */
    .modalleftside {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        /* background-color: rgba(0,0,0,0.4); */
        background-color: rgba(0,0,0,0); /* Black w/ opacity */
        -webkit-animation-name: fadeIn; /* Fade in the background */
        -webkit-animation-duration: 0.4s;
        animation-name: fadeIn;
        animation-duration: 0.4s
    }

    /* Modal Content */
    .modalleftside .modal-content {
        position: fixed;
        bottom: 1.5rem;
        left:1.4rem;
        background-color: #fff;
        width: 320px;
        -webkit-animation-name: slideIn;
        -webkit-animation-duration: 0.4s;
        animation-name: slideIn;
        animation-duration: 0.4s;
        box-shadow: 0px 0px 5px #dfdede;
        padding: 0.8rem 0.5rem;
        border-radius:0px;
        -moz-border-radius:0px;
        -webkit-border-radius:0px;
        -o-border-radius:0px;
    }

    /* The Close Button */
    .modalleftside .close {
        color: #a4afb7;
        float: right;
        font-size: 28px;
        font-weight: bold;
        filter: alpha(opacity=100);
        opacity: 1;
        position: absolute;
        right: 5px;
        top: -5px;
    }

    .modalleftside .close:hover,
    .modalleftside.close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    .modalleftside .modal-header {
        padding: 2px 6px;
        background-color: #5cb85c;
        color: white;
    }

    .modalleftside .modal-body {padding: 2px 8px;}

    .modalleftside .modal-footer {
        padding: 2px 16px;
        background-color: #5cb85c;
        color: white;
    }

    /* Add Animation */
    @-webkit-keyframes slideIn {
        from {bottom: -300px; opacity: 0}
        to {bottom: 0; opacity: 1}
    }
    @keyframes slideIn {
        from {bottom: -300px; opacity: 0}
        to {bottom: 0; opacity: 1}
    }
    @-webkit-keyframes fadeIn {
        from {opacity: 0}
        to {opacity: 1}
    }
    @keyframes fadeIn {
        from {opacity: 0}
        to {opacity: 1}
    }
    .mail_boxpopup { width:100%;}
    .mail_boxpopup .icn {
        color: #fff;
        font-weight: bold;
        height: 40px;
        width: 40px;
        line-height: 30px;
        display: block;
        border-radius: 10px !important;
        -moz-border-radius: 10px !important;
        -webkit-border-radius: 10px !important;
        margin-right: 10px;  font-size: 24px;

    }
    .btn.btn-round {
        border-radius: 18px;
        -moz-border-radius: 18px;
        -webkit-border-radius: 18px;
    }
    .mail_boxpopup span {
        color: #000;
        font-size: 16px;
        font-weight: bold;
    }
    .ls-red-btn {
        background-color: #5cb85c;
        color: white;
        text-align: center;
        -webkit-transition: all 400ms linear;
        -moz-transition: all 400ms linear;
        -o-transition: all 400ms linear;
        -ms-transition: all 400ms linear;
        transition: all 400ms linear;
    }
    .mail_boxpopupfollowup {
        background: #FF4906;
        float: left;
        color: #fff !important;
        border-radius: 4px;
        text-decoration: none !important;
        padding: 10px 5px;
        font-size: 11px;
        margin: 5px;
        width: 100px;
        text-align: center;
        border:1px solid #FF4906;
    }
    .mail_boxpopupcancel {
        background: #fff;
        border:1px solid #FF4906;
        float: left;
        color: #FF4906 !important;
        border-radius: 4px;
        text-decoration: none !important;
        padding: 10px 5px;
        font-size: 11px;
        margin: 5px;
        width: 100px;
        text-align: center;
    }
    .mail_boxpopupfollowup:hover, .mail_boxpopupfollowup:focus, .mail_boxpopupfollowup:active, .mail_boxpopupfollowup.active, .open>.dropdown-toggle.mail_boxpopupfollowup {
        color: #fff;
        background-color: #0076CA;
        border-color: #0076CA;
    }
    @media(max-width:992px){
        .modalleftside .modal-content {
            position: fixed;
            bottom: 1.0rem;
            left: 1.0rem;
            background-color: #fff;
            width: 299px;
            -webkit-animation-name: slideIn;
            -webkit-animation-duration: 0.4s;
            animation-name: slideIn;
            animation-duration: 0.4s box-shadow 0px 0px 7px #aaaaaa;
            padding: 0.8rem 0.5rem;
        }
    }
</style>
<body class="">
    <?php echo $this->render("top-navigation.phtml"); ?>
    <section id="main-container">
        <?php
        $leftNav = 'left-navigation-role.phtml';
        echo $this->render($leftNav);
        ?>
        <?php echo $this->layout()->content; ?>
    </section>
    <?php echo $this->render("footer.phtml"); ?>
    <?php echo $this->render("profiler.phtml"); ?>
    <!--Start of Tawk.to Script-->
<!--    <script type="text/javascript">
        var Tawk_API = Tawk_API || {}, Tawk_LoadStart = new Date();
        (function () {
            var s1 = document.createElement("script"), s0 = document.getElementsByTagName("script")[0];
            s1.async = true;
            s1.src = 'https://embed.tawk.to/5cb70b82d6e05b735b4309a3/default';
            s1.charset = 'UTF-8';
            s1.setAttribute('crossorigin', '*');
            s0.parentNode.insertBefore(s1, s0);
        })();
    </script>-->
    <!--End of Tawk.to Script-->
    <script src="https://js.pusher.com/7.0/pusher.min.js"></script>
    <?php if ($AgencySysId == 4913) { ?>
        <script>
            var pusher = new Pusher('99f31b09bc0705e7c87b', {
                cluster: 'ap2',
                forceTLS: true
            });
            var channel = pusher.subscribe('my-channel');
        </script>
    <?php } ?>
    <script>
        var AgencySysIdJs = '<?php echo $AgencySysId; ?>';
        var ExtensionNo = '<?php echo $ExtensionNo; ?>';
        channel.bind('my-event', function (data) {
            if (data.extension == ExtensionNo) {
                $('#myModal_leftsidepopup').show();
                if (data.IsCustomer == true) {
                    var CustomerName = data.CustomerName;
                    var CustomerId = data.CustomerId;
                    $('.customerNameOrPhone').html(CustomerName);
                    $('#noteViewProfile').attr('href', '/customer/customer-profile-desc/id/' + btoa(CustomerId));
                    $('.noteCancelProfile, .noteViewProfile').show();
                    $('.noteAddCustomer').hide();
                    $('#noteMobileNumber').val(MobileNumber);
                } else {
                    var MobileNumber = data.MobileNumber;
                    $('.customerNameOrPhone').html(MobileNumber);
                    $('#noteMobileNumber').val(MobileNumber);
                    $('.noteAddCustomer').show();
                    $('.noteCancelProfile, .noteViewProfile').hide();
                }

            }
        });
    </script>
    <div id="myModal_leftsidepopup" class="modalleftside">
        <div class="modal-content">
            <div class="modal-body">
                <span class="close" id="popupclose_left" onclick="closeNotePopup()">&times;</span>
                <div class="mail_boxpopup">
                    <div class="pull-left">
                        <span class="btn ls-red-btn btn-round icn"><i class="fa fa fa-phone"></i></span>
                    </div>
                    <div class="pull-left text-left">
                        <span class="customerNameOrPhone"> </span> is calling...<br>
                    </div>
                    <div class="pull-left">
                        <a href="javascript://" class="mail_boxpopupcancel noteCancelProfile" id="noteCancelProfile" style="display:none;" onclick="closeNotePopup()">Cancel</a>
                        <a href="javascript://" class="mail_boxpopupfollowup noteViewProfile" id="noteViewProfile" style="display:none;">View Profile</a>
                        <a href="javascript://" onclick="redirectAddCustomer()" class="mail_boxpopupfollowup noteAddCustomer" id="noteAddCustomer" style="display:none;">Add Customer</a>
                        <input type="hidden" name="noteMobileNumber" id="noteMobileNumber" value="">
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <script>
        var modal = document.getElementById("myModal_leftsidepopup");
        var btn = document.getElementById("noteCancelProfile");
        var btn2 = document.getElementById("popupclose_left");
        var span = document.getElementsByClassName("close")[0];
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
        function closeNotePopup() {
            modal.style.display = "none";
        }
        function redirectAddCustomer() {
            var noteMobileNumber = $('#noteMobileNumber').val();
            localStorage.setItem("notificationAddCustomer", 1);
            localStorage.setItem("notificationMobileNumber", noteMobileNumber);
            window.location.href = '/dashboard/agency';
        }
    </script>