@extends('layouts.app')


@section('content')
<link href="{{ asset('jquery.nice-number.css') }}" rel="stylesheet">
    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h4 class="mb-0">Product Detail</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">Ecommerce</a></li>
                                <li class="breadcrumb-item active">Product Detail</li>
                            </ol>
                        </div>

                    </div>
                </div>
            </div>
            <!-- end page title -->

            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                {{-- <div class="col-xl-5">
                                    <div class="product-detail">
                                        <div class="row">
                                            <div class="col-3">
                                                <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"
                                                    aria-orientation="vertical">
                                                    <a class="nav-link active" id="product-1-tab" data-bs-toggle="pill"
                                                        href="#product-1" role="tab">
                                                        <img src="{{ asset('images/product/exe-self.png') }}" alt=""
                                                            class="img-fluid mx-auto d-block tab-img rounded">
                                                    </a>
                                                    <a class="nav-link" id="product-2-tab" data-bs-toggle="pill"
                                                        href="#product-2" role="tab">
                                                        <img src="{{ asset('images/product/exe-self.png') }}" alt=""
                                                            class="img-fluid mx-auto d-block tab-img rounded">
                                                    </a>
                                                    <a class="nav-link" id="product-3-tab" data-bs-toggle="pill"
                                                        href="#product-3" role="tab">
                                                        <img src="{{ asset('images/product/exe-self.png') }}" alt=""
                                                            class="img-fluid mx-auto d-block tab-img rounded">
                                                    </a>
                                                    <a class="nav-link" id="product-4-tab" data-bs-toggle="pill"
                                                        href="#product-4" role="tab">
                                                        <img src="{{ asset('images/product/exe-self.png') }}" alt=""
                                                            class="img-fluid mx-auto d-block tab-img rounded">
                                                    </a>
                                                </div>
                                            </div>

                                            <div class="col-9">
                                                <div class="tab-content position-relative" id="v-pills-tabContent">

                                                    <div class="product-wishlist">
                                                        <a href="#">
                                                            <i class="mdi mdi-heart-outline"></i>
                                                        </a>
                                                    </div>
                                                    <div class="tab-pane fade show active" id="product-1" role="tabpanel">
                                                        <div class="product-img">
                                                            <img src="{{ asset('images/product/exe-self.png') }}" alt=""
                                                                class="img-fluid mx-auto d-block"
                                                                data-zoom="assets/images/product/img-1.png">
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane fade" id="product-2" role="tabpanel">
                                                        <div class="product-img">
                                                            <img src="{{ asset('images/product/exe-self.png') }}" alt=""
                                                                class="img-fluid mx-auto d-block">
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane fade" id="product-3" role="tabpanel">
                                                        <div class="product-img">
                                                            <img src="{{ asset('images/product/exe-self.png') }}" alt=""
                                                                class="img-fluid mx-auto d-block">
                                                        </div>
                                                    </div>
                                                    <div class="tab-pane fade" id="product-4" role="tabpanel">
                                                        <div class="product-img">
                                                            <img src="{{ asset('images/product/exe-self.png') }}" alt=""
                                                                class="img-fluid mx-auto d-block">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row text-center mt-2">
                                                    <div class="col-sm-6">
                                                        <div class="d-grid">
                                                            <button type="button"
                                                                class="btn btn-primary waves-effect waves-light mt-2 me-1">
                                                                <i class="uil uil-shopping-cart-alt me-2"></i> Add to cart
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <div class="d-grid">
                                                            <button type="button"
                                                                class="btn btn-light waves-effect  mt-2 waves-light">
                                                                <i class="uil uil-shopping-basket me-2"></i>Buy now
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div> --}}
                                <div class="col-xl-12">
                                    <div class="mt-4 mt-xl-3 ps-xl-4">

                                        <h4 class="font-size-20 mb-3">Product Name: {{ $product->name }}</h4>
                                        <h4 class="font-size-20 mb-3">Unit: {{ $product->unit }}</h4>
                                        <h4 class="font-size-20 mb-3">Net Weight: {{ $product->net_weight }}</h4>
                                        <h4 class="font-size-20 mb-3">Net Weight Unit: {{ $product->net_weight_unit }}</h4>
                                        <h4 class="font-size-20 mb-3">Tonnage: {{ $product->tonnage }}</h4>
                                        <h4 class="font-size-20 mb-3">Price: KES. {{ number_format($product->price,2) }}</h4>
                                         {{-- <a href="javascript:void(0)" class="btn btn-success" id="{{ $product->product_id }}" onclick="addToCart(this)">Add to Cart</a> --}}


                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- end row -->




                        </div>
                    </div>
                </div>
            </div>
            <!-- end row -->

             {{-- Add to cart modal --}}
             <div class="modal fade" id="cart-modal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">Choose Quantity</h4>
                        </div>
                        <div class="modal-body">
                            <form action="">
                                <div class="form-group">
                                    <label for="" id="p-name">Product Name</label>
                                    <p>@ KES. <span id="p-price"></span></p>
                                </div>
                                <div class="form-group box">
                                    <input type="hidden" id="product_id" value="">
                                    <input type="number" min="1" class="form-control" id="quantity">
                                </div>
                                <div class="form-group mt-2 text-right">
                                    <button type="button" class="btn btn-primary pull-right" onclick="submitCart()">Add to Cart</button>
                                    <a href="javascript:void" class="btn btn-danger pull-right" onclick="removeCart()">Cancel</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div> <!-- container-fluid -->
        <style>
            .box input {
                border: none;
                outline: none;
                padding: 10px;
                border-radius: 5px;
                box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
                width: 70% !important;
            }

           .box input:hover,
            .box input:focus {
                background: #ff008b;
                color: #fff;
            }

            .box button {
                background: #262262;
                color: #fff;
                border: none;
                outline: none;
                padding: 0 20px;
                border-radius: 5px;
            }

           .box button:hover {
                background: #ff008b;
            }

        </style>
    </div>
    <script src="{{ asset('jquery.nice-number.js') }}" defer></script>
@endsection