@extends('frontend.layouts.products-app')

@section('title')
  My Cart
@endsection

@section('seo')

@endsection

@section('content')

<link rel="stylesheet" href="{{asset('css/cart.css')}}">

<br><br>
<div class="container">
    <h1>My Cart</h1>
    <img src="{{ asset('img/bar-line.png') }}" class="img-fluid" alt="">
    <table class="table mt-5">
        <thead>
          <tr>
            <th scope="col">PRODUCTS</th>
            <th scope="col">PRICE</th>
            <th scope="col" class="text-center">QUANTITY</th>
            <th scope="col">TOTAL</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row"><img src="img/featured-4.jpg" class="img-fluid product-img">SFW123DTB</th>
            <td class="align-middle">P20,095</td>
            <td class="align-middle">
              <div class="wrap d-flex justify-content-center">
                <button type="button" id="sub" class="btn-sub bg-white border">-</button>
                <input class="qty-input text-center w-25 border" type="text" id="1" value="1" min="1" max="100" />
                <button type="button" id="add" class="btn-add bg-white border">+</button>
              </div>
            </td>
            <td class="text-red align-middle">P20,095</td>
          </tr>
          <tr>
            <th scope="row"><img src="img/featured-4.jpg" class="img-fluid product-img">SFW123DTB</th>
            <td class="align-middle">P20,095</td>
            <td class="align-middle">
              <div class="wrap d-flex justify-content-center">
                <button type="button" id="sub" class="btn-sub bg-white border">-</button>
                <input class="qty-input text-center w-25 border" type="text" id="1" value="1" min="1" max="100" />
                <button type="button" id="add" class="btn-add bg-white border">+</button>
              </div>
            </td>
            <td class="text-red align-middle"> P40,190</td>
          </tr>
          <tr>
            <th scope="row"><img src="img/featured-4.jpg" class="img-fluid product-img">SFW123DTB</th>
            <td class="align-middle">P20,095</td>
            <td class="align-middle">
              <div class="wrap d-flex justify-content-center">
                <button type="button" id="sub" class="btn-sub bg-white border">-</button>
                <input class="qty-input text-center w-25 border" type="text" id="1" value="1" min="1" max="100" />
                <button type="button" id="add" class="btn-add bg-white border">+</button>
              </div>
            </td>
            <td class="text-red align-middle">P20,095</td>
          </tr>
        </tbody>
      </table>
      <div class="row gy-3">
        <div class="col-md d-flex justify-content-start">
          <a href="{{ url('/shop') }}" class="text-decoration-none"><button class="shopping btns">CONTINUE SHOPPING</button></a>
        </div>
        <div class="col-md-4">
          <div class="input-group">
            <input type="text" class="form-control rounded-0 w-25" placeholder="Enter discount code" aria-label="Username" aria-describedby="basic-addon1">
            <button class="btn-coupon border-0 bg-red rounded-end"><span class="input-group-text text-white bg-red border-0" id="basic-addon1">APPLY COUPON</span></button>
          </div>
        </div>
      </div>
      <div class="mt-5 d-flex justify-content-end total-spacer">
        <div class="w-25 w-sm-100">
          <h1>Cart Totals</h1><br>
          <div>
            <div class="row">
              <div class="col bg-light border-top border-start border-bottom p-3">
                <span>SUBTOTAL</span>
                <div class="mt-3">
                  <span>DISCOUNT CODE</span>
                </div>
                <div class="mt-5 mb-3">
                  <span class="text-red fw-bold">TOTAL</span>
                </div>
              </div>
              <div class="col border-top border-end border-bottom p-3">
                <div class="border-bottom">
                  <span class="fw-bold">P20,095</span>
                </div>
                <div class="mt-3">
                  <span class="text-red">-P95.00</span>
                </div>
                <div class="mt-5 mb-3 border-top">
                  <span class="text-red fw-bold">P20,000</span>
                </div>
              </div>
            </div>
            <div class="row border">
              <div class="col col-total"></div>
              <div class="col p-1 col-total d-flex align-items-center">
                <a href="{{ url('/checkout') }}" class="text-decoration-none"><button class="bg-red w-100 text-white border-0 btn-out p-2 rounded-1">PROCEED TO QUOTE</button></a>
              </div>
            </div>
            {{-- <div class="row mt-2 p-2">
              <div class="col bg-light">
                <span>DISCOUNT CODE</span>
              </div>
              <div class="col">
                <span class="tex-tred">-P95.00</span>
              </div>
            </div>
            <div class="row mt-4 p-2">
              <div class="col bg-light">
                <span class="text-red fw-bold">TOTAL</span>
              </div>
              <div class="col">
                <span class="fw-bold">P20,095</span>
              </div>
            </div> --}}
          </div>
        </div>
      </div>
      {{-- <button class="update-cart" style="">UPDATE CART</button> --}}

    

    {{-- <div class="float-end">
      <div class="container">
        <p style="font-size:30px; font-weight:bold;">Cart Totals</p>
        <div class="border" style="width: 100%;">  
            <div class="row" >
                <div class="col-4">
                    <p style="font-weight:bold;">SUBTOTAL</p>
                    <br>
                    <p style="font-weight:bold;">SHIPPING FEE</p>
                    <br>
                    <br>
                    <p style="color: #c61b1f; font-weight:bold;">TOTAL</p>
                </div>
                <div class="col">
                    <p style="font-weight: bold;">P20,095</p>
                    <hr>
                    <p>P350</p>
                    <br>
                    <hr>
                    <p style="color: #c61b1f; font-weight: bold;">P20,455</p>
                    <hr>
                </div>
                <div>
                  <p class="float-end proceed" style="">PROCEED TO CHECKOUT</p>
                </div>
            </div>
        </div> 
     </div>
     </div><br> --}}

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

@endsection