@extends('front.layout.app')
@section('title', 'Product Detail')
@section('extra-css')
    <style>
        span.previous-price {
            text-decoration: line-through;
            font-weight: 100;
            color: black !important;
        }

        .all-products{
            height: 200px;
            background-position: center;
            object-fit: contain;
        }
    </style>
@endsection
@section('content')
    <section class="main">
        <div class="container">

            <div class="row">
                <div class="col-md-3 col-sm-12">
                    <div class="card">
                        <article class="card-group-item">
                            <header class="card-header header-card"><h6 class="title">Product Categories </h6></header>
                            <div class="filter-content">
                                <div class="list-group list-group-flush">
                                    <a href="#" class="list-group-item">
                                        BSP Style
                                        <span class="float-right badge badge-light round">12</span>
                                    </a>
                                </div>  <!-- list-group .// -->
                            </div>
                        </article> <!-- card-group-item.// -->
                    </div>
                </div>



                <div class="col-md-9 col-sm-12">



                    <ul class="list-inline">
                        <li><a href="{{route('products')}}">Shop</a></li> |

                        <li><a href='#'>Filing Supplies</a></li> | <li><a href='#'>Folders</a></li> | <li><a href='#'>End Tab Folders</a></li> | <li><a href='#'>BSP Style</a></li>

                        | <li class="active">{{$product->product_name ?? ''}}</li>

                    </ul>

                    <h1 class="product-name">{{$product->product_name ?? ''}}</h1>
                    <span>Running into an issue ? <a href="{{route('contact')}}">Contact Us</a></span>

                    <div class="sec1 boxmainnew">
                        <div class="row">
                            <div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 showimages">
                                <div class="exzoom hidden" id="exzoom">
                                    <div class="exzoom_img_box">
                                        <ul class='exzoom_img_ul'>
                                            <li><img src="{{ productImage($product->product_image) }}"/></li>
                                        </ul>
                                    </div>
                                    <div class="exzoom_nav"></div>
                                    <p class="exzoom_btn">
                                        <a href="javascript:void(0);" class="exzoom_prev_btn"> < </a>
                                        <a href="javascript:void(0);" class="exzoom_next_btn"> > </a>
                                    </p>
                                </div>
                            </div>
                            <div class="col-xl-8 col-lg-12 col-md-12 col-sm-12 right-part">
                                <div class="mag-eg-el-wrap img-thumbnail" style="height:auto;width:auto">
                                    <div style="height: 300px; width: 300px">
                                        <div mag-zoom="outer" class="mag-eg-el" style="float: right;position:relative;overflow:hidden;">
                                            <img src="storage/media/20191008053744.jpg" />
                                        </div>
                                    </div>
                                </div>
                                <h4 class="pricebox" id="price_box">Price: $80.00</h4>
                                <span class="product-id">Product ID : 12991</span>
                                <span class="product-rating">
    <i class="fa fa-star-o"></i>
    <i class="fa fa-star-o"></i>
    <i class="fa fa-star-o"></i>
    <i class="fa fa-star-o"></i>
    <i class="fa fa-star-o"></i>
</span>

                                <span class="rate-of-average">
            0 out of 5
        </span>
                                <span class="reviews-total">
            <a href="#reviews">(0 review)</a></span>
                                <div class="boxmainnew">
                                    <div class="row">

                                        <form method="POST">
                                            <div class="row">
                                                <input type="hidden" name="_token" value="">

                                                <div class="col-md-12 col-sm-12 col-xs-12">
                                                    <select onchange="" name="option_type" id="option_type" class="form-control">
                                                        <option value="">Select Type</option>
                                                        <option value="0">ENVELOPE, Select Quantity & Save:</option>
                                                    </select>
                                                </div>


                                                <div style="display:none"  class=" option_types col-md-12 col-sm-12 col-xs-12" id="option_type_0">
                                                    <div class="quantity_radio form-group row ">
                                                        <div class="col-md-12 col-sm-12 col-xs-12">
                                                            <label class="quantity">
                                                                ENVELOPE, Select Quantity & Save:
                                                            </label>
                                                            <div class="radio">
                                                                <input type="radio" style="margin-left: 0 !important;"
                                                                       name="options[40565]"
                                                                       value="86294"
                                                                       data-value=""
                                                                       data-label="1"
                                                                       id="option-40565-value-86294"
                                                                       checked
                                                                >

                                                                <label for="option-40565-value-86294">
                                                                    1
                                                                </label>
                                                            </div>
                                                            <div class="radio">
                                                                <input type="radio" style="margin-left: 0 !important;"
                                                                       name="options[40565]"
                                                                       value="86295"
                                                                       data-value="-9.1100"
                                                                       data-label="2(-9.11)"
                                                                       id="option-40565-value-86295"

                                                                >

                                                                <label for="option-40565-value-86295">
                                                                    2(-9.11)
                                                                </label>
                                                            </div>
                                                            <div class="radio">
                                                                <input type="radio" style="margin-left: 0 !important;"
                                                                       name="options[40565]"
                                                                       value="86296"
                                                                       data-value="-10.0000"
                                                                       data-label="5(-10.00)"
                                                                       id="option-40565-value-86296"

                                                                >

                                                                <label for="option-40565-value-86296">
                                                                    5(-10.00)
                                                                </label>
                                                            </div>
                                                            <div class="radio">
                                                                <input type="radio" style="margin-left: 0 !important;"
                                                                       name="options[40565]"
                                                                       value="86297"
                                                                       data-value="-20.8500"
                                                                       data-label="10(-20.85)"
                                                                       id="option-40565-value-86297"

                                                                >

                                                                <label for="option-40565-value-86297">
                                                                    10(-20.85)
                                                                </label>
                                                            </div>


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

                                                <div style="" class="col-md-12 col-sm-12 col-xs-12">
                                                    <div class="product-variants-select form-group row ">
                                                        <label class="col-md-12 col-sm-12 col-xs-12" for="option-40566">
                                                            Comments
                                                        </label>

                                                        <div class="col-md-12 col-sm-12 col-xs-12">
                                                            <input type="text" name="options[40566]" value="">

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

                                                <div class="col-md-12 showQty" style="display:none" >
                                                    <input type="hidden" name="product_id" value="144">
                                                    <input type="number" class="form-control" placeholder="Quantity" name="qty" required min="1" value="1">
                                                </div>
                                                <div class="col-md-12">
                                                    <button id="add-to-cart" class="btn bg-red">
                                                        <a href="cart.php">
                                                            Add to Cart
                                                        </a>
                                                    </button>
                                                    <p>Min Order: 1 / -</p>
                                                    <p id="final_price"></p>
                                                </div>
                                            </div>
                                        </form>

                                    </div>

                                </div>

                            </div>

                            <div class="col-md-12 col-sm-12 col-xs-12">

                            </div>
                        </div>


                    </div>



                </div>

                <div class="row w-100">
                    <div class="col-12">
                        <div class="boxmainnew">
                            <div class="row">
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- Close main container -->

        <section classs="product-description">
            <div class="desc-head">
                <div class="container">
                    <h4>Description</h4>
                </div>
            </div>


            <div class="container">
                <div id="description" class="sec2">
                    <p><span style="font-size: 10pt;">These all-purpose business folders have two pockets on the backside for holding loose documents and/or keeping frequently needed information at your fingertips. Securely file loose documents! Pockets are closed on 3 sides to securely contain contents.</span></p>
                    <ul style="list-style-type: disc;">
                        <li><span style="font-size: 10pt;">Size: 12-1/4" x 9-1/2"</span></li>
                        <li><span style="font-size: 10pt;">Embossed score lines for labels</span></li>
                        <li>Thumbcut<span style="font-size: 10pt;"> for quick opening and access</span></li>
                        <li>ull<span style="font-size: 10pt;"> and 3/4 sized pockets offer easy access from </span>top<span style="font-size: 10pt;"> and are closed on 3 sides to securely contain contents</span></li>
                        <li><span style="font-size: 10pt;">50 Box</span></li>
                    </ul>
                </div>



            </div>



        </section>
        <div class="desc-head" id="reviews">
            <div class="container">
                <h4>Product Reviews</h4>
            </div>
        </div>
        <div class="container">

            <div class="row">

                <div class="col py-4">

                    <p><a href="login.php">Login</a> or <a href="register.php">Register</a> to write the first review.</p>
                </div>

            </div>

        </div>

    </section>

    <section class="product-description">
        <div class="desc-head">
            <div class="container">
                <h4>Products You May Like</h4>
            </div>
        </div>
        <div class="container">

            <div class="row">

                <div class="col">

                    <div class="col-md-6">
                        <div class="boxxx">
                            <img src="storage/media/20191008065531.jpg" class="img-fluid">
                            <a href="#"><h4>14 pt Manila Pocket, Full Cut End Tab, Letter Size, Slant Cut Front (S-9045)</h4></a>
                            <span>$27.50</span>








                        </div>
                    </div>            <div class="col-md-6">
                        <div class="boxxx">
                            <img src="storage/media/20191008065620.jpg" class="img-fluid">
                            <a href="#"><h4>11 pt Manila Folders, Full Cut End Tab, Letter Size, Double Pockets Inside Front, Fastener Pos #1 (S-9063)</h4></a>
                            <span>$68.25</span>








                        </div>
                    </div>            <div class="col-md-6">
                        <div class="boxxx">
                            <img src="storage/media/20191008065637.jpg" class="img-fluid">
                            <a href="#"><h4>11 pt Color Jacket, Letter Size, Dental Style (S-9076)</h4></a>
                            <span>$25.20</span>








                        </div>
                    </div>            <div class="col-md-6">
                        <div class="boxxx">
                            <img src="storage/media/20191008065744.jpg" class="img-fluid">
                            <a href="#"><h4>11 pt Manila Folders, Full Cut End Tab, Letter Size, 1/2 Pocket Inside Front and Back (S-9113)</h4></a>
                            <span>$52.80</span>








                        </div>
                    </div>            <div class="col-md-6">
                        <div class="boxxx">
                            <img src="storage/media/20191008065832.jpg" class="img-fluid">
                            <a href="#"><h4>14 pt Manila Folders, Full Cut 2-Ply End Tab, Letter Size, &quot;Confidential&quot; Printed (S-9165)</h4></a>
                            <span>$24.80</span>








                        </div>
                    </div>            <div class="col-md-6">
                        <div class="boxxx">
                            <img src="storage/media/20191008065838.jpg" class="img-fluid">
                            <a href="#"><h4>14 pt Manila Folders, Full Cut 2-Ply End Tab, Letter Size, Fastener Pos #1 &amp; #3, &quot;Confidential&quot; Printed (S-9166)</h4></a>
                            <span>$55.00</span>








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

            </div>

        </div>

    </section>

    <!-- open container again -->
    <div class="container">
        <div class="row">



        </div>
    </div>




@endsection