@extends('Admin.layout')

@section('pagetitle',__('trans.Add Order'))

@push('css')

    <style>
    
        #map .gm-style-iw-d {
          color: #000;
        }
    
        #map input[type=text] {
          background-color: #fff;
          border: 0;
          border-radius: 2px;
          box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
          margin: 10px;
          padding: 0 0.5em;
          font: 400 18px Roboto, Arial, sans-serif;
          overflow: hidden;
          line-height: 40px;
          margin-right: 0;
          min-width: 25%;
        }
    
        #map input[type=button] {
          background-color: #fff;
          border: 0;
          border-radius: 2px;
          box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
          margin: 10px;
          padding: 0 0.5em;
          font: 400 18px Roboto, Arial, sans-serif;
          overflow: hidden;
          height: 40px;
          cursor: pointer;
          margin-left: 5px;
        }
    
        #map input[type=button]:hover {
          background: rgb(235, 235, 235);
        }
    
        #map input[type=button].button-primary {
          background-color: #1a73e8;
        }
    
        #map input[type=button].button-primary:hover {
          background-color: #1765cc;
        }
    
        #map input[type=button].button-secondary {
          background-color: white;
          color: #1a73e8;
        }
    
        #map input[type=button].button-secondary:hover {
          background-color: #d2e3fc;
        }
    
        #response-container {
          background-color: #fff;
          border: 0;
          border-radius: 2px;
          box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
          margin: 10px;
          padding: 0 0.5em;
          font: 400 18px Roboto, Arial, sans-serif;
          overflow: hidden;
          overflow: auto;
          max-height: 50%;
          max-width: 90%;
          background-color: rgba(255, 255, 255, 0.95);
          font-size: small;
        }
    
        #instructions {
          background-color: #fff;
          border: 0;
          border-radius: 2px;
          box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
          margin: 10px;
          padding: 0 0.5em;
          font: 400 18px Roboto, Arial, sans-serif;
          overflow: hidden;
          padding: 1rem;
          font-size: medium;
        }
    </style>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
@endpush

@push('js')
<script src="https://unpkg.com/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
<script>
    $(document).ready(function() {
        $(".selectpicker").selectpicker();
    });

    $('.Add').click(function() {
        VAT = 0;
        price = parseFloat($('select#products').find("option:selected").attr('data-price'));
        CalcPrice = parseFloat($('select#products').find("option:selected").attr('data-CalcPrice'));

        CalcPrice = price.toFixed(2);
        price = price.toFixed(2);
        if($('select#products').find("option:selected").attr('data-VAT') == 'exclusive'){
            VAT = price;
        }
        if($('select#categories').find("option:selected").val() && $('select#products').find("option:selected").val() && $('select#products').find("option:selected").val()  && $('input#quantity').val() ){
            $('.block:last').parent().append(
                '<div class="row block" data-id="'+$('select#products').find("option:selected").val()+'" data-quantity="'+$('input#quantity').val()+'"  data-VAT="'+VAT+'" data-price="'+price+'"  data-discount="'+$('select#products').find("option:selected").attr('data-discount')+'"  data-CalcPrice="'+CalcPrice+'">'+
                    '<div class="my-1 col-md-2 col-sm-12">'+
                        '<input type="text" readonly value="'+$('select#categories').find("option:selected").text()+'" class="form-control">'+
                        '<input type="number" readonly name="category_id[]" value="'+$('select#categories').find("option:selected").val()+'" hidden>'+
                    '</div>'+
                    '<div class="my-1 col-md-2 col-sm-12 products">'+
                        '<input type="text" readonly value="'+$('select#products').find("option:selected").text()+'" class="form-control">'+
                        '<input type="number" readonly name="product_id[]" value="'+$('select#products').find("option:selected").val()+'" hidden>'+
                    '</div>'+
                    '<div class="my-1 col-md-2 col-sm-12">'+
                        '<input type="text" readonly value="'+$('input#quantity').val()+'" class="form-control">'+
                        '<input type="number" readonly name="quantity[]" value="'+$('input#quantity').val()+'" hidden>'+
                    '</div>'+
                    '<div class="my-1 col-md-1 col-sm-12">'+
                        '<button class="btn btn-danger remove text-center mx-auto" type="button">-</button>'+
                    '</div>'+
                    '<input type="number" readonly name="price[]" value="'+price+'" hidden>'+
                    '<div class="my-1 col-md-2 col-sm-12 btn btn-info text-center mx-auto">'+
                        '<span>'+price+' {{ Country()->country_code }}</span>'+
                        '<span class="mx-1">* '+$('input#quantity').val()+'</span>'+
                    '</div>'+
                '</div>'
            );
            $('select#categories').prop('selected', false);
            $('select#categories').find('option:eq(0)').prop('selected', true);
            $('select#products').empty();
            $('input#quantity').val(1);
            $(".selectpicker").selectpicker('refresh');
            Calc();
        }
    });
    $(document).on('click', '.remove', function() {
        $(this).parent().parent().remove();
        Calc();
    });
    category = [];
    products = [];
    product = [];
    $(document).on("change", "select#categories", function() {
        category_id = $(this).find("option:selected").val();
        $('select#products').empty();
        $('select#products').append( '<option value="" selected disabled hidden>----------</option>' );
        $.each(@json($Categories), function (key,cat) {
            if(category_id == cat['id']){
                category = cat;
                products = cat['products'];
                $.each(cat['products'], function (key2,product) {
                    $('select#products').append( '<option  data-price="'+product['price']+'" data-discount="'+product['HasDiscount']+'" data-CalcPrice="'+product['CalcPrice']+'" data-VAT="'+product['VAT']+'" value="'+product['id']+'">'+product['title_{{ lang() }}']+'</option>' );
                });
            }
        });
        $(".selectpicker").selectpicker('refresh');
    });
    
    $(document).on("change", "#delivery_id", function() {
        if($(this).find("option:selected").val() == 1){
            $('.address').removeClass('hide');
        }else{
            $('.address').addClass('hide');
        }
    });
    
    
    $(document).on("change", "#client", function() {
        id = $(this).find("option:selected").attr('data-id');
        if(id){ 
        $('select#address').empty();
            $.each(@json($Clients), function (key,Client) {
                if(id == Client['id']){
                    $('select#address').append( '<option value="" selected>----------</option>' );
                    $.each(Client['addresses'], function (key2,address) {
                        $('select#address').append( '<option data-delivery_cost="'+address['region']['delivery_cost']+'" value="'+address['id']+'">'+address['block']+' -- '+address['road']+' -- '+address['building_no']+' -- '+address['floor_no']+' -- '+address['apartment']+'</option>' );
                    });
                }
            });
            
            $('input[name="name"]').val($(this).find("option:selected").attr('data-name'));
            $('input[name="name"]').prop("readonly", true);
            $('input[name="phone"]').val($(this).find("option:selected").attr('data-phone'));
            $('input[name="phone"]').prop("readonly", true);
            $('input[name="email"]').val($(this).find("option:selected").attr('data-email'));
            $('input[name="email"]').prop("readonly", true);
        }else{
            $('input[name="name"]').prop("readonly", false);
            $('input[name="phone"]').prop("readonly", false);
            $('input[name="email"]').prop("readonly", false);
            $('input[name="name"]').val('');
            $('input[name="phone"]').val('');
            $('input[name="email"]').val('');
        }
        $(".selectpicker").selectpicker('refresh');
    });
    
    delivery_cost = 0;
    $(document).on("change", "#address", function() {
        delivery_cost = parseFloat($(this).find("option:selected").attr('data-delivery_cost') ?? 0);
        Calc();
    });
    $(document).on("change", "#region_id", function() {
        delivery_cost = parseFloat($(this).find("option:selected").attr('data-delivery_cost') ?? 0);
        Calc();
    });
    $('input[name="discount_text"]').on("keyup change", function(e) {
        Calc();
    });
    $('input[name="coupon_text"]').on("keyup change", function(e) {
        Calc();
    });
    function pluck(arr, property) {
        return $.map(arr, function (item) {
            return item[property];
        });
    }
    function contains(arr, val) {
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] == val) 
                return true;
        }
        return false;
    }
    function Calc(){
        SubTotal = 0;
        VatSubTotal = 0;
        discount = 0;
        coupon = 0;
        VAT = {{ setting('VAT') ?? 0 }};
        NetTotal = 0;
        $.each($('.row.block'), function (key,item) {
            if($(item).attr('data-price')){
                SubTotal += parseFloat($(item).attr('data-price')) * parseFloat($(item).attr('data-quantity'));
            }
        });
        if($('input[name="discount_text"]').val() > 0){
            discount = SubTotal * $('input[name="discount_text"]').val() / 100;
        }
        $.each($('.row.block'), function (key,item) {
            console.log();
            if($(item).attr('data-id') && $('input[name="coupon_text"]').val() > 0){
                $.each(@json($Coupons), function (key,CouponItem) {
                    if($('input[name="coupon_text"]').val() == CouponItem['code'] && contains(pluck(CouponItem['products'],'id'),$(item).attr('data-id'))){
                        if(CouponItem['discount']){
                            coupon += CouponItem['discount'];
                        }else if(CouponItem['percent_off']){
                            coupon += parseFloat($(item).attr('data-VAT')) * parseFloat($(item).attr('data-quantity')) * CouponItem['percent_off']  / 100;
                        }
                    }
                });
            }
        });
        SubTotal = 0;
        $.each($('.row.block'), function (key,item) {
            if($(item).attr('data-price')){
                SubTotal += parseFloat($(item).attr('data-price')) * parseFloat($(item).attr('data-quantity'));
                VatSubTotal += parseFloat($(item).attr('data-VAT')) * parseFloat($(item).attr('data-quantity'));
                NetTotal += parseFloat($(item).attr('data-calcprice')) * parseFloat($(item).attr('data-quantity'));
            }
        });
        VAT = (VatSubTotal - discount - coupon) * VAT / 100;
        if(VAT < 0){
            VAT = 0;
        }
        $('#delivery_cost').html(Number(delivery_cost).toFixed(2));
        NetTotal = NetTotal + delivery_cost - discount - coupon + VAT;
        if(NetTotal < 0){
            NetTotal = 0;
        }
        $('#discount').html(Number(discount).toFixed(2));
        $('#coupon').html(Number(coupon).toFixed(2));
        $('#SubTotal').html(Number(SubTotal).toFixed(2));
        $('#VAT').html(Number(VAT).toFixed(2));
        $('#NetTotal').html(Number(NetTotal).toFixed(2));
        
        $('input[name="discount"]').val(Number(discount).toFixed(2));
        $('input[name="coupon"]').val(Number(coupon).toFixed(2));
        $('input[name="sub_total"]').val(Number(SubTotal).toFixed(2));
        $('input[name="charge_cost"]').val(Number(delivery_cost).toFixed(2));
        $('input[name="vat"]').val(Number(VAT).toFixed(2));
        $('input[name="net_total"]').val(Number(NetTotal).toFixed(2));
    }
    
    
    
</script>

<script>
    let map;
    let marker;
    let geocoder;
    let response;
    
    function initMap() {
      var haightAshbury = {lat: {{ Branches()->first()->lat }}, lng: {{ Branches()->first()->long }}};
      map = new google.maps.Map(document.getElementById("map"), {
        zoom: 8,
        center: haightAshbury,
        mapTypeControl: false,
        draggableCursor:'default',
        
      });
      geocoder = new google.maps.Geocoder();

      const inputText = document.createElement("input");

      inputText.type = "text";
      inputText.placeholder = "{{ __('trans.pick_your_location') }}";

      const submitButton = document.createElement("input");

      submitButton.type = "button";
      submitButton.value = "{{ __('trans.search') }}";
      submitButton.classList.add("button", "button-primary");


      response = document.createElement("pre");
      response.id = "response";
      response.innerText = "";

      map.controls[google.maps.ControlPosition.TOP_LEFT].push(inputText);
      map.controls[google.maps.ControlPosition.TOP_LEFT].push(submitButton);
      marker = new google.maps.Marker({
        map,
        animation: google.maps.Animation.DROP,
        position: haightAshbury
      });
       addYourLocationButton(map, marker);
       map.addListener('click', function(event) {
            geocode({ location: event.latLng });
            var latitude = event.latLng.lat();
            var longitude = event.latLng.lng();
       });
      submitButton.addEventListener("click", () =>
        geocode({ address: inputText.value })
      );
      marker.setMap(null);
    }
    function addYourLocationButton(map, marker){
        var controlDiv = document.createElement('div');
        var firstChild = document.createElement('button');
        firstChild.style.backgroundColor = '#fff';
        firstChild.style.border = 'none';
        firstChild.style.outline = 'none';
        firstChild.style.width = '40px';
        firstChild.style.height = '40px';
        firstChild.style.borderRadius = '2px';
        firstChild.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)';
        firstChild.style.cursor = 'pointer';
        firstChild.style.marginRight = '10px';
        firstChild.style.padding = '0px';
        firstChild.title = 'Your Location';
        controlDiv.appendChild(firstChild);

        var secondChild = document.createElement('div');
        secondChild.style.margin = '10px';
        secondChild.style.width = '18px';
        secondChild.style.height = '18px';
        secondChild.style.backgroundImage = 'url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-1x.png)';
        secondChild.style.backgroundSize = '180px 18px';
        secondChild.style.backgroundPosition = '0px 0px';
        secondChild.style.backgroundRepeat = 'no-repeat';
        secondChild.id = 'you_location_img';
        firstChild.appendChild(secondChild);

        google.maps.event.addListener(map, 'dragend', function() {
            $('#you_location_img').css('background-position', '0px 0px');
        });

        firstChild.addEventListener('click', function() {
            var imgX = '0';
            var animationInterval = setInterval(function(){
                if(imgX == '-18') imgX = '0';
                else imgX = '-18';
                $('#you_location_img').css('background-position', imgX+'px 0px');
            }, 500);
            if(navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                    marker.setPosition(latlng);
                    map.setCenter(latlng);
                    clearInterval(animationInterval);
                    $('#you_location_img').css('background-position', '-144px 0px');
                    if ("geolocation" in navigator){
            			navigator.geolocation.getCurrentPosition(function(position){
            				var currentLatitude = position.coords.latitude;
            				var currentLongitude = position.coords.longitude;
            				var currentLocation = { lat: currentLatitude, lng: currentLongitude };
                            geocode({ location: latlng });
            			});
            		}
                });
            }
            else{
                clearInterval(animationInterval);
                $('#you_location_img').css('background-position', '0px 0px');
            }

        });

        controlDiv.index = 1;
        map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(controlDiv);
    }
    
    window.initMap = initMap;

    function geocode(request) {
      marker.setMap(null);
      geocoder.geocode(request).then((result) => {
          const { results } = result;
          map.setCenter(results[0].geometry.location);
          marker.setPosition(results[0].geometry.location);
          marker.setMap(map);
          response.innerText = JSON.stringify(result, null, 2);
          $('#lat').val( results[0].geometry.location.lat() );
          $('#long').val( results[0].geometry.location.lng() );
          return results;
        });
    }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key={{ env('MAP_KEY') }}&callback=initMap&language={{ lang() }}"></script>

@endpush
@section('content')
<form method="POST" action="{{ route('admin.orders.store') }}" enctype="multipart/form-data" data-parsley-validate>
    @csrf     
    <div class="row">            
        <div class="border border-secondary p-3 pb-2 my-4 shadow-sm">
            
            <h3 class="capital my-3 fw-normal">@lang('trans.Customer Details')</h3>
            <div class="row">
                <div class="col-12 col-md-12">
                    <label>@lang('trans.Select') @lang('trans.Name')</label>
                    <select id="client" class="form-control selectpicker  w-100" data-live-search="true">
                        <option value="" selected ></option>
                        @foreach($Clients as $Client)
                            <option data-id="{{ $Client->id }}" data-name="{{ $Client->name }}" data-email="{{ $Client->email }}" data-phone="{{ $Client->phone }}" value="{{ $Client['id'] }}">{{ $Client->name }} -- {{ $Client->phone }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
              <span style="font-size: 15px; background-color: #fff; padding: 0 10px;">
                @lang('trans.Or') @lang('trans.addClient')
              </span>
            </div>
            <div class="row">
                <div class="col-12 col-md-4">
                    <label>@lang('trans.Name')</label>
                    <input name="name" type="text" class="form-control">
                </div>
                <div class="col-12 col-md-4">
                    <label>@lang('trans.phone')</label>
                    <input name="phone" type="text" minlength="{{ Country()->length }}" maxlength="{{ Country()->length }}"  size="{{ Country()->length }}"  class="form-control">
                </div>
                <div class="col-12 col-md-4">
                    <label>@lang('trans.email')</label>
                    <input name="email" type="email" class="form-control">
                </div>
            </div>
        </div>
        
        <div class="my-1 col-md-12 col-sm-12 border border-secondary p-3 pb-2 my-4 shadow-sm">
            <h5 class="capital my-3 fw-normal">@lang('trans.products')</h5>
            <div class="row block">
                <div class="my-1 col-md-2 col-sm-12">
                    <label class="my-1">@lang('trans.category')</label>
                    <select id="categories" class="form-control selectpicker  w-100" data-live-search="true">
                        <option value="" selected disabled hidden>----------</option>
                        @foreach($Categories as $Category)
                            <option value="{{ $Category['id'] }}">{{ $Category->title() }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="my-1 col-md-2 col-sm-12 products">
                    <label class="my-1">@lang('trans.product')</label>
                    <select id="products" class="form-control selectpicker  w-100" data-live-search="true">
                       
                    </select>
                </div>
                <div class="my-1 col-md-2 col-sm-12">
                    <label class="my-1">@lang('trans.quantity')</label>
                    <input id="quantity" type="number" min="0" value="1"  placeholder="@lang('trans.quantity')" class="form-control">
                </div>
                <div class="my-1 col-md-1 col-sm-12">
                    <label class="my-1 row">@lang('trans.add')</label>
                    <button class="btn btn-primary Add text-center mx-auto" type="button">+</button>
                </div>
            </div>
        </div>
    
        <div class="my-1 col-md-12 col-sm-12 border border-secondary p-3 pb-2 my-4 shadow-sm">
            <h5 class="capital my-3 fw-normal">@lang('trans.Delivery Information')</h5>
            <div class="row">
                <div class="col-12 col-md-6 my-1">
                    <select id="delivery_id" class="form-control w-100" name="delivery_id">
                        <option value="" selected disabled hidden>----------</option>
                        @foreach (Deliveries() as $region)
                            <option class="third_bg"  value="{{ $region->id }}">{{ $region->title() }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
        <div class="my-1 col-md-12 col-sm-12 border border-secondary p-3 pb-2 my-4 shadow-sm hide address">
            <div class="row">
            <h5 class="capital my-3 fw-normal">@lang('trans.address')</h5>
                <div class="row">
                    <div class="col-12 col-md-12">
                        <label>@lang('trans.Select') @lang('trans.Address')</label>
                        <select id="address" name="address_id" class="form-control selectpicker  w-100" data-live-search="true">
                            
                        </select>
                    </div>
                </div>
                <div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
                  <span style="font-size: 15px; background-color: #fff; padding: 0 10px;">
                    @lang('trans.Or') @lang('trans.Add Address')
                  </span>
                </div>
            
                <div class="col-12 col-md-6 my-1">
                    <select class="form-control w-100" id="region_id" name="region_id">
                        <option value="" selected disabled hidden>----------</option>
                        @foreach (Regions()->where('country_id',Country()->id) as $region)
                            <option data-delivery_cost="{{ $region->delivery_cost }}" class="third_bg"  value="{{ $region->id }}">{{ $region->title() }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12 col-md-6 my-1">
                    <input type="text" class="form-control" name="block" placeholder="@lang('trans.district')">
                </div>
                <div class="col-12 col-md-6 my-1">
                    <input type="text" class="form-control" name="road" placeholder="@lang('trans.street')">
                </div>
                <div class="col-12">
                    <textarea type="text" class="form-control mceNoEditor" name="additional_directions" rows="4" cols="50" maxlength="200" placeholder="@lang('trans.additional_directions')"></textarea>
                </div>
                <div class="col-12  position-relative my-3 d-none" >
                    <input type="hidden" name="lat" id="lat">
                    <input type="hidden" name="long" id="long">
                    <div id="map" style="height: 300px;"></div>
                </div>
            </div>
        </div>

        <div class="my-1 col-md-12 col-sm-12 border border-secondary p-3 pb-2 my-4 shadow-sm">
            <div class="row">
                <div class="col-12 col-md-6">
                    <label>@lang('trans.discount') % </label>
                    <input name="discount_text" type="number" min="0" max="100" class="form-control">
                </div>
                <div class="col-12 col-md-6 d-none">
                    <label>@lang('trans.coupon') </label>
                    <input name="coupon_text" type="text" class="form-control">
                </div>
            </div>
        </div>
        
        <div class="my-1 col-md-12 col-sm-12 border border-secondary p-3 pb-2 my-4 shadow-sm">
            <h5 class="capital my-3 fw-normal">@lang('trans.Order Details')</h5>
            <div class="d-flex align-items-center justify-content-between mt-2">
                <span class="my-1">@lang('trans.subTotal')</span>
                <span class="my-1">
                    <input type="hidden" name="sub_total">
                    <span id="SubTotal">
                        {{ number_format(0, Country()->decimals , '.', '') }}
                    </span>
                    {{ Country()->currancy_code }}
                </span>
            </div>
            <div class="d-flex align-items-center justify-content-between">
                <span class="my-1">@lang('trans.delivery_cost')</span>
                <span class="my-1">
                    <input type="hidden" name="charge_cost">
                    <span id="delivery_cost">
                        {{ number_format(0, Country()->decimals , '.', '') }}
                    </span>
                    {{ Country()->currancy_code }}
                </span>
            </div>
            <div class="d-flex align-items-center justify-content-between">
                <span class="my-1">@lang('trans.discount')</span>
                <span class="my-1">
                    <input type="hidden" name="discount">
                    <span id="discount">
                        {{ number_format(0, Country()->decimals , '.', '') }}
                    </span>
                    {{ Country()->currancy_code }}
                </span>
            </div>
            <div class="d-flex align-items-center justify-content-between d-none">
                <span class="my-1">@lang('trans.coupon')</span>
                <span class="my-1">
                    <input type="hidden" name="coupon">
                    <span id="coupon">
                        {{ number_format(0, Country()->decimals , '.', '') }}
                    </span>
                    {{ Country()->currancy_code }}
                </span>
            </div>
            <div class="d-flex align-items-center justify-content-between">
                <span class="my-1">@lang('trans.Vat')({{ setting('VAT') }}%)</span>
                <span class="my-1">
                    <input type="hidden" name="vat">
                    <span id="VAT">
                        {{ number_format(0, Country()->decimals , '.', '')  }}
                    </span>
                    {{ Country()->currancy_code }}
                </span>
            </div>
            <div class="d-flex align-items-center justify-content-between">
                <span class="my-1">@lang('trans.netTotal')</span>
                <span class="my-1">
                    <input type="hidden" name="net_total">
                    <span id="NetTotal">
                        {{  number_format(0, Country()->decimals , '.', '') }}
                    </span>
                    {{ Country()->currancy_code }}
                </span>
            </div>
        </div>
        
                    
        <div class="col-12 my-4">
            <div class="button-group">
                <button type="submit" class="main-btn primary-btn btn-hover w-100 text-center">
                    {{ __('trans.Submit') }}
                </button>
            </div>
        </div>
    </div>
</form>
@endsection