@extends('master.front')

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

@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>{{__('Billing address')}}</li>
      </ul>
    </div>
  </div>
</div>
<!-- Page Content-->
<div class="container padding-bottom-3x mb-1 checkut-page">
       <p class="text-center"style="font-weight: 700; border:1px solid blue; border-radius: 8px; padding:8px;">আপনার অর্ডারটি কনফর্ম করতে তথ্যগুলো পূরণ করে "অর্ডার করুন" বাটন এ ক্লিক করুন অথবা ফোনে অর্ডার করতে এই নাম্বার <span><a href="tel:01920872123">01920872123</a></span> এর উপরে ক্লিক করুন।</p>
  <div class="row ">
    <!-- Billing Adress-->
    <div class="col-xl-6 col-lg-6 col-md-6 col-sm-10 mx-auto">
      <!-- <div class="steps flex-sm-nowrap mb-5"><a class="step active" href="{{route('front.checkout.billing')}}">
          <h4 class="step-title">1. {{__('Billing Address')}}:</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">
          <h4>{{__('Billing Address')}}</h4>

          <form id="checkoutBilling" action="{{route('front.checkout.store')}}" method="POST">
            @csrf
            <div class="row">
              <div class="col-sm-12">
                <div class="form-group">
                  <label for="checkout-fn">আপনার নাম <span class="text-danger">*</span></label>
                  <input class="form-control" name="bill_first_name" placeholder="আপনার পুরো নাম লিখুন" type="text" required id="checkout-fn" value="{{isset($user) ? $user->first_name : ''}}">
                </div>
              </div>

            </div>
            <div class="row">
              <!-- <div class="col-sm-6">
                <div class="form-group">
                  <label for="checkout_email_billing">ই-মেইল (optional) </label>
                  <input class="form-control" name="bill_email" placeholder="ইমেইল লিখুন" type="email" id="checkout_email_billing" value="{{isset($user) ? $user->email : ''}}">
                </div>
              </div> -->
             
              <div class="col-sm-6">
                <div class="form-group">
                  <label for="checkout-phone">ফোন নাম্বার <span class="text-danger">*</span></label>
                  <input class="form-control" name="bill_phone" placeholder="ফোন নাম্বার লিখুন" 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">ঠিকানা <span class="text-danger">*</span></label>
                  <input class="form-control" name="bill_address1" placeholder="ঠিকানা লিখুন * জেলা,উপজেলা,থানা,পৌরসভা" required type="text" id="checkout-address1" value="{{isset($user) ? $user->bill_address1 : ''}}">
                </div>
              </div>
            </div>
            @if (PriceHelper::CheckDigital())

            <!--<div class="row">-->
            <!--  <div class="col-sm-12">-->
            <!--    <div class="form-group">-->
            <!--      <label for="checkout-city">নোট</label>-->
            <!--    <input class="form-control" name="bill_city" placeholder="আপনার কোনো নোট থাকলে তা লিখুন" type="text" id="checkout-city" value="{{isset($user) ? $user->bill_city : ''}}">-->
            <!--    </div>-->
            <!--  </div>-->

            <!--</div>-->
            <div class="row">
              <!-- <div class="col-sm-6">
                <div class="form-group">
                  <label for="checkout-zip">জিপ কোড (optional)</label>
                  <input class="form-control" name="bill_zip" placeholder="জিপ কোড লিখুন" type="text" id="checkout-zip" value="{{isset($user) ? $user->bill_zip : ''}}">
                </div>
              </div> -->
              <!-- <div class="col-sm-6">
                <div class="form-group">
                  <label for="checkout-city">জেলা</label>
                  <input class="form-control" name="bill_city" placeholder="জেলার নাম লিখুন" type="text" required id="checkout-city" value="{{isset($user) ? $user->bill_city : ''}}">
                </div>
              </div> -->
            </div>
            <div class="row d-none">
              <div class="col-sm-12">
                <div class="form-group">
                  <label for="checkout-country">{{ __('Country') }}</label>
                  <select class="form-control" required name="bill_country" id="billing-country">
                    <option selected>{{__('Choose Country')}}</option>
                    @foreach (DB::table('countries')->get() as $country)
                    <option value="{{$country->name}}" {{'Bangladesh' == $country->name ? 'selected' :''}}>{{$country->name}}</option>
                    @endforeach
                  </select>
                </div>
              </div>
            </div>

            <h6 class="pb-2">{{ __('শিপিং নির্বাচন করুন') }}<span class="text-danger">*</span></h6>
                 <div class="col-sm-6  mb-4">
                    @if (PriceHelper::CheckDigital() == true)
                        @php
                            $free_shipping = DB::table('shipping_services')->whereStatus(1)->whereIsCondition(1)->first();
                        @endphp

                        <select name="shipping_id" class="form-control" id="shipping_id_select" required>
                            <option value="" selected disabled>{{ __('ঢাকা সিটির বাহিরে না ভিতরে থাকেন সিলেক্ট করুন ') }}</option>
                            @foreach (DB::table('shipping_services')->whereStatus(1)->get() as $shipping)
                                @if ($shipping->id == 1 && isset($free_shipping) &&  $free_shipping->minimum_price <= $cart_total)
                                    <option value="{{ $shipping->id }}"
                                        data-href="{{ route('front.shipping.setup') }}">{{ $shipping->title }}
                                    </option>
                                @else
                                    @if ($shipping->id != 1)
                                        <option value="{{ $shipping->id }}"
                                            data-href="{{ route('front.shipping.setup') }}">{{ $shipping->title }}
                                            ({{ PriceHelper::setCurrencyPrice($shipping->price) }})
                                        </option>
                                    @endif
                                @endif
                            @endforeach
                        </select>

                        <small class="text-primary shipping_message">{{ __('Please select shipping method') }}</small>
                        @error('shipping_id')
                            <p class="text-danger shipping_message">{{ $message }}</p>
                        @enderror

                    @endif
                </div>
              @endif

              <!--<h6 class="pb-2">{{ __('পেমেন্ট মেথড সিলেক্ট করুন') }}</h6>-->
              <!--<div class="row mt-4">-->
              <!--  <div class="col-12">-->
              <!--    <div class="payment-methods">-->
              <!--      @foreach ($payments as $gateway)-->
              <!--      <div class="single-payment-method">-->
              <!--        <label>-->
              <!--          <input type="radio" checked name="payment_method" value="{{ $gateway->unique_keyword }}" required>-->
                        <!-- <img src="{{ asset('assets/images/' . $gateway->photo) }}" alt="{{ $gateway->name }}"> -->
              <!--          <span>{{ $gateway->name }}</span>-->
              <!--        </label>-->
              <!--      </div>-->
              <!--      @endforeach-->
              <!--    </div>-->
              <!--  </div>-->
              <!--</div>-->


              
               <h6 class="pb-2">{{ __('পেমেন্ট মেথড সিলেক্ট করুন') }}</h6>
              <div class="row mt-4">
                <div class="col-12">
                  <div class="payment-methods">
                    @foreach ($payments as $index => $gateway)
                    <div class="single-payment-method">
                      <label>
                        <input type="radio"
                               name="payment_method"
                               value="{{ $gateway->unique_keyword }}"
                               required
                               {{ $index == 0 ? 'checked' : '' }}
                               onclick="toggleBkashFields('{{ $gateway->unique_keyword }}')">
                        <span>{{ $gateway->name }}</span>
                      </label>
                    </div>
                    @endforeach
                  </div>
                </div>
              </div>

                           
<button type="button" class="btn btn-outline-primary mb-3"  style="background-color:#0E0C62!important;" id="toggleNote">
     অতিরিক্ত নোট যোগ  <i class="fas fa-plus me-2"></i>
</button>

<div class="form-group" id="noteArea" style="display: none;">
    <textarea 
        class="form-control" 
        name="customer_note" 
        rows="3" 
        placeholder="আপনার বিশেষ নির্দেশনা এখানে লিখুন"
        style="border-radius: 8px;"
    ></textarea>
</div>

              <div class="row" id="bkash-fields" style="display: none;">
                 <p>আমাদের <span style="font-weight:900; color:green;">01970872123</span> এই বিকাশ নাম্বারে পেমেন্ট করে পেমেন্ট নাম্বার ও ট্রান্সজেকসন নাম্বারটি লিখুন </p>
                <div class="col-sm-6">
                  <div class="form-group">
                    <label for="bkash-number">Bkash Number</label>
                    <input class="form-control" name="bill_city" placeholder="আপনার বিকাশ নাম্বারটি লিখুন" type="text" id="bkash-number" value="{{isset($user) ? $user->bill_city : ''}}">
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group">
                    <label for="bkash-transaction">Transaction</label>
                    <input class="form-control" name="bill_zip" placeholder="ট্রান্সজেকশন নাম্বারটি লিখুন" type="text" id="bkash-transaction" value="{{isset($user) ? $user->bill_zip : ''}}">
                  </div>
                </div>
              </div>

              <script>
                function toggleBkashFields(selected) {
                  // Replace 'bkash' with your actual unique_keyword for Bkash gateway
                  var bkashKeyword = '{{ $payments[1]->unique_keyword ?? '' }}';
                  var bkashFields = document.getElementById('bkash-fields');
                  if (selected === bkashKeyword) {
                    bkashFields.style.display = 'flex';
                  } else {
                    bkashFields.style.display = 'none';
                  }
                }

                // On page load, set initial state
                document.addEventListener('DOMContentLoaded', function() {
                  var radios = document.getElementsByName('payment_method');
                  for (var i = 0; i < radios.length; i++) {
                    if (radios[i].checked) {
                      toggleBkashFields(radios[i].value);
                      break;
                    }
                  }
                });
              </script>

              <div class="form-group d-none">
                <div class="custom-control custom-checkbox">
                  <input class="custom-control-input" type="checkbox" id="same_address" name="same_ship_address" checked {{Session::has('shipping_address') ? 'checked' : ''}}>
                  <label class="custom-control-label" for="same_address">{{__('Same as billing address')}}</label>
                </div>
              </div>

              @if ($setting->is_privacy_trams == 1)
              <div class="form-group">
                <!--<div class="custom-control custom-checkbox">-->
                <!--  <input class="custom-control-input" type="checkbox" id="trams__condition" checked>-->
                <!--  <label class="custom-control-label" for="trams__condition">This site is protected by reCAPTCHA and the <a href="{{$setting->policy_link}}" target="_blank">Privacy Policy</a> and <a href="{{$setting->terms_link}}" target="_blank">Terms of Service</a> apply.</label>-->
                <!--</div>-->
              </div>
              @endif
              
<!--              <style>-->
<!--@keyframes zoomShake {-->
<!--  0%, 100% { transform: scale(1) translate(0, 0); }-->
<!--  10% { transform: scale(1.1) translate(-6px, -4px); }-->
<!--  20% { transform: scale(1.1) translate(6px, -4px); }-->
<!--  30% { transform: scale(1.08) translate(-4px, 4px); }-->
<!--  40% { transform: scale(1.08) translate(4px, 4px); }-->
<!--  50% { transform: scale(1.05) translate(0, 0); }-->
<!--}-->

<!--#continue__button {-->
<!--  animation: zoomShake 1.2s ease-in-out infinite;-->

<!--}-->
<!--</style>-->

              <div class=" paddin-top-1x mt-4" style="text-align:center; width:100%;">
                <!--<a class="btn btn-primary btn-sm" href="{{route('front.cart')}}"><span class="hidden-xs-down"><i class="icon-arrow-left"></i>{{__('Back To Cart')}}</span></a>-->
                @if ($setting->is_privacy_trams == 1)
                <button id="continue__button" class="btn w-100 py-2 shake-btn" type="submit" style="font-size:16px;font-weight: 600 !important;"><span class="hidden-xs-down"></span>আপনার অর্ডার কনফার্ম করতে ক্লিক করুন</button>
                 <style>
    /* Smooth shake animation */
    @keyframes smoothShake {
      0%   { transform: rotate(0deg); }
      25%  { transform: rotate(1.5deg); }
      50%  { transform: rotate(0deg); }
      75%  { transform: rotate(-1.5deg); }
      100% { transform: rotate(0deg); }
    }
    
    .shake-btn {
      animation: smoothShake 1.3s infinite ease-in-out; 
      transform-origin: center; /* Center theke shake hobe */
    }
</style>
                @else
                <button class="btn btn-primary btn-sm" type="submit"><span class="hidden-xs-down">{{__('Complete Order')}}</span><i class="icon-arrow-right"></i></button>
                @endif
                 <p class="text-center py-3 text-danger">উপরের বাটনে ক্লিক করলে আপনার অর্ডারটি সাথে সাথে কনফার্ম হয়ে যাবে!</p>
              </div>

          </form>
        </div>
      </div>
    </div>
    <!-- Sidebar          -->
    @include('includes.checkout_sitebar',$cart)
  </div>
</div>
<script>
document.getElementById('toggleNote').addEventListener('click', function() {
    var noteArea = document.getElementById('noteArea');
    if (noteArea.style.display === 'none') {
        noteArea.style.display = 'block';
        this.innerHTML = '<i class="fas fa-minus me-2"></i> নোট লুকান';
    } else {
        noteArea.style.display = 'none';
        this.innerHTML = '<i class="fas fa-plus me-2"></i> অতিরিক্ত নোট যোগ করুন';
    }
});
</script>
@endsection