@extends('master.front')

@section('title')
    {{ __('Billing') }}
@endsection

<style>
    
    .form-group label {
    font-size: 14px !important;
    font-weight: 600 ! important;
}

</style>

@section('content')
    <!-- Page Title-->
    <div class="page-title">
        <div class="container">
            <div class="column">
                <ul class="breadcrumbs">
                    <li><a href="{{ route('front.index') }}">{{ __('Home') }}</a> </li>
                    <li class="separator"></li>
                    <li>{{ __('Order Summary') }}</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Page Content-->
    <div class="container padding-bottom-3x mb-1 checkut-page">
        <div class="row">
            <!-- Billing Adress-->
            <div class="col-xl-9 col-lg-8">
                {{-- <div class="steps flex-sm-nowrap mb-5"><a class="step active" href="{{ route('front.checkout.billing') }}">
                        <h4 class="step-title">1. {{ __('Customer Information') }}:</h4>
                    </a>
                    <a class="step" href="javascript:;">
                        <h4 class="step-title">2. {{ __('Shipping Address') }}:</h4>
                    </a><a class="step" href="{{ route('front.checkout.payment') }}">
                        <h4 class="step-title">3. {{ __('Review and pay') }}</h4>
                    </a>
                </div> --}}
                <div class="card">
                    <div class="card-body">
                        <h6 class="text-center">{{ __('কাস্টমার ইনফরমেশন') }}</h6>
                        <hr class="mb-4">

                        <form id="checkoutBilling" action="{{ route('front.checkout.submit') }}" method="POST">
                            @csrf
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="checkout-fn">{{ __('আপনার নাম') }}</label>
                                        <input class="form-control" name="bill_first_name" type="text" required
                                            id="checkout-fn" value="{{ isset($user) ? $user->first_name : '' }}">
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                  <div class="form-group">
                                      <label for="checkout-phone">{{ __('আপনার ফোন নাম্বার') }}</label>
                                      <input class="form-control" name="bill_phone" type="text" id="checkout-phone"
                                          required value="{{ isset($user) ? $user->phone : '' }}">
                                  </div>
                              </div>
                              <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="checkout-address1">{{ __('আপনার ঠিকানা') }}</label>
                                    <input class="form-control" name="bill_address1" required type="text"
                                        id="checkout-address1"
                                        value="{{ isset($user) ? $user->bill_address1 : '' }}">
                                </div>
                              </div>

                                <div class="col-sm-6">
                                    <div class="form-group">
                                      <label for="bill_area">{{ __('আপনার এরিয়া সিলেক্ট করুন') }}</label>
                                      <select class="form-control" required name="bill_area" 
                                          id="bill_area">
                                          @foreach ($shippingAreas as $area)
                                          <option data-id="{{ $area->id }}" {{ Session::has('shipping') ? (Session::get('shipping')->id == $area->id ? 'selected' : '') : '' }} value="{{ PriceHelper::setCurrencyPrice($area->price) }}" >{{ $area->title }}</option>
                                          @endforeach
                                      </select>
                                  </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-center paddin-top-1x mt-4">

                              <button class="btn btn-primary btn-md" type="submit"><span
                                class="">{{ __('অর্ডার কনফার্ম করুন') }}</span></button>
                            </div>
                            
                        </form>
                    </div>
                </div>
            </div>
            <!-- Sidebar          -->
            @include('includes.checkout_sitebar', $cart)
        </div>
    </div>
@endsection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('#bill_area').on('change', function() {
          var grandTotal = removeCurrency($('#grand_total').data('grand_total'));
          var oldShippingPrice = removeCurrency($('#shipping_price').data('price'));
          var newShippingPrice = removeCurrency($(this).val());
          var areaId = $(this).find(':selected').data('id');

          var newGrandTotal = parseFloat(grandTotal) + parseFloat(newShippingPrice) - parseFloat(oldShippingPrice);
          $('#shipping_price').text( addCurrency(newShippingPrice));
          $('#grand_total').text(addCurrency(newGrandTotal));
          $('#grand_total').data('grand_total', addCurrency(newGrandTotal));
          $('#shipping_price').data('price', addCurrency(newShippingPrice));

          //api call
          $.ajax({
            url: "{{ route('front.checkout.area.change') }}",
            method: "POST",
            data: {
              new_shipping_id: areaId,
              _token: "{{ csrf_token() }}",
            },
            success: function(response) {

              $('#shipping_price').text( addCurrency(newShippingPrice));
              $('#grand_total').text(addCurrency(newGrandTotal));
              $('#grand_total').data('grand_total', addCurrency(newGrandTotal));
              $('#shipping_price').data('price', addCurrency(newShippingPrice));

            }
          });


        })
    });

    //remove ৳ and space
    function removeCurrency(str) {
        str = str.replace(' ', '');
        str = str.replace(',', '');
        return str.replace('৳', '');
    }

    //add ৳ and  comma
    function addCurrency(str) {
        let num = parseFloat(str).toLocaleString('en-BD');
        return `৳${num}`;
    }
</script>