@extends('layouts.main')

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

@section('page_title')

    <h1>Enzy Products</h1>

@endsection

@section('profile')

    @include('layouts/profile')

@endsection

@section('side_bar')

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

        @include('layouts/side_bar')

    </div>

@endsection

@section('main_div')

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

        <div>

            <div class="card mt-24">
                <div class="card-body">
                    <div class="row g-20">

                        @foreach($products as $product)

                            <div class="col-xxl-3 col-lg-4 col-sm-6">
                                <div class="card border border-gray-100">

                                    <div class="card-body p-8">
                                        <a class="bg-main-100 rounded-16 overflow-hidden text-center mb-8 h-164 flex-center">
                                            <img src="{{ url('/../../interior.images.local/'.$product->image) }}" width="244px" height="120px">
                                        </a>
                                    </div>

                                    <div class="p-8">
                                        <h5 class="mb-8"><a href="course-details.html" class="hover-text-main-600">{{$product->name}}</a></h5>

                                        <div class="flex-align gap-8">
                                            <div class="flex-align gap-2">
                                                <span class="text-sm text-main-600 d-flex"><i class="fas fa-sort-amount-up"></i></span>
                                                <span class="text-18 text-gray-600">{{$product->quantity}}</span>
                                            </div>
                                            <div class="flex-align gap-2">
                                                <span class="text-sm text-main-600 d-flex"><i class="fa-solid fa-up-right-and-down-left-from-center"></i></span>
                                                <span class="text-18 text-gray-600">{{$product->size}}</span>
                                            </div>
                                        </div>

                                        <div class="flex-between gap-4 flex-wrap mt-20">
                                            <div class="flex-align gap-2">
                                                <span class="text-20 fw-bold d-flex"><i class="fa-solid fa-dollar-sign"></i></span>
                                                <span class="text-22 fw-bold text-gray-600">{{$product->price}}</span>
                                            </div>

                                            <div class="flex-align gap-2">
                                                <span class="text-20 fw-bold d-flex"><i class="fa-solid fa-dollar-sign"></i></span>
                                                <span class="text-22 fw-bold text-gray-600">{{$product->descryption}}</span>
                                            </div>


                                            @if($product->quantity > 0)

                                                <a href="{{route('add_to_cart',['id' => $product->id]) }}">
                                                    <button class="btn btn-secondary add_to_cart">Add To Cart</button>
                                                </a>
{{--                                                <button class="btn btn-secondary add_to_cart" data-id="{{$product->id}}">Add To Cart</button>--}}
                                            @else
                                                <button class="btn btn-secondary add_to_cart" data-id="{{$product->id}}" disabled>Add To Cart</button>
                                            @endif

                                        </div>
                                    </div>

                                </div>
                            </div>

                        @endforeach

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

        </div>

        <div class="cart">

            <div class="cart-inner">

                <div class="d-flex justify-content-between align-items-center cart-head">
                    <h2>Cart</h2>
                    <div class="close-cart mx-2"><i class="fa fa-times"></i></div>
                </div>


                <table class="table">
                    <thead>
                    <tr>
                        <th scope="col">Qty</th>
                        <th scope="col">Name</th>
                        <th scope="col">Price</th>
                        <th scope="col">Action</th>
                    </tr>
                    </thead>
                    <tbody class="cart_items">

                    @php $total = 0; @endphp

                    @foreach($carts as $cart)

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

                        <tr>
                            <td>{{$cart['quantity']}}</td>
                            <td>{{$cart['name']}}</td>
                            <td>{{$cart['price']}}</td>
                            <td class="action">
                                <a href="{{ route('delete_unique_item',['id'=>$cart['id']]) }}">
                                    <i class="fa-solid fa-circle-minus delete_cart_item"></i>
                                </a>
                            </td>
                        </tr>
                    @endforeach

                        <tr>
                            <td><h3>Total:</h3></td>
                            <td></td>
                            <td class="total"><strong>{{ $total }}</strong></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>

                <a href="{{ route('checkout') }}">
                    <button class="btn btn-secondary btn-sm check_out">Check Out</button>
                </a>

            </div>

        </div>

    </div>

@endsection