@extends('front.layout.app')
@section('title', 'Cart')
@section('content')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>

    @if(!empty($page->pageComponents))
        @forelse($page->pageComponents as $key => $section)
            @if($key == 0)
                <div class="innerBanner">
                    @if(!empty($section->pageComponentMedia[0]) && $section->pageComponentMedia[0]->file_type == 'image')
                        <img src="{{asset($section->pageComponentMedia[0]->file_name) ?? asset('front/images/aboutBanner.jpg')}}"
                             class="w-100">
                    @elseif(!empty($section->pageComponentMedia[0]) && $section->pageComponentMedia[0]->file_type == 'video')
                        <video>
                            <source src="{{asset($section->pageComponentMedia[0]->file_name)}}" type="video/*">
                            Your browser does not support the video tag.
                        </video>
                    @endif

                    <h2>{{$section->title ?? ''}}</h2>
                </div>
            @endif
        @empty
        @endforelse
    @endif

    @if($cartCollection->count() > 0)
        <div class="checkOutStyle cartSec" id="products-section">
            <div class="container">
                @php $emptySectionDisplay = 'none'; @endphp
                <div class="row">
                    <div class="col-md-12 p-sm-0">
                        <div class="title">
                            <h2>Confirm Your Purchase</h2>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-8 p-sm-0">
                        <div class="alert alert-danger" style="display: none"></div>
                    </div>
                </div>
                <div class="row cartItemCard">
                    <div class="col-lg-8 col-md-8">
                        @foreach (Cart::content() as $item)
                            @if($item->options->type === 'collection')
                                <div class="table-responsive" id="row{{$item->rowId}}">
                                    <div class="top menuOptions" data-id="{{$item->rowId}}">
                                        @if(Auth::check())
                                            <button class="themeBtn addAddress" data-id="{{$item->rowId}}">Add Address
                                            </button>
                                            <button class="themeBtn selectAddr addressMenu"
                                                    id="addressMenu{{$item->rowId}}"
                                                    data-id="{{$item->rowId}}">Select Address
                                            </button>
                                        @else
                                            <button class="themeBtn addAddress" data-id="{{$item->rowId}}">Add Address
                                            </button>
                                        @endif
                                    </div>
                                    <table class="table table-border">
                                        <thead>
                                        <tr>
                                            <th>Collection Name</th>
                                            <th>Product(s)</th>
                                            <th>QTY</th>
                                            <th>Actual Amount</th>
                                            <th>Discount(%)</th>
                                            <th>Total Amount</th>
                                            <th>Remove Collection</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td>
                                                <div class="price">{{ $item->name }}</div>
                                            </td>
                                            <td>
                                                @php $attributes = array_keys($item->options->products); @endphp
                                                <div class="price text-capitalize">{{ str_replace(['"', '[', ']', '-'], ' ', json_encode($attributes, JSON_PRETTY_PRINT)) }}</div>
                                            </td>
                                            <td>
                                                <div class="price">{{ $item->qty }}</div>
                                            </td>
                                            <td>
                                                <div class="price">${{ $item->options->actual_amount }}</div>
                                            </td>
                                            <td>
                                                <div class="price">{{ $item->options->discount }}</div>
                                            </td>
                                            <td>
                                                <div class="price">${{ $item->price }}</div>
                                            </td>
                                            <td>
                                                <button type="button" class="removeItem removeCartBtn btnStyle"
                                                        data-id="{{$item->rowId}}">Remove
                                                </button>
                                            </td>
                                        </tbody>
                                    </table>
                                </div>
                            @else
                                <input type="hidden" id="product_ids" value="{{ Cart::content()->pluck('id') ?? '' }}">
                                <div class="table-responsive" id="row{{$item->rowId}}">
                                    <div class="top menuOptions" data-id="{{$item->rowId}}">
                                        @if(Auth::check())
                                            <button class="themeBtn addAddress" data-id="{{$item->rowId}}">Add Address
                                            </button>
                                            <button class="themeBtn selectAddr addressMenu"
                                                    id="addressMenu{{$item->rowId}}"
                                                    data-id="{{$item->rowId}}">Select Address
                                            </button>
                                        @else
                                            <button class="themeBtn addAddress" data-id="{{$item->rowId}}">Add Address
                                            </button>
                                        @endif
                                    </div>
                                    <table class="table table-border">
                                        <thead>
                                        <tr>
                                            <th>Product Name</th>
                                            <th>Price</th>
                                            <th>QTY</th>
                                            <th>Total</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td>
                                                <div class="cell">
                                                    <div class="img">
                                                        <img src="{{ productImage($item->model->product_image) }}"
                                                             alt=""
                                                             class="img-fluid">
                                                        <button type="button" class="removeItem removeCartBtn"
                                                                data-id="{{$item->rowId}}">Remove
                                                        </button>
                                                    </div>
                                                    <div class="content">
                                                        <h4>{{ $item->model->product_name }}</h4>
                                                        <span>Hybrid Dominant</span>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                ${{ (isset($item->price) && $item->price > 0) ? $item->price : $item->model->current_price }}</td>
                                            <td>
                                                <div class="shop-details">
                                                    <input type="text" name="quantity"
                                                           class="form-control input-number pl-0 quantity"
                                                           value="{{$item->qty ?? 1}}"
                                                           data-productquantity="{{$item->model->product_qty}}">
                                                    <span class="input-group-btn">
                                                  <button type="button"
                                                          class="quantity quantity-right-plus btn btn-number plus"
                                                          data-id="{{$item->rowId}}"
                                                          data-productquantity="{{$item->model->product_qty}}">
                                                      <i class="fas fa-angle-up"></i>
                                                  </button>
                                                  <button type="button" data-qty="1"
                                                          class="quantity quantity-left-minus btn btn-number minus"
                                                          data-id="{{$item->rowId}}"
                                                          data-productquantity="{{$item->model->product_qty}}">
                                                    <i class="fas fa-angle-down"></i>
                                                  </button>
                                                </span>
                                                </div>
                                            </td>
                                            <td class="price">{{$item->total()}}</td>
                                        </tbody>
                                    </table>
                                </div>
                            @endif
                        @endforeach
                    </div>
                    <div class="col-md-4 text-left">
                        <div class="summaryContent">
                            <h3>Order Summary</h3>
                            <div class="itemsTotal">
                                <p>Subtotal (<span id="selectedTotalItems">{{ Cart::count() }} </span> items)</p>
                                <span id="subtotalText">${{Cart::total()}}</span>
                            </div>

                            <p>Shipping Fee<span id="shippingFeeText">$0.00</span></p>
                            <div class="summaryBtn">
                                <input type="text" placeholder="Enter Voucher Code" name="coupon" id="coupon">
                                <button class="applyBtn" id="couponBtn">Apply</button>
                            </div>
                            <div class="summaryBtn">
                                <input type="number" placeholder="Tip" name="tip" id="tip">
                            </div>
                            <p class="chngClr">Total<span id="totalText">$0.00</span></p>
                            <a id="proceedBtn" href="javascript:void(0);">Proceed to Pay</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <input type="hidden" id="sub_total" value="{{Cart::total()}}">
        <input type="hidden" id="shipping_fee" value="0">
        <input type="hidden" id="total_amount" value="0.00">
    @else
        @php $emptySectionDisplay = 'block'; @endphp
    @endif
    <div class="checkOutStyle" id="empty-section" style="display: {{$emptySectionDisplay}}">
        <div class="container">
            <h3>No items in Cart!</h3>
            <a href="{{ url('shop') }}" class="btnStyle my-5">Shop Now</a>
            <div class="spacer"></div>
            <div class="spacer"></div>
        </div>
    </div>
    @php
        $categories = \App\Models\Category::all();
    @endphp

    @foreach($categories as $category)
        @php

            $related_products = DB::table('products')->where('status', 1)
                ->where('category_id', $category->id)
                ->orderBy(DB::raw('RAND()'))
                ->take(12)
                ->get();
        @endphp
    @endforeach

    @if(Cart::count())
        <div class="productSliderSec">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="title">
                            <h2>Related Products</h2>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="prodSlider">
                            @foreach ($related_products as $item)
                                @if($item->status === 1)
                                    <input type="hidden" name="category_id" value="{{ $item->category_id }}">
                                    <div class="slide">
                                        <div class="proThumb ">
                                            <div class="img">
                                                <img src="{{ @productImage($item->product_image) }}" alt=""
                                                     class="w-100">
                                                <div class="overlay">
                                                    <div class="btn-rev shop-nms">
                                                        <a href="javascript:void(0);"
                                                           class="buttonCart prodPromote"
                                                           data-id="3">
                                                            <i class="fal fa-shopping-bag"></i>
                                                            <i class="fa fa-plus-circle"></i>
                                                        </a>
                                                        <a href="javascript:void(0);"
                                                           class="whistlist-btn buttonWishList"
                                                           data-id="3"><i class="fas fa-heart"></i></a>
                                                    </div>
                                                    <p>{!! $item->description !!}</p>
                                                    <p></p>
                                                </div>
                                                <span>${{ $item->current_price }}</span>
                                                <div class="iconsImg">
                                                    <img src="http://127.0.0.1:8000/front/images/color-io1.png"
                                                         alt="">
                                                </div>
                                            </div>
                                            <a href="http://127.0.0.1:8000/shop/alien-og-1">{{ $item->product_name }}</a>
                                            <strong>${{ $item->current_price }}/<small>{{$item->weight ?? ''}}
                                                    G</small></strong>
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                    </div>

                </div>
            </div>
        </div>
    @endif

    <div class="modal fade" id="bookDesc" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content p-5">
                <button type="button" class="close sp_discount_modal_close" data-dismiss="modal"
                        aria-label="Close"
                        id="sp_discount_modal_close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <div class="row">
                    <form method="post" action="{{ route('addCustomerAddress') }}"
                          class="row justify-content-center formStyle" id="addAddrForm">
                        <div class="col-md-12">
                            <div class="title inner">
                                <h2>Billing Address</h2>
                                <h4>Please provide correct address so we can deliver your package easily</h4>
                            </div>
                        </div>
                        <div class="col-md-12" style="display: none" id="addAddrAlert">

                        </div>
                        @csrf
                        <div class="col-md-6">
                            <label>first Name<span>*</span></label>
                            <input type="text" name="first_name"
                                   class="form-control @error('first_name') is-invalid @enderror" placeholder=""
                                   value="{{old('first_name') ?? ''}}" required>
                            @error('first_name')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Last Name</label>
                            <input type="text" name="last_name"
                                   class="form-control @error('last_name') is-invalid @enderror" placeholder=""
                                   value="{{old('last_name') ?? ''}}" required>
                            @error('last_name')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Email <span>*</span></label>
                            <input type="text" name="email"
                                   class="form-control @error('email') is-invalid @enderror"
                                   placeholder="" value="{{$addressDetail['email']??''}}" required>
                            @error('email')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Phone<span>*</span></label>
                            <input type="number" name="phone_no"
                                   class="form-control @error('phone_no') is-invalid @enderror"
                                   value="{{old('phone_no') ?? ''}}" placeholder="50 123 4567" required>
                            @error('phone_no')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Address Title <span>*</span></label>
                            <input type="text" name="title"
                                   class="form-control @error('title') is-invalid @enderror"
                                   placeholder="" value="{{old('title') ?? ''}}" required>
                            @error('title')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Address Number<span>*</span></label>
                            <input type="number" name="address_number"
                                   class="form-control @error('address_number') is-invalid @enderror"
                                   value="{{old('address_number') ?? ''}}" placeholder="501" required>
                            @error('address_number')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Street<span>*</span></label>
                            <input type="text" name="street"
                                   class="form-control @error('street') is-invalid @enderror"
                                   value="{{old('street') ?? ''}}" placeholder="" required>
                            @error('street')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Apartment<span>*</span></label>
                            <input type="text" name="apartment"
                                   class="form-control @error('apartment') is-invalid @enderror" placeholder=""
                                   value="{{old('apartment') ?? ''}}" required>
                            @error('apartment')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>city</label>
                            <input type="text" name="city"
                                   class="form-control @error('city') is-invalid @enderror"
                                   placeholder="" value="{{old('city') ?? ''}}" required>
                            @error('city')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>State</label>
                            <input type="text" name="state"
                                   class="form-control @error('state') is-invalid @enderror"
                                   placeholder="" value="{{old('state') ?? ''}}" required>
                            @error('state')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Zip code</label>
                            <input type="text" id="zip_code" name="zip_code"
                                   class="form-control @error('zip_code') is-invalid @enderror" placeholder=""
                                   value="{{old('zip_code') ?? ''}}" required>
                            @error('zip_code')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label>Orders Revieving Date</label>
                            <input type="date" id="order_days" name="order_days"
                                   class="form-control @error('order_days') is-invalid @enderror" placeholder=""
                                   value="{{old('order_days') ?? ''}}">
                            @error('order_days')
                            <span class="invalid-feedback" role="alert"><strong>{{$message}}</strong></span>
                            @enderror
                        </div>

                        <input type="hidden" id="cart_id" name="cart_id" value="">
                        <div class="col-md-12 text-center mt-4">
                            @if(Auth::check())
                                <button type="button" id="addAddr" class="btnStyle">Save</button>
                            @else
                                <button type="button" id="addAddrGuest" class="btnStyle">Save</button>
                            @endif
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="bookdes" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content p-5">
                <div class="row">
                    <div class="col-md-12">
                        <div class="myAccount secondAccount">
                            <div role="tabpanel" class="tab-pane" id="address">
                                <h2 class="title">My Address</h2>
                                <div class="row">
                                    @foreach($addresses as $akey => $address)
                                        <div class="col-lg-6">
                                            <div class="adressCard" data-val="{{$address->id}}">
                                                <div class="variant-select">
                                                    <input type="radio" id="{{$akey}}-pack" name="variant"
                                                           class="addressId" value="{{$address->id}}"
                                                           data-id="{{$address->id}}">
                                                    <label for="{{$akey}}-pack">
                                                        <div class="variant-select_wrapper">
                                                            <address>
                                                                <span>{{$address->title}}</span>
                                                                <span>{{$address->first_name .' '. $address->last_name}}</span>
                                                                <span>{{$address->address ?? ''}}</span>
                                                                <span>{{$address->city ?? ''}} </span>
                                                                <span>{{$address->state ?? ''}} </span>
                                                                <span>{{$address->country ?? ''}}</span>
                                                                <span>{{$address->zip_code ?? ''}}</span>
                                                                <span>{{$address->order_days ?? ''}}</span>
                                                                <span>{{$address->phone_no_code ?? ''}} {{$address->phone_no ?? ''}}</span>
                                                            </address>
                                                        </div>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade offerModal" id="offerPopup" tabindex="-1"
         aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <div class="modal-body">
                    <div id="content"></div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

    <script>

        @if(Auth::check())
            isGuest = false;
        @else
            isGuest = true;
        @endif

            totalAmount = 0;
        totalShippmentAmount = 0;
        discountAmt = 0;

        $(document).ready(function () {
            $('#couponBtn').on('click', function () {
                var $this = $(this);
                $(".couponErr").remove();

                var coupon = $("#coupon").val();
                var total_amountC = 0;
                if (totalAmount <= 0) {
                    total_amountC = $("#total_amount").val();
                } else {
                    total_amountC = totalAmount;
                }

                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: 'checkout/apply-coupon',
                    type: 'get',
                    data: {'coupon_code': coupon},
                    success: function (json) {
                        if (json['status'] === true) {
                            $this.prop('disabled', true);
                            var discount = 0;
                            var value = json['data'].value;
                            var type = json['data'].type;
                            if (type === 'value') {
                                discount = value;
                                total_amountC = total_amountC - value;
                            }
                            if (type === 'percentage') {
                                discount = (total_amountC / 100) * value;
                                total_amountC = total_amountC - discount;
                            }
                            if (total_amountC <= 0) {
                                total_amountC = 0;
                                discount = 0;
                            }
                            total_amountC = total_amountC.toFixed(2);
                            discountAmt = discount;

                            if (discount > 0) {
                                var html = '<p id="discountRow" style="color: red"><strong>Discount<span id="discountText">$' + discount.toFixed(2) + '</span></strong></p>';
                                $(html).insertAfter($(".summaryBtn"));
                            }

                            totalAmount = total_amountC;
                            $("#total_amount").val(totalAmount);
                            $("#totalText").empty().append('$' + totalAmount);
                        } else {
                            $('<p style="color: red" class="couponErr">' + json['error'] + '</p>').insertAfter($(".summaryBtn"));
                        }
                    }
                });
            });
            $("#tip").focusout(function () {
                if ($(this).val() != 'undefined' && $(this).val() > 0) {
                    totalAmount += $(this).val();
                    updateTotalText();
                }
            })

            $(".selectAddr").on('click', function () {
                $(".addressId").removeAttr('data-id');
                let rowId = $(this).data('id');
                $(".addressId").data('id', rowId);
                $("#bookdes").modal('show');
            })

            $('.addressId').on('click', function () {
                let addressId = $(this).val();
                let rowId = $(this).data('id');
                $("#addressMenu" + rowId).attr('data-val', addressId);
                $("#bookdes").modal('hide');
                $(this).prop('checked', false);

                let orderAmt = $("#sub_total").val();
                getDeliveryFee(addressId, null, orderAmt);
            });

            $(".addAddress").on('click', function () {
                let rowId = $(this).data('id');
                $("#cart_id").val(rowId);
                $("#addAddr").data('id', rowId);
                $("#addAddrGuest").data('id', rowId);
                $("#bookDesc").modal('show');
            });

            $("#addAddr").on('click', function () {
                let rowId = $(this).data('id');
                $("#addAddrAlert").css('display', 'none').empty();
                $.ajax({
                    url: `{{ route('addCustomerAddress') }}`,
                    type: 'POST',
                    data: $("#addAddrForm").serialize(),
                    success: function (resp) {
                        //console.log(resp)
                        if (resp.status === true) {
                            $("#addressMenu" + rowId).attr('data-val', resp.data);
                            $("#bookDesc").modal('hide');
                            toastr.success(resp.msg, 'Success!')
                        } else {
                            var html = '<div class="alert alert-danger"><ul>';
                            $.each(resp.errors, function (i, o) {
                                html += '<li>' + o[0] + '</li>'
                            })
                            html += '</ul></div>';
                            $("#addAddrAlert").css('display', 'block').empty().append(html);
                            toastr.error(resp.msg, 'Error!')
                        }
                    }
                });
            })
            $("#addAddrGuest").on('click', function () {
                let rowId = $(this).data('id');
                $("#addAddrAlert").css('display', 'none').empty();
                $.ajax({
                    url: `{{route('addGuestAddress')}}`,
                    type: 'POST',
                    data: $("#addAddrForm").serialize(),
                    success: function (resp) {
                        //console.log(resp)
                        if (resp.status === true) {
                            $("#addressMenu" + rowId).attr('data-val', resp.data);
                            $("#bookDesc").modal('hide');
                            toastr.success(resp.msg, 'Success!')
                            let orderAmt = $("#sub_total").val();
                            let zipCode = $("#zip_code").val();
                            getDeliveryFee(null, zipCode, orderAmt);
                        } else {
                            var html = '<div class="alert alert-danger"><ul>';
                            $.each(resp.errors, function (i, o) {
                                html += '<li>' + o[0] + '</li>'
                            })
                            html += '</ul></div>';
                            $("#addAddrAlert").css('display', 'block').empty().append(html);
                            toastr.error(resp.msg, 'Error!')
                        }
                    }
                });
            });
        });

        $(document).ready(function () {
            $(".shipmentMenu").on('change', function () {
                $(".alert").css('display', 'none');
                var $this = $(this);
                var cart_id = $this.parents('.menuOptions').data('id');
                var address_id = $this.parents('.menuOptions').find('.addressMenu').data('val');
                var serviceElem = $this.parents('.menuOptions').find('.shipmentServiceMenu');
                if ($this.val() == 'fedex') {
                    getFedexRates(cart_id, address_id, serviceElem);
                } else if ($this.val() == 'usps') {
                    getUspsRates(cart_id, address_id, serviceElem);
                }

            });

            $(".shipmentServiceMenu").on('change', function () {
                calculateShippingTotal();
                updateTotalText();
            });

            $("#proceedBtn").on('click', function () {
                dataArr = [];
                var tip = $("#tip").val();
                $(".menuOptions").each(function (i, obj) {
                    let $this = $(this);
                    let cart_id = $this.data('id');
                    let addressId = "";
                    //if ($('#rowCheck'+cart_id).is(':checked')){
                    //console.log("check");

                    var shipElem = $this.find('.shipmentMenu');
                    var serviceRateElem = $this.find('.shipmentServiceMenu option:selected');
                    if (isGuest === false) {
                        var addressElem = $this.find('.addressMenu');
                        addressId = addressElem.data('val');
                        //console.log(addressId);
                        if (addressId == null || addressId == "") {
                            //console.log("address null")
                            $(".alert").css('display', 'block').empty().append("Please select address for every item.");
                            return false;
                        }
                    }

                    let shipMethod = shipElem.val();
                    let rateServiceAmt = serviceRateElem.val();
                    let rateServiceType = serviceRateElem.attr('data-service');
                    let rateServicePack = serviceRateElem.attr('data-packaging');
                    let thisArr = {
                        'cart_id': cart_id,
                        'address_id': addressId,
                        'shipMethod': shipMethod,
                        'shipServiceAmt': rateServiceAmt,
                        'shipServiceType': rateServiceType,
                        'shipServicePack': rateServicePack
                    }
                    //console.log(thisArr);
                    dataArr.push(thisArr);
                    //}

                });
                if (dataArr.length > 0) {
                    $.ajax({
                        url: `{{route('saveCartDetail')}}`,
                        type: 'POST',
                        data: {
                            'cartDetail': dataArr,
                            'coupon': $("#coupon").val(),
                            'discount': discountAmt,
                            'tip': tip,
                            "_token": $("meta[name='csrf-token']").attr('content')
                        },
                        success: function (resp) {
                            if (resp.status === true) {
                                window.location = "{{route('cardDetail')}}"
                            } else {
                                $(".alert").css('display', 'block').empty().append(resp.message);
                            }
                        },
                        error: function () {
                            console.log(resp);
                            $(".alert").css('display', 'block').empty().append(resp.message);
                        }
                    });
                } else {
                    $(".alert").css('display', 'block').empty().append("Please select address for every item");
                    return false;
                }

            });
        });

        function getSubtotalAmt() {
            let rowIds = [];
            $.each($(".menuOptions"), function (i, o) {
                rowIds.push($(this).data('id'))
            });

            if (rowIds.length > 0) {
                $.ajax({
                    url: `{{route('cart.itemDetail')}}`,
                    type: 'POST',
                    data: {
                        'row_ids': rowIds,
                        "_token": $("meta[name='csrf-token']").attr('content')
                    },
                    success: function (resp) {
                        if (resp.status === true) {
                            $("#sub_total").val(resp.subTotal.toFixed(2));
                            $("#subtotalText").text('$' + resp.subTotal.toFixed(2));

                        } else {
                            $(".alert").css('display', 'block').empty().append(resp.message);
                        }
                        updateTotalText();
                    },
                    error: function () {
                        console.log(resp);
                        $(".alert").css('display', 'block').empty().append(resp.message);
                    }
                });
            }
        }

        function getDeliveryFee(addressId, zipCode, orderAmt) {
            $(".alert").css('display', 'none');
            $.ajax({
                url: "{{route('cart.getShippingValue')}}",
                type: 'GET',
                data: {'addressId': addressId, 'zip_code': zipCode, 'orderAmt': orderAmt},
                success: function (resp) {
                    if (resp.status === true) {
                        //console.log(resp);
                        totalShippmentAmount = resp.delivery_fee;
                        $("#shipping_fee").val(totalShippmentAmount);
                        $("#shippingFeeText").text('$' + resp.delivery_fee.toFixed(2));
                        updateTotalText();
                        $("#proceedBtn").show();
                    } else {
                        $(".alert").css('display', 'block').empty().append(resp.msg);
                        $("#proceedBtn").hide();
                    }
                }
            });
        }

        function getFedexRates(cart_id, address_id, serviceElem) {

            $.ajax({
                url: `{{route('fedexServiceRates')}}`,
                type: 'POST',
                data: {
                    cart_id: cart_id,
                    address_id: address_id,
                    "_token": $("meta[name='csrf-token']").attr('content')
                },
                success: function (resp) {
                    if (resp.status === true) {
                        delete resp.status;
                        delete resp.message;
                        var html = '<option value="">Select Service</option>';
                        $.each(resp, function (index, item) {
                            html += `<option value="${item.amount}" data-service="${index}" data-packaging="${item.packaging_type}">
                                            ${index} | ${item.currency_amount}
                                            </option>`;
                            serviceElem.empty().append(html);
                        });
                    } else {
                        $(".alert").css('display', 'block').empty().append(resp.message);
                    }
                },
                error: function () {
                    console.log(resp);
                    $(".alert").css('display', 'block').empty().append(resp.message);
                }
            });
        }

        function getUspsRates(cart_id, address_id, serviceElem) {

            $.ajax({
                url: `{{route('getUspsShippingRate')}}`,
                type: 'POST',
                data: {
                    cart_id: cart_id,
                    address_id: address_id,
                    "_token": $("meta[name='csrf-token']").attr('content')
                },
                success: function (resp) {
                    if (resp.status === true) {
                        delete resp.status;
                        delete resp.message;
                        console.log(resp);
                        var html = '<option value="">Select Service</option>';
                        $.each(resp.data, function (index, item) {
                            html += `<option value="${item.value}" data-packaging="${item.name}">
                                            ${item.name} | ${item.value}
                                            </option>`;
                            serviceElem.empty().append(html);
                        });
                    } else {
                        $(".alert").css('display', 'block').empty().append(resp.message);
                    }
                },
                error: function () {
                    console.log(resp);
                    $(".alert").css('display', 'block').empty().append(resp.message);
                }
            });
        }

        function calculateShippingTotal() {
            var shippingFeeTotal = 0;
            var total_amount = parseFloat($("#sub_total").val());
            $('.shipmentServiceMenu option:selected').each(function (i, obj) {
                if ($(this).val() !== 'Select' && $(this).val() !== undefined && $(this).val() !== '') {
                    var shipping_subtotal = parseFloat($(this).val());
                    shippingFeeTotal += shipping_subtotal;
                    $("#shippingFeeText").text("$" + shippingFeeTotal.toFixed(2));
                    $("#shipping_fee").val(shippingFeeTotal.toFixed(2));
                }
            });
            total_amount += shippingFeeTotal;
            $("#total_amount").val(total_amount.toFixed(2));
            $("#totalText").text("$" + total_amount.toFixed(2));
            totalAmount = total_amount;
        }

        function updateTotalText() {
            var subtotal = parseFloat($("#sub_total").val());
            var shipping_fee = parseFloat($("#shipping_fee").val());
            var tip = parseFloat($("#tip").val());
            var total = (subtotal + shipping_fee) - discountAmt;
            if (!isNaN(tip)) {
                total += tip;
            }

            total = total.toFixed(2);
            $("#totalText").text('$' + total);
            $("#total_amount").val(total);

            totalShippmentAmount = shipping_fee;
            totalAmount = total;
        }

        $(".removeCartBtn").on('click', function () {
            toastr.success('Cart Has Been Remove');
        })

        $(document).ready(function () {
            $('#open-dialog-btn').click(function () {
                $('#dialog-content').dialog({
                    title: 'Collection Products Deal',
                    width: 400,
                    height: 300,
                    modal: true
                });
            });
        });
    </script>
    <script>
        var popupOpenTime = new Date().getTime();
        var popupTimeout;
        var popupShown = false; // track whether the popup has been shown before

        $(function() {
            // show the popup immediately on page load if it hasn't been shown before
            // if (!popupShown) {
            //     showPopup();
            //     popupShown = true;
            // }
            // show the popup after 5 seconds
            setTimeout(function() {
                showPopup();
                popupShown = true;
            }, 5000);

            // check the duration of the popup every 7 seconds
            setInterval(function() {
                var popupCloseTime = new Date().getTime();
                var popupDuration = popupCloseTime - popupOpenTime;

                // if the popup has been open for less than 10 seconds and it hasn't been shown before, show it again
                if (popupDuration < 10000 && !popupShown) {
                    showPopup();
                    popupShown = true;
                }
            }, 7000);
        });

        function showPopup() {
            // hide the popup if it's currently visible
            $('#offerPopup').modal('hide');

            // load new content into the popup
            $('#content').empty();
            var product_ids = $('#product_ids').val();
            var collection_ids = $('#collection_ids').val();

            $.ajax({
                url: '{{ url("/collection/products") }}',
                type: 'GET',
                data: {
                    product_ids,
                    collection_ids
                },
                dataType: 'json',
                success: function(response) {
                    $('#offerPopup').modal('show').fadeOut();
                    if (response.data) {
                        $('#content').append(response.view);
                        let proSwiper = new Swiper('.proSlider', {
                            slidesPerView: 4,
                            spaceBetween: 10,
                            observer: true,
                            observeParents: true,
                            pagination: {
                                el: '.swiper-pagination',
                            },
                        });
                    }
                }
            });

            // update the popup open time
            popupOpenTime = new Date().getTime();

            // hide the popup after 15 seconds
            clearTimeout(popupTimeout);
            popupTimeout = setTimeout(function() {
                $('#offerPopup').modal('hide');

                // show the popup again after 5 seconds
                setTimeout(function() {
                    showPopup();
                }, 10000);
            }, 15000);
        }
    </script>
@endsection