@extends('shop::layouts.master')

@section('page_title')
    {{ __('shop::app.search.page-title') }}
@endsection

@push('css')
    <link rel="stylesheet" href="@version('vendor/webkul/ui/assets/css/lite-checkout.css')">
@endpush

@section('content-wrapper')
<div class="checkout-process">
        <div class="col-main">
            <div class="step-content information">
                <form id="my-checkout-form" method="POST" role="form" action="{{ route('shop.checkout.save-order') }}" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="billing[address_id]" id="billingAddressId">
                    <input type="hidden" name="shipping[address_id]" id="shippingAddressId">
                    <input type="hidden" name="shipping_carrier" id="shippingCarrier">
                    <input type="hidden" name="shipping_fees" id="shippingFees">
                    <input type="hidden" name="payment_fees" id="paymentFees">
                    <input type="hidden" name="order_total_amount" id="orderTotalAmount">
                    <input type="hidden" name="cashOndeliveryType" id="cashOndeliveryType" value="{{ $cashOndeliveryType }}">

                    <div class="checkout-container row">
                        <div class="col-md-6">
                            @if(auth('customer')->check() && auth('customer')->user()->addresses)
                                <customeraddresses></customeraddresses>
                            @endif

                            <!--  Address Information -->
                            <div id="checkout-form-div" class="row"  style="display: none">
                                <div class="form-container col-md-12">
                                    <h3>{{ __('shop::app.checkout.onepage.information') }}</h3>
                                    <div class="row">
                                        <div class="col-md-12">
                                            @foreach ($checkoutTrees as $checkoutTree)
                                                @php
                                                    $configValue = core()->getConfigData($checkoutTree['fields'][0]['key']);
                                                    $visable = $configValue === null ? $checkoutTree['fields'][0]['default_value'] : $configValue;
                                                    $configValueForRequired = core()->getConfigData($checkoutTree['fields'][1]['key']);
                                                    $required = $configValueForRequired === null ? $checkoutTree['fields'][1]['default_value'] : $configValue;
                                                @endphp

                                                @if ($visable)
                                                    <div class="control-group">
                                                        <label for="{{ $checkoutTree['input-name'] }}"
                                                            @if ($required)
                                                                class="mandatory"
                                                            @endif>
                                                            {{ $checkoutTree['name'] }}
                                                        </label>
                                                        @if($checkoutTree['type'] == 'text')
                                                            <input
                                                                type="text"
                                                                {{ $required ? 'required' : '' }}
                                                                class="control" id="{{ $checkoutTree['input-name'] }}"
                                                                name="{{ $checkoutTree['input-name'] }}"
                                                                value="{{ $address ? $address->{$checkoutTree['input-name']} : '' }}"
                                                                data-vv-as="{{ $checkoutTree['input-name'] }}"
                                                            />
                                                        @elseif ($checkoutTree['type'] == 'attachment')
                                                            <input type="file"
                                                            class="control"
                                                            id="{{ $checkoutTree['input-name'] }}"
                                                            name="{{ $checkoutTree['input-name'] }}"
                                                            {{ $required ? 'required' : '' }}
                                                            data-vv-as="{{ $checkoutTree['input-name'] }}"
                                                            />
                                                        @endif
                                                        @error($checkoutTree['input-name'])
                                                            <span class="control-error">
                                                                {{ $message }}
                                                            </span>
                                                        @enderror
                                                    </div>
                                                @endif
                                            @endforeach
                                        </div>
                                        @include('shop::checkout.onepage.location-section')
                                        <location></location>
                                    </div>
                                    @auth('customer')
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="control-group">
                                                    <span class="checkbox fs16 display-inbl save_as_address">
                                                        <input type="checkbox" id="save_as_address" name="save_as_address" />
                                                        <span>
                                                            {{ __('shop::app.checkout.onepage.save_as_address') }}
                                                        </span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    @endauth
                                </div>
                            </div>
                            @foreach ($shippingAndPaymentArray as $checkoutTree)
                                <!-- Payments -->
                                @if ($checkoutTree['key'] == 'checkout_page.payments')
                                    <div class="row">
                                        <div class="form-container col-md-12">
                                            <h3> {{ __('admin::app.layouts.payment-methods') }}</h3>
                                            @foreach ($payments as $payment)
                                                <div class="checkout-method-group">
                                                    <div class="line-one">
                                                        <label class="radio-container">
                                                            <input v-validate="'required'" type="radio"
                                                                id="{{ $payment['method'] }}" name="payment[method]"
                                                                value="{{ $payment['method'] }}"
                                                                data-method = "{{ $payment['method'] }}"
                                                                @if ($payment['method'] == 'cashondelivery') checked @endif
                                                                data-vv-as="{{ __('shop::app.checkout.onepage.payment-method') }}" />
                                                            <span class="checkmark"></span>
                                                        </label>
                                                        <span class="payment-method method-label">
                                                            <b class="fw5">{{ __($payment['method_title']) }}</b>
                                                        </span>
                                                        @if ($payment['method'] == 'cashondelivery')
                                                            <b class="payment-method-fees method-label fw5"
                                                                id="{{ $payment['method'] }}-price"
                                                                data-payment-fees="{{ core()->currency($cashOndeliveryFees) }}" data-payment-fees-price="{{ $cashOndeliveryFees }}"> {{ core()->currency($cashOndeliveryFees) }}</b>
                                                        @else
                                                            <b class="payment-method-fees method-label fw5"
                                                                id="{{ $payment['method'] }}-price"
                                                                data-payment-fees="{{ core()->currency(0) }}"> {{ core()->currency(0) }}</b>
                                                        @endif
                                                    </div>
                                                    <div class="line-two">
                                                        <span
                                                            class="method-summary">{{ __($payment['description']) }}</span>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif

                                <!-- Shipping methods -->
                                @if ($checkoutTree['key'] == 'checkout_page.shipping' && !$isShipping)
                                    <div class="row">
                                        <div class="form-container col-md-12">
                                            <h3> {{ __('admin::app.layouts.shipping-methods') }}</h3>
                                            @foreach ($activeShipping as $shippingMethod)
                                                {!! view_render_event('bagisto.shop.checkout.shipping-method.before', ['shippingMethod' => $shippingMethod]) !!}

                                                <span class="carrier-title fs18 fw5">
                                                    {{ __($shippingMethod['carrier_title']) }}
                                                </span>

                                                <div class="checkout-method-group mb-20">
                                                    <div class="line-one">
                                                        <label class="radio-container" class="shipping_method">
                                                            <input
                                                                v-validate   = "'required'"
                                                                type         = "radio"
                                                                id           = "{{ $shippingMethod['method'] }}"
                                                                name         = "shipping_method"
                                                                data-vv-as   = "{{ __('shop::app.checkout.onepage.shipping-method') }}"
                                                                value        = "{{ $shippingMethod['method'] }}"
                                                                data-carrier = "{{ $shippingMethod['carrier_title'] }}"
                                                                @if($shippingMethod['method'] == 'flatrate_flatrate') checked @endif
                                                            />
                                                            <span class="checkmark"></span>
                                                        </label>
                                                        <b class="ship-rate method-label fw5" id="{{ $shippingMethod['method'] }}-price" data-rate="{{ $shippingMethod['base_price'] }}">{{ core()->currency($shippingMethod['base_price']) }}</b>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        </div>
                        <div class="col-md-6">
                            <div class="order-summary" id="orderSummary">
                                @include('shop::checkout.total.summary-new',$cart)
                            </div>
                            <coupon-component></coupon-component>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="button-group">
                            <button class="btn btn-lg btn-primary" id="confirm-order-btn" onclick="this.disabled=true; this.form.submit();">
                                {{ __('shop::app.checkout.onepage.confirm-order') }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    @include('shop::checkout.onepage.customer-addresses')
    @include('shop::checkout.cart.coupon')
    <script type="text/javascript" src="@version('vendor/webkul/admin/assets/js/admin-new.js')"></script>

    <script>
        $(document).ready(function() {
            setTimeout(() => {
                let grandTotal = 0;

                function updateGrandTotal() {
                    // Parse values as floats
                    let subTotal = parseFloat($('#grand-total-detail').attr('data-grandTotal').replace(/[^0-9.-]+/g, "")) || 0;
                    let shippingFees = parseFloat($('#shippingFees').val()) || 0;
                    let paymentFees = parseFloat($('#cashondelivery-price').data('payment-fees-price')) || 0;

                    // Get the selected payment method
                    let paymentMethod = $('input[name="payment[method]"]:checked').val();

                    // Calculate grand total
                    let grandTotal = 0;
                    if (paymentMethod === 'cashondelivery') {
                        grandTotal = subTotal + shippingFees + paymentFees;

                        // Update payment fees display
                        $('#payment-fees-value').html($('.payment-method-fees').html().replace(/&nbsp;/g, ' '));

                        // Set payment fees input value
                        $('#paymentFees').val(paymentFees);
                    } else {
                        grandTotal = subTotal + shippingFees;
                    }

                    // Fix floating-point precision and format to 2 decimal places
                    grandTotal = parseFloat(grandTotal).toFixed(2);

                    // Format grand total with thousands separators
                    let formattedTotal = new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(grandTotal);

                    // Format the grand total with currency
                    let currencyFormattedTotal = @json(core()->currency('0.00')).replace('0.00', formattedTotal);

                    // Update the DOM with the properly formatted value
                    $('#grand-total-amount-detail').html(currencyFormattedTotal);

                    // Set the hidden input field for order total amount
                    $('#orderTotalAmount').val(grandTotal);
                }


                // Listen for changes in the shipping method selection
                $('input[name="shipping_method"]').on('change', function() {
                    let shippingMethod = $(this).data('carrier');
                    let shippingFees = 0;

                    $('.checkout-method-group').each(function() {
                        let method = $(this).find('input[name="shipping_method"]').data('carrier');
                        if (method === shippingMethod) {
                            shippingFees = parseFloat($(this).find('.ship-rate').attr('data-rate'));
                            $('#shipping-fees-value').html($(this).find('.ship-rate').html().replace(/&nbsp;/g, ' '));
                            return false; // Break out of the loop
                        }
                    });

                    $('#shippingCarrier').val(shippingMethod);
                    $('#shippingFees').val(shippingFees);

                    updateGrandTotal();
                });

                $('input[name="payment[method]"]').on('change', function() {
                    let paymentMethod = $('input[name="payment[method]"]:checked').val();
                    let paymentFees = parseFloat($('#' + paymentMethod + '-price').data('payment-fees'));

                    if (paymentMethod === 'cashondelivery') {
                        $('.payment-fees-summary').show();
                    } else {
                        $('.payment-fees-summary').hide();
                    }

                    $('#paymentMethod').val(paymentMethod);
                    updateGrandTotal();
                });

                // Initialize the checkout with the first available options
                $('input[name="shipping_method"]').first().trigger('change');
                $('input[name="payment[method]"]').first().trigger('change');
                // phone input country code
                let input = document.querySelector("#phone");
                window.intlTelInput(input, {
                    onlyCountries: ["{{ core()->countries(true)[0]->code }}"],
                    separateDialCode: true,
                    allowDropdown:true,
                    customPlaceholder: function (
                        selectedCountryPlaceholder,
                        selectedCountryData
                    ) {
                        // return "e.g. " + selectedCountryPlaceholder;
                        return selectedCountryPlaceholder.replace(/\s/g, '');
                    }
                });
                window.intlTelInputGlobals.getInstance(input).setCountry('{{ core()->countries(true)[0]->code }}');

                $('#phone').on('input', function(event) {
                    // Remove any non-numeric characters
                    this.value = this.value.replace(/[^0-9]/g, '');
                });
            }, 500);

            // Automatically fill in customer's address if available
            @if(auth('customer')->check() && auth('customer')->user()->addresses)
                customerAddress = @json(auth('customer')->user()->addresses);
            @else
                $('#checkout-form-div').show();
            @endif

            function autofillAddress(address) {
                // List of input IDs (static data)
                let formArray = [
                    'first_name',
                    'last_name',
                    'address1',
                    'postcode',
                    'phone',
                    'email',
                ];

                if (address) {
                    // Assign new values to inputs
                    for (let i = 0; i < formArray.length; i++) {
                        let inputId = formArray[i];
                        $('#' + inputId).val(address[inputId]);
                    }

                    // Change values for select elements
                    $('#country').val(address.country).change();
                    setTimeout(() => {
                        $('#state').val(parseInt(address.StateId)).change();
                        setTimeout(() => {
                            $('#city').val(parseInt(address.CityId)).change();
                        }, 200);
                    }, 200);
                } else {
                    // Clear all inputs
                    // for (let i = 0; i < formArray.length; i++) {
                    //     let inputId = formArray[i];
                    //     $('#' + inputId).val('');
                    // }

                    if (getCookie('locationState')) {
                        setTimeout(() => {
                            $('#state').val(parseInt(getCookie('locationState'))).change();
                            setTimeout(() => {
                                $('#city').val(parseInt(getCookie('locationCity'))).change();
                            }, 200);
                        }, 200);
                    }

                    // Reset select elements
                    // $('#state').val('').change();
                    // $('#city').val('').change();
                }
            }

            Vue.component('customeraddresses', {
                template: '#customeraddresses-template',
                data: function () {
                    return {
                        allAddress: {},
                        address_id: 0,
                        showAddresss: true
                    }
                },

                created: function () {
                    // this.getOrderSummary();
                    if (customerAddress.length < 1) {
                        setTimeout(() => {
                            this.showAddresss = false;
                            $('#checkout-form-div').show();
                        }, 0);
                    } else {
                        // show old addresses
                        this.allAddress = customerAddress;
                        $('#checkout-form-div').hide();
                    }
                },

                methods: {
                    chooseAddress: function (address) {
                        autofillAddress(address);
                        $('#billingAddressId').val(address.id);
                        $('#shippingAddressId').val(address.id);
                        this.showAddresss = false;
                        $('#checkout-form-div').show();
                    },
                    newAddress: function () {
                        autofillAddress(false);
                        this.showAddresss = false;
                        $('#checkout-form-div').show();

                    },
                    backToAddresses: function () {
                        this.showAddresss = true;
                        $('#checkout-form-div').hide();
                    },
                },
            });
        });
    </script>
@endpush