@extends('_partials.master')
@section('page_title', 'Product View')
@section('page_heading', 'Product View')

@section('page_styles')
    <!--  -->
@endsection

@section('content')

<section>

    <div class="row">

        <div class="col-12">

            <div class="card">


                <div class="card-header">
                  <h4 class="card-title">View Product Details</h4>
                  <div class="heading-elements">
                        <a href="{{ route('product.create') }}" class="btn btn-info btn-sm">
                            <i class="la la-plus"></i> Create New
                        </a>

                    </div>


                </div>


				<!-- BEGIN: Content-->
                <div class="content-body">

                <div class="product-detail">

                    <div class="card">
                        <div class="card-body">
                            <div class="card-content">
                                <div class="row">
                                    <div class="col-sm-4 col-12">
                                        <div class="product-img d-flex align-items-center">
                                            <div class="badge badge-success round">
                                                -50%
                                            </div>
                                            <img alt="Card image cap" class="img-fluid mb-1" src="../../../app-assets/images/elements/fitbit-watch.png">
                                        </div>
                                    </div>
                                    <div class="col-sm-8 col-12">
                                        <div class="title-area clearfix">
                                            <h2 class="product-title float-left">
                                                Fitbit Alta HR Special Edition
                                            </h2>
                                            <span class="ratings float-right">
                                            </span>
                                        </div>
                                        <div class="price-reviews clearfix">
                                            <span class="price-box">
                                                <span class="price h4">
                                                    $250
                                                </span>
                                                <span class="old-price h4">
                                                    $500
                                                </span>
                                            </span>
                                            <span class="float-right">
                                                (201 ratings)
                                            </span>
                                        </div>
                                        <!-- Product Information -->
                                        <div class="product-info">


                                        </div>
                                        <!-- Product Information Ends-->
                                        <!-- Color Options -->
                                        <div class="row">
                                            <div class="col-lg-6">


                                            </div>
                                            <div class="col-lg-6">
                                                <!-- Size Options -->

                                            </div>
                                        </div>




                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-content">
                                <div class="card-body">
                                    <ul class="product-tabs nav nav-tabs nav-underline no-hover-bg">
                                        <li class="nav-item">
                                            <a aria-controls="Tags" aria-expanded="true" class="nav-link active" data-toggle="tab" href="#tags" id="tags1">
                                                Tags
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a aria-controls="ratings" aria-expanded="false" class="nav-link" data-toggle="tab" href="#ratings" id="review">
                                                Product Images
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a aria-controls="comment" aria-expanded="false" class="nav-link" data-toggle="tab" href="#comment" id="comments">
                                                Attributes
                                            </a>
                                        </li>
										<li class="nav-item">
                                            <a aria-controls="Variants" aria-expanded="false" class="nav-link" data-toggle="tab" href="#Variants" id="Variants1">
                                                Variants
                                            </a>
                                        </li>
                                    </ul>
                                    <div class="product-content tab-content px-1 pt-1">
                                        <div aria-expanded="true" aria-labelledby="Tags" class="tab-pane active" id="tags" role="tabpanel">
                                            <h2 class="my-1">
                                                Tags
                                            </h2>



                                        </div>
                                        <div aria-labelledby="review" class="tab-pane" id="ratings">
                                            <h2 class="my-1">
                                                Product Images
                                            </h2>






                                        </div>
                                        <div aria-labelledby="comments" class="tab-pane" id="comment">
                                            <h2 class="my-1">
                                               Attributes Under Development
                                            </h2>





                                        </div>

										<div aria-labelledby="comments" class="tab-pane" id="Variants">
                                            <h2 class="my-1">
                                               Variants Under Development
                                            </h2>





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

            </div>





			<!-- END: Content-->
            </div>
        </div>
    </div>
</section>

@stop

@push('page_scripts')

    <script type="text/javascript">
        $(document).ready(function() {

            // Excel Export Datatable Initialization
            $('.dtTable-excel-export').DataTable({
                pageLength: 100,
                dom: 'Bfrtip',
                buttons: [{
                    extend: 'excelHtml5',
                    text: 'Export to Excel',
                    className: 'btn btn-info btn-sm',
                    exportOptions: {
                       columns: 'th:not(:last-child)'
                    },
                    customize: function(xlsx) {
                        var sheet = xlsx.xl.worksheets['sheet1.xml'];

                        // Loop over the cells in column `F`
                        $('row c[r^="F"]', sheet).each( function () {
                            // Get the value and strip the non numeric characters
                            if ( $('is t', this).text().replace(/[^\d]/g, '') * 1 >= 500000 ) {
                                $(this).attr( 's', '20' );
                            }
                        });
                    }
                }]
            });
        })
    </script>
@endpush