@extends('layouts.app')
@section('contents')

    <!-- Hero Start -->
    <div class="container-fluid nhsblue hero-header mb-5">
        <div class="container text-center">
            <h1 class="display-4 text-white mb-3 animated slideInDown">Products</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb justify-content-center mb-0 animated slideInDown">
                    <li class="breadcrumb-item"><a class="text-white" href="{{route('home.index')}}">Home</a></li>
                    <li class="breadcrumb-item text-white active" aria-current="page">Products</li>
                </ol>
            </nav>
        </div>
    </div>
    <!-- Hero End -->

        <!-- Cart Page Start -->
        <div class="container-fluid py-5">
            <div class="container py-5">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                          <tr>
                            <th scope="col">Products</th>
                            <th scope="col">Name</th>
                            <th scope="col">Price</th>
                            <th scope="col">Quantity</th>
                            <th scope="col">Total</th>
                          </tr>
                        </thead>
                        <tbody>
                            <tr id="product1">
                                <th scope="row">
                                    <div class="d-flex align-items-center">
                                        <img src="{{ asset('assets/img/mariamatress-product1.png') }}" alt="mariamatress-product" class="img-fluid me-5 rounded-circle" style="width: 80px; height: 80px;">
                                    </div>
                                </th>
                                <td>
                                    <p class="mb-0 mt-4">Big Banana</p>
                                </td>
                                <td>
                                    <p class="mb-0 mt-4">£ <span id="price">3.00</span></p>

                                </td>
                                <td>
                                    <div class="input-group quantity mt-4" style="width: 100px;">
                                        <div class="input-group-btn">
                                            <button class="btn btn-sm btn-minus rounded-circle bg-light border" >
                                            <i class="fa fa-minus"></i>
                                            </button>
                                        </div>
                                        <input type="text" class="form-control form-control-sm text-center border-0 quantity-input" value="1">
                                        <div class="input-group-btn">
                                            <button class="btn btn-sm btn-plus rounded-circle bg-light border">
                                                <i class="fa fa-plus"></i>
                                            </button>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <p class="mb-0 mt-4">£ <span id="totalprice">3.00</span></p>
                                </td>
                                {{-- <td>
                                    <button class="btn btn-md rounded-circle bg-light border mt-4" id="hide" onclick="confirmRemoveRow(this)">
                                                                                <i class="fa fa-times text-danger" id="hide"></i>
                                    </button>

                                </td> --}}
                            </tr>


                            <tr id="product2">
                                <th scope="row">
                                    <div class="d-flex align-items-center">
                                        <img src="{{ asset('assets/img/mariamatress-product1.png') }}" alt="mariamatress-product" class="img-fluid me-5 rounded-circle" style="width: 80px; height: 80px;">
                                    </div>
                                </th>
                                <td>
                                    <p class="mb-0 mt-4">Big Banana</p>
                                </td>
                                <td>
                                    <p class="mb-0 mt-4">£ <span id="price2">5.00</span></p>

                                </td>
                                <td>
                                    <div class="input-group quantity2 mt-4" style="width: 100px;">
                                        <div class="input-group-btn">
                                            <button class="btn btn-sm btn-minus2 rounded-circle bg-light border" >
                                            <i class="fa fa-minus"></i>
                                            </button>
                                        </div>
                                        <input type="text" class="form-control form-control-sm text-center border-0 quantity-input" value="1">
                                        <div class="input-group-btn">
                                            <button class="btn btn-sm btn-plus2 rounded-circle bg-light border">
                                                <i class="fa fa-plus"></i>
                                            </button>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <p class="mb-0 mt-4">£ <span id="totalprice2">5.00</span></p>
                                </td>
                                {{-- <td>
                                    <button class="btn btn-md rounded-circle bg-light border mt-4" id="hide" onclick="confirmRemoveRow(this)">
                                                                                <i class="fa fa-times text-danger" id="hide"></i>
                                    </button>

                                </td> --}}
                            </tr>



                        </tbody>
                    </table>
                </div>
                <div class="row g-4 justify-content-end mt-5">

                        <div class="col-lg-7 wow fadeIn" data-wow-delay="0.1s">
                            <p class="mb-4">Please fill the below form. All fileds are mandatory.</p>
                            <div class="wow fadeIn" data-wow-delay="0.3s">
                                <form>
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" id="name" placeholder="Your Name">
                                                <label for="name">Your Full Name*</label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-floating">
                                                <input type="text" class="form-control" id="subject" placeholder="Subject">
                                                <label for="subject">Phone Number*</label>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="form-floating">
                                                <input type="email" class="form-control" id="email" placeholder="Your Email">
                                                <label for="email">Your Email*</label>
                                            </div>
                                        </div>

                                        <div class="col-12">
                                            <div class="form-floating">
                                                <textarea class="form-control" placeholder="Leave a message here" id="message" style="height: 150px"></textarea>
                                                <label for="message">Your Address with Postcode*</label>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <p class="mb-4">Confirmation will be sent it to your email address</p>
                                        </div>

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


                    <div class="col-sm-8 col-md-7 col-lg-6 col-xl-4">
                        <div class="bg-light rounded">
                            <div class="p-4">
                                <h1 class="display-6 mb-4">Cart <span class="fw-normal">Total</span></h1>
                                <div class="d-flex justify-content-between mb-4">
                                    <h5 class="mb-0 me-4">Subtotal:</h5>
                                    <p class="mb-0">£ <span id="productTotal"></span></p>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <h5 class="mb-0 me-4">Shipping</h5>
                                    <div class="">
                                        <p class="mb-0">Free</p>
                                    </div>
                                </div>

                            </div>
                            <div class="py-1 mb-0 border-top border-bottom d-flex justify-content-between">
                                <h5 class="mb-0 ps-4 me-4">Total</h5>
                                <p class="mb-0 pe-4">£ <span id="grandTotal"></span></p>
                            </div>

                            <div class="py-4 mb-4 border-top border-bottom text-center">

                                <a href="" class="btn btn-primary mb-0 pe-4">Proceed to Payment</a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Cart Page End -->



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>
            $(document).ready(function() {
                var price = $('#price').text();
                console.log(price);
            });

        $(document).ready(function() {
            $('.btn-plus').click(function() {
                var $row = $(this).closest('tr');
                var $quantityInput = $row.find('.quantity-input');
                var value = parseInt($quantityInput.val());
                var price = parseFloat($row.find('#price').text());
                value+1;
                $quantityInput.val(value);
                var total = (value * price).toFixed(2);
                $row.find('#totalprice').text(total);
            });

            $('.btn-minus').click(function() {
                var $row = $(this).closest('tr');
                var $quantityInput = $row.find('.quantity-input');
                var value = parseInt($quantityInput.val());
                var price = parseFloat($row.find('#price').text());
                value-1;
                    $quantityInput.val(value);
                    var total = (value * price).toFixed(2);
                    $row.find('#totalprice').text(total);
            });
        });



        $(document).ready(function() {
            $('.btn-plus2').click(function() {
                var $row = $(this).closest('tr');
                var $quantityInput = $row.find('.quantity-input');
                var value = parseInt($quantityInput.val());
                var price = parseFloat($row.find('#price2').text());
                value+1;
                $quantityInput.val(value);
                var total = (value * price).toFixed(2);
                $row.find('#totalprice2').text(total);
            });

            $('.btn-minus2').click(function() {
                var $row = $(this).closest('tr');
                var $quantityInput = $row.find('.quantity-input');
                var value = parseInt($quantityInput.val());
                var price = parseFloat($row.find('#price2').text());
                value-1;
                $quantityInput.val(value);
                var total2 = (value * price).toFixed(2);
                $row.find('#totalprice2').text(total2);
            });

        });

        $(document).ready(function() {
            function calculateTotal() {
                var total1 = parseFloat($('#totalprice').text());
                var total2 = parseFloat($('#totalprice2').text());
                var grandTotal = total1 + total2;
                //console.log(total1);
                $('#grandTotal').text(grandTotal.toFixed(2));
                $('#productTotal').text(grandTotal.toFixed(2));
            }

            // Call calculateTotal on document ready and whenever quantity changes
            $(document).ready(function() {
                calculateTotal();

                $('.btn-plus, .btn-minus,.btn-plus2, .btn-minus2').click(function() {
                    calculateTotal();
                });
            });

        });


            function confirmRemoveRow(button) {
             if (confirm("Are you sure you want to remove this item?")) {
                 removeRow(button);
                 }
              }

              function removeRow(button) {
                $(button).closest('tr').hide();
                }




    </script>
@endsection