@extends('layout.client')
@section('content')
  <div class="breadcrumb__area pt-5 pb-5">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="tp-breadcrumb__content">
            <div class="tp-breadcrumb__list">
              <span class="tp-breadcrumb__active"><a href="{{ route('indexpage') }}">Home</a></span>
              <span class="dvdr">/</span>
              <span>Checkout</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <section class="checkout-area pb-50">
    <div class="container">
      <form action="{{ route('client.placeorder') }}" method="post" novalidate>
        @csrf
        <div class="row justify-content-center">
          <div class="col-lg-8 col-md-10 col-sm-12">
            <div class="checkbox-form">
              <h3>Billing Details</h3>
              <div class="row">
                <div class="col-12 mb-2">
                  <p class="fw-bold">Select address</p>
                  <div class="row mb-4">
                    @foreach ($user->address as $address)
                      <div class="col-lg-4 mb-2 pb-2 pt-2 address_selector">
                        <input type="radio" name="address_id" value="{{ $address->id }}">
                        <div class="card">
                          <div class="card-body">
                            <h6>{{ $address->name }}</h6>
                            <p class="mb-1">{{ $address->phone }}</p>
                            <p class="mb-1">{{ $address->address . ' , ' . $address->street }}</p>
                            <p class="mb-1">
                              {{ $address->district . ' , ' . $address->state . ' , ' . $address->country }}</p>
                            <p class="mb-0">{{ $address->pin }}</p>
                          </div>
                        </div>
                      </div>
                    @endforeach
                  </div>
                  <hr style="opacity: 0.1">
                </div>
                <div class="col-sm-12 mb-3">
                  <div class="form-check">
                    <input class="form-check-input" id="adid" type="radio" name="address_id" value="new"
                      checked>
                    <label class="form-check-label fw-bold" for="adid">
                      Or Enter a new address
                    </label>
                  </div>
                </div>
                <div class="col-md-6 col-sm-12">
                  <div class="checkout-form-list">
                    <label>Name <span class="required">*</span></label>
                    <input class="is-invalid" type="text" name="name" required>
                    @error('name')
                      <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                  </div>
                </div>
                <div class="col-md-6 col-sm-12">
                  <div class="checkout-form-list">
                    <label>Address<span class="required">*</span></label>
                    <input class="is-invalid" type="text" name="address" required>
                    @error('address')
                      <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                  </div>
                </div>
                <div class="col-md-6 col-sm-12">
                  <div class="checkout-form-list">
                    <label>Street<span class="required">*</span></label>
                    <input class="is-invalid" type="text" name="street"required>
                    @error('street')
                      <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                  </div>
                </div>
                <div class="col-md-6 col-sm-12">
                  <div class="checkout-form-list">
                    <label>District<span class="required">*</span></label>
                    <input class="is-invalid" type="text" name="district" value="Kannur" readonly required>
                    @error('district')
                      <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                  </div>
                </div>
                <div class="col-md-6 col-sm-12">
                  <div class="checkout-form-list">
                    <label>State<span class="required">*</span></label>
                    <input class="is-invalid" type="text" name="state" value="Kerala" readonly required>
                    @error('state')
                      <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                  </div>
                </div>
                <div class="col-md-6 col-sm-12">
                  <div class="checkout-form-list">
                    <label>PIN<span class="required">*</span></label>
                    <input class="is-invalid" type="text" name="pin" required>
                    @error('pin')
                      <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                  </div>
                </div>
                <div class="col-md-6 col-sm-12">
                  <div class="checkout-form-list">
                    <label>Country<span class="required">*</span></label>
                    <input class="is-invalid" type="text" name="country" value="India" readonly required>
                    @error('country')
                      <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                  </div>
                </div>
                <div class="order-button-payment mt-20 text-end">
                  <button type="submit" class="tp-btn tp-color-btn banner-animation">Place order</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
  </section>
@endsection