@extend('layout.tpl.php')

@block('content')
<style>
.lifted-corners {
    position: relative;
    width: 460px;
    height: 460px;
    background-color: #fff;
    border: 1px solid #ccc;
    float: left;
    margin-left: 0px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.lifted-corners:before,
.lifted-corners:after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 80%;
    height: 80%;
    max-width: 160px;
    max-height: 60px;
    -webkit-box-shadow:0 15px 7px rgba(0, 0, 0, 0.75);
    -moz-box-shadow:0 15px 7px rgba(0, 0, 0, 0.75);
    box-shadow:0 15px 7px rgba(0, 0, 0, 0.75);
    bottom: 20px;
}

.lifted-corners:before {
    left: 10px;
    -webkit-transform:rotate(-5deg);
    -moz-transform:rotate(-5deg);
    -ms-transform:rotate(-5deg);
    -o-transform:rotate(-5deg);
    transform:rotate(-5deg);
}

.lifted-corners:after {
    right: 10px;
    -webkit-transform:rotate(5deg);
    -moz-transform:rotate(5deg);
    -ms-transform:rotate(5deg);
    -o-transform:rotate(5deg);
    transform:rotate(5deg);
}

</style>

<h3>Edit product</h3>
<hr /><br />

<form role="form" ng-controller="ProductController">
    <div class="form-group">
        <div class="row">
            <div class="col-sm-8">
                <label>Product name</label>
                <input type="product" class="form-control" ng-model="form.name" name="name">
            </div>  
            <div class="col-sm-4">
                <label>Price</label>
                <div class="input-group">
                    <input type="text" class="form-control" ng-model="form.price" name="price">
                    <span class="input-group-addon"></span>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="row">
            <div class="col-sm-8">
                <label>Category</label>
                <select class="form-control" name="category" ng-model="form.category">
                                    </select>
            </div>  
            <div class="col-sm-4">
                <label>Category position</label>
                <input type="text" class="form-control" ng-model="form.position">
            </div>
        </div>
    </div>  
<div class="form-group">
    <label>Description</label>
    <textarea class="form-control" rows="8" ng-model="form.description"></textarea>
</div>

<hr />
<div class="panel panel-default">
  <div class="panel-heading">Orientations</div>
  <div class="panel-body">

    <div class="row">

        <div class="col-md-6" ng-repeat="orientation in form.orientations">
            <div class="form-group">
                <div class="row">
                    <div class="col-md-10">
                        <input type="text" class="form-control" ng-model="orientation.name">
                    </div>
                    <div class="col-md-2">
                        <a href=""  class="remove-field" ng-click="removeOrientation(orientation)"><i class="fa fa-times"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <a href="" class="btn btn-primary btn-sm" ng-click="addOrientation()"><i class="fa fa-plus"></i> Add new orientation</a>
        </div>
    </div>
    


</div>
</div>


<hr />
<div class="panel panel-default">
  <div class="panel-heading">Variants</div>
  <div class="panel-body">

    <div class="row">
        <div class="col-md-12">
            <div class="alert alert-warning" role="alert">Please make sure your images are square dimensions of a minumum 500x500px</div>

        </div> 
    </div> 

</div>
<div class="table-responsive">

<table class="table table-bordered table-striped">
    <thead>
        <tr>
            <th class="col-md-1"></th>
            <th >Variant name</th>
            <th ng-repeat="orientation in form.orientations">{{orientation.name}}</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="(key, variant) in form.variants">
            <td class="text-center">
                <a href="" ng-click="moveVariantUp(variant)"><i class="fa fa-arrow-up"></i></a>
                <a href="" ng-click="moveVariantDown(variant)"><i class="fa fa-arrow-down"></i></a>
            </td>
            <td >
                <!--<input type="text" class="form-control" ng-model="variant.name"><br />-->
                <div class="row">
                    <div class="col-md-10">
                        <select ng-change="updateVariant(key, variant, choice)" ng-model="variant.name" ng-options="choice for choice in variantChoices"  style="width: 110px;"></select><br style="clear: both"/>
						<!--<div ng-repeat="hex in variant.hexes" style="background:{{hex}};width: 11px;height: 11px;display: block;border: 1px solid #000;"></div>-->
						<div ng-repeat="hex in variant.colors track by $index" style="float:left; background:{{hex}};width: 11px;height: 11px;display: block;border: 1px solid #000;"></div>

                    </div>
                    <div class="col-md-2">
                        <!--<a ng-if="$last" class="btn btn-default btn-block" href="" ng-click="addVariantType()"><i class="fa fa-plus"></i> New type</a>-->
                        <a href="" class="remove-field" ng-click="removeVariant(variant)"><i class="fa fa-times"></i></a>
                    </div>
                </div>
                <br />
                <!--<input type="text" class="form-control" ng-model="variant.price" placeholder="1000"><br />-->
            </td>
            <td ng-repeat="orientation in form.orientations" class="text-center">

                <div flow-init="{singleFile:true, target: '