@extends('frontend.layout.master')
@section('content')
<div class="container" style="padding-top: 10%;">
 

      <div class="row">
        <div class="col-md-4 order-md-2 mb-4">
          <h4 class="d-flex justify-content-between align-items-center mb-3">
            <span class="text-muted">{{__('translation.yourcart')}}</span>
            <span class="badge badge-secondary badge-pill">3</span>
          </h4>
          <ul class="list-group mb-3">
            @if(count($data)>0)
                @foreach($data as $i => $value)
                    <li class="list-group-item d-flex justify-content-between lh-condensed">
                      <div>
                        <h6 class="my-0">{{$value['name']}}</h6>
                        <small class="text-muted">{{__('translation.quantity')}}: {{$value['quantity']}}</small>
                      </div>
                      <span class="text-muted">{{ number_format($value['price']*$value['quantity'], 2) }}</span>
                    </li>
                @endforeach
            @endif
            <li class="list-group-item d-flex justify-content-between">
              <span>{{__('translation.total')}}</span>
              <strong></strong>
            </li>
          </ul>
          @if(!Auth::guard('customer')->check())
              <p><b>{{__('translation.note')}}</b> {{__('translation.loggedinguestnote')}}</p>
              <button class="btn btn-dark btn-lg btn-block mt-3" type="button" id="formSubmitBtn" style="width:100%;height: 40px;">{{__('translation.placeorderasguest')}}</button>
              <hr>
              <a href="{{route('web.customer.login')}}"><button class="btn btn-dark btn-lg btn-block mt-3" type="button" style="width:100%;height: 40px;">{{__('translation.logintocompleteorder')}}</button></a>
              <a href="{{route('google.auth')}}"><button class="btn btn-dark btn-lg btn-block mt-3" type="button" style="width:100%;height: 40px;"><i class="fa-brands fa-google"></i>&nbsp;{{__('translation.continuewithgoogle')}}</button></a>
          @else
              <button class="btn btn-dark btn-lg btn-block mt-3" type="button" id="formSubmitBtn" style="width:100%;height: 40px;">{{__('translation.placeorder')}}</button>
          @endif
        </div>
        <div class="col-md-8 order-md-1">
            @if (count($errors) > 0)
                <div class="alert alert-danger">
                    <strong>Whoops!</strong> There were some problems with your input.<br><br>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
          <h4 class="mb-3">{{__('translation.shippingaddress')}}</h4>
          <form class="needs-validation" action="{{route('web.store.checkout.store')}}" method="post" id="checkoutForm">
              @csrf
            <div class="row">
              <div class="col-md-6 mb-3">
                <label for="firstName">{{__('translation.firstname')}}</label>
                <input type="text" class="form-control" id="first_name" name="first_name" value="{{old('first_name')}}" placeholder="{{__('translation.pleasestateyour')}} {{__('translation.firstname')}}" required>
                <div class="invalid-feedback">
                  Valid first name is required.
                </div>
              </div>
              <div class="col-md-6 mb-3">
                <label for="lastName">{{__('translation.lastname')}}</label>
                <input type="text" class="form-control" id="last_name" name="last_name" value="{{old('last_name')}}" placeholder="{{__('translation.pleasestateyour')}} {{__('translation.lastname')}}" required>
                <div class="invalid-feedback">
                  Valid last name is required.
                </div>
              </div>

                <div class=" col-md-6 mb-3">
                  <label for="email">{{__('translation.email')}}</label>
                  <input type="email" class="form-control" id="email" name="email" value="{{old('email')}}" placeholder="you@example.com" value="{{\Auth::guard('customer')->check() == true ? \Auth::guard('customer')->user()->email : ''}}" required>
                  <div class="invalid-feedback">
                    Please enter a valid email address for shipping updates.
                  </div>
                </div>
    <div class="col-md-3 mb-3">
                <label for="country">{{__('translation.country')}}</label>
                <input type="text" class="form-control" id="country" name="country" value="{{old('country')}}" placeholder="{{__('translation.pleasestateyour')}} {{__('translation.country')}}" required>
                <div class="invalid-feedback">
                  Please select a valid country.
                </div>
              </div>
              <div class="col-md-3 mb-3">
                <label for="zip">{{__('translation.zip')}}</label>
                <input type="text" class="form-control" id="zip" name="zip" value="{{old('zip')}}" placeholder="{{__('translation.pleasestateyour')}} {{__('translation.zip')}}" required>
                <div class="invalid-feedback">
                  Zip code required.
                </div>
              </div>
                <div class="col-md-12 mb-3">
                  <label for="address">{{__('translation.address')}}</label>
                  <input type="text" class="form-control" id="address" name="address" value="{{old('address')}}" placeholder="1234 Main St" required>
                  <div class="invalid-feedback">
                    Please enter your shipping address.
                  </div>
                </div>
    
                <div class="col-md-12 mb-3">
                  <label for="address2">{{__('translation.address')}} 2 <span class="text-muted">(Optional)</span></label>
                  <input type="text" class="form-control" id="address2" name="address2" value="{{old('address2')}}" placeholder="Apartment or suite">
                </div>

            
              <div class="col-md-6 mb-3">
                <label for="zip">{{__('translation.city')}}</label>
                <input type="text" class="form-control" id="city" name="city" value="{{old('city')}}" placeholder="{{__('translation.pleasestateyour')}} {{__('translation.city')}}" required>
                <div class="invalid-feedback">
                  City code required.
                </div>
              </div>
              <div class="col-md-6 mb-3">
                <label for="state">{{__('translation.state')}}</label>
                <input type="text" class="form-control" id="state" name="state" value="{{old('state')}}" placeholder="{{__('translation.pleasestateyour')}} {{__('translation.state')}}" required>
                <div class="invalid-feedback">
                  Please provide a valid state.
                </div>
              </div>
              
            </div>
            
            <hr class="mb-4">

            <h2 class="mb-3">{{__('translation.payment')}}</h2>

            <div class="d-block my-3">
              <div class="custom-control custom-radio">
                <input id="payment_mode" name="payment_mode" type="radio" value="1" class="custom-control-input" checked required>
                <label class="custom-control-label" for="payment_mode">{{__('translation.cod')}}</label>
              </div>
            </div>
            <!--<hr class="mb-4">-->
            <!--<button class="btn btn-dark btn-lg btn-block" type="submit">{{__('translation.placeorder')}}</button>-->
          </form>
        </div>
      </div>
  </div>
@endsection
@push('custom-css') 
<style>
.custom-select {
    display: inline-block;
    width: 100%;
    height: calc(2.25rem + 10px);
    padding: .375rem 1.75rem .375rem .75rem;
    line-height: 1.5;
    color: #495057;
    vertical-align: middle;
    background: #fff url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E) no-repeat right .75rem center;
    background-size: 8px 10px;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.form-control{
    line-height: 2.3;
}
.input-group-text{
    line-height: 2.5;
}
</style>
@endpush
@push('custom-script')
<script>
    $(document).ready(function(){
       $("#formSubmitBtn").click(function(){
           $("#checkoutForm").submit();
       });
    });
</script>
@endpush