@extends('admin.layouts.app')
@section('title', 'Products')
@section('content')
<section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>{{__('Products')}}</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{ url('admin/categories') }}">{{__('Products')}}</a></li>
              <li class="breadcrumb-item active">{{__('Create')}}</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>
<section class="content">
      <div class="container-fluid">
        <div class="row">
          <!-- left column -->
          <div class="col-md-12">
            <!-- general form elements -->
                <div class="card card-primary card-tabs">
                  <div class="card-header p-0 pt-1">
                    <ul class="nav nav-tabs" id="custom-tabs-two-tab" role="tablist">
                      <li class="nav-item">
                        <a class="nav-link productStep {{$step == 1 || empty($step) ?"active":''}}" id="custom-tabs-two-product-tab" data-toggle="pill" href="javascript:void()" data-steps="1" role="tab" aria-controls="custom-tabs-two-product" aria-selected="true">Product Detail</a>
                      </li>
                      <li class="nav-item" style="{{ empty($pid) ? 'pointer-events: none;' : 'pointer-events: inherit;' }}">
                        <a class="nav-link productStep {{$step == 2 ?"active":''}} " id="custom-tabs-two-gallery-tab" data-toggle="pill" href="javascript:void()" data-steps="2" role="tab" aria-controls="custom-tabs-two-gallery" aria-selected="false">Gallery</a>
                      </li>
                      <li class="nav-item" style="{{ empty($pid) ? 'pointer-events: none;' : 'pointer-events: inherit;' }}">
                      {{-- <li class="nav-item" style=""> --}}
                        <a class="nav-link {{$step == 3 ?"active":''}}" id="custom-tabs-two-varient-tab" data-toggle="pill" href="#custom-tabs-two-varient" role="tab" aria-controls="custom-tabs-two-varient" aria-selected="false">Variant</a>
                      </li>
                    </ul>
                  </div>
                  {!! Form::open(array('route' => 'admin.product.store', 'class' => 'form','files'=>true)) !!}
                  @php
                //   if(!empty($step)){
                //       print_r($step); die;
                //   }
                  @endphp
                  {!! Form::hidden('pid',  $pid , array('id'=>'pid','class'=>'form-control hidden-field')) !!}
                  {!! Form::hidden('step',  $step , array('id'=>'step','class'=>'form-control hidden-field')) !!}
                  <div class="card-body">
                    <div class="tab-content" id="custom-tabs-two-tabContent">
                        <div class="tab-pane fade {{$step == 1 || empty($step)?"show active":''}}" id="custom-tabs-two-product" role="tabpanel" aria-labelledby="custom-tabs-two-product-tab">
                            @include('admin.product.product_form')
                        </div>
                        <div class="tab-pane fade {{$step == 2 ?"show active":''}}" id="custom-tabs-two-gallery" role="tabpanel" aria-labelledby="custom-tabs-two-gallery-tab">
                            @include('admin.product.gallery_form')
                        </div>
                        <div class="tab-pane fade {{$step == 3 ?"show active":''}}" id="custom-tabs-two-varient" role="tabpanel" aria-labelledby="custom-tabs-two-varient-tab">
                            @if ($step == 3)
                                @include('admin.product.varient_form')
                            @endif
                        </div>
                    </div>
                  </div>
                  {{ Form::close() }}
                  <!-- /.card -->
                </div>
              </div>
            </div>
              <!-- /.card-header -->
              <!-- form start -->
              <!-- if there are creation errors, they will show here -->

            </div>
            <!-- /.card -->
        <!-- /.row -->
      </div><!-- /.container-fluid -->
    </section>
@endsection