@extends('templates/header')
@section('content')

<section class="pt-5 pb-5" style="padding-top: 200px !important;">
  <div class="container">
    <div class="row w-100">
        <div class="col-lg-12 col-md-12 col-12">
            <h3 class="display-5 mb-2 text-center">Panier</h3>
            <p class="mb-5 text-center">
                <i class="text-info font-weight-bold">{{ count($cart) }}</i> Articles dans votre panier</p>
                <form id="updateCartForm" method="POST" action="{{ route('cart.update') }}">
                @csrf
                <table id="shoppingCart" class="table table-condensed table-responsive">
                    <thead>
                        <tr>
                            <th style="width:60%">Produit</th>
                            <th style="width:10%">Prix</th>
                            <th style="width:10%">Quantité</th>
                            <th style="width:16%">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($cart as $productId => $item)
                        <tr>
                            <td data-th="Product">
                                <div class="row">
                                    <div class="col-md-3 text-left">
                                        <img src="{{ asset('./uploads/' . $item['image']) }}" alt="" class="img-fluid d-none d-md-block rounded mb-2 shadow ">
                                    </div>
                                    <div class="col-md-9 text-left mt-sm-2">
                                        <h4>{{ $item['name'] }}</h4>
                                        <p class="font-weight-light">{{ $item['categorie'] }}</p>
                                    </div>
                                </div>
                            </td>
                            <td data-th="prix">
                                <input type="text" class="form-control form-control-lg text-center" value="{{ empty($item['prixp']) ? $item['prix'] : $item['prixp'] }}" disabled>
                            </td>
                            <td data-th="Quantity">
                                <input type="number" name="quantity[{{ $productId }}]" class="form-control form-control-lg text-center quantity-input" value="{{ $item['quantity'] }}" data-product-id="{{ $productId }}">
                            </td>
                            <td class="actions" data-th="">
                                <div class="text-right">
                                    <button type="submit" class="btn btn-white border-secondary bg-white btn-md mb-2 update-cart-btn" data-product-id="{{ $productId }}">
                                        <i class="fas fa-sync"></i>
                                    </button>
                                    <a href="{{ route('cart.remove', $productId) }}" class="btn btn-white border-secondary bg-white btn-md mb-2">
                                        <i class="fas fa-trash"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </form>

        </div>
    </div>
    <form id="sendOrderEmailForm" method="POST" action="{{ route('cart.send-order-email') }}">
    @csrf
    <div class="row">
    <div class="col-md-4">
        <input type="text" name="name" placeholder="Nom & Prénom" required class="form-control">
    </div>
    <div class="col-md-4">
        <input type="email" name="email" placeholder="Entrer Ton E-mail" required class="form-control">
    </div>
    <div class="col-md-4">
        <input type="text" name="number" placeholder="Entrer Ton numéro" required class="form-control">
    </div>
</div>
    <div class="row mt-4 d-flex align-items-center">
        <div class="col-sm-6 order-md-2 text-right">

            <button class="btn btn-primary mb-4 btn-lg pl-5 pr-5">Commander</button>
            </form>
        </div>
        <div class="col-sm-6 mb-3 mb-m-1 order-md-1 text-md-left">
            <a href="{{ route('accueil') }}">
                <i class="fas fa-arrow-left mr-2"></i> Continuez vos achats</a>
        </div>
    </div>
</div>
</section>

@endsection