@extends('order.layouts.app')
@section('title', config('variables.SITE_NAME_TEXT'))
@section('content')
    <section class="page-title">
        <div class="container">
            <h1>Let's Get Started with Your Project</h1>
            <p>Please Provide the information requested below.</p>
        </div>
    </section>
    <section class="steps-seq">
        <div class="container">
            @php
                $actionText = strpos(getSessionValue('package_details')['sku'],'WEB') === false ? (strpos(getSessionValue('package_details')['sku'],'LOGO')  === false ? '' : 'Logo Brief') : 'Web Brief';
            @endphp
            <ul id="progressbar">
                <li class="active" @if($actionText == ""){} @endif><h4>Order Now</h4></li>
                  @if($actionText != "")
                    <li class="progressbar-2"><h4 id="dynamicValue">{{ $actionText }}</h4></li>
                  @endif
                <li class="color" @if($actionText == ""){} @endif><h4>Payment</h4></li>
            </ul>
        </div>
    </section>
    <section class="content-seq">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-lg-9">
                    <div class="row" style="display: flex;flex-wrap: wrap;">
                        <div class="col-md-6 col-lg-5">
                            <div class="boxpackages">
                                <div class="packheads">
                                    <div class="productSku" style="display: none;">{{ getSessionValue('package_details')['sku'] }}</div>
                                    <h3 class="montfont packageName">{{ getSessionValue('package_details')['title'] }}</h3>
                                </div>
                                <div class="packdetails">
                                    <div class="packtitles">
                                        <div class="fleft">
                                            <h3 class="opensansfont packagePrice">{{ getSessionValue('package_details')['priceText'] }}</h3>
                                        </div>
                                    </div>
                                    <div class="listpacks">
                                        {!! getSessionValue('package_details')['html_description'] !!}
                                    </div>
                                    <div class="botarea-pack">
                                        <div class="liovechats-bx">
                                            <a href="javascript:void(0);" title="" class="chat">
                                                <span>Click here to</span>
                                                <h5 class="montfont">Live Chat</h5>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-lg-7" data-form-type="ordernow_form">
                            <form id="orderForm" class="leadForm" method="post" enctype="multipart/form-data" action="javascript:void(0)">
                                <!--hidden required values-->
                                <input type="hidden" id="formType" name="formType">
                                <input type="hidden" id="referer" name="referer">
                                <input type="hidden" value="{{ getSessionValue('package_details')['sku'] }}" name="customers_meta[package_sku]">
                                <input type="hidden" name="customers_meta[selected_package]" value="{{ getSessionValue('package_details')['title'] }}">
                                <input type="hidden" name="customers_meta[package_price]" value="{{ getSessionValue('package_details')['priceText'] }}">
                                <input type="hidden" id="package_sku" name="customers_meta[sku]" value="{{ getSessionValue('package_details')['sku'] }}">
                
                                <div class="col-md-12 form-sec step-1-form">
                                    <h4>Please Fill the Form</h4>
                                    <ul>
                                        <li>
                                            <label>Name <span class="req-field-star">*</span></label>
                                            <input type="text" name="name" placeholder="Name" data-validation="required">
                                        </li>
                                        <li>
                                            <label>Email Address <span class="req-field-star">*</span></label>
                                            <input type="email" name="email" placeholder="Address" data-validation="email">
                                        </li>
                                        <li>
                                            <label>Phone Number <span class="req-field-star">*</span></label>
                                            <input type="tel" name="phone" placeholder="Phone Number" data-validation="number" maxlength="10" onkeyup="javascript: this.value = this.value.replace(/[^0-9]/g,'');">
                                        </li>
                                        <li>
                                            <div class="g-recaptcha leadCaptcha" id="mainFormCaptcha" data-validation="required"></div>
                                            <span id="mainFormCaptchaError"></span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-md-12 form-sec ">
                                    <ul>
                                        <li class="submit-btn">
                                            <div id="formResult"></div>
                                            <button type="submit" class="tbtn btn-red a-btn"
                                                id="signupBtn" name="signupForm">SUBMIT
                                            </button>
                                        </li>
                                    </ul>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-lg-3 sidebar">
                    <h2><span>Need</span> Assistance?</h2>
                    <ul>
                        <li>
                         <a href="tel:{{ config('variables.SITE_PHONE_NUMBER') }}">
                             <i class="fa fa-phone" aria-hidden="true"></i>
                             <span>Toll Free:</span> 
                             {{ config('variables.SITE_PHONE_NUMBER') }}
                            </a> 
                        </li>
                        <li>
                            <a href="javascript:void(0)" class="chat">
                                <i class="fa fa-comments" aria-hidden="true"></i>
                                <span>Live Chat:</span>with our design expert
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')
    <script src="{{ asset('assets/js/ledge/leadManagement.js') }}"></script>
@endsection