Default page

View File Name : c2c0576cd992b1d143ab79d295ef16718263448d.php

<?php $__env->startSection('title'); ?>
    <?php echo e(__('Billing')); ?>

<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
    <!-- Page Title-->
<div class="page-title">
    <div class="container">
      <div class="column">
        <ul class="breadcrumbs">
          <li><a href="<?php echo e(route('front.index')); ?>"><?php echo e(__('Home')); ?></a> </li>
          <li class="separator"></li>
          <li><?php echo e(__('Billing address')); ?></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="<?php echo e(route('front.checkout.billing')); ?>">
          <h4 class="step-title">1. <?php echo e(__('Billing Address')); ?>:</h4>
          </a><a class="step" href="javascript:;">
          <h4 class="step-title">2. <?php echo e(__('Shipping Address')); ?>:</h4>
          </a><a class="step" href="<?php echo e(route('front.checkout.payment')); ?>">
          <h4 class="step-title">3. <?php echo e(__('Review and pay')); ?></h4>
          </a>
        </div>
        <div class="card">
            <div class="card-body">
                <h6><?php echo e(__('Billing Address')); ?></h6>

          <form id="checkoutBilling" action="<?php echo e(route('front.checkout.store')); ?>" method="POST">
            <?php echo csrf_field(); ?>
        <div class="row">
          <div class="col-sm-6">
            <div class="form-group">
              <label for="checkout-fn"><?php echo e(__('First Name')); ?> <span class="text-danger">*</span></label>
              <input class="form-control" name="bill_first_name" type="text" id="checkout-fn" value="<?php echo e(isset($user) ? $user->first_name : ''); ?>" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode == 32)">
              <div class="error-message text-danger" id="error-bill_first_name"></div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="form-group">
              <label for="checkout-ln"><?php echo e(__('Last Name')); ?> <span class="text-danger">*</span></label>
              <input class="form-control" name="bill_last_name" type="text" id="checkout-ln" value="<?php echo e(isset($user) ? $user->last_name : ''); ?>" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode == 32)">
              <div class="error-message text-danger" id="error-bill_last_name"></div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6">
            <div class="form-group">
              <label for="checkout_email_billing"><?php echo e(__('E-mail Address')); ?> <span class="text-danger">*</span></label>
              <input class="form-control" name="bill_email"  type="email" id="checkout_email_billing" value="<?php echo e(isset($user) ? $user->email : ''); ?>">
              <div class="error-message text-danger" id="error-bill_email"></div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="form-group">
              <label for="checkout-phone"><?php echo e(__('Phone Number')); ?> <span class="text-danger">*</span></label>
              <input class="form-control" name="bill_phone" type="text" id="checkout-phone" value="<?php echo e(isset($user) ? $user->phone : ''); ?>"  oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');javascript: if(this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="10">
              <div class="error-message text-danger" id="error-bill_phone"></div>
            </div>
          </div>
        </div>
        <?php if(PriceHelper::CheckDigital()): ?>
        <div class="row">
          <div class="col-sm-12">
            <div class="form-group">
              <label for="checkout-company"><?php echo e(__('Company')); ?></label>
              <input class="form-control" name="bill_company" type="text" id="checkout-company" value="<?php echo e(isset($user) ? $user->bill_company : ''); ?>">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6">
            <div class="form-group">
              <label for="checkout-address1"><?php echo e(__('Address')); ?> 1 <span class="text-danger">*</span></label>
              <input class="form-control" name="bill_address1" type="text" id="checkout-address1" value="<?php echo e(isset($user) ? $user->bill_address1 : ''); ?>">
              <div class="error-message text-danger" id="error-bill_address1"></div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="form-group">
              <label for="checkout-address2"><?php echo e(__('Address')); ?> 2</label>
              <input class="form-control" name="bill_address2" type="text" id="checkout-address2" value="<?php echo e(isset($user) ? $user->bill_address2 : ''); ?>">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6">
            <div class="form-group">
              <label for="checkout-zip"><?php echo e(__('Zip Code')); ?> <span class="text-danger">*</span></label>
              <input class="form-control" name="bill_zip" type="text" id="checkout-zip"
              value="<?php echo e(isset($user) ? $user->bill_zip : ''); ?>"
              oninput="this.value = this.value.replace(/[^0-9]/g, ''); fetchPincodeData(this.value);"
              maxlength="6">
              <div class="error-message text-danger" id="error-bill_zip"></div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="form-group">
              <label for="checkout-country"><?php echo e(__('Country')); ?> <span class="text-danger">*</span></label>
              <input type="text" class="form-control" readonly name="bill_country" id="billing-country" value="<?php echo e($user->bill_country  ?? ''); ?>">
              <div class="error-message text-danger" id="error-bill_country"></div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6">
            <div class="form-group">
              <label for="checkout-city"><?php echo e(__('District')); ?> <span class="text-danger">*</span></label>
              <input class="form-control" name="bill_district" type="text" id="checkout-district" readonly value="<?php echo e($user->bill_district ?? ''); ?>">
              <div class="error-message text-danger" id="error-bill_district"></div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="form-group">
              <label for="checkout-city"><?php echo e(__('State')); ?> <span class="text-danger">*</span></label>
              <input class="form-control" name="bill_state" type="text" id="checkout-state" readonly value="<?php echo e($user->bill_state ?? ''); ?>">
              <div class="error-message text-danger" id="error-bill_state"></div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6">
            <div class="form-group">
              <label for="checkout-city"><?php echo e(__('City')); ?> <span class="text-danger">*</span></label>
              <select class="form-control" name="bill_city" type="text" id="checkout-city" data-bill_city="<?php echo e($user->bill_city ?? ''); ?>" >
                <?php if($user->bill_city || old('bill_city')): ?>
                <option value="<?php echo e(old('bill_city') ? old('bill_city') : $user->bill_city); ?>" selected><?php echo e(old('bill_city') ? old('bill_city') : $user->bill_city); ?></option>
                <?php endif; ?>
              </select>
              <div class="error-message text-danger" id="error-bill_city"></div>
            </div>
          </div>
          <div class="col-sm-6">
            <div class="form-group">
              <label for="checkout-area"><?php echo e(__('Area')); ?> <span class="text-danger">*</span></label>
              <input class="form-control" name="bill_area" type="text" id="checkout-area" value="<?php echo e($user->bill_area ?? ''); ?>" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode == 32)">
              <div class="error-message text-danger" id="error-bill_area"></div>
            </div>
          </div>
        </div>
        <?php endif; ?>




        <div class="form-group">
          <div class="custom-control custom-checkbox">
            <input class="custom-control-input" type="checkbox" id="same_address" name="same_ship_address" <?php echo e(Session::has('shipping_address') ? 'checked' : ''); ?> >
            <label class="custom-control-label" for="same_address"><?php echo e(__('Same as shipping address')); ?></label>
          </div>
        </div>

        <?php 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" >
            <label class="custom-control-label" for="trams__condition">This site is protected by reCAPTCHA and the <a href="<?php echo e($setting->policy_link); ?>" target="_blank">Privacy Policy</a> and <a href="<?php echo e($setting->terms_link); ?>" target="_blank">Terms of Service</a> apply.</label>
          </div>
        </div>
        <?php endif; ?>

        <div class="d-flex justify-content-between paddin-top-1x mt-4">
            <a class="btn btn-primary btn-sm" href="<?php echo e(route('front.cart')); ?>"><span class="hidden-xs-down"><i class="icon-arrow-left"></i><?php echo e(__('Back To Cart')); ?></span></a>
            <?php if($setting->is_privacy_trams == 1): ?>
            <button disabled id="continue__button" class="btn btn-primary  btn-sm" type="button"><span class="hidden-xs-down"><?php echo e(__('Continue')); ?></span><i class="icon-arrow-right"></i></button>
            <?php else: ?>
            <button class="btn btn-primary btn-sm" type="submit"><span class="hidden-xs-down"><?php echo e(__('Continue')); ?></span><i class="icon-arrow-right"></i></button>
            <?php endif; ?>
          </div>
        </form>
            </div>
        </div>
      </div>
      <!-- Sidebar          -->
      <?php echo $__env->make('includes.checkout_sitebar',$cart, \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
    </div>
  </div>
<script>
  
  async function fetchPincodeData(pincode) {
    const countryInput = document.getElementById('billing-country');
    const districtInput = document.getElementById('checkout-district');
    const stateInput = document.getElementById('checkout-state');
    const citySelect = document.getElementById('checkout-city');

    if (pincode.length !== 6 || isNaN(pincode)) {
      countryInput.value = '';
      districtInput.value = '';
      stateInput.value = '';

      // Reset city select options to empty
      citySelect.innerHTML = '';
      citySelect.disabled = true;

      // If citySelect was replaced with text input (fallback), replace it back to select
      if (citySelect.tagName.toLowerCase() !== 'select') {
        fallbackToSelect(citySelect, 'bill_city', 'checkout-city');
      }

      return; 
    }

    [countryInput, districtInput, stateInput].forEach(input => {
      input.readOnly = true;
      input.type = "text";
      input.value = '';
    });
    citySelect.innerHTML = '<option>Loading...</option>';
    citySelect.disabled = true;

    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 5000);

    try {
      const response = await fetch(`https://postcoded.in/api/get-data/${pincode}`, {
        signal: controller.signal
      });
      clearTimeout(timeoutId);

      const data = await response.json();
      console.log(data);
      if ((data.status == 'success') && data.data) {
        const { country, district, state, city_list, area } = data.data;

        countryInput.value = country || '';
        districtInput.value = district || '';
        stateInput.value = state || '';

        if (Array.isArray(city_list) && city_list.length) {
          citySelect.innerHTML = '';
          city_list.forEach(city => {
            const option = document.createElement('option');
            option.value = city.city;
            option.textContent = city.city;
            citySelect.appendChild(option);
          });
          citySelect.disabled = false;
        } else {
          fallbackToTextInput(citySelect, 'bill_city', 'checkout-city');
        }
      } else if((data.status == 'failure') && (data.folcon_engine_response == 400)) {
        DangerNotification("Invalid Pincode");
        fallbackToSelect(citySelect, 'bill_city', 'checkout-city');
      } else {
        throw new Error('Invalid data');
      }

    } catch (error) {
      clearTimeout(timeoutId);
      fallbackToTextInput(countryInput, 'bill_country', 'billing-country');
      fallbackToTextInput(districtInput, 'bill_district', 'checkout-district');
      fallbackToTextInput(stateInput, 'bill_state', 'checkout-state');
      citySelect.innerHTML = '';
      citySelect.value = '';
      fallbackToTextInput(citySelect, 'bill_city', 'checkout-city');
    }
  }


  function fallbackToTextInput(oldElem, name, id) {
    const parent = oldElem.parentElement;
    const newInput = document.createElement('input');
    newInput.type = 'text';
    newInput.className = 'form-control';
    newInput.name = name;
    newInput.id = id;

    if (oldElem.value) newInput.value = oldElem.value;

    if (name === 'bill_country' || name === 'bill_district' || name === 'bill_state') {
      newInput.oninput = function () {
        this.value = this.value.replace(/[^a-zA-Z ]/g, '');
      };
    } else if (name === 'bill_city') {
      newInput.oninput = function () {
        this.value = this.value.replace(/[^a-zA-Z ]/g, '');
      };
    }

    parent.replaceChild(newInput, oldElem);
  }

  function fallbackToSelect(oldElem, name, id) {
    const parent = oldElem.parentElement;
    const newSelect = document.createElement('select');
    newSelect.className = 'form-control';
    newSelect.name = name;
    newSelect.id = id;
    newSelect.innerHTML = '<option value="">Select</option>';
    parent.replaceChild(newSelect, oldElem);
  }

  document.addEventListener("DOMContentLoaded", function () {
    const form = document.getElementById("checkoutBilling");

    const fields = [
      { name: "bill_first_name", type: "text", required: true, regex: /^[a-zA-Z\s]+$/, error: "First name is  required and only letters allowed." },
      { name: "bill_last_name", type: "text", required: true, regex: /^[a-zA-Z\s]+$/, error: "Last name is  required and only letters allowed." },
      { name: "bill_email", type: "email", required: true, regex: /^[^\s@]+@[^\s@]+\.[^\s@]+$/, error: "Invalid email address." },
      { name: "bill_phone", type: "text", required: true, regex: /^\d{10}$/, error: "Phone must be 10 digits." },
      { name: "bill_address1", type: "text", required: true, error: "Address 1 is required." },
      { name: "bill_zip", type: "text", required: true, regex: /^\d{5,6}$/, error: "Invalid zip code." },
      { name: "bill_city", type: "select", required: true, error: "Please select a city." },
      { name: "bill_area", type: "text", required: true, error: "Area is required." },
      { name: "bill_state", type: "text", required: true, error: "State is required." },
      { name: "bill_country", type: "text", required: true, error: "Country is required." },
      { name: "bill_district", type: "text", required: true, error: "District is required." },
    ];

    fields.forEach(field => {
      const input = form[field.name];
      if (input) {
        input.addEventListener("input", () => {
          document.getElementById(`error-${field.name}`).textContent = "";
        });
      }
    });

    form.addEventListener("submit", function (e) {
      let isValid = true;

      fields.forEach(field => {
        const input = form[field.name];
        const errorDiv = document.getElementById(`error-${field.name}`);

        if (!input) return;

        const value = input.value.trim();
        errorDiv.textContent = "";

        if (field.required && !value) {
          errorDiv.textContent = `${field.error}`;
          isValid = false;
        } else if (field.regex && !field.regex.test(value)) {
          errorDiv.textContent = `${field.error}`;
          isValid = false;
        }
      });

      if (!isValid) e.preventDefault(); // Stop form submission
    });
  });
</script>


<?php $__env->stopSection(); ?>
<?php echo $__env->make('master.front', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /var/www/styleage_v3/core/resources/views/front/checkout/billing.blade.php ENDPATH**/ ?>