@extends('layouts.main')

@push('nav_title')
    <a class="navbar-brand" href="#">Enzy</a>
@endpush

@section('page_title')

    <h2>Shopping Cart</h2>

@endsection

@section('profile')

    @include('layouts/profile')

@endsection

@section('side_bar')

    @include('layouts/side_bar')

@endsection

@section('main_div')


    <div class="cart-page-container">
        <!-- Left Column -->
        <div class="cart-page-left">
{{--            <h2 class="cart-page-section-title">Shopping Cart</h2>--}}
            <!-- Product Item -->

            <div class="cart-inner">


                @php $total = 0; @endphp

                <div class="all_mini_cart_items">
                    @foreach($carts as $cart)

                        @php
                            $total += (int) $cart['price'] * $cart['quantity'];
                        @endphp



                        <div class="mini-cart-item">

                            <div class="mini-cart-image">
                                <span>
                                    <img src="{{ url('/../../interior.images.local/'.$cart['image']) }}">
                                </span>
                            </div>
                            <div class="mini-cart-meta">
                                <h3>
                                    {{$cart['name']}} - Color / {{$cart['size']}}
                                </h3>
                                <h4>
                                    ${{$cart['price']}} x {{$cart['quantity']}}
                                </h4>

                                <div class="d-flex align-items-center mt-2 justify-content-between">

                                    <div class="quanty_buttons">
                                        <span class="remove" data-id="{{$cart['id']}}"><i class="fas fa-minus"></i></span>

                                        <span class="number">1</span>

                                        <span class="add" data-id="{{$cart['id']}}"><i class="fas fa-plus"></i></span>
                                    </div>

                                    <div class="delete_cart_item">
                                        <button data-id="{{$cart['id']}}" class="btn btn-primary delete_item"><i class="ph ph-trash"></i>Remove</button>
                                    </div>


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

                    @endforeach
                </div>



                <div class="cart_footer">

                    <div class="d-flex justify-content-between align-items-center ">

                        <div class="total">
                            <h3>Total:</h3>
                        </div>

                        <div class="total_amount">
                            <h3>${{ $total }}</h3>
                        </div>

                    </div>

{{--                    <div class="d-flex w-100 flex-column">--}}
{{--                        <a href="{{ route('checkout') }}">--}}
{{--                            <button class="btn btn-secondary btn-sm check_out">Check Out</button>--}}
{{--                        </a>--}}
{{--                    </div>--}}

                </div>


            </div>


            <!-- Repeat .cart-page-product for more products -->
        </div>
        <!-- Right Column -->




        <div class="cart-page-right">
            <h2 class="cart-page-section-title">Payment Options</h2>
            <!-- Saved Cards -->
            <div class="cart-page-saved-cards">
                <div class="cart-page-radio-option">
                    <input type="radio" name="paymentMethod" id="card1">
                    <label for="card1">Visa ending in 1234</label>
                </div>
                <div class="cart-page-radio-option">
                    <input type="radio" name="paymentMethod" id="card2">
                    <label for="card2">Mastercard ending in 5678</label>
                </div>
            </div>
            <!-- Add New Card Form -->
            <div class="cart-page-add-card-form">
                <h5>Add New Card</h5>
                <label for="cardNumber">Card Number</label>
                <input type="text" id="cardNumber" placeholder="Card Number">
                <div class="cart-page-form-row">
                    <div>
                        <label for="expiryDate">Expiry Date</label>
                        <input type="text" id="expiryDate" placeholder="MM/YY">
                    </div>
                    <div>
                        <label for="cvv">CVV</label>
                        <input type="text" id="cvv" placeholder="CVV">
                    </div>
                </div>
                <button class="cart-page-submit-btn">Add Card</button>
                <div class="d-flex mt-3 w-100 flex-column">
                    <a href="{{ route('checkout') }}">
                        <button class="btn btn-secondary btn-sm check_out">Check Out</button>
                    </a>
                </div>
            </div>
        </div>
    </div>


    <div class="cart">

        @include('layouts.cart')

    </div>

@endsection