<!--View Information-->
<!--View name : Product Detail-->
<!--Controller name : productDetailCtrl-->
<!--Controller path : www/templates/share-application-content/social-share/js/controllers.js-->
<!--State name : app.productDetail-->
<!--URL : #app/productDetail-->

<ion-view view-title="{{product.title}}">
    <!--left button on navigation bar-->
    <ion-nav-buttons side="left">
        <a ng-click="$ionicGoBack()" class="button back-button buttons button-clear header-item nav-back-btn">
            <i class="ion-android-arrow-back"></i>
        </a>
    </ion-nav-buttons> <!--end left button on navigation bar-->

    <!--product detail section-->
    <ion-content id="product-detail-content" class="fade-in">
        <md-content>
            <!--product tabs section-->
            <md-tabs md-border-bottom md-selected="0" id="product-detail-tabs" class="no-border">
                <!--product tab detail section-->
                <md-tab label="Detail">
                    <md-content id="product-detail-tab-detail">
                        <div class="toolbar-image-cover product" style="background-image: url('{{product.img}}');">
                        </div>
                        <a class="md-button md-accent md-fab fab-toolbar-medium"
                           ng-click="sharedProduct($event,product)"
                           aria-label="showListBottomSheet">
                            <i class="ion-android-share-alt"></i>
                        </a>

                        <div class="detail-form">
                            <div class="header">
                                <h1>{{product.title}}</h1>

                                <p>{{product.fullDetail}}</p>
                            </div>
                            <!--product tab detail price section-->
                            <div class="product-detail-price">
                                <div class="left">
                                    $<span class="font-sale">{{product.price | number : 2}}</span>
                                    <br/><span
                                        class="font-hot-sale"> ${{product.promotionPrice | number : 2}} </span>
                                </div>
                                <div class="right">
                                    <a class="md-raised md-warn md-button md-default-theme" ng-click="addToCart()">
                                        ADD TO CART
                                    </a>
                                </div>
                            </div><!--end product tab detail price section-->

                            <!--product tab detail review section-->
                            <div class="product-detail-review">
                                <p>Best Seller :
                                    <span>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                    </span>
                                </p>
                            </div><!--end product tab detail review section-->

                            <!--product tab detail shipping section-->
                            <div class="product-detail-shipping row">
                                <div class="col-67">
                                    <p>Item : MT098541A</p>

                                    <p>Coupon : PR34221</p>

                                    <p>Shipping : Free</p>

                                    <p>Money Back : 30 Day</p>

                                </div>
                                <div class="col-33">
                                    <p>In Stock</p>

                                    <p><i class="fa fa-cube"></i></p>
                                </div>
                            </div><!--end product tab detail shipping section-->
                            <!--product tab detail note section-->
                            <div class="product-detail-note">

                                <p>Sharing this get discount on top 20%</p>
                            </div> <!--end product tab detail note section-->
                        </div>
                    </md-content>
                </md-tab><!--end product tab detail section-->

                <!--product tab product section-->
                <md-tab label="Product">
                    <md-content class="md-padding">
                        <div id="product-detail-tab-product">
                            <div>
                                <h1>{{product.title}}</h1>

                                <p>{{product.fullDetail}}</p>
                            </div>
                            <!--pin section-->
                            <div class="pin">
                                <img ng-src="{{product.img}}"/>

                                <p>
                                    {{product.detail}}
                                </p>

                                <div class="pin-footer">
                                    $<span class="pin-footer text-left font-sale">{{product.price}}</span>
                                    <span class="pin-footer text-left font-hot-sale">${{product.promotionPrice}}</span>
                                </div>
                                <a class="md-raised md-warn md-button md-default-theme"
                                   ng-click="addToCart()">
                                    ADD TO CART
                                </a>
                            </div>  <!--end pin section-->

                        </div>
                    </md-content>
                </md-tab> <!--product tab product section-->
            </md-tabs><!--end product tabs section-->
        </md-content>
    </ion-content>
    <!--end product detail section-->

    <!--loading progress-->
    <div id="product-detail-loading-progress" class="loading-progress fade-in">
        <ion-spinner ng-if="!isAndroid" class="progress-circular"></ion-spinner>
        <md-progress-circular ng-if="isAndroid" md-mode="indeterminate"></md-progress-circular>
    </div> <!--end loading progress-->

    <!--canvas for save image to local devise-->
    <canvas id="imgCanvas" class="display-none"></canvas>

    <!--angular template section-->
    <script type="text/ng-template" id="bottom-sheet-shared.html">
        <md-bottom-sheet class="md-grid">
            <!--list section-->
            <md-list id="bottom-sheet-grid-md-list">
                <md-list-item>
                    <a class="md-grid-item-content" ng-click="sharedFacebook()">
                        <md-icon md-svg-src="facebook"></md-icon>
                        <div class="md-grid-text"> Facebook</div>
                    </a>
                </md-list-item>
                <md-list-item>
                    <a class="md-grid-item-content" ng-click="sharedTwitter()">
                        <md-icon md-svg-src="twitter"></md-icon>
                        <div class="md-grid-text"> Twitter</div>
                    </a>
                </md-list-item>
                <md-list-item>
                    <a class="md-grid-item-content" ng-click="sharedMail()">
                        <md-icon md-svg-src="mail"></md-icon>
                        <div class="md-grid-text"> Mail</div>
                    </a>
                </md-list-item>
                <md-list-item>
                    <a class="md-grid-item-content" ng-click="saveImage()">
                        <i class="ion-android-image"></i>

                        <div class="md-grid-text"> Save Image</div>
                    </a>
                </md-list-item>
                <md-list-item>
                    <a class="md-grid-item-content" ng-click="sharedMore()">
                        <md-icon md-svg-src="share-arrow"></md-icon>
                        <div class="md-grid-text"> More</div>
                    </a>
                </md-list-item>
            </md-list> <!--end list section-->
        </md-bottom-sheet>
    </script>
    <!--end angular template section-->
</ion-view>