@extends('site.layouts.master')
@section('title', 'تسویه حساب')
@section('content')

      <section class="page-header -type-1">
        <div class="container">
          <div class="page-header__content">
            <div class="row justify-center text-center">
              <div class="col-auto">
                <div data-anim="slide-up delay-1">

                  <h1 class="page-header__title">تسویه حساب</h1>

                </div>

                <div data-anim="slide-up delay-2">


                </div>
              </div>
            </div>
          </div>
        </div>
      </section>


      <section class="layout-pt-md layout-pb-lg">
        <div class="container">
          <div class="row y-gap-50">
            <div class="col-lg-8">
              <div class="shopCheckout-form">
                <form action="" class="contact-form row x-gap-30 y-gap-30">
                  <div class="col-12">
                    <h5 class="text-20">اطلاعات شخصی</h5>
                  </div>
                  <div class="col-sm-6">
                    <label class="text-16 lh-1 fw-500 text-dark-1 mb-10">نام</label>
                    <input type="text" name="firstName" placeholder="نام">
                  </div>
                  <div class="col-sm-6">
                    <label class="text-16 lh-1 fw-500 text-dark-1 mb-10">نام خانوادگی</label>
                    <input type="text" name="lastName" placeholder="نام خانوادگی">
                  </div>
                  <div class="col-12">
                    <label class="text-16 lh-1 fw-500 text-dark-1 mb-10">نام شرکت</label>
                    <input type="text" name="company" placeholder="نام شرکت">
                  </div>

                  <div class="col-12">
                    <label class="text-16 lh-1 fw-500 text-dark-1 mb-10">کشور / شهر * </label>
                    <select class="selectize wide js-selectize">
                      <option value="USA">آمریکا</option>
                      <option value="Germany">آلمان</option>
                      <option value="France">فرانسه</option>
                      <option value="Greece">یونان</option>
                    </select>
                  </div>

                  <div class="col-12">
                    <label class="text-16 lh-1 fw-500 text-dark-1 mb-10">خیابان اصلی</label>
                    <input type="text" name="address" placeholder="خیابان اصلی">
                  </div>

                  <div class="col-sm-6">
                    <label class="text-16 lh-1 fw-500 text-dark-1 mb-10">خیابان فرعی، پلاک، طبقه (اختیاری)</label>
                    <input type="text" name="apartment" placeholder="خیابان فرعی، پلاک، طبقه (اختیاری)">
                  </div>

                  <div class="col-sm-6">
                    <label class="text-16 lh-1 fw-500 text-dark-1 mb-10">استان / شهرستان *</label>
                    <input type="text" name="city" placeholder="استان / شهرستان *">
                  </div>

                  <div class="col-sm-6">
                    <label class="text-16 lh-1 fw-500 text-dark-1 mb-10">شهر *</label>
                    <input type="text" name="state" placeholder="شهر *">
                  </div>

                  <div class="col-sm-6">
                    <label class="text-16 lh-1 fw-500 text-dark-1 mb-10">کدپستی *</label>
                    <input type="text" name="zip" placeholder="کدپستی *">
                  </div>

                  <div class="col-sm-6">
                    <label class="text-16 lh-1 fw-500 text-dark-1 mb-10">شماره همراه *</label>
                    <input type="text" name="phone" placeholder="شماره همراه *">
                  </div>

                  <div class="col-12">
                    <label class="text-16 lh-1 fw-500 text-dark-1 mb-10">ایمیل *</label>
                    <input type="email" name="email" placeholder="***@gmail.com">
                  </div>

                  <div class="col-12">
                    <h5 class="text-20 fw-500 pt-30">اطلاعات اضافی</h5>
                  </div>
                  <div class="col-12">
                    <label class="text-16 lh-1 fw-500 text-dark-1 mb-10">یادداشت های سفارش (اختیاری)</label>
                    <textarea name="notes" id="form_notes" rows="8" placeholder="یادداشت های سفارش (اختیاری)"></textarea>
                  </div>
                </form>
              </div>
            </div>

            <div class="col-lg-4">
              <div class="">
                <div class="pt-30 pb-15 bg-white border-light rounded-8 bg-light-4">
                  <h5 class="px-30 text-20 fw-500">
                    سفارشات
                  </h5>

                  <div class="d-flex justify-between px-30 mt-25">
                    <div class="py-15 fw-500 text-dark-1">نام کالا</div>
                    <div class="py-15 fw-500 text-dark-1">جزئیات</div>
                  </div>

                  <div class="d-flex justify-between border-top-dark px-30">
                    <div class="py-15 text-grey">آموزش صفر تا صد ReactJs</div>
                    <div class="py-15 text-grey">59000 تومان</div>
                  </div>

                  <div class="d-flex justify-between px-30">
                    <div class="py-15 text-grey">دوره آموزش جامع NodeJs1</div>
                    <div class="py-15 text-grey">670000 تومان</div>
                  </div>

                  <div class="d-flex justify-between border-top-dark px-30">
                    <div class="py-15 fw-500">جمع کل</div>
                    <div class="py-15 fw-500">178000 تومان</div>
                  </div>

                  <div class="d-flex justify-between border-top-dark px-30">
                    <div class="py-15 fw-500 text-dark-1">هزینه ارسال</div>
                    <div class="py-15 fw-500 text-dark-1">25000 تومان</div>
                  </div>

                  <div class="d-flex justify-between border-top-dark px-30">
                    <div class="py-15 fw-500 text-dark-1">قیمت نهایی</div>
                    <div class="py-15 fw-500 text-dark-1">9,21800 تومان</div>
                  </div>
                </div>

                <div class="py-30 px-30 bg-white mt-30 border-light rounded-8 bg-light-4">
                  <h5 class="text-20 fw-500">
                    روش های پرداخت
                  </h5>

                  <div class="mt-30">
                    <div class="form-radio d-flex items-center">
                      <div class="radio">
                        <input type="radio" name="radio" checked="checked">
                        <div class="radio__mark">
                          <div class="radio__icon"></div>
                        </div>
                      </div>
                      <h5 class="mr-15 text-15 lh-1 fw-500 text-dark-1">پرداخت مستقیم</h5>
                    </div>
                    <p class="ml-25 pl-5 mt-25">پرداخت خود را مستقیماً به حساب بانکی ما انجام دهید. لطفا از شناسه سفارش خود به عنوان مرجع پرداخت استفاده کنید. سفارش شما تا زمانی که وجوه در حساب ما تسویه نشده باشد ارسال نخواهد شد.</p>
                  </div>

                  <div class="mt-30">
                    <div class="form-radio d-flex items-center">
                      <div class="radio">
                        <input type="radio" name="radio" checked="checked">
                        <div class="radio__mark">
                          <div class="radio__icon"></div>
                        </div>
                      </div>
                      <h5 class="mr-15 text-15 lh-1 text-dark-1">کارت به کارت</h5>
                    </div>
                  </div>

                  <div class="mt-30">
                    <div class="form-radio d-flex items-center">
                      <div class="radio">
                        <input type="radio" name="radio" checked="checked">
                        <div class="radio__mark">
                          <div class="radio__icon"></div>
                        </div>
                      </div>
                      <h5 class="mr-15 text-15 lh-1 text-dark-1">پرداخت نقدی هنگام تحویل</h5>
                    </div>
                  </div>

                  <div class="mt-30">
                    <div class="form-radio d-flex items-center">
                      <div class="radio">
                        <input type="radio" name="radio" checked="checked">
                        <div class="radio__mark">
                          <div class="radio__icon"></div>
                        </div>
                      </div>
                      <h5 class="mr-15 text-15 lh-1 text-dark-1">PayPal</h5>
                    </div>
                  </div>
                </div>

                <div class="mt-30">
                  <button class="button -md -accent col-12 -uppercase text-white">ثبت سفارش</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>


@endsection
  <!-- JavaScript -->
  <script src="vendor/leaflet/leaflet.js"></script>
  <script src="js/vendors.js"></script>
  <script src="js/main.js"></script>