{{-- @extends('layouts.masteruser') --}}
@extends('layouts.master')

@section('title', 'Express54')

@section('content')
    <div class="stepper-body" style="min-height: calc(100vh - 110px);">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-11 col-sm-9 col-md-8 col-lg-8  text-center p-0 mt-3 mb-2 custom-final-payment">
                    <div class="card px-0 pt-4 pb-0 mt-3 mb-3">

                        <form role="form" action="{{ route('stripe.post') }}" method="post" class="require-validation"
                            data-cc-on-file="false" data-stripe-publishable-key="{{ config('stripeConf.stripeKey') }}"
                            {{-- data-stripe-publishable-key= "{{env('STRIPE_KEY')}}"; --}} id="msform">
                            @csrf
                            <!-- progressbar -->
                            @if ($id == 4)
                                <ul id="progressbar">
                                    <li class="active" id="collectdata"><strong>@lang('messages.collectdata')</strong></li>
                                    <li class="active" id="delivery"><strong>@lang('messages.delivery')</strong></li>
                                    <li class="active" id="pay"><strong>@lang('messages.pay')</strong></li>
                                </ul>
                            @else
                                <ul id="progressbar">
                                    {{-- <li class="active" id="service"><strong>@lang('messages.service')</strong></li> --}}
                                    <li class="active" id="collectdata"><strong>@lang('messages.collectdata')</strong></li>
                                    <li class="active" id="documents"><strong>@lang('messages.documents')</strong></li>
                                    <li class="active" id="speed"><strong>@lang('messages.speed')</strong></li>
                                    <li class="active" id="delivery"><strong>@lang('messages.delivery')</strong></li>
                                    <li class="active" id="pay"><strong>@lang('messages.pay')</strong></li>
                                </ul>
                            @endif


                            <fieldset>

                                <input type="hidden" name="parentServiceId" value="{{ request('parentServiceId') }}">


                                <div class="container custom-final-payment">
                                    <center>
                                        <p class="pagemsg">Please do not close or refresh the page.</p>
                                    </center>
                                    <div class="row">
                                        <div class="col-md-7 offset-md-3">
                                            <div class="card">

                                                <div class="card-header">
                                                    <h3 class="card-title text-center"><strong>@lang('messages.paymentdetails')</strong>
                                                    </h3>
                                                    <center>
                                                        <img src="{{ asset('/assets/image/visa.png') }}" alt="visa"
                                                            class="payment-img">
                                                        <!-- <img src="{{ asset('/assets/image/paypal.png') }}" alt="paypal"
                                                            class="payment-img"> -->
                                                        <img src="{{ asset('/assets/image/mastercard.png') }}"
                                                            alt="mastercard" class="payment-img">
                                                        <!-- <img src="{{ asset('/assets/image/shopping.png') }}" alt="shopping"
                                                            class="payment-img"> -->
                                                    </center>
                                                </div>
                                                <div class="card-body">
                                                    @if (Session::has('success'))
                                                        <div class="alert alert-success text-center">
                                                            <p>{{ Session::get('success') }}</p>
                                                        </div>
                                                    @endif


                                                    <form role="form" action="{{ route('stripe.post') }}" method="POST"
                                                        class="require-validation" data-cc-on-file="false"
                                                        data-stripe-publishable-key="{{ config('stripeConf.stripeKey') }}"
                                                        id="msform">
                                                        @csrf
                                                        <div class='form-row row'>
                                                            <div class='col-xs-12 form-group'>
                                                                <input class='form-control' size='4' type='text'
                                                                    placeholder="@lang('messages.name_of_card')" id='name-of-card-input'
                                                                    required>
                                                                <div class="error-message" id='name-error-message'
                                                                    style="color: red; display: none;">
                                                                    Please enter the name of the card.</div>
                                                            </div>
                                                        </div>

                                                        <div class='form-row row'>
                                                            <div class='col-xs-12 form-group'>
                                                                <input autocomplete='off' class='form-control card-number'
                                                                    size='20' type='text'
                                                                    placeholder="@lang('messages.card_number')" maxlength="16"
                                                                    id='card-number-input' required>
                                                                <div class="error-message" id='card-number-error-message'
                                                                    style="color: red; display: none;">
                                                                    Please enter a valid card number.</div>
                                                            </div>
                                                        </div>

                                                        <div class='form-row row'>
                                                            <div class='col-xs-12 col-md-4 form-group cvc required'>
                                                                <input id='cvv-input' autocomplete='off'
                                                                    class='form-control card-cvc'
                                                                    placeholder="@lang('messages.cvv')" size='4'
                                                                    type='text' maxlength="3" required>
                                                                <div class="error-message" id='cvv-error-message'>Please
                                                                    enter a valid CVV.</div>
                                                            </div>

                                                            <div class='col-xs-12 col-md-4 form-group expiration required'>
                                                                <input class='form-control card-expiry-month'
                                                                    placeholder="@lang('messages.expiring_mm')" maxlength="2"
                                                                    type='text' required>
                                                                <div class="error-message"
                                                                    id='expiry-month-error-message'>
                                                                    Please enter a valid expiration month (MM).</div>
                                                            </div>

                                                            <div class='col-xs-12 col-md-4 form-group expiration required'>
                                                                <input class='form-control card-expiry-year'
                                                                    placeholder="@lang('messages.expiring_yyyy')" size='4'
                                                                    maxlength="4" type='text' required>
                                                                <div class="error-message" id='expiry-year-error-message'>
                                                                    Please enter a valid expiration year (YYYY).</div>
                                                            </div>
                                                        </div>
                                                        <script>
                                                            document.addEventListener('DOMContentLoaded', function() {
                                                                const nameOfCardInput = document.getElementById('name-of-card-input');
                                                                const cardNumberInput = document.getElementById('card-number-input');
                                                                const cvvInput = document.getElementById('cvv-input');
                                                                const expiryMonthInput = document.querySelector('.card-expiry-month');
                                                                const expiryYearInput = document.querySelector('.card-expiry-year');

                                                                const nameErrorMessage = document.getElementById('name-error-message');
                                                                const cardNumberErrorMessage = document.getElementById('card-number-error-message');
                                                                const cvvErrorMessage = document.getElementById('cvv-error-message');
                                                                const expiryMonthErrorMessage = document.getElementById('expiry-month-error-message');
                                                                const expiryYearErrorMessage = document.getElementById('expiry-year-error-message');

                                                                // Initially, set all error messages to be hidden
                                                                nameErrorMessage.style.display = 'none';
                                                                cardNumberErrorMessage.style.display = 'none';
                                                                cvvErrorMessage.style.display = 'none';
                                                                expiryMonthErrorMessage.style.display = 'none';
                                                                expiryYearErrorMessage.style.display = 'none';

                                                                nameOfCardInput.addEventListener('input', validateName);
                                                                cardNumberInput.addEventListener('input', validateCardNumber);
                                                                cvvInput.addEventListener('input', validateCVV);
                                                                expiryMonthInput.addEventListener('input', validateExpiryMonth);
                                                                expiryYearInput.addEventListener('input', validateExpiryYear);

                                                                function validateName() {
                                                                    const nameValue = nameOfCardInput.value.trim();
                                                                    if (nameValue === '') {
                                                                        nameErrorMessage.style.display = 'block';
                                                                    } else {
                                                                        nameErrorMessage.style.display = 'none';
                                                                    }
                                                                }

                                                                function validateCardNumber() {
                                                                    const cardNumberValue = cardNumberInput.value.replace(/\s/g, ''); // Remove spaces for validation
                                                                    if (!/^\d{16}$/.test(cardNumberValue)) {
                                                                        cardNumberErrorMessage.style.display = 'block';
                                                                    } else {
                                                                        cardNumberErrorMessage.style.display = 'none';
                                                                    }
                                                                }

                                                                function validateCVV() {
                                                                    const cvvValue = cvvInput.value.trim();
                                                                    if (!/^\d{3}$/.test(cvvValue)) {
                                                                        cvvErrorMessage.style.display = 'block';
                                                                    } else {
                                                                        cvvErrorMessage.style.display = 'none';
                                                                    }
                                                                }

                                                                function validateExpiryMonth() {
                                                                    const expiryMonthValue = expiryMonthInput.value.trim();
                                                                    if (!/^(0[1-9]|1[0-2])$/.test(expiryMonthValue)) {
                                                                        expiryMonthErrorMessage.style.display = 'block';
                                                                    } else {
                                                                        expiryMonthErrorMessage.style.display = 'none';
                                                                    }
                                                                }

                                                                function validateExpiryYear() {
                                                                    const expiryYearValue = expiryYearInput.value.trim();
                                                                    if (!/^\d{4}$/.test(expiryYearValue)) {
                                                                        expiryYearErrorMessage.style.display = 'block';
                                                                    } else {
                                                                        expiryYearErrorMessage.style.display = 'none';
                                                                    }
                                                                }
                                                            });
                                                        </script>

                                                        @if ($id == 4)
                                                            <p>@lang('messages.platform_fee'):
                                                                ${{ number_format($platformFeeDisplay, 2) }}</p>
                                                            <p>@lang('messages.shipping_charges'):
                                                                ${{ number_format(session('rate'), 2) }}</p>
                                                            <p>@lang('messages.total_amount_paid'):
                                                                ${{ number_format(session('rate') + $platformFeeDisplay, 2) }}
                                                            </p>
                                                        @else
                                                            <p>@lang('messages.service_fee'):${{ number_format($serviceFeeDisplay, 2) }}
                                                            </p>
                                                            <p>@lang('messages.platform_fee'):
                                                                ${{ number_format($platformFeeDisplay, 2) }}</p>
                                                            <p>@lang('messages.shipping_charges'):
                                                                ${{ number_format(session('rate'), 2) }}</p>
                                                            <p>@lang('messages.total_amount_paid'):
                                                                ${{ number_format(session('rate') + $serviceFee + $platformFeeDisplay, 2) }}
                                                            </p>
                                                        @endif


                                                        <input type="hidden" name="appartment_number"
                                                            value="{{ $appartment_number }}">
                                                        <input type="hidden" name="city"
                                                            value="{{ $city }}">
                                                        <input type="hidden" name="state"
                                                            value="{{ $state }}">
                                                        <input type="hidden" name="zip_code"
                                                            value="{{ $zip_code }}">
                                                        <input type="hidden" name="id"
                                                            value="{{ $id }}">
                                                        <input type="hidden" name="serviceFee"
                                                            value="{{ $serviceFee }}">
                                                        <input type="hidden" name="rate"
                                                            value="{{ serialize($rate) }}">
                                                        <input type="hidden" name="totalAmount"
                                                            value="{{ number_format(session('rate') + $serviceFee + $platformFeeDisplay, 2) }}">
                                                        <input type="hidden" name="selectedDeliveryMethod"
                                                            value="{{ $selectedDeliveryMethod }}">
                                                        <div class="row">
                                                            <div class="col-xs-12">
                                                                <button class="btn btn-success btn-md btn-block"
                                                                    type="submit">@lang('messages.paynow')</button>
                                                            </div>
                                                        </div>

                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <br>

                            </fieldset>
                        </form>

                        <script>
                            $(document).ready(function() {

                                var current_fs, next_fs, previous_fs; //fieldsets
                                var opacity;
                                var current = 1;
                                var steps = $("fieldset").length;

                                setProgressBar(current);

                                $(".next").click(function() {

                                    current_fs = $(this).parent();
                                    next_fs = $(this).parent().next();

                                    //Add Class Active
                                    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

                                    //show the next fieldset
                                    next_fs.show();
                                    //hide the current fieldset with style
                                    current_fs.animate({
                                        opacity: 0
                                    }, {
                                        step: function(now) {
                                            // for making fielset appear animation
                                            opacity = 1 - now;

                                            current_fs.css({
                                                'display': 'none',
                                                'position': 'relative'
                                            });
                                            next_fs.css({
                                                'opacity': opacity
                                            });
                                        },
                                        duration: 500
                                    });
                                    setProgressBar(++current);
                                });

                                $(".previous").click(function() {

                                    current_fs = $(this).parent();
                                    previous_fs = $(this).parent().prev();

                                    //Remove class active
                                    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

                                    //show the previous fieldset
                                    previous_fs.show();

                                    //hide the current fieldset with style
                                    current_fs.animate({
                                        opacity: 0
                                    }, {
                                        step: function(now) {
                                            // for making fielset appear animation
                                            opacity = 1 - now;

                                            current_fs.css({
                                                'display': 'none',
                                                'position': 'relative'
                                            });
                                            previous_fs.css({
                                                'opacity': opacity
                                            });
                                        },
                                        duration: 500
                                    });
                                    setProgressBar(--current);
                                });

                                function setProgressBar(curStep) {
                                    var percent = parseFloat(100 / steps) * curStep;
                                    percent = percent.toFixed();
                                    $(".progress-bar")
                                        .css("width", percent + "%")
                                }

                                $(".submit").click(function() {
                                    return false;
                                })
                            });
                        </script>


                        <script type="text/javascript" src="https://js.stripe.com/v2/"></script>

                        <script type="text/javascript">
                            $(function() {
                                var $form = $(".require-validation");
                                $('form.require-validation').bind('submit', function(e) {
                                    var $form = $(".require-validation"),
                                        inputSelector = ['input[type=email]', 'input[type=password]',
                                            'input[type=text]', 'input[type=file]',
                                            'textarea'
                                        ].join(', '),
                                        $inputs = $form.find('.required').find(inputSelector),
                                        $errorMessage = $form.find('div.error'),
                                        valid = true;
                                    $errorMessage.addClass('hide');

                                    $('.has-error').removeClass('has-error');
                                    $inputs.each(function(i, el) {
                                        var $input = $(el);
                                        if ($input.val() === '') {
                                            $input.parent().addClass('has-error');
                                            $errorMessage.removeClass('hide');
                                            e.preventDefault();
                                        }
                                    });

                                    if (!$form.data('cc-on-file')) {
                                        e.preventDefault();
                                        Stripe.setPublishableKey($form.data('stripe-publishable-key'));
                                        Stripe.createToken({
                                            number: $('.card-number').val(),
                                            cvc: $('.card-cvc').val(),
                                            exp_month: $('.card-expiry-month').val(),
                                            exp_year: $('.card-expiry-year').val()
                                        }, stripeResponseHandler);
                                    }

                                });


                                function stripeResponseHandler(status, response) {
                                    if (response.error) {
                                        var errorMessage = response.error.message;
                                        $('.error')
                                            .removeClass('hide')
                                            .find('.alert')
                                            .text(errorMessage);

                                        $('.card-body .alert').remove();

                                        // Create an alert box with a "Retry Payment" message
                                        var alertBox = '<div class="alert alert-danger alert-dismissible fade show" role="alert">';
                                        alertBox += 'Retry Payment ';
                                        alertBox += errorMessage;
                                        alertBox += '</div>';

                                        // Append the alert box to a container in your HTML (e.g., '.error-container')
                                        $('.card-body').append(alertBox);

                                        // Automatically dismiss the error message after 5 seconds
                                        setTimeout(function() {
                                            $('.card-body .alert').alert('close'); // This will trigger the close animation
                                        }, 5000); // 5000 milliseconds (5 seconds)
                                    } else {
                                        / token contains id, last4, and card type /
                                        var token = response['id'];

                                        $form.find('input[type=text]').empty();
                                        $form.append("<input type='hidden' name='stripeToken' value='" + token + "'/>");
                                        $form.get(0).submit();
                                    }
                                }

                            });
                        </script>
                        <script>
                            document.addEventListener("DOMContentLoaded", function() {
                                var alertContainer = document.getElementById("alert-container");
                                if (alertContainer) {
                                    setTimeout(function() {
                                        alertContainer.remove();
                                    }, 5000);
                                }
                            });
                        </script>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection