@extends('web.layout.master')

@section('content')
<style>
    body, html { overflow-x:hidden; }

    body{
        background-color: #f1f1f1 !important;
    }
    #app{
        background: #f1f1f1;
        min-height: 600px;
    }

    .btn-primary{
        background: #04458f;
        border: none;
    }
    /* Dotted red border */
.hrdash {
    margin-top: 5px;
    margin-bottom: 5px;
    border: none;
  height: 1px;
  background: #000;
  background: repeating-linear-gradient(90deg,#000,#000 6px,transparent 6px,transparent 12px);
  }


  @media (max-width: 766px){
    .container:not(.printable){
        padding: 0px;
    }
    .fs-5{
        font-size: 1rem !important;
    }
    .fs-55{
        font-size: 1.25rem !important;
    }
    .card{
        border-radius: 0px !important;
    }
  }
  .mobilehidehr{
    display: none;
  }
 #qtyloader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    text-align: center;
    background: url(https://i.imgur.com/Cn9MC39.gif) 50% 50% no-repeat rgba(255,255,255,0.9);
    vertical-align: middle;
    color: #000;
    background-size: 80px;
    background-position: center;

}
#qtyloader p{
    position: fixed;
    top: calc(50% + 90px);
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    text-align: center;

    vertical-align: middle;
    color: #000;

}
#qtyloader:before{
      content: attr(data-wordLoad);
      color: #000;
      position: absolute;
      top: calc(50% + 50px);
    //   left: calc(50% - 90px);
        width: 100%;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
      font-size: 1.5rem;
}
</style>
<div id="qtyloader" class="chkoutLoader" style="display: none" data-wordLoad="Loading...">
    <!-- <h3>Your order is processing...</h3> -->
</div>
<div class="container ">
@if(!$cartItems->isEmpty())
@foreach (['danger', 'warning', 'success', 'info'] as $msg)
        @if(Session::has('alert-' . $msg))

        <p class="alert alert-{{ $msg }} mt-2">{{ Session::get('alert-' . $msg) }}
            <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
        </p>
        @endif
        @endforeach
        @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <div class="row mt-3 mb-2 d-none d-lg-block">
        <div class="col-sm-12">
            <div class=" mt-4 mb-2 text-black  font-weight-bold">
                <label class="fs-3">Shopping Cart ({{ $totalqty }})</label>
            </div>
        </div>
    </div>
    <div class="row d-lg-none" style="padding: 4px;">
        <div class="bg-white" style="padding: 12px;margin-bottom: 0px;" >
                <div class="text-black  font-weight-bold" style="margin-left: 10px;">
                    <label class="fs-3">Shopping Cart ({{ $totalqty }})</label>
                </div>
            </div>
    </div>
    <div class="row ">
        <div class="col-md-8">
            {{--  desktop  --}}
            <div class="card d-none d-lg-block" style="border: 0px;">
                <div class="card-header bg-primary text-white" style="height: 60px;padding: 15px;border-radius: 15px 15px 0px 0px;">
                    <div class="row">
                        <div class="col-md-6 fs-5">
                            Item
                        </div>
                        <div class="col-md-2 fs-5 text-center">
                            Item Price
                        </div>
                        <div class="col-md-2 fs-5 text-center">
                            Quantity
                        </div>
                        <div class="col-md-2 fs-5 text-end">
                            Total Price
                        </div>
                    </div>
                </div>
                @php
                $total = 0;
                @endphp
                @foreach($cartItems as $item)
                @php
                $total += ($item->price);
                @endphp
                <div class="card-body p-3">
                    <div class="row pt-2">
                        <div class="col-md-6 text-center">
                            <div class="row g-0">

                                <div class="col-3 text-center">
                                    <img alt="..."
                                        src="{{ $item->attributes->image }}"
                                        onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-Parts.jpg&quot;"
                                        class="img-fluid rounded-start" width="90px" style="max-width: 150px;">
                                </div>
                                                                <div class="col-9 text-start ps-3">
                                    @if(!empty($item->product_url))
                                        <a href="{{ $item->product_url }}"
                                            class="text-decoration-none text-black " aria-label="">
                                            <h5 class="">{{ $item->name }}</h5>
                                        </a>
                                    @else
                                        <a href="{{ route('part-details-new',[$pname1.'-s',$item->id]) }}"
                                        class="text-decoration-none text-black " aria-label="">
                                        <h5 class="">{{ $item->name }}</h5>
                                        </a>
                                    @endif
                                    <p class="card-text d-none d-lg-block d-md-block">Product Code: {{ $item->id }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2 text-center">
                            <span class="fs-5 ">${{ str_replace(',','',round($item->attributes->perproductprice,2)) }}</span>
                        </div>
                        <div class="col-md-2 text-center">
                            <div class="form-group mb-4">
                                <div style="width: 125px;">
                                    <div class="input-group">
                                        <span class="input-group-prepend">
                                            <button aria-labelledby="..." type="button"
                                                class="btn btn-outline-secondary btn-number" item-id="{{ $item->id }}"
                                                data-type="minus" data-field="cartqty"
                                                style="height: 38px;border-radius: 0px;">
                                                <span class="fa fa-minus"></span>
                                            </button>
                                        </span>
                                        <input aria-labelledby="PartsWarehouse" type="text"
                                            onchange="cartQtyUpdateViewPage(this)" name="cartqty" id="itemID_{{ $item->id }}" item-id="{{ $item->id }}"  data-id="{{ $item->id }}" value="{{ $item->quantity }}" data-price="{{ $item->attributes->perproductprice }}"
                                            class="form-control input-number" min="1" max="100" readonly="">
                                        <span class="input-group-append">
                                            <button aria-labelledby="..." type="button"
                                                class="btn btn-outline-secondary btn-number" item-id="{{ $item->id }}"
                                                data-type="plus" data-field="cartqty"
                                                style="height: 38px;border-radius: 0px;">
                                                <span class="fa fa-plus"></span>
                                            </button>
                                        </span>
                                    </div>
                                </div>


                            </div>
                        </div>
                        <div class="col-md-2 text-end">
                            <p class="text-red text-danger">
                                ${{ str_replace(',','',round($item->price,2)) }}
                            </p>
                        </div>
                        <div class="col-md-12 text-end">
                            <span style="color: #868585;cursor: pointer;" onclick="removeCartView('{{ $item->id }}')"><i class="fas fa-trash-alt"></i>&nbsp;&nbsp; Remove</span>
                        </div>
                    </div>
                    @if(!$loop->last)
                    <hr>
                    @endif
                </div>
                @endforeach



            </div>

            {{--  mobile  --}}
            <div class="card d-lg-none" style="border: 0px;margin-bottom: 5px;">
                @foreach($cartItems as $item)
                <div class="card-body p-2">
                    <div class="row">
                        <div class="col-3">

                            <img alt="..." src="{{ $item->attributes->image }}"
                                onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-Parts.jpg&quot;"
                                class="img-fluid rounded-start" width="100%" style="max-width: 150px;">

                        </div>
                        <div class="col-9">
                            <div class="row">
                                <div class="col-10">
                                                                        @if(!empty($item->product_url))
                                        <a href="{{ $item->product_url }}"
                                            class="text-decoration-none text-black " aria-label="">
                                            <span class="">{{ $item->name }}</span>
                                        </a>
                                    @else
                                        <a href="{{ route('part-details-new',[$pname1.'-s',$item->id]) }}"
                                        class="text-decoration-none text-black " aria-label="">
                                        <span class="">{{ $item->name }}</span>
                                    </a>
                                    @endif

                                    <p class="card-text" style="color: #7f7d7d;font-size: 14px;">Product Code: {{ $item->id }}</p>
                                </div>
                                <div class="col-2 text-end">
                                    <i class="fas fa-trash-alt" style="color: #ddd;" onclick="removeCartView('{{ $item->id }}')"></i>
                                </div>
                            </div>

                            <div class="row mt-2">
                                <div class="col-6">
                                    <span class="card-text" style="color: #7f7d7d;font-size: 12px;">Item
                                        Price</span><br>
                                        <p class="" style="line-height: 12px;">${{ str_replace(',','',round($item->attributes->perproductprice,2)) }}</p>
                                </div>
                                <div class="col-6 text-center p-0 mt-2">
                                    <div class="form-group mb-4">
                                        <div style="width: 106px;margin-left: 20px;">
                                            <div class="input-group">
                                                <span class="input-group-prepend">
                                                    <button aria-labelledby="..." type="button"
                                                        class="btn btn-outline-secondary btn-number" item-id="{{ $item->id }}"
                                                        data-type="minus" data-field="cartqty"
                                                        style="height: 30px;font-size: 10px;border-radius: 0px;">
                                                        <span class="fa fa-minus"></span>
                                                    </button>
                                                </span>
                                                <input aria-labelledby="PartsWarehouse" type="text"
                                                    onchange="cartQtyUpdateViewPage(this)" name="cartqty"
                                                    id="itemID_{{ $item->id }}" item-id="{{ $item->id }}"  data-id="{{ $item->id }}" value="{{ $item->quantity }}" data-price="{{ $item->attributes->perproductprice }}" class="form-control input-number" min="1"
                                                    max="100" readonly="" style="font-size: 10px;height: 30px;">
                                                <span class="input-group-append">
                                                    <button aria-labelledby="..." type="button"
                                                        class="btn btn-outline-secondary btn-number" item-id="{{ $item->id }}"
                                                        data-type="plus" data-field="cartqty"
                                                        style="height: 30px;font-size: 10px;border-radius: 0px;">
                                                        <span class="fa fa-plus"></span>
                                                    </button>
                                                </span>
                                            </div>
                                        </div>


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




                </div>
                @if(!$loop->last)
                <hr style="margin-right: 20px;margin-left: 20px;margin-top: -10px;margin-bottom: 10px;">
                @endif
                @endforeach
            </div>

        </div>

        <div class="col-md-4">

            <div class="card "  style="border: 0px;">
                <div class="card-body pb-0">
                    <div class="row" onclick="collapseContent()">
                        <div class="col-7">
                            <label class="fs-55"  >Have a Promo Code? </label>
                        </div>
                        <div class="col-5 text-end">
                            <i class="fas fa-chevron-down faicon"></i>
                        </div>

                    </div>
                    <div class="collapse mt-3 show" id="collapsePromoCode">
                        <div id="couponError2" style="display: none;border: 1px solid #EB6B43;margin-bottom: 5px;margin-top: 10px;color:#F07F43;padding: 10px;background: #FFFAF5;border-radius: 5px;">
                            <div class="row">
                                <div class="col-md-8">
                                    <span>This coupon code you entered is invalid</span>
                                </div>
                                <div class="col-md-4 text-end">
                                    <a href="#" onclick="removeCouponCodeError()" id="removeCouponCode1" style="color:#F07F43;"><i class="fa fa-times" aria-hidden="true"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-9">
                                <div class="form-group">
                                    <input type="text" name="coupon_code" value="{{ (!empty(\Session::get('couponCode')) ? \Session::get('couponCode') : '') }}" class="form-control" id="coupon_code" aria-describedby="coupon_code" placeholder="PROMO CODE" style="height: 50px;" oninput="this.value = this.value.toUpperCase()">

                                    @if(!empty(\Session::get('couponCode')))
                                    <span id="couponError" class="text-success">Coupon code applied.</span>&nbsp;&nbsp;<a href="#" onclick="removeCouponCode()" id="removeCouponCode">Remove</a>
                                @else
                                    <span id="couponError" style="display: none"></span>&nbsp;&nbsp;<a href="#" onclick="removeCouponCode()" id="removeCouponCode" style="display: none">Remove</a>
                                @endif
                                </div>
                            </div>
                            <div class="col-3 p-0" style="">
                                <button type="button" class="btn btn-primary btn-lg" onclick="applyCouponCode()">APPLY</button>
                            </div>
                        </div>
                    </div>
                </div>
                <hr class="d-lg-none" style="border: 2.5px solid #ddd;margin-top: 5px;margin-bottom: 0px;">

                <hr class="hrdash d-none d-lg-block">
                <div class="card-body">
                    <div class="row mb-2">
                        <div class="col-6 fs-5">
                            <b>Subtotal</b>
                        </div>
                        <div class="col-6 fs-5 text-end">
                            <b>${{ number_format($total,2); }}</b>
                        </div>
                    </div>
                    <div class="row mb-2 discountPriceDiv"  @if(!empty(session()->get('discountPrice')) && session()->get('discountPrice') <= 0) style="display: none" @endif>
                        <div class="col-8 fs-5 text-success">
                            <b>Promo Code <span id="couponDiscountDiv">({{ session()->get('couponCode') }} - {{ session()->get('couponDiscount') }})</span></b>
                        </div>
                        <div class="col-4 fs-5 text-end">
                            <b class="discountPrice text-success">- ${{ (!empty(session()->get('discountPrice')) ? str_replace(',','',session()->get('discountPrice')) : "") }}</b>
                        </div>
                    </div>
                    <div class="row mb-2" style="display: none">
                        <div class="col-6 fs-5">
                            <b>Shipping</b>
                        </div>
                        <div class="col-6 fs-5 text-end">
                            <b id="shhipingRate">$0.00</b>
                        </div>
                    </div>

                    <div class="row mb-2" style="display: none">
                        <div class="col-6 fs-5">
                            <b>Tax</b>
                        </div>
                        <div class="col-6 text-end p-1">
                            <span style="color: #7d7d7d;" class="me-2">Calculated In Checkout</span>
                        </div>
                    </div>
                    <hr class="d-none d-lg-block">
                    <hr class="hrdash mt-3 mb-3 d-lg-none">
                    <div class="row mb-2" id="totaldiv" @if(!empty(session()->get('discountPrice')) && session()->get('discountPrice') <= 0) style="display: none" @endif>
                        <div class="col-6 fs-5">
                            <b>Order Total</b>
                        </div>
                        <div class="col-6 fs-5 text-end">
                            <b id="totalAmount">${{ round(($total + 0.00),2); }}</b>
                        </div>
                    </div>
                    <div class="row mt-4">
                        <div class="col-md-12">
                            @if(auth()->check() && !empty($userAddressPrimary))
                                <a href="{{ route('checkout-shipping-method-v2') }}" type="button" class="btn btn-success btn-lg w-100 mb-4 mt-2" aria-label="Proceed to Checkout"><img src="{{ asset('assets/web') }}/images/lock.svg" alt="" srcset="" width="18px" class="mb-1">&nbsp;&nbsp;Proceed to Checkout</a>
                            @else
                                <a href="{{ route('checkout-shipping-v2') }}" type="button" class="btn btn-success btn-lg w-100 mb-4 mt-2" aria-label="Proceed to Checkout"><img src="{{ asset('assets/web') }}/images/lock.svg" alt="" srcset="" width="18px" class="mb-1">&nbsp;&nbsp;Proceed to Checkout</a>

                            @endif
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <span style="color: #a3a3a3;">Available payment options in checkout:</span>
                        </div>
                        <div class="col-md-12">
                            <img src="{{ asset('assets/web') }}/images/card-visa.png" alt="" srcset="" width="60px" class="p-1">
                            <img src="{{ asset('assets/web') }}/images/card-master.png" alt="" srcset="" width="60px" class="p-1">
                            <img src="{{ asset('assets/web') }}/images/card-amex.png" alt="" srcset="" width="60px" class="p-1">
                            <img src="{{ asset('assets/web') }}/images/card-discover.png" alt="" srcset="" width="60px" class="p-1">
                            <img src="{{ asset('assets/web') }}/images/card-paypal.png" alt="" srcset="" width="60px" class="p-1">
                           
                        </div>
                    </div>
                </div>
            </div>


        </div>

    </div>
@else
    <div class="row">
       <div class="jumbotron d-flex align-items-center" style="height:500px">
            <div class="container text-center">
                <h3>Your cart is empty</h3>
                <a href="{{ route('home') }}" class="border-0 ml-2 mr-2 mb-4 btn btn-block btn-danger btn-sm setWebSiteBtnStyle" aria-label="" width="150px"><i class="fas fa-chevron-circle-left"></i>  Keep Shopping</a>
            </div>
        </div>
    </div>

@endif
</div>
<script src="{{ asset('assets/web') }}/js/jquery.session.js"></script>
<script>

    $(document).ready(function() {



        if($.session.get("couponCode")){
            $('#coupon_code').val($.session.get("couponCode"));
        }


       discountPrice = $.session.get("discountPrice");

        if(discountPrice > 0){
            $('.discountPriceDiv').show();
            $('.discountPrice').text('- $'+discountPrice);
            $.session.set("couponCode",$('#coupon_code').val());
        }else{
          $.session.set("couponCode",'');
          if(iscouponinvalid == 0){
            $('#couponError2').hide();
            $('#couponError').hide();
        }
          $('#removeCouponCode').hide();
          $('#coupon_code').val('');
          $('#coupon_code_new').val('');
          $('.discountPriceDiv').hide();
        }
        totalcal();

    });
    function collapseContent(){
        $('#collapsePromoCode').collapse('toggle');
    }
    $('#collapsePromoCode').on('shown.bs.collapse', function () {
            $('.faicon').addClass('rotate');
            $('.showorderlabel').text('Hide order summary');
     });

     $('#collapsePromoCode').on('hidden.bs.collapse', function () {
        $('.faicon').removeClass('rotate');
        $('.showorderlabel').text('Show order summary');
     });
    var totalam = parseFloat('{{ (!empty($total) ? round($total,2) : 0) }}');
    console.log(totalam);
    var discountPrice = 0;

    function applyCouponCode(){
        var coupon_code = $('#coupon_code').val();

        $("#qtyloader").show();
        $.ajax({
            type: 'post',
            url: "{{ route('apply-coupon') }}",
            data: { "_token": '{{ csrf_token() }}','coupon_code':coupon_code,'price':totalam,'ischekoutreview':1 },
            dataType: "json",
            success: function(responce) {

                if(responce.status == true){
                    $('#couponError').show();
                    $('#couponError2').hide();
                    discountPrice = responce.data.discount;
                    $('#couponDiscountDiv').html('(' + coupon_code +' - '+ responce.data.discountPerAmount +')');
                    $.session.set("couponCode",$('#coupon_code').val());
                    $.session.set("couponDiscount",responce.data.discountPerAmount);
                    $.session.set("discountPrice",responce.data.discount);
                    $('#couponError').text(responce.message);
                    $('#couponError').removeClass('text-danger');
                    $('#couponError').addClass('text-success');
                    $('#removeCouponCode').show();
                    $('#coupon_code').attr('readonly', true);
                    iscouponinvalid = 0;
                    totalcal();
                    checkoutOrderLog('{{ $cart_id }}', 'couponcode_applied', "{{ date('Y-m-d H:i') }}");
                }else{
                    $('#couponError').hide();
                    $('#couponError2').show();
                    discountPrice = 0;
                    $('#couponDiscountDiv').html();
                    $('#couponError').text(responce.message);
                    $('#couponError').addClass('text-danger');
                    $('#couponError').removeClass('text-success');
                    $('#coupon_code').val('');
                    $('#removeCouponCode').hide();
                    $.session.set("couponCode",'');
                    $.session.set("couponDiscount",'');
                    $.session.set("discountPrice",0);
                    iscouponinvalid = 1;
                    totalcal();
                    $('#coupon_code').attr('readonly', false);
                    setTimeout(function() {
                        $('#couponError').hide();
                    }, 4000);
                }
            }
        });

    }
    function removeCouponCodeError(){
        $('#couponError2').hide();
      }
    var iscouponinvalid = 0;
    function totalcal(){

        if($.session.get("discountPrice")){
            var discountPrice = $.session.get("discountPrice");
        }else{
            var discountPrice = 0;
        }


        var total = parseFloat(totalam);
        console.log(discountPrice);
        if(discountPrice > 0 && $('#coupon_code').val() != ''){
          $('.discountPriceDiv').show();
          $('.discountPrice').text('- $'+discountPrice);
          $.session.set("couponCode",$('#coupon_code').val());
          total = parseFloat(total) - parseFloat(discountPrice);
          $('#totaldiv').show();
      }else{
        $.session.set("couponCode",'');
        if(iscouponinvalid == 0){
            $('#couponError').hide();
            $('#couponError2').hide();
        }
        $('#totaldiv').hide();
        $('#removeCouponCode').hide();
        $('#coupon_code').val('');
        $('#coupon_code_new').val('');
        $('.discountPriceDiv').hide();
        discountPrice = 0;
      }

      $('#totalAmount').text('$'+parseFloat(total).toFixed(2));

        $.session.set("subtotal",parseFloat(totalam).toFixed(2));
        console.log($.session.get("subtotal"));
        $.session.set("total",parseFloat(total).toFixed(2));
        $("#qtyloader").hide();
    }

    function removeCouponCode(){
        $("#qtyloader").show();
        if($('#coupon_code').val() != ""){
            checkoutOrderLog('{{ $cart_id }}', 'couponcode_removed', "{{ date('Y-m-d H:i') }}");
        }
        $('#couponError2').hide();
        $('#couponError').hide();
        $('#removeCouponCode').hide();
        $('#coupon_code').val('');
        $('#coupon_code_new').val('');
        $('.discountPriceDiv').hide();
        $('#coupon_code').attr('readonly', false);
        $.session.set("discountPrice",0);
        discountPrice = 0;
        totalcal();
    }
</script>

@endsection