<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Lịch sử khách hàng</title>
    <style>
        .tab 
        {
            width: 100%;
            background-color: #fafafa;
            border-bottom: 1px solid #ddd;
        }

        .tab .tab-item
        {
            float: left;
            padding: 10px 20px;
        }

        .tab .tab-item.active
        {
            border-bottom: 1px solid #fff;
            background-color: white;
            margin-bottom: -1px;
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
        }

        .tab .tab-item:hover 
        {
            background-color: #fff;
            cursor: pointer;
        }

        body 
        {
            height: 95vh;
            min-height: 400px;
            padding: 0;
            margin: 0;
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            font-size: 14px;
            line-height: 1.42857143;
            color: #333;
            background-color: #fff;
        }

        .loadding
        {
            background-image:url("{{asset('/img/loading.gif')}}");
            background-position: center;
            background-repeat: no-repeat
        }
    </style>
</head>
<body>
    <div class="tab">
        <div class="tab-item active" data-href="#visit-history">
            <span>
                @lang("customer_model.visit_history")
            </span>
        </div>
        <div class="tab-item" data-href="#maintenance-history">
            <span>
                @lang("customer_model.maintenance_history")
            </span>
        </div>
        <div style="clear: both;"></div>
    </div>
    <br />

    <div id="visit-history" class="loadding" style="height: 92%">
        <iframe frameborder="0" data-i-src="{{url('/visit-customers?plate_number=' . $this->searchPlateNumber)}}" style="width: 100%;height: 100%" src="{{url('/visit-customers?plate_number=' . $this->searchPlateNumber)}}"></iframe>
    </div>

    <div id="maintenance-history" style="display: none;height: 92%">
        <iframe frameborder="0" data-i-src="{{url('/repairt-history?plate_number=' . $this->plateNumber)}}" style="width: 100%;height: 95%" src=""></iframe>
    </div>

    <script>
        window.addEventListener("load", function() {
            function onTabItemClicked() {
                if(this.getAttribute("class").indexOf("active") !== -1) {
                    return;
                }

                var activeItem = document.querySelector(".tab-item.active");
                if(activeItem != null) {
                    activeItem.setAttribute("class", "tab-item");
                    var dataHref = activeItem.getAttribute("data-href");
                    document.querySelector(dataHref).style.display = "none";
                }

                this.setAttribute("class", "tab-item active");
                var dataHref = this.getAttribute("data-href");
                document.querySelector(dataHref).style.display = "block";
                var iframe = document.querySelector(dataHref).querySelector("iframe");
                if(!iframe.getAttribute("src"))
                iframe.setAttribute('src', iframe.getAttribute("data-i-src"));
            }

            var tabItems = document.querySelectorAll(".tab .tab-item");
            for(var i = 0; i < tabItems.length; i++) {
                var el = tabItems[i];
                el.addEventListener("click", onTabItemClicked);
            }
        });
    </script>
</body>
</html>