<div class="main-content main-atf">
  <div class="container-fluid">
      <div class="row">
          <div class="col-md-12">
              <div class="card">
                  <div class="card-header card-header-green">
                      <h4 class="card-title">{{action}} producto</h4>
                      <p class="card-category">Los cambios se aplicarán de inmediato en la App y sólo en pedidos nuevos.</p>
                  </div>
                  <div class="card-body">
                    <div class="row">
                      <div class="col-md-4">
                        <img class="img-product" src="{{(data.image == '' ? 'assets/img/product.png' : data.image)}}" />
                        <button class="btn btn-primary" (click)="changeImage($event)"> <i class="fa fa-photo" aria-hidden="true"></i> Cambiar imagen </button>
                        <input type="file" id="changeImage" (change)="changeImagePlay($event)" style="display:none" accept="image/x-png,image/gif,image/jpeg" />
                      </div>
                      <div class="col-md-8">
                        <div class="row">
                          <div class="col-md-8">
                            <div class="row">
                              <div class="col-md-6">
                                <mat-form-field class="example-full-width">
                                  <input matInput placeholder="Nombre" type="text" [(ngModel)]="data.name">
                                </mat-form-field>
                              </div>
                              <div class="col-md-6">
                                <mat-form-field class="example-full-width">
                                  <mat-select placeholder="Estado" [(ngModel)]="data.status">
                                    <mat-option *ngFor="let status of statuses" [value]="status.id">
                                      {{status.name}}
                                    </mat-option>
                                  </mat-select>
                                </mat-form-field>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-md-6">
                                <mat-form-field class="example-full-width">
                                  <mat-select placeholder="Tipo producto" [(ngModel)]="data.type_sale">
                                    <mat-option *ngFor="let type of types" [value]="type.name">
                                      {{type.name}}
                                    </mat-option>
                                  </mat-select>
                                </mat-form-field>
                              </div>
                              <div class="col-md-6">
                                <mat-form-field class="example-full-width">
                                  <input matInput placeholder="Precio Venta" type="number" [(ngModel)]="data.price">
                                </mat-form-field>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-md-6">
                                <mat-form-field class="example-full-width">
                                  <input matInput placeholder="Min. Venta" type="number" [(ngModel)]="data.min_order">
                                  <mat-hint>Use 0 para no usar este límite</mat-hint>
                                </mat-form-field>
                              </div>
                              <div class="col-md-6">
                                <mat-form-field class="example-full-width">
                                  <input matInput placeholder="Max. Venta" type="number" [(ngModel)]="data.max_order">
                                  <mat-hint>Use 0 para no usar este límite</mat-hint>
                                </mat-form-field>
                              </div>
                            </div>
                            <div class="row" [hidden]="data.type_sale != 'FLOR'">
                              <div class="col-md-6">
                                <mat-form-field class="example-full-width">
                                  <input matInput placeholder="THC" type="number" [(ngModel)]="data.thc">
                                </mat-form-field>
                              </div>
                              <div class="col-md-6">
                                <mat-form-field class="example-full-width">
                                  <input matInput placeholder="CBD" type="number" [(ngModel)]="data.cbd">
                                </mat-form-field>
                              </div>
                            </div>
                            <br />
                            <h4>Categorias</h4>
                            <section class="example-section" *ngFor="let category of categories; let index = i">
                              {{(category.parent!='0' ? '&nbsp;&nbsp;' :'')}}  <mat-checkbox class="example-margin" [checked]="getChecked(category.id)" (change)="clickChecked(category.id,$event)">{{category.name}}</mat-checkbox>
                            </section>

                          </div>
                          <div class="col-md-4">
                            <mat-form-field class="example-full-width">
                              <textarea matInput style="height: 133px !important;" placeholder="Descripción" type="text" [(ngModel)]="data.description"></textarea>
                            </mat-form-field>
                          </div>
                        </div>
                      </div>
                    </div>
                    <button mat-raised-button type="submit" (click)="save()" class="btn btn-success pull-right">Guardar</button>
                    <button mat-raised-button type="button" (click)="dismiss()" class="btn btn-default pull-right">Cancelar</button>
                    <div class="clearfix"></div>

                  </div>
              </div>
          </div>
      </div>
  </div>
</div>
