@extends('layouts.backend')

@section('css_after')
    <link href="{{ asset('plugins/jquery-file-upload/css/jquery.fileupload.css')}}" rel="stylesheet"/>
    <link href="{{ asset('plugins/jquery-file-upload/css/jquery.fileupload.css')}}" rel="stylesheet"/>
    <link href="{{ asset('plugins/jquery-file-upload/css/jquery.fileupload-ui.css')}}" rel="stylesheet"/>
@endsection

@section('content')
    <!-- Page Content -->
    <div class="content">
        <!-- Your Block -->
        <div class="row">
            <div class="col-md-12">
                <!-- Progress Wizard -->
                <div class="js-wizard-simple block block">
                    <!-- Step Tabs -->
                    <ul class="nav nav-tabs nav-tabs-block nav-justified" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" href="#detail-product_add" data-toggle="tab">Detail Product</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#package-product_add" data-toggle="tab">Detail Package/Bundling</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#photo-product_add" data-toggle="tab">Product Photo</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#channel-product_add" data-toggle="tab">Channel</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#price-product_add" data-toggle="tab">Price</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#delivery-info" data-toggle="tab">Delivery Information</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#selling-info" data-toggle="tab">Sales Information & Stock</a>
                        </li>
                    </ul>
                    <!-- END Step Tabs -->

                    <!-- Form -->
                    <form id="form_add_submit">
                        <!-- Wizard Progress Bar -->
                        <div class="block-content block-content-sm">
                            <div class="progress" data-wizard="progress" style="height: 8px;">
                                <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 30%;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                        <!-- END Wizard Progress Bar -->

                        <!-- Steps Content -->
                        <div class="block-content block-content-full tab-content px-md-5" style="min-height: 300px;">
                            <!-- Step 1 -->
                            <div class="tab-pane active" id="detail-product_add" role="tabpanel">
                                @include('pages.product_add.tab_detail')
                            </div>
                            <!-- END Step 1 -->

                            <!-- Step 1 -->
                            <div class="tab-pane" id="package-product_add" role="tabpanel">
                                @include('pages.product_add.tab_package_item')
                            </div>
                            <!-- END Step 1 -->


                            <!-- Step 2 -->
                            <div class="tab-pane" id="photo-product_add" role="tabpanel">
                                @include('pages.product_add.tab_photo')
                            </div>
                            <!-- END Step 2 -->

                            <!-- Step 3 -->
                            <div class="tab-pane" id="channel-product_add" role="tabpanel">
                                @include('pages.product_add.tab_channel')
                            </div>
                            <!-- END Step 3 -->

                            <!-- Step 4 -->
                            <div class="tab-pane" id="price-product_add" role="tabpanel">
                                @include('pages.product_add.tab_price')
                            </div>
                            <!-- END Step 4 -->

                            <!-- Step 5 -->
                            <div class="tab-pane" id="delivery-info" role="tabpanel">
                                @include('pages.product_add.tab_delivery')
                            </div>
                            <!-- END Step 5 -->

                            <!-- Step 6 -->
                            <div class="tab-pane" id="selling-info" role="tabpanel">
                                @include('pages.product_add.tab_selling_stock')
                            </div>
                            <!-- END Step 6 -->
                        </div>
                        <!-- END Steps Content -->

                        <!-- Steps Navigation -->
                        <div class="block-content block-content-sm block-content-full bg-body-light rounded-bottom">
                            <div class="row">
                                <div class="col-6">
                                    <button type="button" class="btn btn-secondary" data-wizard="prev">
                                        <i class="fa fa-angle-left mr-1"></i> Previous
                                    </button>
                                </div>
                                <div class="col-6 text-right">
                                    <button type="button" class="btn btn-secondary" data-wizard="next">
                                        Next <i class="fa fa-angle-right ml-1"></i>
                                    </button>
                                    <button type="submit" class="btn btn-primary" id="buttonsubmit" data-wizard="finish" onclick="Submitdataproduct()">
                                         <i class="fa fa-check mr-1"></i> Submit
                                    </button>
                                </div>
                            </div>
                        </div>
                        <!-- END Steps Navigation -->
                    </form>
                    <!-- END Form -->
                </div>
                <!-- END Progress Wizard -->
            </div>
        </div>
        <!-- END Your Block -->
    </div>
    <!-- END Page Content -->
    <!-- Page Modal -->
    <!-- END Page Modal -->
@endsection

@section('js_after')
    <script src="{{ asset('plugins/jquery-file-upload/js/vendor/jquery.ui.widget.js')}}"  type="text/javascript"></script>
    <script src="{{ asset('plugins/jquery-file-upload/js/jquery.iframe-transport.js')}}"  type="text/javascript"></script>
    <script src="{{ asset('plugins/jquery-file-upload/js/jquery.fileupload.js')}}"  type="text/javascript"></script>
    @include('pages.product_add.function')
    @include('pages.globalFunction')
@endsection