@extends('frontend.layouts.app')
@section('title-suffix')
    {{ __('single-product.title') }}
@endsection

@push('styles')
    <style>
        .card_area .product_count {
            background-color: #fff;
            border: none;
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        }

        .card_area .inumber-decrement {
            cursor: pointer;
        }

        .card_area .number-increment {
            cursor: pointer;
        }

        .s_product_text .with-discount {
            text-decoration: line-through;
            font-size: 0.8em;
            color: rgba(100, 100, 111);
        }

        .badge-success {
            background-color: #9b2387;
            color: #fff;
            font-size: 0.6rem;
            padding: 3px;
            border-radius: 10px;
        }

        .lslide img {
            max-width: 75%;
        }
    </style>
@endpush

@section('main-content')
    <section class="breadcrumb breadcrumb_bg">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="breadcrumb_iner">
                        <div class="breadcrumb_iner_item">
                            <h2>{{ $data['product_name'] }}</h2>
                            <p>{{ __('single-product.breadcrumb-1') }}<span>></span>{{ __('single-product.breadcrumb-2') }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>



    <div class="product_image_area section_padding">
        <div class="container">
            <div class="row s_product_inner justify-content-between">
                <div class="col-lg-7 col-xl-7">
                    <div class="product_slider_img">
                        <div id="vertical">
                            <div data-thumb="{{ asset($data['product_main_image']) }}" class="text-center">
                                <img src="{{ asset($data['product_main_image']) }}" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 col-xl-4">
                    <div class="s_product_text">
                        <h3>{{ $data['product_name'] }}&nbsp;@if ($data['product_discount'])<sup class="badge badge-success">-{{ $data['product_discount'] }}&nbsp;%</sup>@endif</h3>
                        <h2>
                            @if (!$data['product_discount'])
                                <span>{{ $data['product_raw_price'] }}&nbsp;FCFA</span>
                            @else
                                <span class="with-discount">{{ $data['product_raw_price'] }}&nbsp;FCFA</span>
                                <span>{{ $data['product_price'] }}&nbsp;FCFA</span>
                            @endif
                        </h2>
                        <ul class="list">
                            <li>
                                <a class="active" href="#">
                                    <span>{{ __('single-product.product-cat') }}</span>{{ $data['product_categories'] }}</a>
                            </li>
                            <li>
                                <a href="#"> <span>{{ __('single-product.product-avail') }}</span>{{ $data['product_availability'] }}</a>
                            </li>
                        </ul>
                        <p class="text-justify">
                            {{ htmlspecialchars_decode($data['product_short_desc']) }}
                        </p>
                        <div class="card_area d-flex justify-content-between align-items-center">
                            <div class="product_count">
                                <span class="inumber-decrement"> <i class="ti-minus"></i></span>
                                <input class="input-number" type="text" value="1" min="0" max="20">
                                <span class="number-increment"> <i class="ti-plus"></i></span>
                            </div>
                            <a href="{{ route('cart.add', $data['product_code']) }}" class="btn_3">{{ __('single-product.add-to-cart-btn') }}</a>
                            <a href="{{ route('wishlist.add', $data['product_code']) }}" class="like_us"> <i class="ti-heart"></i> </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Description, specs, comments and reviews section -->
    @include('frontend.partials.reviews')
    <!-- End description, specs, comments and reviews section -->

    <!-- Best sellers section -->
    @include('frontend.partials.featured')
    <!-- End Best sellers section -->
    
@endsection