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

@section('title', 'Express54')

@section('content')

    <!--links-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <!-- MultiStep Form -->
    <div class="loginbody">
        <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">
                    <div class="card px-0 pt-4 pb-0 mt-3 mb-3 noborder">

                        <form id="msform" method="POST" action="{{ route('applicationSubmit') }}"
                            enctype="multipart/form-data">

                            {{-- <form role="form" action="{{ route('stripe.post') }}" method="post" class="require-validation"
                            data-cc-on-file="false"
                            data-stripe-publishable-key="pk_test_51NmsnmSHNgYVKqF0csze7IzAmLGdRZXk9fhmFvewDntMKaDChOk8Ts4xpsQMTMfDotEwF6kBXWN8XzFo8rL2Geun00LclxMWpp"
                            id="msform"> --}}
                            @csrf
                            <!-- progressbar -->
                            <ul id="progressbar">
                                <li class="active" id="service"><strong>@lang('messages.service')</strong></li>
                                <li id="collectdata"><strong>@lang('messages.collectdata')</strong></li>
                                <li id="documents"><strong>Documents</strong></li>
                                <li id="speed"><strong>Speed</strong></li>
                                <li id="delivery"><strong>Delivery</strong></li>
                                {{-- <li id="pay"><strong>Pay</strong></li> --}}
                            </ul>

                            @if (Session('success'))
                                <div class="alert alert-success" role="alert">
                                    {{ Session('success') }}
                                </div>
                            @endif

                            @if (Session('error'))
                                <div class="alert alert-warning" role="alert">
                                    {{ Session('error') }}
                                </div>
                            @endif
                            <br>
                            <!-- fieldsets -->
                            <fieldset id="serviceFieldset">

                                <div class="container">

                                    @if (session('success'))
                                        <div class="alert alert-success">
                                            {{ session('success') }}
                                        </div>
                                    @endif

                                    @if (session('error'))
                                        <div class="alert alert-danger">
                                            {{ session('error') }}
                                        </div>
                                    @endif
                                    <div class="row custom-row" id="service-cards">
                                        <div class="col-md-4">
                                            @foreach ($services as $service)
                                                <div class="col-md-12 servicecol" data-parent-id="{{ $service->id }}">
                                                    <div class="p-3">
                                                        <a href="{{ url('#') }}" class="linkdecoration">
                                                            <img src="{{ asset('/assets/image/card.png') }}"
                                                                alt="{{ $service->name }}">
                                                            <p class="text-white">{{ $service->name }}</p>
                                                        </a>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                        <div class="col-md-8">
                                            <div id="child-service-cards" style="display: none;">
                                                <p>Please select service</p>
                                                <div class="row custom-row" id="child-service-cards-row">
                                                    <!-- Child service cards will be appended here -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Container for child services (hidden by default) -->
                                <div class="container" id="child-service-cards" style="display: none;">
                                    <h2>More Services</h2>
                                    <div class="row custom-row" id="child-service-cards-row">
                                        <!-- Child service cards will be appended here -->
                                    </div>
                                </div>
                                <input type="hidden" id="selectedParentInput" name="selected-parent">
                                <input type="hidden" id="selectedChildInput" name="selected-child">
                                <script>
                                    document.addEventListener("DOMContentLoaded", function() {
                                        const parentServiceCols = document.querySelectorAll('.servicecol[data-parent-id]');
                                        const childServicesContainer = document.getElementById('child-service-cards');
                                        const childServicesRow = document.getElementById('child-service-cards-row');
                                        const selectedParentInput = document.getElementById('selectedParentInput');
                                        const selectedChildInput = document.getElementById('selectedChildInput');
                                        const nextButton = document.getElementById('nextButton1'); // Get the "Next" button

                                        function updateHiddenFields() {
                                            const selectedParent = document.querySelector('.servicecol.selected-parent');
                                            const selectedChild = document.querySelector('.servicecol.selected-child');

                                            // Update the hidden fields with selected service and sub-service values
                                            if (selectedParent) {
                                                selectedParentInput.value = selectedParent.getAttribute('data-parent-id');
                                            } else {
                                                selectedParentInput.value = '';
                                            }

                                            if (selectedChild) {
                                                selectedChildInput.value = selectedChild.getAttribute('data-child-id');
                                            } else {
                                                selectedChildInput.value = '';
                                            }
                                        }

                                        // Function to check if both parent and child cards are selected
                                        function areCardsSelected() {
                                            const selectedParent = document.querySelector('.servicecol.selected-parent');
                                            const selectedChild = document.querySelector('.servicecol.selected-child');
                                            return selectedParent && selectedChild;
                                        }

                                        //Function to enable/disable the "Next" button based on card selection
                                        function updateNextButtonState() {
                                            nextButton1.disabled = !areCardsSelected();
                                           }

                                        parentServiceCols.forEach((parentServiceCol) => {
                                            parentServiceCol.addEventListener('click', () => {
                                                const parentServiceId = parentServiceCol.getAttribute('data-parent-id');

                                                // Remove the 'selected-parent' class from all parent service cards
                                                parentServiceCols.forEach((col) => {
                                                    col.classList.remove('selected-parent');
                                                });

                                                // Remove the 'selected-child' class from all child service cards
                                                const childServiceCols = document.querySelectorAll(
                                                    '.servicecol[data-child-id]');
                                                childServiceCols.forEach((col) => {
                                                    col.classList.remove('selected-child');
                                                });

                                                // Make an AJAX request to fetch child services
                                                fetch(`/get-child-services/${parentServiceId}`)
                                                    .then(response => response.json())
                                                    .then(data => {
                                                        // Generate HTML for child service cards
                                                        const childServicesHTML = data.map(child => `
                                                            <div class="col-md-6 servicecol" data-child-id="${child.id}">
                                                                <div class="p-2"><p class="text-white">${child.name}</p></div>
                                                            </div>
                                                        `).join('');

                                                        // Display the child service cards in the new container
                                                        childServicesRow.innerHTML = childServicesHTML;
                                                        childServicesContainer.style.display = 'block';
                                                        updateHiddenFields();
                                                        // Update the "Next" button state
                                                        updateNextButtonState();
                                                    })
                                                    .catch(error => {
                                                        console.error('Error fetching child services:', error);
                                                    });

                                                // Add the 'selected-parent' class to the clicked parent service card
                                                parentServiceCol.classList.add('selected-parent');
                                               });
                                        });

                                        childServicesContainer.addEventListener('click', (event) => {
                                            const childServiceCol = event.target.closest('.servicecol[data-child-id]');
                                            if (childServiceCol) {
                                                // Remove the 'selected-child' class from all child service cards
                                                const childServiceCols = document.querySelectorAll('.servicecol[data-child-id]');
                                                childServiceCols.forEach((col) => {
                                                    col.classList.remove('selected-child');
                                                });

                                                // Add the 'selected-child' class to the clicked child service card
                                                childServiceCol.classList.add('selected-child');
                                                updateHiddenFields();
                                                // Update the "Next" button state
                                                updateNextButtonState();
                                            }
                                        })
                                        updateHiddenFields();
                                        // Initially, disable the "Next" button
                                        nextButton1.disabled = true;
                                    });
                                </script>
                                <br>
                                <button type="button" name="next" class="next action-button" value="Next"
                                    id="nextButton1">
                                    <i class="fa-thin fa-greater-than"></i> Next
                                </button>
                            </fieldset>


                            <fieldset>
                                <div class="form-group row">
                                    <label for="" class="col-sm-3 col-form-label">Name :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="name" name="name" required>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="" class="col-sm-3 col-form-label">First Name :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="fname" name="fname" required>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="" class="col-sm-3 col-form-label">Surname :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="surname" name="surname" required>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="" class="col-sm-3 col-form-label">Address :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="address" name="address" required>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="" class="col-sm-3 col-form-label">Martial Status :</label>
                                    <div class="col-sm-2">
                                        <select class="form-select" name="mstatus" id="mstatusSelect">
                                            <option value="single">Single</option>
                                            <option value="married">Married</option>
                                            <option value="widow">Widow</option>
                                            <option value="divorced">Divorced</option>
                                        </select>
                                    </div>

                                    <label for="" class="col-sm-2 col-form-label">Wedding Date :</label>
                                    <div class="col-sm-2">
                                        <input type="date" class="form-control" id="weddingdate" name="weddingdate"
                                            disabled>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="" class="col-sm-3 col-form-label">Children:</label>
                                    <div class="col-sm-6 border border-dark p-3 rounded" id="childFormContainer">
                                        <button type="button" class="btn btn mt-2 float-end" id="addChildForm">
                                            <i class="fas fa-plus-circle"></i> Add Child
                                        </button>
                                        <div class="child-form">
                                            <div class="child-entry">
                                                <input type="text" class="form-control mb-2" name="childName[]"
                                                    placeholder="Name and first name">
                                                <input type="date" class="form-control mb-2" name="childDOB[]"
                                                    placeholder="Date of birth">
                                                <input type="text" class="form-control mb-2" name="childPOB[]"
                                                    placeholder="Place of birth">
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <script>
                                    $(document).ready(function() {
                                        // Initial state of the wedding date input
                                        $("#weddingdate").prop("disabled", true);

                                        // Function to toggle the disabled state of the wedding date input based on marital status
                                        function toggleWeddingDate() {
                                            const maritalStatus = $("#mstatusSelect").val();
                                            if (maritalStatus === "single") {
                                                $("#weddingdate").prop("disabled", true);
                                            } else {
                                                $("#weddingdate").prop("disabled", false);
                                            }
                                        }

                                        // Call the toggleWeddingDate function when the marital status changes
                                        $("#mstatusSelect").change(function() {
                                            toggleWeddingDate();
                                        });

                                        // Initial state of the child form inputs
                                        $(".child-form input").prop("disabled", true);

                                        // Function to toggle the disabled state of child form inputs based on marital status
                                        function toggleChildForm() {
                                            const maritalStatus = $("#mstatusSelect").val();
                                            if (maritalStatus === "single") {
                                                $(".child-form input").prop("disabled", true);
                                            } else {
                                                $(".child-form input").prop("disabled", false);
                                            }
                                        }

                                        // Call the toggleChildForm function when the marital status changes
                                        $("#mstatusSelect").change(function() {
                                            toggleChildForm();
                                        });

                                        // Clone child form on button click
                                        $("#addChildForm").click(function() {
                                            var childForm = $(".child-form").first().clone();
                                            $(childForm).find("input").val(""); // Clear input values
                                            $("#childFormContainer").append(childForm);
                                        });
                                    });
                                </script>
                                <br>



                                <div class="form-group row">
                                    <label for="" class="col-sm-3 col-form-label">Contact :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="contact" name="contact">
                                    </div>
                                </div>

                                <button type="button" name="previous" class="previous action-button-previous"
                                    value="Previous"><i class="fa-thin fa-greater-than"></i>
                                    Previous</button>

                                <button type="button" name="next" class="next action-button" value="Next"
                                    id="nextButton2">
                                    <i class="fa-thin fa-greater-than"></i> Next
                                </button>
                                <script>
                                    $(document).ready(function() {
                                        // Initial state of the "Next" button
                                        $("#nextButton2").prop("disabled", true);

                                        // Function to check if all required fields have data
                                        function checkFields() {
                                            const name = $("#name").val();
                                            const fname = $("#fname").val();
                                            const surname = $("#surname").val();
                                            const address = $("#address").val();
                                            const maritalStatus = $("#mstatusSelect").val();
                                            const contact = $("#contact").val();

                                            // Additional validation for child forms if applicable
                                            if (maritalStatus !== "single") {
                                                const childNames = $("input[name='childName[]']").map(function() {
                                                    return $(this).val();
                                                }).get();
                                                const childDOBs = $("input[name='childDOB[]']").map(function() {
                                                    return $(this).val();
                                                }).get();
                                                const childPOBs = $("input[name='childPOB[]']").map(function() {
                                                    return $(this).val();
                                                }).get();

                                                if (childNames.includes("") || childDOBs.includes("") || childPOBs.includes("")) {
                                                    return false;
                                                }
                                            }

                                            // Check if any required field is empty
                                            if (name === "" || fname === "" || surname === "" || address === "" || contact === "") {
                                                return false;
                                            }
                                            return true;
                                        }

                                        // Function to enable/disable the "Next" button based on field validation
                                        function toggleNextButton() {
                                            const isValid = checkFields();
                                            $("#nextButton2").prop("disabled", !isValid);
                                        }

                                        // Call the toggleNextButton function when any input field changes
                                        $("input, select").on("input change", function() {
                                            toggleNextButton();
                                        });

                                        // Call the toggleNextButton function on page load
                                        toggleNextButton();
                                    });
                                </script>


                            </fieldset>


                            <fieldset>
                                <div class="form-group row">
                                    <label for="" class="col-sm-4 col-form-label">Photo of Passport :</label>
                                    <div class="col-sm-6">
                                        <input type="file" class="form-control" id="photoofpassport"
                                            name="photoofpassport" value="">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label for="" class="col-sm-4 col-form-label">Copy of the first 3 pages of the
                                        passport or the national identity card :</label>
                                    <div class="col-sm-6">
                                        <input type="file" class="form-control" id="copyofpassport"
                                            name="copyofpassport" value="">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="" class="col-sm-4 col-form-label">Birth Extract :</label>
                                    <div class="col-sm-6">
                                        <input type="file" class="form-control" id="birthextract" name="birthextract"
                                            value="">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="" class="col-sm-4 col-form-label">Proof of address or copy of the
                                        ID showing the address :</label>
                                    <div class="col-sm-6">
                                        <input type="file" class="form-control" id="proofofaddress"
                                            name="proofofaddress" value="">
                                    </div>
                                </div>
                                <center>
                                    <h3 class="text-decoration-underline">Payment</h3>
                                </center>
                                <br>
                                <div class="form-group row">
                                    <div class="col-sm-4 col-form-label">
                                        <img src="{{ asset('/assets/image/qrcode.png') }}" alt=""
                                            class="qrimage">
                                    </div>

                                    <div class="col-sm-6">
                                        <div class="w-100">
                                            <h5><a
                                                    href="https://www.ci-embassyepay.org/">https://www.ci-embassyepay.org/</a>
                                            </h5>
                                            <p>Scan the QR code or click on the link to proceed with
                                                payment <br>
                                                Once the payment is completed, please upload the receipt.</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-4 col-form-label">Recipt Upload:</label>
                                    <div class="col-sm-6">
                                        <input type="file" class="form-control" id="uploadFile" name="uploadFile"
                                            accept=".pdf,image/*" value="" required>
                                    </div>
                                </div>

                                <button type="button" name="previous" class="previous action-button-previous"
                                    value="Previous"><i class="fa-thin fa-greater-than"></i>
                                    Previous</button>


                                <button type="button" name="next" class="next action-button" value="Next"
                                    id="nextButton">
                                    <i class="fa-thin fa-greater-than"></i> Next
                                </button>


                                {{-- <script>
                                   
                                    $(document).ready(function() {
                                        // Function to check if a file has been selected
                                        function isFileSelected() {
                                            var fileInput = $("#uploadFile");
                                            return fileInput.get(0).files.length > 0;
                                        }

                                        // Function to enable or disable the "Next" button based on file selection
                                        function updateNextButtonState() {
                                            var nextButton = $("#nextButton");
                                            nextButton.prop("disabled", !isFileSelected());
                                        }

                                        // Add change event listener to the file input
                                        $("#uploadFile").change(function() {
                                            updateNextButtonState();
                                        });

                                        // Initial button state check
                                        updateNextButtonState();
                                    });
                                </script>  --}}

                            </fieldset>


                            <fieldset>
                                <div class="container">
                                    <div class="row custom-row">
                                        <div class="col-md-3 p-5 servicecol" id="normalService">
                                            <a href="#" class="linkdecoration">
                                                <p class="text-white">Normal</p>
                                            </a>
                                        </div>

                                        <div class="col-md-3 p-5 servicecol" id="expediteService">
                                            <a href="#" class="linkdecoration">
                                                <p class="text-white">Express (+$3.00)</p>
                                            </a>
                                        </div>

                                    </div>
                                </div>
                                <input type="hidden" name="selectedService" id="selectedService" value="">

                                <!-- select value of delevry  -->
                                {{-- <script>
                                    // JavaScript code to toggle selected service and enable/disable the "Next" button
                                    const normalService = document.getElementById('normalService');
                                    const expediteService = document.getElementById('expediteService');
                                    const selectedServiceInput = document.getElementById('selectedService');
                                    // const nextButton = document.getElementById('nextButton4');

                                    normalService.addEventListener('click', () => {
                                        normalService.classList.add('selected-service');
                                        expediteService.classList.remove('selected-service');
                                        selectedServiceInput.value = 'Normal';
                                        //toggleNextButton();
                                    });

                                    expediteService.addEventListener('click', () => {
                                        expediteService.classList.add('selected-service');
                                        normalService.classList.remove('selected-service');
                                        selectedServiceInput.value = 'Expedite';
                                        //toggleNextButton();
                                    });
                                    // toggleNextButton();
                                </script> --}}


                                <button type="button" name="previous" class="previous action-button-previous"
                                    value="Previous"><i class="fa-thin fa-greater-than"></i>
                                    Previous</button>

                                <button type="button" name="next" class="next action-button" value="Next"
                                    id="nextButton4">
                                    <i class="fa-thin fa-greater-than"></i> Next
                                </button>
                                <script>
                                    document.addEventListener('DOMContentLoaded', function() {
                                        // Initial state of the "Next" button
                                        const nextButton = document.getElementById('nextButton4');
                                        nextButton.disabled = true;

                                        // Function to enable the "Next" button when a service is selected
                                        function toggleNextButton() {
                                            const selectedServiceInput = document.getElementById('selectedService');
                                            if (selectedServiceInput.value !== "") {
                                                nextButton.disabled = false;
                                            } else {
                                                nextButton.disabled = true;
                                            }
                                        }

                                        // Event listeners for service selection
                                        const normalService = document.getElementById('normalService');
                                        const expediteService = document.getElementById('expediteService');
                                        const selectedServiceInput = document.getElementById('selectedService');

                                        normalService.addEventListener('click', () => {
                                            normalService.classList.add('selected-service');
                                            expediteService.classList.remove('selected-service');
                                            selectedServiceInput.value = 'Normal';
                                            toggleNextButton();
                                        });

                                        expediteService.addEventListener('click', () => {
                                            expediteService.classList.add('selected-service');
                                            normalService.classList.remove('selected-service');
                                            selectedServiceInput.value = 'Expedite';
                                            toggleNextButton();
                                        });

                                        // Call the toggleNextButton function on page load
                                        toggleNextButton();
                                    });
                                </script>


                            </fieldset>

                            <fieldset>
                                <div class="form-group row">
                                    <label for="" class="col-sm-4 col-form-label p-3">Select a Delivery
                                        Method:</label>
                                    <div class="col-sm-6">
                                        <select class="form-select" name="deliveryMethod" id="deliveryMethod">
                                            <option value="pickup">Pickup</option>
                                            <option value="delivery">Delivery (Additional charges may apply)</option>
                                        </select>
                                    </div>
                                    <input type="hidden" name="deliveryMethod" id="selectedDeliveryMethod"
                                        value="">


                                    <div id="addressFields">
                                        <div class="form-group row">
                                            <label for="appartmentornumber" class="col-sm-4 col-form-label">Street (with
                                                apartment or suite number):</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="appartmentornumber"
                                                    name="appartment_number">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="city" class="col-sm-4 col-form-label">City:</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="city"
                                                    name="city">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="state" class="col-sm-4 col-form-label">State:</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="state"
                                                    name="state">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="zip_code" class="col-sm-4 col-form-label">ZIP code:</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="zip_code"
                                                    name="zip_code">
                                            </div>
                                        </div>
                                    </div>


                                    <script>
                                        $(document).ready(function() {
                                            // Function to show/hide address fields based on the selected delivery method
                                            function toggleAddressFields() {
                                                var deliveryMethod = $('#deliveryMethod').val();
                                                var addressFields = $('#addressFields');

                                                if (deliveryMethod === 'delivery') {
                                                    addressFields.show();
                                                } else {
                                                    addressFields.hide();
                                                }

                                                // Update the hidden input field with the selected delivery method
                                                $('#selectedDeliveryMethod').val(deliveryMethod);
                                            }

                                            // Initial call to toggleAddressFields to set the initial state
                                            toggleAddressFields();

                                            // Bind an event handler to the select element to call toggleAddressFields when the selection changes
                                            $('#deliveryMethod').change(toggleAddressFields);
                                        });
                                    </script>

                                </div>


                                <br>
                                <button type="button" name="previous" class="previous action-button-previous"
                                    value="Previous"><i class="fa-thin fa-greater-than"></i>
                                    Previous</button>


                                <button type="submit" name="submit" class="next action-button" value="payment"
                                    id="submitButton">
                                    Pay Now</button>


                            </fieldset>

                        </form>

                        <!--new next button run -->
                        <script>
                            $(document).ready(function() {

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

                                setProgressBar(current);
                                // if (nextButton.disabled == false) {
                                $(".next").click(function() {

                                    $(".file-error").text("");

                                    // Check if all upload file inputs  files selected or not..
                                    var fileInputs = $("fieldset:visible input[type='file']");
                                    var filesSelected = true;
                                    fileInputs.each(function() {
                                        if (this.files.length === 0) {
                                            filesSelected = false;
                                            var inputId = $(this).attr("id");
                                            $("#" + inputId + "_error").text(
                                                "Please select a file."); // Display the error message
                                        }
                                    });

                                    if (!filesSelected) {
                                        return; // Prevent advancing to the next step
                                    }

                                    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 fieldset 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 fieldset 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) {
                                        $('.error')
                                            .removeClass('hide')
                                            .find('.alert')
                                            .text(response.error.message);
                                    } 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>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection