@extends('layouts.app')

@section('content')
<div class="page-content">
    <div class="container-fluid">

        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-flex align-items-center justify-content-between">
                    <h4 class="mb-0">Cart</h4>

                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="javascript: void(0);">Unga Group</a></li>
                            <li class="breadcrumb-item active">Cart</li>
                        </ol>
                    </div>

                </div>
            </div>
        </div>
        <!-- end page title -->

        <div class="row mb-3">
            <div class="col-xl-8">
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12 col-md-10  table-responsive card-body">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Product</th>
                                        <th>Quantity</th>
                                        <th>Tonnage</th>
                                        <th>Total Tonnage</th>
                                        <th class="text-center">Price</th>
                                        <th class="text-center">Total Price</th>
                                        <th> </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($items as $item)
                                    <tr>
                                        <td class="col-sm-8 col-md-6">
                                        {{ $item->products->name }}
                                        </td>
                                        <td class="col-sm-1 col-md-1" style="text-align: center">
                                            <input type="hidden" class="cart_id">
                                        <input type="number" min="1" class="form-control qty" value="{{ $item->quantity }}" id="{{ $item->id }}">
                                        </td>
                                        <td>{{ $item->products->tonnage }}</td>
                                        <th>{{ $item->total_tonnage }}</th>
                                        <td class="col-sm-1 col-md-1 text-center"><p>KES. {{ number_format($item->price, 2) }}</p></td>
                                        <td class="col-sm-1 col-md-1 text-center"><p class="total">KES. {{ number_format($item->total_price,2) }}</p></td>
                                        <td class="col-sm-1 col-md-1">
                                        <a href="javascript:void(0)" class="btn btn-danger btn-sm" onclick="deleteItem({{ $item->id }})">
                                           <i class="uil uil-trash-alt"></i>
                                        </a></td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-sm-6">
                        <a href="{{ route('products.index') }}" class="btn btn-link text-muted">
                            <i class="uil uil-arrow-left me-1"></i> Continue Shopping </a>
                    </div> <!-- end col -->
                    <div class="col-sm-6">
                        <div class="text-sm-end mt-2 mt-sm-0">
                            <a href="{{ route('checkout.index') }}" class="btn btn-success">
                                <i class="uil uil-shopping-cart-alt me-1"></i> Proceed to submit order </a>
                        </div>
                    </div> <!-- end col -->
                </div> <!-- end row-->
            </div>

            <div class="col-xl-4">
                <div class="mt-5 mt-lg-3">
                    <div class="card border shadow-none">
                        <div class="card-header bg-transparent border-bottom py-3 px-4">
                            <h5 class="font-size-16 mb-0">Order Summary <span class="float-end">#MN0124</span></h5>
                        </div>
                        <div class="card-body p-4">

                            <div class="table-responsive">
                                <table class="table mb-0">
                                    <thead>
                                        <th></th>
                                        <th></th>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Sub Total :</td>
                                            <td class="text-end">Ksh. {{ App\Helper\Helper::totalAmount() }}</td>
                                        </tr>
                                        <tr>
                                            <td>Discount : </td>
                                            <td class="text-end"> Ksh. 0.00</td>
                                        </tr>
                                        <tr>
                                            <td>Shipping Charge :</td>
                                            <td class="text-end">Ksh. 0.00</td>
                                        </tr>
                                        <tr class="bg-light">
                                            <th>Total Tonnage : </th>
                                            <td class="text-end">
                                                <span class="fw-bold">
                                                    {{ $items->sum('total_tonnage') }}
                                                </span>
                                            </td>
                                        </tr>
                                        <tr class="bg-light">
                                            <th>Total Price:</th>
                                            <td class="text-end">
                                                <span class="fw-bold">
                                                    Ksh. {{ App\Helper\Helper::totalAmount() }}
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <!-- end table-responsive -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end row -->

    </div> <!-- container-fluid -->
</div>
@endsection