<?php $__env->startSection('content'); ?>


    <main>
        <!-- Start pg_header -->
        <section class="pg_header section py-4">
            <div class="container">
                <div class="bread d-flex align-items-center">
                    <a href="<?php echo e(route('home')); ?>" class="item" > <?php echo e(__('web.home')); ?> </a>
                    <a href="<?php echo e(route('web.product')); ?>" class="item" > <?php echo e(__('web.products')); ?> </a>
                    <span class="item active"> <?php echo e($title); ?> </span>
                </div>
            </div>
        </section>

        <!-- Start section -->
        <section class="product_det section">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-6">
                        <div class="taxt_box">
                            <p class="prod_data">
                                <b>   <?php echo e(__('web.product_code')); ?> :</b> #<?php echo e($product->code); ?>

                            </p>
                            <a href="#0" class="categ color-primary mt-4 d-block">
                                <img src="<?php echo e(url('')); ?>/assets/web/images/categ-1.png" alt="" class="categ_logo"/>
                                <?php echo e($product->category->currentDescription->title .' - '.$product->subCategory->currentDescription->title); ?>

                            </a>
                            <h1 class="name fs-2 fw-bold mt-4"> <?php echo e($product->currentDescription->title); ?>   </h1>
                            <h3 class="rate_ratio mt-4">
                                <i class="fa-solid fa-star active"></i> <b><?php echo e($product->rate); ?></b> <small>(<?php echo e($product->rate_count); ?> <?php echo e(__('web.rate_count')); ?>)</small>
                            </h3>
                            <div class="d-flex justify-content-between align-items-center mt-4">
                                <div class="price mt-2">
                                    <?php echo $__env->make('web.pages.components.products.cost',['product'=>$product], \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
                                </div>
                                <?php if($product->cost_discount): ?>
                                    <?php echo $__env->make('web.pages.components.products.offer',['product'=>$product], \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
                                <?php endif; ?>
                            </div>

                            <div class="d-flex align-items-center my-4">
                                <h5 class="label fw-bold mb-0 me-3"><?php echo e(__('web.quantity')); ?></h5>
                                <div class="qty-container">
                                    <button class="qty-btn-minus btn-light" type="button"><i class="fa fa-minus"></i></button>
                                    <input type="text" id="count_product" name="qty" value="1" class="input-qty"/>
                                    <button class="qty-btn-plus btn-light" type="button"><i class="fa fa-plus"></i></button>
                                </div>
                            </div>


                            <div class="share_links d-flex align-items-center mt-5">
                                <span class="title"><?php echo e(__('web.share_product')); ?></span>
                                <div class="links">
                                    <a href="#"> <img src="<?php echo e(url('')); ?>/assets/web/images/icons/social-1.svg" class="socaiIcon" alt="" /> </a>
                                    <a href="#"> <img src="<?php echo e(url('')); ?>/assets/web/images/icons/social-2.svg" class="socaiIcon" alt="" /> </a>
                                    <a href="#"> <img src="<?php echo e(url('')); ?>/assets/web/images/icons/social-3.svg" class="socaiIcon" alt="" /> </a>
                                    <a href="#"> <img src="<?php echo e(url('')); ?>/assets/web/images/icons/social-4.svg" class="socaiIcon" alt="" /> </a>
                                    <a href="#"> <img src="<?php echo e(url('')); ?>/assets/web/images/icons/social-5.svg" class="socaiIcon" alt="" /> </a>
                                </div>
                            </div>


                            <div class="box_butns butns d-flex mt-5">
                                <a style="cursor: pointer" onclick="addToCart(this)" data-id="<?php echo e($product->id); ?>" class="butn primary_butn px-3 me-2 cart_butn px-4"> <i class="fa-solid fa-cart-plus"></i> <?php echo e(__('web.add_to_cart')); ?> </a>
                                <a style="cursor: pointer" onclick="favorite(this)" data-id="<?php echo e($product->id); ?>" class="butn sm_butn secondary_butn fav_butn <?php echo e(auth()->user()?->favorited($product->id) ? 'active': ''); ?>"> <i class="fa-solid fa-heart mx-0"></i> </a>
                            </div>

                        </div>
                    </div>
                    <div class="col-lg-6 order_md_1 my-4">
                        <div class="swiper_box overflow_hidde">
                            <div class="swiper mySwiper2 lg-slide-swiper mb-4">
                                <div class="swiper-wrapper">
                                    <?php $__currentLoopData = $photos; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <div class="swiper-slide">
                                        <div class="img-box">
                                            <img src="<?php echo e(asset($row['image'])); ?>" alt="" class="lg-img"/>
                                        </div>
                                    </div>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </div>
                            </div>
                            <div thumbsSlider="" class="swiper mySwiper sm-slide-swiper">
                                <div class="swiper-wrapper">
                                    <?php $__currentLoopData = $photos; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <div class="swiper-slide">
                                        <img src="<?php echo e(asset($row['image'])); ?>" alt="" class="sm-bg-header"/>
                                    </div>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="desc_wrapper mt-5 pt-4">
                    <ul class="nav nav-pills mb-0" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="pills-tab1-tab" data-bs-toggle="pill" data-bs-target="#pills-tab1" type="button" role="tab" aria-controls="pills-tab1" aria-selected="true">
                                <?php echo e(__('web.product_description')); ?>

                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-tab2-tab" data-bs-toggle="pill" data-bs-target="#pills-tab2" type="button" role="tab" aria-controls="pills-tab2" aria-selected="false">
                                <?php echo e(__('web.product_items')); ?>

                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills-tab3-tab" data-bs-toggle="pill" data-bs-target="#pills-tab3" type="button" role="tab" aria-controls="pills-tab3" aria-selected="false">
                                <?php echo e(__('web.rates')); ?>

                            </button>
                        </li>

                    </ul>
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-tab1" role="tabpanel" aria-labelledby="pills-tab1-tab">
                            <div class="tab_wrapper">
                                <div class="data mb-4">
                                    <h4 class="fw-bold fs-5 mb-4"> <?php echo e(__('web.product_description')); ?>  </h4>
                                        <?php echo $product->currentDescription->description; ?>


                                </div>

                            </div>
                        </div>
                        <div class="tab-pane fade " id="pills-tab2" role="tabpanel" aria-labelledby="pills-tab2-tab">
                            <div class="tab_wrapper">
                                <div class="data mb-5 pb-3">
                                    <h4 class="fw-bold fs-5 mb-4"> <?php echo e(__('web.product_items')); ?>  </h4>

                                    <?php if(count($product->items)): ?>
                                        <div class="row col-md-6">
                                            <?php $__currentLoopData = $product->items; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                                <div class="col-6">
                                                    <div class="item mb-4">
                                                        <span class="label"><?php echo e($row->currentDescription->title); ?>  : </span>
                                                        <b class="color-primary"><?php echo e($row->currentDescription->description); ?></b>
                                                    </div>
                                                </div>
                                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                        </div>
                                    <?php else: ?>
                                        <?php echo $__env->make('web.pages.components.not_found',['message'=>__('web.not_found_description')], \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
                                    <?php endif; ?>

                                </div>

                            </div>
                        </div>
                        <div class="tab-pane fade " id="pills-tab3" role="tabpanel" aria-labelledby="pills-tab3-tab">
                            <div class="tab_wrapper">
                                <?php if(count($product->rates)): ?>
                                    <?php $__currentLoopData = $product->rates; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <div class="review_item">
                                            <div class="prof_data d-flex align-items-center mb-3">
                                                <img src="<?php echo e(asset($row->user->photo)); ?>" class="avatar" alt=""/>
                                                <div class="txt">
                                                    <h6 class="name fw-bold mb-1">  <?php echo e($row->user->name); ?> </h6>
                                                    <div class="rating">
                                                        <?php for($i = 0;$i<$row->rate;$i++): ?>
                                                            <i class="fas fa-star active"></i>
                                                        <?php endfor; ?>
                                                        <?php for($i = 0;$i< (5 - $row->rate);$i++): ?>
                                                            <i class="fas fa-star"></i>
                                                        <?php endfor; ?>
                                                        <span class="date ms-2"><?php echo e($row->date); ?></span>
                                                    </div>
                                                </div>
                                            </div>
                                            <p class="review_det">
                                                <?php echo $row->comment; ?>

                                            </p>
                                        </div>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                <?php else: ?>
                                    <?php echo $__env->make('web.pages.components.not_found',['message'=>__('web.not_found_rate')], \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
                                <?php endif; ?>
                                <?php if($product->canRate): ?>
                                    <button class="butn primary_butn m-auto mt-5" data-bs-toggle="modal" data-bs-target="#rateModal"><?php echo e(__('web.your_rate')); ?></button>
                                <?php endif; ?>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </section>

        <?php if(count($products)): ?>
        <!-- Start section -->
        <section class="products_sec section">
            <div class="container">

                <div class="sec_head d-flex align-items-center justify-content-between mb-5">
                    <h4 class="sec_title fw-bold"> <?php echo e(__('web.related_products')); ?>      </h4>

                    <div class="arrows">
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>

                <div class="swiper-container products_swiper">
                    <div class="swiper-wrapper">
                        <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $row): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="swiper-slide">
                            <?php echo $__env->make('web.pages.components.products.card',['product'=>$row], \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
                        </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                </div>
            </div>
        </section>
        <?php endif; ?>
    </main>

    <div class="modal  rateModal fade" id="rateModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body">
                    <div class="content text-center mt-4">
                        <h4 class="title text-dark mb-4"><b>  <?php echo e(__('web.rate_product')); ?>  </b></h4>
                        <form method="post" action="<?php echo e(route('web.rate')); ?>" onsubmit="formAction(this)">
                            <?php echo csrf_field(); ?>
                            <input type="hidden" name="product_id" value="<?php echo e($product->id); ?>">
                            <div class="stars-content mb-5">
                                <div class="star-rating">
                                    <input type="radio" id="5-stars" name="rate" value="5" />
                                    <label for="5-stars" class="star"><i class="fas fa-star"></i></label>
                                    <input type="radio" id="4-stars" name="rate" value="4" />
                                    <label for="4-stars" class="star"><i class="fas fa-star"></i></label>
                                    <input type="radio" id="3-stars" name="rate" value="3" />
                                    <label for="3-stars" class="star"><i class="fas fa-star"></i></label>
                                    <input type="radio" id="2-stars" name="rate" value="2" />
                                    <label for="2-stars" class="star"><i class="fas fa-star"></i></label>
                                    <input type="radio" id="1-star" name="rate" value="1" />
                                    <label for="1-star" class="star"><i class="fas fa-star"></i></label>
                                </div>
                            </div>
                            <div class="form-group col-md-10 m-auto">
                                <h6 class="title mb-3"> <?php echo e(__('web.write_your_comment')); ?>  </h6>
                                <textarea name="comment" class="form-control" placeholder=" <?php echo e(__('web.write_here')); ?>  " rows="7"></textarea>
                            </div>
                            <div class="d-flex justify-content-center align-items-center justify-content-center mt-5 ">
                                <button type="button" class="butn btn-secondary  mx-1" data-bs-dismiss="modal"><?php echo e(__('web.close')); ?></button>
                                <button type="submit" class="butn primary_butn mx-1"><?php echo e(__('web.send')); ?></button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('inject_js'); ?>
    <script>
        var swiper = new Swiper(".sm-slide-swiper", {
            // loop: true,
            slidesPerView: 5,
            spaceBetween: 10,
            freeMode: true,
            watchSlidesProgress: true,
        });
        var swiper2 = new Swiper(".lg-slide-swiper", {
            // loop: true,
            // effect: 'fade',
            spaceBetween: 10,
            // autoplay: {
            //     delay: 2500,
            // },
            thumbs: {
                swiper: swiper,
            },
        });
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('web.layouts.layout', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/omaralyomhost/public_html/electric/resources/views/web/pages/products/details.blade.php ENDPATH**/ ?>