@extends('main.layouts.app')
@section('content')

    <style>

.proprice {
    width: 20%;
    text-align: end;
}
input#coupon_code {
    border-radius: 5px;
    height: 38px;
    border: 2px dashed #000;
}

.del_btn {
    position: absolute;
    right: 15px;
    top: 15px;
    color:#dc3545;
}

.bg-yellow{
    background:#ffc966!important;
}

.single_pr_price h2{
    color:#0e194d;
}
.sub {
    display: flex;
    justify-content: space-between;
}

.sub h3 {
    font-size: 19px;
    line-height: 23px;
    color: #1f365c;
    padding-right: 0px;
    margin-bottom: 0;
}

.total {
    display: flex;
    justify-content: space-between;
    font-size: 28px;
    line-height: 35px;
    color: #1f365c;

}

.product_title {
    display: flex;
    align-items: center;
}

.h-300{
    max-height: 300px;
    overflow-y: auto;
}

.proprice h3 {
        font-size: 26px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
        font-weight: bold;
    }

.Quantity {
    width: 40%;
}

.title {
    padding: 10px;
}

.title h3 {
        font-size: 16px;
        line-height: 20px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
    }

.img-product-cover {
    width: 80px;
    height: 80px;
    padding: 10px;
    background-color: #0e194d;
}

img.cart-table-img {
    max-width: 100%;
}
   

    /* The dots/bullets/indicators */

    /* Fading animation */
    .fade {
      animation-name: fade;
      animation-duration: 1.5s;
    }
    
    @keyframes fade {
      from {opacity: .4} 
      to {opacity: 1}
    }
    
    /* On smaller screens, decrease text size */
    @media only screen and (max-width: 300px) {
      .prev, .next,.text {font-size: 11px}
    }


.br-20 {
        border-radius: 20px;
    }

    .align-middle {
        vertical-align: middle;
    }

    div.clock {
        font-size: 26px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
        font-weight: bold;
    }

    .autopull-header h5 {
        font-size: 16px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
    }

    .autopull-header h3 {
        font-size: 26px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
        font-weight: bold;
    }



    .card .card-header {
        width: 100%;
        min-height: 0px;
    }


    .card .card-header h4 {
        font-size: 16px;
        line-height: 28px;
        color: #1f365c;
        padding-right: 0px;
        margin-bottom: 0;
    }

    .bg_blue_color {
        border-radius: 20px !important;
        background-color: #0E194D !important;
    }

    .depo {
        font-size: 14px;
    }

    .dash-text {
        text-align: center;
    }

    @media (max-width:767.98px) {


        .h-300{
            overflow-x: hidden;
        }

        .img-product-cover {
            width: 15%;
            height: auto;
            padding: 3px;
        }

        .proprice {
            width: 100%;
            text-align: end;
        }

        .h-300{
            max-height: 200px;
        }

        .Quantity {
            width: 65%;
        }

        .depo {
            font-size: 15px;
        }

        .autopull-header h5 {
            font-size: 13px;
            line-height: 15px;
            color: #1f365c;
            padding-right: 0px;
            margin-bottom: 0;
        }

        .card .card-header, .card .card-body, .card .card-footer {
            background-color: transparent;
            padding: 10px;
        }

        .title h3 {
            font-size: 10px;
            line-height: 15px;
            color: #1f365c;
            padding-right: 0px;
            margin-bottom: 0;
        }

        .proprice h3 {
    font-size: 18px;
    line-height: 22px;
    color: #1f365c;
    padding-right: 0px;
    margin-bottom: 0;
    font-weight: bold;
}

    }

    </style>

    <div class="main-content">
        <section class="section">
            <div class="section-header d-block bg_blue_color">
                <div class="row">
                    <div class="col-12">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>

                                <div class="dash-text">
                                    <h5 class="text-white depo mb-0">
                                        <a href="/"><img src="img/homepage.png" alt="image"> </a> 
                                        Cart
                                    </h5>
                                </div>
                            </div>
                            <div>
                            </div>
    
                        </div>
    
                    </div>
    
                </div>
    
            </div>

         @if (session()->has('success_message'))
            <div class="alert alert-success">
                {{ session()->get('success_message') }}
            </div>
        @endif

        @if(count($errors) > 0)
            <div class="alert alert-danger">
                <ul class="mb-0" style="list-style: none">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif


            @if ($cart_products->count() > 0)
            
            <div class="title">
                <h3>{{ $cart_products->count() }} item(s) in Shopping Cart</h3>
            </div>
            <div class="section-body wallet-header">
                <div class="card-body bg-yellow d-flex justify-content-between">
                    <a  href="{{ route('shop.index') }}"  class="button button-plain btn btn-primary">shop More</a>
                    <a href="{{ route('checkout.index', ['flag' => 'product']) }}" class="button button-plain btn btn-primary">Proceed checkout</a>
                </div>
                <div class="card bg-light ">
                    <div class="card-body h-300">
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-12 col-sm-12">

                            @foreach ($cart_products as $item)
                                <div class="card mb-10 br-20 align-items-center">
                                    <div class="card-body d-flex justify-content-between w-100 align-items-center">
                                        <div class="product_title">
<div class="img-product-cover">
    @php
        $imagesArray = json_decode($item->images, true);
        $firstImage = '';

        if (is_array($imagesArray) && !empty($imagesArray)) {
            $firstImage = trim($imagesArray[0], '"');
        } else {
            $firstImage = $item->images;
        }
    @endphp

    <img src="{{ $firstImage }}" alt="cart-img" class="cart-table-img">
</div>

                                            <div class="Quantity">
                                                <div class="title">
                                                    <h3 class="" title="{{ $item->product_title}}" >{{ substr($item->product_title, 0,  40) }}..</h3>
                                                    <h3>

                                                        <select class="quantity form-control" data-id="{{ $item->product_cart_id }}" data-productQuantity="{{ $item->quantity }}">
                                                            @for ($i = 1; $i < 5 + 1 ; $i++)
                                                                <option {{ $item->product_quantity == $i ? 'selected' : '' }}>{{ $i }}</option>
                                                            @endfor
                                                        </select>

    
                                                    </h3>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="proprice">
                                            <h3>
                                                <i class="fa fa-inr" aria-hidden="true"></i>  
                                            
                                                {{ (int)$item['price'] * $item['product_quantity'] }}

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

                                    <form class="d-inline-block m-1" action="{{ route('cart.destroy', $item->product_cart_id) }}" method="POST">
                                        {{ csrf_field() }}
                                        {{ method_field('DELETE') }}
        
                                        <button type="submit"  class="cart-options btn  del_btn "><i class="fa fa-trash" aria-hidden="true"></i></button>
                                    </form>

                                    {{-- <a href="#" class="del_btn"><i class="fa fa-trash" aria-hidden="true"></i></a> --}}
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    @if (! session()->has('coupon'))
                    <div class="card-body text-right border-top">
                        <a href="#" class="have-code">Have a Code?</a>
  
                        <div class="have-code-container">
                            <form action="{{ route('coupon.store') }}" method="POST">
                                {{ csrf_field() }}
                                <input type="text" name="coupon_code" id="coupon_code" placeholder="Paste your Coupon">
                                <button type="submit" class="button button-plain btn btn-primary">Apply</button>
                            </form>
                        </div> <!-- end have-code-container -->
                        @endif

                    </div>
                    <div class="card-body bg-yellow">
                        <div class="cart-totals">
                            <div class="sub">
                                <h3>Subtotal </h3>
                                <h3>
                                    <i class="fa fa-inr" aria-hidden="true"></i>
                                    {{ $cart_subtotal }}
                                </h3>
                            </div>


                        @if (session()->has('coupon'))
                                <div class="sub">
                                    <h3>
                                        Code ({{ session()->get('coupon')['name'] }})
                                        <form action="{{ route('coupon.destroy') }}" method="POST" style="display:block">
                                            {{ csrf_field() }}
                                            {{ method_field('delete') }}
                                            <button type="submit" style="font-size:14px;">Remove</button>
                                        </form>
                                    </h3>
                                    <span>
                                        - <i class="fa fa-inr" aria-hidden="true"></i>{{$discount }}
                                    </span>
                                
                                    <div class="sub">
                                      <h3>New Subtotal </h3>  
                                      <span>
                                        <i class="fa fa-inr" aria-hidden="true"></i> {{ $newSubtotal }} 
                                      </span>
                                    </div>
                                </div>
                        @endif

                            @if (session()->has('coupon'))
                                <div class="sub">
                                    <h3> @if (session()->has('coupon'))
                                        Code ({{ session()->get('coupon')['name'] }})
                                        <form action="{{ route('coupon.destroy') }}" method="POST" style="display:block">
                                            {{ csrf_field() }}
                                            {{ method_field('delete') }}
                                            <button type="submit" style="font-size:14px;">Remove</button>
                                        </form>
                                       
                                        New Subtotal <br>
                                    @endif</h3>
                                    <h3> - <i class="fa fa-inr" aria-hidden="true"></i>           {{$discount }} <br>&nbsp;<br>
                                        <hr>
                                        <i class="fa fa-inr" aria-hidden="true"></i> {{ $newSubtotal }} <br>
                                    </h3>
                                </div>


                            @endif


                            <div class="sub">
                                <h3>Tax ({{config('cart.tax')}}%) </h3>
                                <h3><i class="fa fa-inr" aria-hidden="true"></i>{{ $newTax }}</h3>
                            </div>
                            <div class="total">
                                <h3>Total </h3>
                                <h3><i class="fa fa-inr" aria-hidden="true"></i>{{$newTotal}}</h3>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
            @else
            <div class="section-body wallet-header">

                <h3>No items in Cart!</h3>
                <div class="card-body bg-yellow d-flex justify-content-between">
                    <a  href="{{ route('shop.index') }}"  class="button button-plain btn btn-primary">shop More</a>
                </div>

            </div>
            @endif

        </section>
    </div>


    {{-- <script src="{{ asset('js/app.js') }}"></script> --}}
<script>
    (function(){
        const classname = document.querySelectorAll('.quantity')

        Array.from(classname).forEach(function(element) {
            element.addEventListener('change', function() {
                const id = element.getAttribute('data-id')
                const productQuantity = element.getAttribute('data-productQuantity')

                axios.patch(`/cart/${id}`, {
                    quantity: this.value,
                    productQuantity: productQuantity
                })
                .then(function (response) {
                    // console.log(response);
                    window.location.href = '{{ route('cart.index') }}'
                })
                .catch(function (error) {
                    // console.log(error);
                    window.location.href = '{{ route('cart.index') }}'
                });
            })
        })
    })();
</script>

@endsection