@extends('frontend.layouts.master')
@section('title','Cart Page')
@section('main-content')
	<!-- Breadcrumbs -->
	<div class="breadcrumbs">
		<div class="container">
			<div class="row">
				<div class="col-12">
					<div class="bread-inner">
						<ul class="bread-list">
							<li><a href="{{('home')}}">Home<i class="ti-arrow-right"></i></a></li>
							<li class="active"><a href="">Cart</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- End Breadcrumbs -->
<!-- DESKTOP CART VIEW -->
<div class="cart-desktop">
	<!-- Shopping Cart -->
	<div class="shopping-cart section">
		<div class="container">
			<div class="row">
				<div class="col-12">
					<!-- Shopping Summery -->
					<table class="table shopping-summery">
						<thead>
							<tr class="main-hading">
								<th>PRODUCT</th>
								<th>NAME</th>
								<th class="text-center">SIZE</th>
								<th class="text-center">UNIT PRICE</th>
								<th class="text-center">QUANTITY</th>
								<th class="text-center">TOTAL</th>
								<th class="text-center"><i class="ti-trash remove-icon"></i></th>
							</tr>
						</thead>
						<tbody id="cart_item_list">
							<form action="{{route('cart.update')}}" method="POST">
								@csrf
								@if(Helper::getAllProductFromCart())
									@foreach(Helper::getAllProductFromCart() as $key=>$cart)
										<tr>
											@php
											$photo=explode(',',$cart->product['photo']);
											@endphp
											<td class="image" data-title="No"><img src="{{$photo[0]}}" alt="{{$photo[0]}}"></td>
											<td class="product-des" data-title="Description">
												<p class="product-name"><a href="{{route('product-detail',$cart->product['slug'])}}" target="_blank">{{$cart->product['title']}}</a></p>
												<p class="product-des">{!!($cart['summary']) !!}</p>
											</td>
										<td>
    @if($cart->size && $cart->size !== 'No Size')
        <p><strong>Size:</strong> {{ $cart->size }}</p>
    @endif
</td>

											
											<td class="price" data-title="MRP">
    <span>Rs{{ number_format($cart->product->price, 2) }}</span>
</td>

											<td class="qty" data-title="Qty"><!-- Input Order -->
												<div class="input-group">
													<div class="button minus">
														<button type="button" class="btn btn-primary btn-number" disabled="disabled" data-type="minus" data-field="quant[{{$key}}]">
															<i class="ti-minus"></i>
														</button>
													</div>
													<input type="text" name="quant[{{$key}}]" class="input-number"  data-min="1" data-max="100" value="{{$cart->quantity}}">
													<input type="hidden" name="qty_id[]" value="{{$cart->id}}">
													<div class="button plus">
														<button type="button" class="btn btn-primary btn-number" data-type="plus" data-field="quant[{{$key}}]">
															<i class="ti-plus"></i>
														</button>
													</div>
												</div>
												<!--/ End Input Order -->
											</td>
											<td class="total-amount cart_single_price" data-title="Total"><span class="money">Rs{{number_format($cart['price'],2)}}</span></td>

											<td class="action" data-title="Remove"><a href="{{route('cart-delete',$cart->id)}}"><i class="ti-trash remove-icon"></i></a></td>
										</tr>
									@endforeach
									<track>
										
										<td colspan="7" style="text-align: right;">
    <button class="btn btn-primary" type="submit">Update Cart</button>
</td>

									</track>
								@else
										<tr>
											<td class="text-center">
												There are no any carts available. <a href="{{route('product-grids')}}" style="color:blue;">Continue shopping</a>

											</td>
										</tr>
								@endif

							</form>
						</tbody>
					</table>
					<!--/ End Shopping Summery -->
				</div>
			</div>
			<div class="row">
				<div class="col-12">
					<!-- Total Amount -->
					<div class="total-amount">
						<div class="row">
							<div class="col-lg-8 col-md-5 col-12">
								<div class="left">
									<div class="coupon">
									<form action="{{route('coupon-store')}}" method="POST">
											@csrf
											<input name="code" placeholder="Enter Your Coupon">
											<button class="btn">Apply</button>
										</form>
									</div>
									{{-- <div class="checkbox">`
										@php
											$shipping=DB::table('shippings')->where('status','active')->limit(1)->get();
										@endphp
										<label class="checkbox-inline" for="2"><input name="news" id="2" type="checkbox" onchange="showMe('shipping');"> Shipping</label>
									</div> --}}
								</div>
							</div>
							<div class="col-lg-4 col-md-7 col-12">
								<div class="right">

@php
    $original_price = 0;
    $discounted_price = 0;
    $cartItems = Helper::getAllProductFromCart();
    if (is_iterable($cartItems)) {
        foreach($cartItems as $item) {
            $original_price += $item->product->price * $item->quantity;
            $discounted_price += $item->price * $item->quantity;
        }
    }
    $product_discount = $original_price - $discounted_price;
    $coupon_discount = session()->has('coupon') ? session('coupon')['value'] : 0;
    $final_amount = $discounted_price - $coupon_discount;
@endphp

<ul>
    <li class="order_mrp">
        Total MRP
        <span>Rs{{ number_format($original_price, 2) }}</span>
    </li>

    @if($product_discount > 0)
    <li class="product_discount">
        Product Discount
        <span>- Rs{{ number_format($product_discount, 2) }}</span>
    </li>
    @endif

    @if($coupon_discount > 0)
    <li class="coupon_price">
        Coupon Discount
        <span>- Rs{{ number_format($coupon_discount, 2) }}</span>
    </li>
    @endif

    <li class="last" id="order_total_price">
        Sub Total
        <span>Rs{{ number_format($final_amount, 2) }}</span>
    </li>
</ul>


									<div class="button5">
										<a href="{{route('checkout')}}" class="btn">Checkout</a>
										<a href="{{route('product-grids')}}" class="btn">Continue shopping</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!--/ End Total Amount -->
				</div>
			</div>
		</div>
	</div>
	<!--/ End Shopping Cart -->
</div>



<!-- MOBILE CART VIEW -->
<!-- MOBILE CART VIEW -->
<div class="cart-mobile">
    <section class="shopping-cart section">
        <div class="container">
            @if(Helper::getAllProductFromCart())
            <form action="{{ route('cart.update') }}" method="POST">
                @csrf
                <div class="cart-items">
                    @foreach(Helper::getAllProductFromCart() as $key=>$cart)
                    @php $photo = explode(',', $cart->product['photo']); @endphp
                    <div class="cart-card">
                        <div class="cart-img">
                            <img src="{{ $photo[0] }}" alt="{{ $photo[0] }}">
                        </div>
                        <div class="cart-info">
                            <h4><a href="{{ route('product-detail', $cart->product['slug']) }}">{{ $cart->product['title'] }}</a></h4>
                            <p class="summary">{!! $cart['summary'] !!}</p>
                            @if($cart->size && $cart->size !== 'No Size')
    <p><strong>Size:</strong> {{ $cart->size }}</p>
@endif

                            <p><strong>MRP:</strong> Rs{{ number_format($cart->product->price, 2) }}</p>
                            <div class="qty-wrap">
                                <label>Qty:</label>
                                <div class="qty-box">
                                    <button type="button" class="btn-number" data-type="minus" data-field="quant[{{$key}}]">-</button>
                                    <input type="text" name="quant[{{$key}}]" value="{{ $cart->quantity }}" data-min="1" data-max="100">
                                    <input type="hidden" name="qty_id[]" value="{{ $cart->id }}">
                                    <button type="button" class="btn-number" data-type="plus" data-field="quant[{{$key}}]">+</button>
                                </div>
                            </div>
                            <p class="total">Total: Rs{{ number_format($cart['price'], 2) }}</p>
                            <a href="{{ route('cart-delete', $cart->id) }}" class="remove-btn">Remove</a>
                        </div>
                    </div>
                    @endforeach
                </div>
                <div class="cart-update text-right">
                    <button type="submit" class="btn btn-primary">Update Cart</button>
                </div>
            </form>

            <!-- Coupon and Summary -->
            <div class="cart-summary">
                <form action="{{ route('coupon-store') }}" method="POST" class="coupon-box">
                    @csrf
                    <input name="code" placeholder="Enter Your Coupon">
                    <button type="submit" class="btn">Apply</button>
                </form>

                @php
                    $original_price = 0;
                    $discounted_price = 0;
                    $cartItems = Helper::getAllProductFromCart();
                    foreach($cartItems as $item) {
                        $original_price += $item->product->price * $item->quantity;
                        $discounted_price += $item->price * $item->quantity;
                    }
                    $product_discount = $original_price - $discounted_price;
                    $coupon_discount = session()->has('coupon') ? session('coupon')['value'] : 0;
                    $final_amount = $discounted_price - $coupon_discount;
                @endphp

                <ul class="summary-list">
                    <li>Total MRP: <span>Rs{{ number_format($original_price, 2) }}</span></li>
                    @if($product_discount > 0)
                        <li>Product Discount: <span>- Rs{{ number_format($product_discount, 2) }}</span></li>
                    @endif
                    @if($coupon_discount > 0)
                        <li>Coupon Discount: <span>- Rs{{ number_format($coupon_discount, 2) }}</span></li>
                    @endif
                    <li class="grand-total">Sub Total: <span>Rs{{ number_format($final_amount, 2) }}</span></li>
                </ul>

                <div class="checkout-actions">
                    <a href="{{ route('checkout') }}" class="btn btn-success">Proceed to Checkout</a>
                    <a href="{{ route('product-grids') }}" class="btn btn-outline-secondary">Continue Shopping</a>
                </div>
            </div>
            @else
                <p class="text-center">No items in cart. <a href="{{ route('product-grids') }}">Continue shopping</a></p>
            @endif
        </div>
    </section>
</div>


	<!-- Start Shop Services Area  -->
	<section class="shop-services section">
		<div class="container">
			<div class="row">
				<div class="col-lg-3 col-md-6 col-12">
					<!-- Start Single Service -->
					<div class="single-service">
						<i class="ti-rocket"></i>
						<h4>Free shiping</h4>
						<p>Orders over $100</p>
					</div>
					<!-- End Single Service -->
				</div>
				<div class="col-lg-3 col-md-6 col-12">
					<!-- Start Single Service -->
					<div class="single-service">
						<i class="ti-reload"></i>
						<h4>Free Return</h4>
						<p>Within 30 days returns</p>
					</div>
					<!-- End Single Service -->
				</div>
				<div class="col-lg-3 col-md-6 col-12">
					<!-- Start Single Service -->
					<div class="single-service">
						<i class="ti-lock"></i>
						<h4>Sucure Payment</h4>
						<p>100% secure payment</p>
					</div>
					<!-- End Single Service -->
				</div>
				<div class="col-lg-3 col-md-6 col-12">
					<!-- Start Single Service -->
					<div class="single-service">
						<i class="ti-tag"></i>
						<h4>Best Peice</h4>
						<p>Guaranteed price</p>
					</div>
					<!-- End Single Service -->
				</div>
			</div>
		</div>
	</section>
	<!-- End Shop Newsletter -->

	<!-- Start Shop Newsletter  -->
	@include('frontend.layouts.newsletter')
	<!-- End Shop Newsletter -->

@endsection
@push('styles')
	<style>
	/* Default: hide mobile view */
.cart-mobile {
    display: none;
}

/* Hide desktop cart for small screens */
@media (max-width: 767px) {
    .cart-desktop {
        display: none;
    }

    .cart-mobile {
        display: block;
    }
}

		li.shipping{
			display: inline-flex;
			width: 100%;
			font-size: 14px;
		}
		li.shipping .input-group-icon {
			width: 100%;
			margin-left: 10px;
		}
		.input-group-icon .icon {
			position: absolute;
			left: 20px;
			top: 0;
			line-height: 40px;
			z-index: 3;
		}
		.form-select {
			height: 30px;
			width: 100%;
		}
		.form-select .nice-select {
			border: none;
			border-radius: 0px;
			height: 40px;
			background: #f6f6f6 !important;
			padding-left: 45px;
			padding-right: 40px;
			width: 100%;
		}
		.list li{
			margin-bottom:0 !important;
		}
		.list li:hover{
			background:#F7941D !important;
			color:white !important;
		}
		.form-select .nice-select::after {
			top: 14px;
		}
		@media (max-width: 767px) {
    .shopping-summery {
        display: block;
        width: 100%;
    }

    .shopping-summery tbody, .shopping-summery tr, .shopping-summery td {
        display: block;
        width: 100%;
    }

    .shopping-summery tr {
        border: 1px solid #e0e0e0;
        margin-bottom: 15px;
        border-radius: 6px;
        padding: 10px;
        background: #fff;
    }

    .shopping-summery td.image {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        margin-bottom: 10px;
    }

    .shopping-summery td.image img {
        width: 100px;
        height: auto;
        border-radius: 4px;
    }

    .shopping-summery td.product-des {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 8px;
    }

    .shopping-summery td {
        padding: 4px 0;
    }

    .shopping-summery td.price,
    .shopping-summery td.qty,
    .shopping-summery td.total-amount,
    .shopping-summery td.action {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        padding: 6px 0;
    }

    .shopping-summery td.qty .input-group {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .shopping-summery td.qty input {
        width: 50px;
        text-align: center;
    }

    .shopping-summery td.action a {
        color: red;
        font-size: 18px;
    }

    .total-amount .right {
        background: #f9f9f9;
        padding: 15px;
        border-radius: 6px;
        margin-top: 20px;
    }

    .total-amount .right ul {
        font-size: 14px;
    }

    .total-amount .right .button5 {
        flex-direction: column;
        gap: 10px;
    }

    .total-amount .right .btn {
        width: 100%;
        text-align: center;
    }
}
/* MOBILE CART VIEW - OPTIMIZED FOR JAYAKA FASHION */
.cart-mobile {
    padding: 15px;
    background: #fdfdfd;
    font-family: 'Poppins', sans-serif;
}

.cart-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 12px;
    margin-bottom: 20px;
    display: flex;
    gap: 12px;
}

.cart-img img {
    width: 90px;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #eee;
}

.cart-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cart-info h4 a {
    font-size: 15px;
    font-weight: 600;
    color: #222;
    text-decoration: none;
    line-height: 1.4;
}

.cart-info p {
    font-size: 13px;
    color: #444;
    margin: 3px 0;
}

.cart-info .summary {
    color: #777;
    font-size: 12px;
}

.qty-wrap {
    margin: 6px 0;
}

.qty-wrap label {
    font-size: 13px;
    font-weight: 500;
    margin-right: 5px;
}

.qty-box {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
}

.qty-box button {
    background: #f8f8f8;
    border: none;
    padding: 5px 10px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
}

.qty-box input {
    width: 40px;
    text-align: center;
    border: none;
    font-size: 14px;
    padding: 4px;
}

.remove-btn {
    font-size: 13px;
    color: #e74c3c;
    margin-top: 5px;
    display: inline-block;
}

.cart-update {
    margin-top: 10px;
    text-align: right;
}

.cart-update .btn {
    background: #111;
    color: #fff;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 5px;
    border: none;
}

.cart-summary {
    background: #fff;
    margin-top: 25px;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.05);
}

.coupon-box {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}

.coupon-box input {
    flex: 1;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 13px;
}

.coupon-box .btn {
    background-color: #222;
    color: #fff;
    font-size: 13px;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
}

.summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
}

.summary-list li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #333;
}

.summary-list .grand-total {
    font-weight: bold;
    font-size: 15px;
    border-top: 1px solid #eee;
    padding-top: 8px;
    margin-top: 8px;
}

.checkout-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
}

.checkout-actions .btn {
    padding: 10px;
    font-size: 14px;
    border-radius: 5px;
    text-align: center;
}

.checkout-actions .btn-success {
    background: #28a745;
    color: white;
    border: none;
}

.checkout-actions .btn-outline-secondary {
    background: transparent;
    border: 1px solid #aaa;
    color: #444;
}


	</style>
@endpush
@push('scripts')
	<script src="{{asset('frontend/js/nice-select/js/jquery.nice-select.min.js')}}"></script>
	<script src="{{ asset('frontend/js/select2/js/select2.min.js') }}"></script>
	<script>
		$(document).ready(function() { $("select.select2").select2(); });
  		$('select.nice-select').niceSelect();
	</script>
	<script>
		$(document).ready(function(){
			$('.shipping select[name=shipping]').change(function(){
				let cost = parseFloat( $(this).find('option:selected').data('price') ) || 0;
				let subtotal = parseFloat( $('.order_subtotal').data('price') );
				let coupon = parseFloat( $('.coupon_price').data('price') ) || 0;
				// alert(coupon);
				$('#order_total_price span').text('$'+(subtotal + cost-coupon).toFixed(2));
			});

		});

	</script>

@endpush