@extends('layouts.master')
@section('page-css')


@endsection

@section('main-content')

<div class="breadcrumb">
    <h1>مشخصات محصول</h1>
    <ul>
        <li><a href="">برنامه ها</a></li>
        <li>فروشگاه اینترنتی</li>
    </ul>
</div>
<div class="separator-breadcrumb border-top"></div>

<!-- content goes here -->

<section class="ul-product-detail">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="ul-product-detail__image">
                                <img src="{{ asset('assets/images/mac_book.jpg') }}" alt="">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="ul-product-detail__brand-name mb-4">
                                <h5 class="heading">MAC Book Pro</h5>
                                <span class="text-mute">Modern model 2019</span>
                            </div>

                            <div class="ul-product-detail__price-and-rating d-flex align-items-baseline">
                                <h3 class="font-weight-700 text-primary mb-0 mr-2">$2,300</h3>
                                <span class="text-mute font-weight-800 mr-2"><del>$1,150</del></span>
                                <small class="text-success font-weight-700">50% off</small>
                            </div>

                            <!-- <div class="ul-product-detail__rating">
                                <ul>
                                    <li></li>
                                </ul>
                            </div> -->
                            <div class="ul-product-detail__features mt-3">
                                <h6 class=" font-weight-700">امکانات:</h6>
                                <ul class="m-0 p-0">
                                    <li>
                                        <i class="i-Right1 text-primary text-15 align-middle font-weight-700"> </i>
                                        <span class="align-middle">This Refurbished product is tested to work and look
                                            like new with minimal to no signs of wear & tear</span>
                                    </li>
                                    <li>
                                        <i class="i-Right1 text-primary text-15 align-middle font-weight-700"> </i>
                                        <span class="align-middle">2.6GHz Intel Core i5 4th Gen processor</span>
                                    </li>
                                    <li>
                                        <i class="i-Right1 text-primary text-15 align-middle font-weight-700"> </i>
                                        <span class="align-middle">8GB DDR3 RAM</span>
                                    </li>
                                    <li>
                                        <i class="i-Right1 text-primary text-15 align-middle font-weight-700"> </i>
                                        <span class="align-middle">13.3-inch screen, Intel Iris 5100 1.5GB
                                            Graphics</span>
                                    </li>
                                </ul>
                            </div>

                            <div class="ul-product-detail__quantity d-flex align-items-center mt-3">
                                <input type="number" class="form-control col-2">
                                <button type="button" class="btn btn-primary m-1">
                                    <i class="i-Full-Cart text-15"> </i>
                                    افزودن به سبد خرید</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="ul-product-detail__box">
    <div class="row">
        <div class="col-lg-3 col-md-3 mt-4 text-center">
            <div class="card">
                <div class="card-body">
                    <div class="ul-product-detail__border-box">
                        <div class="ul-product-detail--icon mb-2">
                            <i class="i-Car text-success text-25 font-weight-500 "></i>
                        </div>
                        <h5 class="heading">تحویل سریع</h5>
                        <p class="text-muted text-12">Lorem Ipsum is simply dummy text of the printing and typesetting
                            industry.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-md-3 mt-4 text-center">
            <div class="card">
                <div class="card-body">
                    <div class="ul-product-detail__border-box">
                        <div class="ul-product-detail--icon mb-2">
                            <i class="i-Reload text-danger text-25 font-weight-500 "></i>
                        </div>
                        <h5 class="heading">Back In 30 Days</h5>
                        <p class="text-muted text-12">Lorem Ipsum is simply dummy text of the printing and typesetting
                            industry.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-3 mt-4 text-center">
            <div class="card">
                <div class="card-body">
                    <div class="ul-product-detail__border-box">
                        <div class="ul-product-detail--icon mb-2">
                            <i class="i-Headset text-info text-25 font-weight-500"></i>
                        </div>
                        <h5 class="heading">پشتیبانی 24/7</h5>
                        <p class="text-muted text-12">Lorem Ipsum is simply dummy text of the printing and typesetting
                            industry.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-3 mt-4 text-center">
            <div class="card">
                <div class="card-body">
                    <div class="ul-product-detail__border-box">
                        <div class="ul-product-detail--icon mb-2">
                            <i class="i-Money-Bag text-warning text-25 font-weight-500"></i>
                        </div>
                        <h5 class="heading">پرداخت امن بالا</h5>
                        <p class="text-muted text-12">Lorem Ipsum is simply dummy text of the printing and typesetting
                            industry.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="ul-product-detail__tab">
    <div class="row">
        <div class="col-lg-12 col-md-12 mt-4">
            <div class="card mt-2 mb-4 ">
                <div class="card-body">
                    <nav>
                        <div class="nav nav-tabs" id="nav-tab" role="tablist">
                            <a class="nav-item nav-link active show" id="nav-home-tab" data-toggle="tab"
                                href="#nav-home" role="tab" aria-controls="nav-home"
                                aria-selected="true">شرح</a>
                            <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile"
                                role="tab" aria-controls="nav-profile" aria-selected="false">بررسی ها</a>
                            <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact"
                                role="tab" aria-controls="nav-contact" aria-selected="false">تب سفارشی سازی</a>
                            <a class="nav-item nav-link" id="nav-brand-tab" data-toggle="tab" href="#nav-brand"
                                role="tab" aria-controls="nav-contact" aria-selected="false">درباره برند</a>
                        </div>
                    </nav>
                    <div class="tab-content ul-tab__content p-5" id="nav-tabContent">
                        <div class="tab-pane fade active show" id="nav-home" role="tabpanel"
                            aria-labelledby="nav-home-tab">
                            <div class="row">
                                <div class="col-lg-4 col-md-4 col-sm-12">
                                    <img src="{{ asset('assets/images/mac_book.jpg') }}" alt="">
                                </div>
                                <div class="col-lg-8 col-md-8 col-sm-12">
                                    <h5 class="text-uppercase font-weight-700 text-muted mt-4 mb-2"> Lorem Ipsum is
                                        simply dummy text of the printing</h5>
                                    <p>
                                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
                                        Ipsum has been the industry's standard dummy text ever since the 1500s, when an
                                        unknown printer took a galley of type and scrambled it to make a type specimen
                                        book. It has
                                        survived not only five centuries, but also the leap into electronic typesetting,
                                        remaining essentially unchanged.
                                    </p>

                                    <div class="ul-product-detail__nested-card">
                                        <div class="row text-center">
                                            <div class="col-lg-4 col-sm-12 mb-2">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <div class="ul-product-detail__border-box">
                                                            <div class="ul-product-detail--icon mb-2">
                                                                <i
                                                                    class="i-Car text-success text-25 font-weight-500 "></i>
                                                            </div>
                                                            <h5 class="heading">تحویل سریع</h5>
                                                            <p class="text-muted text-12">Lorem Ipsum is simply dummy
                                                                text of the printing and typesetting industry.</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-sm-12 mb-2">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <div class="ul-product-detail__border-box">
                                                            <div class="ul-product-detail--icon mb-2">
                                                                <i
                                                                    class="i-Car text-primary text-25 font-weight-500 "></i>
                                                            </div>
                                                            <h5 class="heading">تحویل سریع</h5>
                                                            <p class="text-muted text-12">Lorem Ipsum is simply dummy
                                                                text of the printing and typesetting industry.</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-4 col-sm-12 mb-2">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <div class="ul-product-detail__border-box">
                                                            <div class="ul-product-detail--icon mb-2">
                                                                <i
                                                                    class="i-Car text-danger text-25 font-weight-500 "></i>
                                                            </div>
                                                            <h5 class="heading">تحویل سریع</h5>
                                                            <p class="text-muted text-12">Lorem Ipsum is simply dummy
                                                                text of the printing and typesetting industry.</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                            <div class="row">
                                <div class="col-12">
                                    <div class="ul-product-detail__avg-rate text-center">
                                        <h3 class="heading text-success">4.9</h3>
                                        <span class="text-muted font-weight-600">امتیاز کلی</span>
                                    </div>

                                    <div class="ul-product-detail__comment-list mt-3">
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item">
                                                <a href="" class="ul-product-detail__reply float-right">
                                                    <i class="i-Left"></i>
                                                    <span>Reply</span>
                                                </a>
                                                <h5 class="font-weight-800">Timothy Clarkson</h5>
                                                <p>کلید بسیار راحت و محصولی زیبا.</p>
                                                <span class="text-warning">**** </span>
                                            </li>

                                            <li class="list-group-item">
                                                <a href="" class="ul-product-detail__reply float-right">
                                                    <i class="i-Left"></i>
                                                    <span>Reply</span>
                                                </a>
                                                <h5 class="font-weight-800">Jaret Leto</h5>
                                                <p>کلید بسیار راحت و محصولی زیبا.</p>
                                                <span class="text-warning">**** </span>
                                            </li>

                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
                            <div class="ul-product-detail__nested-card mt-2">
                                <div class="row text-center">
                                    <div class="col-lg-4 col-sm-12 mb-2">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="ul-product-detail__border-box">
                                                    <div class="ul-product-detail--icon mb-2">
                                                        <i class="i-Car text-success text-25 font-weight-500 "></i>
                                                    </div>
                                                    <h5 class="heading">تحویل سریع</h5>
                                                    <p class="text-muted text-12">Lorem Ipsum is simply dummy text of
                                                        the printing and typesetting industry.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-sm-12 mb-2">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="ul-product-detail__border-box">
                                                    <div class="ul-product-detail--icon mb-2">
                                                        <i class="i-Car text-primary text-25 font-weight-500 "></i>
                                                    </div>
                                                    <h5 class="heading">تحویل سریع</h5>
                                                    <p class="text-muted text-12">Lorem Ipsum is simply dummy text of
                                                        the printing and typesetting industry.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-sm-12 mb-2">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="ul-product-detail__border-box">
                                                    <div class="ul-product-detail--icon mb-2">
                                                        <i class="i-Car text-danger text-25 font-weight-500 "></i>
                                                    </div>
                                                    <h5 class="heading">تحویل سریع</h5>
                                                    <p class="text-muted text-12">Lorem Ipsum is simply dummy text of
                                                        the printing and typesetting industry.</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="nav-brand" role="tabpanel" aria-labelledby="nav-contact-tab">
                            <div class="row">
                                <div class="col-lg-2">
                                    <img src="{{ asset('assets/images/mac_book.jpg') }}" alt="">
                                </div>
                                <div class="col-lg-6">
                                    <span class="badge badge-pill badge-danger p-2 m-1">Apple</span>
                                    <h6 class="heading mt-2">Lorem Ipsum is simply dummy text of the printing and
                                        typesetting industry.</h6>
                                    <p class="text-muted">Lorem Ipsum is simply dummy text of the printing and
                                        typesetting industry. Lorem Ipsum has been the industry's standard dummy text
                                        ever since the 1500s, when an unknown printer</p>
                                </div>
                                <div class="col-lg-4">
                                    <div class="ul-product-detail__features mt-3">

                                        <ul class="m-0 p-0">
                                            <li>
                                                <i class="i-Right1 text-primary text-15 align-middle font-weight-700">
                                                </i>
                                                <span class="align-middle">This Refurbished product is tested to work
                                                    and look like new with minimal to no signs of wear &amp; tear</span>
                                            </li>
                                            <li>
                                                <i class="i-Right1 text-primary text-15 align-middle font-weight-700">
                                                </i>
                                                <span class="align-middle">2.6GHz Intel Core i5 4th Gen processor</span>
                                            </li>
                                            <li>
                                                <i class="i-Right1 text-primary text-15 align-middle font-weight-700">
                                                </i>
                                                <span class="align-middle">8GB DDR3 RAM</span>
                                            </li>
                                            <li>
                                                <i class="i-Right1 text-primary text-15 align-middle font-weight-700">
                                                </i>
                                                <span class="align-middle">13.3-inch screen, Intel Iris 5100 1.5GB
                                                    Graphics</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


@endsection

@section('page-js')



@endsection