@extends('layouts.acorn.acorn_frontend_app')
@section('header_styles')

@endsection
@section('content')
<div class="row">
  <div class="col mb-5">
    <h2>Place Order</h2>
  </div>
</div>

<form id="standard_order_place" action="{{route('standard-place-order')}}" method="post" class="needs-validation" novalidate>
  @csrf
  <div class="row">
    <div class="col-lg-8 col-md-7 col-7 mb-7">
      <p class="h6" style="text-align: center;">If you are a member, please<a href="Pages.Authentication.Login.html"> login</a>.</p>
      <section class="scroll-section" id="basic">
        <div class="card mb-5">
          <div class="card-body">
            <div class="mb-3">
              <div class="row g-2">
                <div class="col-4">
                  <h4 class="mt-7">Purchase Standard For - </h4>
                </div>
                <div class="col-4">
                  <label class="form-check custom-card w-100 position-relative p-0 m-0">
                    <input type="radio" class="form-check-input position-absolute e-2 t-2 z-index-1" id="company" name="purchase_for" value='company' checked="checked">
                    <span class="card form-check-label w-100 custom-border">
                      <span class="card-body text-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="acorn-icons acorn-icons-pepper text-primary"><path d="M13 11.3333C13 15.0152 11.125 18 10 18C8.875 18 7 15.0152 7 11.3333C7 7.65144 7.29167 6 10 6C12.7083 6 13 7.65144 13 11.3333Z"></path><path d="M11 17.5C12.4471 17.4093 16.1356 16.6825 16.7696 13.3675 17.4035 10.0525 18.6096 7.29223 14.9118 6.58509 13.5768 6.3298 13.119 6.7133 12.4304 7.00002M9 17.5C7.5529 17.4093 3.86436 16.6825 3.23041 13.3675 2.59647 10.0525 1.39044 7.29223 5.08821 6.58509 6.42318 6.3298 6.881 6.7133 7.56958 7.00002"></path><path d="M10 6L9.37873 3.51493C9.15615 2.62459 8.35618 2 7.43845 2H7"></path></svg>
                        <span class="heading mt-3 text-body text-primary d-block">Company</span>
                      </span>
                    </span>
                  </label>
                </div>
                <div class="col-4">
                  <label class="form-check custom-card w-100 position-relative p-0 m-0">
                    <input type="radio" class="form-check-input position-absolute e-2 t-2 z-index-1" id="individual" name="purchase_for" value='individual'>
                    <span class="card form-check-label w-100 custom-border">
                      <span class="card-body text-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="acorn-icons acorn-icons-cupcake text-primary"><path d="M16.5 11.5L14.5586 12.2894C13.6118 12.6743 12.527 12.4622 11.7949 11.7489V11.7489C10.7962 10.7757 9.20383 10.7757 8.20507 11.7489V11.7489C7.47305 12.4622 6.38817 12.6743 5.44139 12.2894L3.5 11.5"></path><path d="M14 5L15.1555 5.30852C16.0463 5.54637 16.7839 6.17049 17.1659 7.00965V7.00965C17.6884 8.15765 17.6161 9.48873 16.9721 10.5733L16.3962 11.5433C16.2168 11.8454 16.0919 12.1767 16.0271 12.522L15.4588 15.5529C15.1928 16.9718 13.9539 18 12.5102 18H7.48978C6.04613 18 4.80721 16.9718 4.54116 15.5529L3.97288 12.522C3.90813 12.1767 3.78322 11.8454 3.60383 11.5433L3.0279 10.5733C2.38394 9.48873 2.31157 8.15765 2.83414 7.00965V7.00965C3.21614 6.17049 3.95371 5.54637 4.84452 5.30852L6 5"></path><path d="M6 6.5C6 4.29086 7.5454 2 10 2C12.4546 2 14 4.29086 14 6.5"></path></svg>
                        <span class="heading mt-3 text-body text-primary d-block">Individual</span>
                      </span>
                    </span>
                  </label>
                </div>
              </div>
            </div>
            <div class="mb-3">
              <input class="form-control" placeholder="First Name" id="first_name" name="first_name">
            </div>
            <div class="mb-3">
              <input class="form-control" placeholder="Last Name" id="last_name" name="last_name">
            </div>
            <div class="mb-3">
              <input class="form-control" placeholder="Email" name="email" id="email">
            </div>
            <div class="mb-3">
              <input class="form-control" placeholder="NIC Number" id="nic" name="nic">
            </div>
            <div class="mb-3">
              <input class="form-control" placeholder="Mobile Number" id="mobile" name="mobile">
            </div>
            <div id="corporateRegisterData">
              <div class="mb-3">
                <input class="form-control" placeholder="Company Name" id="company_name" name="company_name">
              </div>
              <div class="mb-3">
                <input class="form-control" placeholder="Business Registration Numbar" id="brc_no" name="brc_no">
              </div>
              <div class="mb-3">
                <input class="form-control" placeholder="Designation" id="designation" name="designation">
              </div>
              <div class="mb-3">
              <input class="form-control" placeholder="Company Email" name="company_email" id="company_email">
              </div>
              <div class="mb-3">
                <input class="form-control" placeholder="Company Address" id="company_address" name="company_address">
              </div>
              <div class="mb-3">
                <input class="form-control" placeholder="Company Telephone Number" id="company_telephone" name="company_telephone">
              </div>
              <div class="mb-3">
                <input class="form-control" placeholder="Company Fax Number" id="company_fax" name="company_fax">
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <div class="col-lg-4 col-md-5 col-5">
        <div class="row">
          <div class="col-12">
            <div class="card text-white bg-dark mb-5">
              <div class="row g-0 sh-9 p-card pt-0 pb-0">
                <div class="col-12 d-flex flex-column justify-content-center">
                  <p class="heading mb-1">Delivery Option</p>
                  <div class="row">
                    <div class="col-6">
                      <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="soft_copy" name="soft_copy"  disabled>
                        <label class="form-check-label text-white" for="flexSwitchCheckDefault" style="font-size: 12px;">Soft Copy</label>
                      </div>
                    </div>
                    <div class="col-6">
                      <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="hard_copy" name="hard_copy"  disabled>
                        <label class="form-check-label text-white" for="flexSwitchCheckDefault" style="font-size: 12px;">Hard Copy</label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <div class="card text-white bg-info">
              <div class="card-header" style="padding:15px;">
              <h3 style="margin: 0; color: #fff;">Summary</h3>
              </div>
              <div class="card-body" style="padding: 15px;">
                <h5 style="color: #fff;">Estimate Shipping And Tax</h5>
                                <div class="row g-0 mb-2">
                  <div class="col">
                    <div class="card-body d-flex flex-column pt-0 pb-0 ps-3 pe-4 h-100 justify-content-center">
                      <div class="d-flex flex-column">
                        <div class="mt-n1 lh-1-25">Subtotal</div>
                      </div>
                    </div>
                  </div>
                  <div class="col-auto">
                    <div class="d-inline-block d-flex justify-content-end align-items-center h-100">
                      <div class="ms-2 mt-n1 lh-1-25">{{number_format((float)$total, 2, '.', '')}}</div>
                    </div>
                  </div>
                </div>
                                <hr>
                <div class="row g-0 mb-2">
                  <div class="col">
                    <div class="card-body d-flex flex-column pt-0 pb-0 ps-3 pe-4 h-100 justify-content-center">
                      <div class="d-flex flex-column">
                        <div class="mt-n1 lh-1-25">Order Total</div>
                      </div>
                    </div>
                  </div>
                  <div class="col-auto">
                    <div class="d-inline-block d-flex justify-content-end align-items-center h-100">
                      <div class="ms-2 mt-n1 lh-1-25">{{number_format((float)$order_total, 2, '.', '')}}</div>
                    </div>
                  </div>
                </div>
                <div class="row g-0 mb-2 mt-5">
                  <div class="col text-center">
                    <button type="submit" class="btn btn-warning">Pay Now</a>
                  </div>
                </div>
                <div class="row g-0 mb-2 mt-5">
                  <div class="col text-center">
                    <a href="{{url('/').'/standard/cart'}}" class="btn btn-dark">Back To Cart</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</form>
@endsection
@section('footer_scripts')
  <script type="text/javascript">
    $('input[type=radio][name=purchase_for]').change(function() {
        if (this.value == 'company') {
          console.log('company');
          $('#corporateRegisterData').show();
        }
        else if (this.value == 'individual') {
            console.log('individual');
            $('#corporateRegisterData').hide();
        }
    });
  </script>
@endsection