@extends('themes.backend.layouts.app')
@section('editor') @stop

@section('breadcrumb')
  {{ Breadcrumbs::render('product.create') }}
@endsection

@section('page-css-styles')
  <style scoped>
  .tabs-section.productTab{overflow:hidden;background-color:#f9fbfe}
  .tabs-section.productTab ul{border-bottom:medium none;background:#fff;border:none;border-radius:6px;-webkit-box-shadow:0 2px 18px 4px rgba(0,0,0,.1);-moz-box-shadow:0 2px 18px 4px rgba(0,0,0,.1);box-shadow:0 2px 18px 4px rgba(0,0,0,.1)}
  .tabs-section.productTab li{position:relative}
  .tabs-section.productTab .nav-link.active:after{content:"";position:absolute;height:0;width:0;right:-14px;top:calc(50% - 7px);border:7px solid transparent;border-left:7px solid #4caf50}
  .tabs-section.productTab .nav-link.disabled{background:#ccc;cursor:not-allowed!important}
  .tabs-section.productTab .nav-tabs{border:0}
  .tabs-section.productTab .nav-link{border:0;padding:11px 15px;transition:.3s;color:#666;border-radius:0;border-right:2px solid #4caf50!important;font-size:15px}
  .tabs-section.productTab .nav-link:hover{color:#fff;background-color:#4caf50}
  .tabs-section.productTab .nav-link.active{color:#fff;background:#4caf50}
  .tabs-section.productTab .nav-link:hover{border-right:4px solid #4caf50}
  .tabs-section.productTab .tab-pane.active{-webkit-animation:fadeIn .5s ease-out;animation:fadeIn .5s ease-out}
  </style>
@stop

@section('content')
  <div class="row">
    <div class="col-sm-12">
      <div class="card m-b-0">
        <div class="card-header">
          <h5 class="card-header-text">{{ __('product.add_txt') }}</h5>
        </div>
        <div class="card-block">
          <x-form.alert type="{{ session()->get('alert') }}" title="{{ session()->get('title') }}"
            message="{{ session()->get('message') }}" />

          <form name="aeDataFrm" id="aeDataFrm" action="{{ route('admin.product.store') }}" method="POST">
            {{ csrf_field() }}
            <section class="tabs-section productTab">
              <div class="container">
                <div class="row">
                  <div class="col-sm-5 col-lg-3">
                    <ul class="nav nav-tabs flex-column mb-3">
                      <li class="nav-item">
                        <a class="nav-link active show" data-toggle="tab"
                          href="#general">{{ __('admin.general_lbl') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link disabled" data-toggle="tab" href="#images">{{ __('admin.images_lbl') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link disabled" data-toggle="tab" href="#attributes">{{ __('admin.attributes_lbl') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link disabled" data-toggle="tab" href="#variations">{{ __('product.size_variations_lbl') }}</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link disabled" data-toggle="tab" href="#seo">{{ __('admin.seo_lbl') }}</a>
                      </li>
                    </ul>
                  </div>
                  <div class="col-sm-7 col-lg-9">
                    <div class="tab-content">
                      <div class="tab-pane active show" id="general">
                        @include('themes.backend.pages.product._general',['type'=>'add','dataArr'=>''])
                      </div>
                      <div class="tab-pane" id="images"></div>
                      <div class="tab-pane" id="attributes"></div>
                      <div class="tab-pane" id="variations"></div>
                      <div class="tab-pane" id="seo"></div>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <div class="row">
              <div class="col-sm-12">
                <x-form.group_lyt1_2_10 class="m-t-10">
                  <x-form.field.button id="submit" name="submit" text="{{ __('admin.proceed_txt') }}" />
                  <x-form.field.button type="reset" id="cancel" name="cancel" class="btn-danger"
                    text="{{ __('admin.cancel_txt') }}" />
                </x-form.group_lyt1_2_10>
              </div>
            </div>

          </form>
        </div>
        <!-- end of card-block -->
      </div>
    </div>
  </div>
@stop