<?php
$view->extend('MarketZodacoBundle::base.html.php');

$view['slots']->set('title', $view['translator']->trans("Details") . " " . $view['translator']->trans("Item") . " : " . $product->getTitle() . " | " . $view['translator']->trans("Zodaco Market")); //." - ".$product->getShortDetails());
$url = $view['router']->generate('view_products', array('id' => $product->getId(), 'title' => Market\ZodacoBundle\System::_reString($product->getTitle())), true);
?>
<style>
    .captionOrange, .captionBlack
    {
        color: #fff;
        font-size: 20px;
        line-height: 30px;
        text-align: center;
        border-radius: 4px;
    }
    .captionOrange
    {
        background: #EB5100;
        background-color: rgba(235, 81, 0, 0.6);
    }
    .captionBlack
    {
        font-size:16px;
        background: #000;
        background-color: rgba(0, 0, 0, 0.4);
    }
    a.captionOrange, A.captionOrange:active, A.captionOrange:visited
    {
        color: #ffffff;
        text-decoration: none;
    }
    a.captionOrange:hover
    {
        color: #eb5100;
        text-decoration: underline;
        background-color: #eeeeee;
        background-color: rgba(238, 238, 238, 0.7);
    }
    .bricon
    {
        background: url(<?php echo $view->escape('/assetic/images/slider/browser-icons.png'); ?>);
    }
</style>
<script src="<?php echo $view->escape('/assetic/js/jssor.js'); ?>"></script>
<script src="<?php echo $view->escape('/assetic/js/jssor.slider.js'); ?>"></script>

<script>
    jQuery(document).ready(function($) {
        var options = {
            $AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
            $AutoPlaySteps: 1, //[Optional] Steps to go for each navigation request (this options applys only when slideshow disabled), the default value is 1
            $AutoPlayInterval: 4000, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
            $PauseOnHover: 1, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1

            $ArrowKeyNavigation: true, //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
            $SlideDuration: 500, //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
            $MinDragOffsetToSlide: 20, //[Optional] Minimum drag offset to trigger slide , default value is 20
            //$SlideWidth: 600,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
            //$SlideHeight: 300,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container
            $SlideSpacing: 0, //[Optional] Space between each slide in pixels, default value is 0
            $DisplayPieces: 1, //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
            $ParkingPosition: 0, //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
            $UISearchMode: 1, //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
            $PlayOrientation: 1, //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, 5 horizental reverse, 6 vertical reverse, default value is 1
            $DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)

            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
                $ChanceToShow: 1, //[Required] 0 Never, 1 Mouse Over, 2 Always
                $AutoCenter: 2, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1
            },
            $ThumbnailNavigatorOptions: {
                $Class: $JssorThumbnailNavigator$, //[Required] Class to create thumbnail navigator instance
                $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always

                $ActionMode: 1, //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
                $AutoCenter: 3, //[Optional] Auto center thumbnail items in the thumbnail navigator container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 3
                $Lanes: 1, //[Optional] Specify lanes to arrange thumbnails, default value is 1
                $SpacingX: 3, //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
                $SpacingY: 3, //[Optional] Vertical space between each thumbnail in pixel, default value is 0
                $DisplayPieces: 9, //[Optional] Number of pieces to display, default value is 1
                $ParkingPosition: 260, //[Optional] The offset position to park thumbnail
                $Orientation: 1, //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1
                $DisableDrag: false                            //[Optional] Disable drag or not, default value is false
            }
        };

        var jssor_slider2 = new $JssorSlider$("slider2_container", options);
        //responsive code begin
        //you can remove responsive code if you don't want the slider scales while window resizes
        function ScaleSlider() {
//            alert($(".container").width());
            var parentWidth = jssor_slider2.$Elmt.parentNode.clientWidth - 30;
            if (parentWidth)
                jssor_slider2.$ScaleWidth(Math.min(parentWidth, 640));
            else
                window.setTimeout(ScaleSlider, 30);
        }
        ScaleSlider();
        $(window).bind("load", ScaleSlider);
        $(window).bind("resize", ScaleSlider);
        $(window).bind("orientationchange", ScaleSlider);
        //responsive code end
    });
</script>

<div class="col-sm-12 col-lg-12 main" id="bggg" style="color: #FFF;height: 160px; background: #A93C3C;">
    <div class="container" style="color: #FFF;padding: 0px;margin-top: 20px;position: relative;z-index: 1;">
        <div class="float-left">
            <a class="item-image" href="<?php echo $url; ?>"><img src="<?php echo $view->escape('/uploads/items/'); ?><?php echo $product->getIcon(); ?>" height="80" width="80" alt="<?php echo $product->getTitle(); ?>"></a>
        </div>
        <div class="float-left item-header-info">
            <h1><?php echo $product->getTitle(); ?></h1>
            <span class="desc-short"><?php echo $product->getShortDetails(); ?></span>
        </div>
        <div class="float-right item-header-specs">
            <div class="row">
                <div class="left-col"><i class="fa fa-calendar"></i> <?php echo $view['translator']->trans("Release Date"); ?>:</div><div class="right-col"><?php echo $product->getCreatedAt()->format("d/m/Y"); ?></div>
            </div>
            <div class="row">
                <div class="left-col"><i class="fa fa-folder"></i> <?php echo $view['translator']->trans("Category"); ?>:</div>
                <div class="right-col">
                    <a href="<?php echo $view['router']->generate('view_categories', array('id' => $product->getCategories()->getId(), 'title' => Market\ZodacoBundle\System::_reString($product->getCategories()->getShortTitle())), true); ?>" title="<?php echo $product->getCategories()->getShortTitle(); ?>"><?php echo $product->getCategories()->getShortTitle(); ?></a>
                </div>
            </div>
        </div>
        <div class="col-lg-12 no-padding">
            <div class="col-lg-12 no-padding" style="position: absolute;
                 width: 100%;
                 display: inline;
                 top: 25px;">
                <?php /*<div class="btn-group" style="width: 100%;">
                    <a class="btn btn-default disabled" style="margin-left: 1px;width: 11%;" href=""><?php echo $view['translator']->trans("Details"); ?></a>
                    <a class="btn btn-default" style="margin-left: 1px;width: 11%;" href="<?php echo $view['router']->generate('comment_products', array('id' => $product->getId(), 'title' => Market\ZodacoBundle\System::_reString($product->getTitle())), true); ?>"><?php echo $view['translator']->trans("Comments"); ?></a>
                </div>
                 * 
                 */ ?>
            </div>
        </div>
    </div>
</div>
<div class="col-sm-12 col-lg-12 main" id="mainContents">
    <div class="container">
        <div class="row">
            <div class="col-lg-7 no-padding">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div id="slider2_container" style="margin: auto; position: relative; top: 0px; left: 0px; width: 640px; height: 320px; overflow: hidden; ">
                            <!-- Loading Screen -->
                            <div u="loading" style="position: absolute; top: 0px; left: 0px;">
                                <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
                                     background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
                                </div>
                                <div style="position: absolute; display: block; background: url(<?php echo $view->escape('/assetic/images/slider/loading.gif'); ?>) no-repeat center center;
                                     top: 0px; left: 0px;width: 100%;height:100%;">
                                </div>
                            </div>
                            <!-- Slides Container -->
                            <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 640px; height: 320px; overflow: hidden;">
                                <div>
                                    <img u="image" src="<?php echo $view->escape('/uploads/items/'); ?><?php echo $product->getPreview(); ?>" />
                                    <img u="thumb" src="<?php echo $view->escape('/uploads/items/'); ?><?php echo $product->getPreview(); ?>" />
                                </div>
                            </div>
                            <!-- Arrow Navigator Skin Begin -->
                            <style>
                                .jssora02l, .jssora02r, .jssora02ldn, .jssora02rdn
                                {
                                    position: absolute;
                                    cursor: pointer;
                                    display: block;
                                    background: url(<?php echo $view->escape('/assetic/images/slider/a02.png'); ?>) no-repeat;
                                    overflow:hidden;
                                }
                                .jssora02l { background-position: -3px -33px; }
                                .jssora02r { background-position: -63px -33px; }
                                .jssora02l:hover { background-position: -123px -33px; }
                                .jssora02r:hover { background-position: -183px -33px; }
                                .jssora02ldn { background-position: -243px -33px; }
                                .jssora02rdn { background-position: -303px -33px; }
                            </style>
                            <!-- Arrow Left -->
                            <span u="arrowleft" class="jssora02l" style="width: 55px; height: 55px; top: 123px; left: 8px;">
                            </span>
                            <!-- Arrow Right -->
                            <span u="arrowright" class="jssora02r" style="width: 55px; height: 55px; top: 123px; right: 8px">
                            </span>
                            <!-- Arrow Navigator Skin End -->

                            <!-- ThumbnailNavigator Skin Begin -->
                            <div u="thumbnavigator" class="jssort03" style="position: absolute; width: 640px; height: 60px; left:0px; bottom: 0px;">
                                <div style=" background-color: #000; filter:alpha(opacity=30); opacity:.3; width: 100%; height:100%;"></div>

                                <!-- Thumbnail Item Skin Begin -->
                                <style>
                                    .jssort03 .w, .jssort03 .pav:hover .w
                                    {
                                        position: absolute;
                                        width: 60px;
                                        height: 30px;
                                        border: white 1px dashed;
                                    }
                                    * html .jssort03 .w
                                    {
                                        width /**/: 62px;
                                        height /**/: 32px;
                                    }
                                    .jssort03 .pdn .w, .jssort03 .pav .w { border-style: solid; }
                                    .jssort03 .c
                                    {
                                        width: 62px;
                                        height: 32px;
                                        filter:  alpha(opacity=45);
                                        opacity: .45;

                                        transition: opacity .6s;
                                        -moz-transition: opacity .6s;
                                        -webkit-transition: opacity .6s;
                                        -o-transition: opacity .6s;
                                    }
                                    .jssort03 .p:hover .c, .jssort03 .pav .c
                                    {
                                        filter:  alpha(opacity=0);
                                        opacity: 0;
                                    }
                                    .jssort03 .p:hover .c
                                    {
                                        transition: none;
                                        -moz-transition: none;
                                        -webkit-transition: none;
                                        -o-transition: none;
                                    }
                                </style>
                                <div u="slides" style="cursor: move;">
                                    <div u="prototype" class="p" style="position: absolute; width: 62px; height: 32px; top: 0; left: 0;">
                                        <div class=w><div u="thumbnailtemplate" style=" width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;"></div></div>
                                        <div class=c style="position: absolute; background-color: #000; top: 0; left: 0">
                                        </div>
                                    </div>
                                </div>
                                <!-- Thumbnail Item Skin End -->
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="btn-group" style="width: 100%;">
                            <div class="btn btn-default" style="width: 27%;">Share</div>
                            <a class="btn btn-default" style="margin-left: 1px;width: 18%;" href="https://www.facebook.com/sharer/sharer.php?display=popup&amp;u=<?php echo urlencode($url); ?>%3Futm_source%3Dsharefb"><i class="fa fa-facebook"></i></a>
                            <a class="btn btn-default" style="margin-left: 1px;width: 18%;" href="https://plus.google.com/share?url=<?php echo urlencode($url); ?>%3Futm_source%3Dsharegp"><i class="fa fa-google-plus"></i></a>
                            <a class="btn btn-default" style="margin-left: 1px;width: 18%;" href="https://twitter.com/intent/tweet?text=<?php echo urlencode($view['translator']->trans("Checkout") . " " . $product->getTitle()); ?>&amp;url=<?php echo urlencode($url); ?>%3Futm_source%3Dsharetw"><i class="fa fa-twitter"></i></a>
                            <a class="btn btn-default" style="margin-left: 1px;width: 18%;" href="http://pinterest.com/pin/create/button?description=<?php echo urlencode($view['translator']->trans("Checkout") . " " . $product->getTitle()); ?>&amp;media=<?php echo urlencode($view['router']->generate('_homepage', array(), true) . $view->escape('uploads/items/') . $product->getIcon()); ?>&amp;url=<?php echo urlencode($url); ?>%3Futm_source%3Dsharepi"><i class="fa fa-pinterest"></i></a>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-body">
                        <?php echo $product->getDetails(); ?>
                    </div>
                </div>
            </div>
            <div class="col-lg-5 no-padding">
                <div class="col-lg-12">
                    <?php if ($login && $login->getId() == $product->getUsers()->getId()) { ?>
                        <div class="alert bg-warning" role="alert">
                            <ul style="list-style: none;padding-left: 0px;">
                                <li><i class="fa fa-flag"></i> <?php echo $view['translator']->trans("This is one of your items."); ?></li>
                            </ul>
                        </div>
                    <?php } ?>
                    <form role="form" method="POST" action="">
                        <fieldset>
                            <div class="panel panel-default">
                                <div class="panel-body detailProducts"> 
                                    <select class="form-control" name="licensetype" id="licensetype" style="width: 50%;float: left;" onchange="changelicense()">
                                        <?php if ($product->getPrice() > 0) { ?>
                                            <option value="0"><?php echo $view['translator']->trans("Regular license"); ?></option>
                                            <?php
                                        }
                                        ?>
                                        <?php if ($product->getPricePlus() > 0) { ?>
                                            <option value="1"><?php echo $view['translator']->trans("Extended license"); ?></option>
                                            <?php
                                        }
                                        ?>
                                    </select>
                                    <p id="priceLicense"><?php echo $view['translator']->trans("$"); ?><?php echo number_format($product->getPrice(), 2); ?></p>
                                    <img src="<?php echo $view->escape('/assetic/images/payment-methods.png'); ?>" style="width: 100%; min-height: 100%;padding-top: 23px;"/>
                                    <button type="submit" class="btn btn-danger" style="width: 100%;height: 60px;font-size: 24px;"><?php echo $view['translator']->trans("Buy Now"); ?></button>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                    <div class="panel panel-default">
                        <div class="panel-body detailProducts"> 
                            <div class="avatar" style="width: 80px; height: 80px; float: left;padding: 0px;">
                                <a href="<?php echo $view['router']->generate('portfolio', array("title" => $product->getUsers()->getUsername()), true); ?>"><img src="<?php echo $view->escape('/assetic/images/default-user.jpg'); ?>" style="min-height: 100%;"/></a>
                            </div> 
                            <div class="nameUser" style="float: left; margin-left: 10px;font-size: 18px;">
                                <a href="<?php echo $view['router']->generate('portfolio', array("title" => $product->getUsers()->getUsername()), true); ?>" style="display: block;"><?php echo $product->getUsers()->getUsername(); ?></a>
                                <a href="<?php echo $view['router']->generate('portfolio', array("title" => $product->getUsers()->getUsername()), true); ?>" class="btn btn-default" style="display: block; margin-top: 10px; border: 1px solid #dddddd; background: #f9f9f9 !important;"><?php echo $view['translator']->trans("View Portfolio"); ?></a>
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-body detailProducts"> 
                            <div class="total_sale">
                                <i class="fa fa-shopping-cart"></i> <span><?php echo number_format($product->getTotalSale()); ?></span> <?php echo $view['translator']->trans("Sales"); ?>
                            </div>
                        </div>
                    </div>
                    <div style="font-size: 13px;color: #fff; margin-bottom: 5px;"><a style="color: red; text-decoration: underline;" href="<?php echo $view['router']->generate('support', array(), true); ?>"><?php echo $view['translator']->trans("Report this item") ?></a></div>
                        <?php /*
                          <div class="panel panel-default">
                          <div class="panel-body detailProducts">
                          <div class="total_comment">
                          <i class="fa fa-comment"></i> <span><?php echo number_format($product->getTotalComment()); ?></span> <?php echo $view['translator']->trans("Comments"); ?>
                          </div>
                          </div>
                          </div>
                         */ ?>
                </div>
            </div>
        </div><!--/.row-->
    </div>
</div>
<script type="text/javascript">
    function changelicense() {
        var licensetype = document.getElementById("licensetype").value;
        if (licensetype == 0) {
            $("#priceLicense").html('<?php echo $view['translator']->trans("$"); ?><?php echo number_format($product->getPrice(), 2); ?>');
        }
        if (licensetype == 1) {
            $("#priceLicense").html('<?php echo $view['translator']->trans("$"); ?><?php echo number_format($product->getPricePlus(), 2); ?>');
        }
    }
</script>