@extends('layouts.master')
@section('page')
  <title>Checkout | {{setting('site.title')}}</title>
@endsection
@section('content')
  <section class="section page-content">
    <div class="container">
      @if (session()->has('success_message'))
        <div class="alert alert-success">
          {{ session()->get('success_message') }}
        </div>
      @endif
      @if(count($errors) > 0)
        <div class="alert alert-danger">
          <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        </div>
      @endif
    </div>
    <div class="container">
      <div class="row">
        @if(auth()->user()->cart->count() > 0)
          <div class="col-xl-6 mt-5 mt-xl-0 order-md-2">
            <div class="checkout-table-container">
              <h2 class="mb-5">Order Summary</h2>
              <div class="checkout-table">
                @foreach (auth()->user()->cart as $item)
                  <div class="row">
                    <div class="col-md-3">
                      <img class="checkout-table-img" style="max-width: 100%" src="{{ Voyager::image($item->product->image)}}" alt="{{$item->product->name}}">
                    </div>
                    <div class="col-md-6">
                      <div class="checkout-item-details">
                        <div class="checkout-table-item text-dark">{{ $item->product->name }}</div>
                        <div class="checkout-table-description">{{ $item->product->details }}</div>
                          <div class="checkout-table-price">${{ $item->price }}</div>
                      </div>
                    </div>
                    <div class="col-md-1 col-3">
                      <div class="checkout-table-row-right">
                        <div class="checkout-table-quantity">{{ $item->quantity }}</div>
                      </div>
                    </div>

                  </div>
                  <hr>
                @endforeach
              </div>
              <div class="row">
                <div class="col-md-12 table-responsive">
                  <table class="table table-bordered ">
                    <thead>
                      <tr>
                        <th scope="col">Subtotal</th>
                        <th scope="col">Delivery charge</th>
                        <th scope="col">Total</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>$ {{$cart->sum('price')}}</td>
                        <td>$ 2.00</td>
                        <td>$ {{ $cart->sum('price') + 2.00 }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>

              </div>
              <hr>
            </div>
          </div>
        @endif
          <div class="col-xl-6 ">
            <h2 class="mb-5">Billing Details</h2>
            <form action="{{route('checkout.store')}}" method="POST" id="payment-form">
              {{ csrf_field() }}
              <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" id="name" name="name" value="{{ auth()->user()->name }}" required>
              </div>
              <div class="form-group">
                <label for="email">Email Address</label>
                <input type="email" class="form-control" id="email" name="email" value="{{ auth()->user()->email }}" readonly>
              </div>
              <div class="form-group">
                <label for="address">Address</label>
              </div>
              <div class="half-form">
                <div class="form-group">
                  @if (auth()->user()->second_address && auth()->user()->first_address == NULL)
                    <input type="text" class="form-control" id="address" name="address" value="{{ old('address') }}" required>
                    <a href="">Add another address</a>
                  @endif
                  @if (auth()->user()->second_address == NULL)
                    <input type="text" class="form-control" id="address" name="address" value="{{ auth()->user()->first_address }}" required>
                    <a href="{{route('profile')}}" style="color: #d33733">Add another address</a>
                  @endif
                  @if(auth()->user()->first_address && auth()->user()->second_address)
                    <select class="form-control" name="address" id="address">
                      <option value="{{auth()->user()->first_address}}">{{ auth()->user()->first_address }}</option>
                      <option value="{{auth()->user()->second_address}}">{{auth()->user()->second_address}}</option>
                    </select>
                    <br>
                    <br>
                    <br>
                  @endif
                </div>
              </div>
              <div class="half-form">
                <div class="form-group">
                  <label for="city">City</label>
                  <input type="text" class="form-control" id="city" name="city" value="{{ auth()->user()->city }}" required>
                </div>
              </div>
              <div class="half-form">
                <div class="form-group">
                  <label for="street">Street</label>
                  <input type="text" class="form-control" id="street" name="street" value="{{ auth()->user()->street }}" required>
                </div>
              </div>
              <div class="half-form">
                <div class="form-group">
                  <label for="builidng-floor">Building and Floor</label>
                  <input type="text" class="form-control" id="building-floor" name="building-floor" value="{{ auth()->user()->building_and_floor }}" required>
                </div>
              </div>
              <div class="half-form">
                <div class="form-group">
                  <label for="phone">Phone</label>
                  <input type="text" class="form-control" id="phone" name="phone" value="{{auth()->user()->mobile }}" required>
                </div>
              </div>
              <div class="half-form">
                <div class="form-group">
                  <label for="additional_comments">Order Notes</label>
                  <textarea name="additional_comments" class="form-control" rows="10" value="{{ old('additional_comments') }}" id="additional_comments" placeholder="Notes about your order, e.g. special notes for delivery"></textarea>
                </div>
              </div>
              <div class="half-form">
                <div class="form-group">
                  <label for="payment_method">Payment Method</label>
                  <br>
                  <input type="radio" id="contactChoice1" name="contact" value="email" checked="true">
                  <label for="contactChoice1">Cash on Delivery 
                    <i class="fas fa-handshake" data-toggle="tooltip" data-placement="top" title="Cash On Delivery" class="form-control"></i>
                  </label>
                </div>
              </div>
              @if(auth()->user()->cart->count() > 0)
                <button type="submit" id="complete-order" class="button-primary btn btn-primary1 full-width">Place Order</button>
              @else
                <a data-toggle="modal" data-target="#bagEmpty" class="button-primary btn btn-primary1 full-width" style="color: white">Place Order</a>
              @endif
            </form>
          </div>
      </div>
    </div>
  </section>

@endsection
@push('styles')
  <style>
    .delete-cart{padding: 7px 18px !important;}
    a:hover{color: #d33733 !important;}
    .checkout-section{display: grid;grid-template-columns: 1fr 1fr;margin: 40px auto 80px;}
    .checkout-section .checkout-table-container{margin-left: 124px;}
    .checkout-section h2{margin-bottom: 28px;}
    checkout-table-row-right{display: flex;justify-content: space-between;align-items: center;}
    .checkout-table-quantity{border: 1px solid #919191;padding: 4px 20px;margin-right: 5px;}
    .checkout-section .checkout-table-row{display: flex;justify-content: space-between;align-items: center;border-top: 1px solid #919191;padding: 14px 0;}
    .checkout-section .checkout-table-row:last-child{border-bottom: 1px solid #919191;}
    .checkout-section .checkout-table-row .checkout-table-row-left,.checkout-section .checkout-table-row .checkout-table-row-right{display: flex;justify-content: space-between;align-items: center;}
    .checkout-section .checkout-table-row .checkout-table-row-left {width: 75%;}
    .checkout-section .checkout-totals{display: flex;justify-content: space-between;border-bottom: 1px solid #919191;padding: 18px 0;line-height: 2;}
    .checkout-section .checkout-totals .checkout-totals-right{text-align: right;}
    .checkout-section .checkout-totals .checkout-totals-total{font-weight: bold;font-size: 22px;line-height: 2.2;}
    .checkout-section .checkout-table-row .checkout-table-img {max-height: 60px;}
    .checkout-section .checkout-table-row .checkout-table-description{color: #919191;}
    .checkout-section .checkout-table-row .checkout-table-price{padding-top: 6px;}
    .checkout-section .checkout-table-row .checkout-table-quantity{border: 1px solid #919191;padding: 4px 12px;margin-right: 5px;}
    .checkout-section .checkout-totals{display: flex;justify-content: space-between;border-bottom: 1px solid #919191;padding: 18px 0;line-height: 2;}
    .checkout-section .checkout-totals .checkout-totals-right{text-align: right;}
    .checkout-section .checkout-totals .checkout-totals-total{font-weight: bold;font-size: 22px;line-height: 2.2;}
    h4.stylish-heading{position: relative;}
    h4.stylish-heading:before,h4.stylish-heading:after{position: absolute;top: -4px;left: 0;width: 50px;height: 1px;background: #212121;content: "";display: block;}
    h4.stylish-heading:after{bottom: -14px;top: auto;}
  </style>
@endpush()