@extends('layouts.site')

@section('title', 'Checkout - Auctions Ontario')

@section('content')
  @include('partials.page-banner', ['title' => 'Checkout'])

  <section class="cart_order_section py-5">
    <div class="container">
      <h2 class="ct_contact_title mb-5">Bid Item Details</h2>

      <div class="table-responsive mt-4">
        <table class="table cart_table align-middle">
          <thead>
            <tr>
              <th></th>
              <th>Product</th>
              <th>Bid amount</th>
              <th>Subtotal</th>
            </tr>
          </thead>

          <tbody>
            <tr>
              <td>
                <img src="{{ asset($lot->cover_image ?? 'assets/img/bid_item.png') }}" class="cart_product_img" alt="{{ $lot->title }}" />
              </td>
              <td><p class="mb-0">{{ strtoupper($lot->title) }}</p></td>
              <td><p class="cart_product_name mb-0">$ {{ number_format($subtotal, 2) }} CAD</p></td>
              <td><p class="cart_product_name mb-0">$ {{ number_format($subtotal, 2) }} CAD</p></td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="row justify-content-end mt-5">
        <div class="col-lg-6">
          <h4 class="cart_total_heading">CART TOTALS</h4>

          <table class="table cart_total_table">
            <tbody>
              <tr>
                <td class="text-dark">Subtotal</td>
                <td class="text-end">$ {{ number_format($subtotal, 2) }} CAD</td>
              </tr>

              <tr>
                <td>
                  <span class="text-dark">Shipment</span><br />
                  <small>Canada Post Express Shipping</small>
                </td>
                <td class="text-end">CA$ {{ number_format($shippingFee, 2) }}</td>
              </tr>

              <tr class="fw-bold">
                <td>Total</td>
                <td class="text-end text-dark">$ {{ number_format($total, 2) }} CAD</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </section>

  <section class="checkout_section py-5">
    <div class="container">
      <form method="POST" action="{{ route('checkout.store', $lot) }}">
        @csrf

        <div class="row gy-5">
          <div class="col-lg-7">
            <h3 class="checkout_title mb-4">SHIPPING ADDRESS</h3>

            <div class="row">
              <div class="col-md-6 mb-3">
                <label class="checkout_label" for="shipping_first_name">First Name *</label>
                <input id="shipping_first_name" type="text" name="shipping_first_name" class="form-control checkout_input" value="{{ old('shipping_first_name', auth()->user()->name ?? '') }}" required />
                @error('shipping_first_name') <small class="text-danger">{{ $message }}</small> @enderror
              </div>

              <div class="col-md-6 mb-3">
                <label class="checkout_label" for="shipping_last_name">Last Name *</label>
                <input id="shipping_last_name" type="text" name="shipping_last_name" class="form-control checkout_input" value="{{ old('shipping_last_name') }}" required />
                @error('shipping_last_name') <small class="text-danger">{{ $message }}</small> @enderror
              </div>

              <div class="col-md-6 mb-3">
                <label class="checkout_label" for="shipping_email">Email Address *</label>
                <input id="shipping_email" type="email" name="shipping_email" class="form-control checkout_input" value="{{ old('shipping_email', auth()->user()->email ?? '') }}" required />
                @error('shipping_email') <small class="text-danger">{{ $message }}</small> @enderror
              </div>

              <div class="col-md-6 mb-3">
                <label class="checkout_label" for="shipping_phone">Phone</label>
                <input id="shipping_phone" type="text" name="shipping_phone" class="form-control checkout_input" value="{{ old('shipping_phone') }}" />
              </div>

              <div class="col-md-6 mb-3">
                <label class="checkout_label" for="shipping_province">Province *</label>
                <select id="shipping_province" name="shipping_province" class="form-select checkout_input" required>
                  @foreach (['Ontario', 'Alberta', 'British Columbia', 'Quebec', 'Manitoba'] as $province)
                    <option @selected(old('shipping_province') === $province)>{{ $province }}</option>
                  @endforeach
                </select>
              </div>

              <div class="col-md-6 mb-3">
                <label class="checkout_label" for="shipping_city">City *</label>
                <input id="shipping_city" type="text" name="shipping_city" class="form-control checkout_input" value="{{ old('shipping_city') }}" required />
                @error('shipping_city') <small class="text-danger">{{ $message }}</small> @enderror
              </div>

              <div class="col-md-6 mb-3">
                <label class="checkout_label" for="shipping_address">Address *</label>
                <input id="shipping_address" type="text" name="shipping_address" class="form-control checkout_input" value="{{ old('shipping_address') }}" required />
                @error('shipping_address') <small class="text-danger">{{ $message }}</small> @enderror
              </div>

              <div class="col-md-6 mb-3">
                <label class="checkout_label" for="shipping_postal_code">Postcode / ZIP *</label>
                <input id="shipping_postal_code" type="text" name="shipping_postal_code" class="form-control checkout_input" value="{{ old('shipping_postal_code') }}" required />
                @error('shipping_postal_code') <small class="text-danger">{{ $message }}</small> @enderror
              </div>
            </div>
          </div>

          <div class="col-lg-5">
            <h3 class="checkout_title mb-4">PAYMENT</h3>

            <div class="checkout_payment_box">
              <div class="d-flex align-items-start gap-2">
                <input type="radio" name="payment_method" id="card" value="card" class="mt-1" checked />
                <div>
                  <label class="form-check-label checkout_payment_title" for="card">Pay with Card</label>
                  <p class="checkout_small_text">Pay securely by credit or debit card.</p>
                </div>
              </div>
            </div>

            <hr />

            <div class="checkout_payment_box py-2">
              <div class="mb-2 d-flex align-items-start gap-2">
                <input type="radio" name="payment_method" id="transfer" value="e_transfer" class="mt-2 flex-shrink-0" />
                <div>
                  <label class="form-check-label checkout_payment_title" for="transfer">
                    Pay with Interac E-Transfer
                  </label>
                  <p class="checkout_small_text mt-2 mb-0">
                    We accept Interac E-Transfer. You will be directed to the
                    payment page after your delivery address is confirmed.
                  </p>
                </div>
              </div>
            </div>

            @error('payment_method') <small class="text-danger">{{ $message }}</small> @enderror

            <button type="submit" class="ct_orange_btn w-100 mt-4">PLACE ORDER</button>
          </div>
        </div>
      </form>
    </div>
  </section>
@endsection