@extends('frontend.layout.master')
@section('content')
<div class="small-container cart-page">
    <table>
        <tr>
            <th>{{__('translation.productname')}}</th>
            <th>{{__('translation.quantity')}}</th>
            <th>Variation Selected</th>
            <th>{{__('translation.subtotal')}}</th>
        </tr>
        @if(isset($data))
            @if(count($data)>0)
                @php $total_amt=0; @endphp
                @foreach($data as $i => $value)
                        @php
                        $total_amt = $total_amt+$value['price'];
                        @endphp
                    <tr>
                        <td>
                            <div class="cart-info">
                                <img src="{{asset('uploads/product/'.$value['image'])}}">
                                <div>
                                    <p>{{$value['name']}}</p>
                                    <small>{{__('translation.price')}}: {{ number_format($value['price'], 2) }}</small>
                                    <br>
                                    <a href="{{route('web.store.cart-remove-item',$i)}}">Remove</a>
                                </div>
                            </div>
                        </td>
                        <td><input type="number" value="{{$value['quantity']}}" class="qty" rowId="{{$i}}"></td>
                        <td>{{$value['variationSelected']}}</td>
                        <td>{{ number_format($value['price']*$value['quantity'], 2) }}</td>
                    </tr>
                @endforeach
            @endif
        @else
            <tr><td colspan="4" class="text-center">No products in cart.</td></tr>
        @endif
    </table>

    <div class="total-price">
        <table>
            <tr>
                <td>{{__('translation.total')}}</td>
                <td>
                    @if($data)
                    {{number_format($total_amt,2)}}
                    @else
                    0
                    @endisset
                </td>
            </tr>
        </table>
    </div>
    <div class="d-flex justify-content-end">
        <a href="{{route('web.store.list')}}" class="m-2"><button class="add-to-cart">Continue Shopping</button></a>
        <a href="{{route('web.store.checkout')}}" class="m-2"><button class="add-to-cart">{{__('translation.checkout')}}</button></a>
    </div>
</div>
@endsection
@push('custom-css') 
<style>
    /* ------------- cart items details ----------------  */
    
.small-container {
    max-width: 1080px;
    margin: auto;
    padding-left: 25px;
    padding-right: 25px;
}
.cart-page {
    /*margin: 80px auto;*/
    padding-top: 1%;
}

table {
    width: 100%;
    border-collapse: collapse;
}

.cart-info {
    display: flex;
    flex-wrap: wrap;
}

.cart-page th {
    text-align: left;
    padding: 15px;
    color: #fff;
    background: #000;
    font-weight: normal;
}

.cart-page td {
    padding: 10px 5px;
}

.cart-page td input {
    width: 40px;
    height: 30px;
    padding: 5px;
}

.cart-page td a {
    color: red;
    font-size: 12px;
}

.cart-page td img {
    width: 80px;
    height: 80px;
    margin-right: 10px;
}

.cart-page .total-price {
    display: flex;
    justify-content: flex-end;
}

.add-to-cart {
    display: block;
    margin-left: auto;
    margin-top: 20px;
    padding: 10px 20px;
    background: #5cb85c;
    color: white;
    border: none;
    cursor: pointer;
    text-align: right;
}

.add-to-cart:hover {
    background: #4cae4c;
}

.cart-page .total-price table {
    border-top: 3px solid #000;
    width: 100%;
    max-width: 400px;
}

.cart-page td:last-child {
    text-align: right;
}

.cart-page th:last-child {
    text-align: right;
}
</style>
@endpush
@push('custom-script')
<script>
    
</script>
@endpush