@extends('order.layouts.app')
@section('title', config('variables.SITE_NAME_TEXT'))


@section('style')
    <style>
        section.steps-seq ul li.first:after {
            background: linear-gradient(to right, #f70343, rgba(106, 29, 109, 0.8));
            color: #fff;
            text-align: center;
        }
        .boxpackages {
        height: auto;
        background: #fff;
        border-radius: 15px;
        padding: 20px 10px 0px;
        position: sticky;
        top: 15px;
    }
    .boxpackages .packdetails {
        padding: 10px 0 0;
        position: relative;
        height: 430px;
    }
    .packdetails .listpacks li {
        position: relative;
        padding: 5px 20px 0px;
        font-size: 14px;
        color: #455164;
        margin-bottom:0;
        width: 100%;
    }
    .packdetails .listpacks ul:first-child{
        display: block;
    width: 100%;
    float: left;
    padding: 15px 0 10px;
    margin: 0;
    border-bottom: 0;
    height: 274px !important;
    }
    .mCSB_outside + .mCSB_scrollTools{ right:0; }
    .slimScrollBar{ display: none !important; }

    </style>
@endsection
@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">
            <ul id="progressbar">
                <li style="width: 33%"><h4>Order Now</h4></li>
                <li class="active" style="width: 33%"><h4>Logo Brief</h4></li>
                <li style="width: 33%"><h4>Payment</h4></li>
            </ul>
        </div>
    </section>

    <section class="content-seq">
        <div class="container">
            <div class="row">
                <div class="col-md-9">
                    <div class="row" style="display: flex;flex-wrap: wrap;">
                        <div class="col-md-12">
                            <form id="briefForm" method="post" enctype="multipart/form-data" action="javascript:void(0)">
                                <input type="hidden" class="form-control" name="orders_meta[customer_name]" value="{{ getSessionValue('user_detail')['name'] }}">
                                <input type="hidden" class="form-control" name="orders_meta[customer_email]" value="{{ getSessionValue('user_detail')['email'] }}">
                                <input type="hidden" class="form-control" name="orders_meta[customer_phone]" value="{{ getSessionValue('user_detail')['phone'] }}">
                                <input type="hidden" value="logoBriefForm" name="orders_meta[form_id]">
                                <input type="hidden" value="Logo Brief" name="orders_meta[form_name]">
                                <div class="col-md-12 form-sec step-1-form logo-brief-form">
                                    <h4 style="margin-bottom: 30px">Logo Brief</h4>
                                    <ul>
                                        <li>
                                            <label>IS THIS A RE-DESIGN OR A NEW LOGO? <span class="req-field-star">*</span></label>
                                            <input type="text" name="orders_meta[logo_info]" placeholder="" class="required">
                                        </li>
                                        <li>
                                            <label>SELECT WHAT TYPE(S) OF YOUR LOGO SHOULD BE LOOK LIKE?</label>
                                            <div class="select-logo">
                                                <input type="hidden" name="orders_meta[selected_logo]" id="logoSelect" value="">
                                                <ul class="list-inline">
                                                    <li>
                                                        <i>
                                                            <img selected="0" class="bordr" src="{{ asset('assets/order/img/sony-e-log.jpg') }}" width="151" height="151" alt="">
                                                        </i>
                                                        <p>high-tech</p>
                                                    </li>
                                                    <li>
                                                        <i>
                                                            <img selected="0" class="bordr" src="{{ asset('assets/order/img/anderoid-pic.jpg') }}" width="151" height="151" alt="">
                                                        </i>
                                                        <p>minimalist</p>
                                                    </li>
                                                    <li>
                                                        <i>
                                                            <img selected="0" class="bordr" src="{{ asset('assets/order/img/cola-pic.jpg') }}" width="151" height="151" alt="">
                                                        </i>
                                                        <p>typography</p>
                                                    </li>
                                                    <li>
                                                        <i>
                                                            <img selected="0" class="bordr" src="{{ asset('assets/order/img/mico-pic.jpg') }}" width="151" height="151" alt="">
                                                        </i>
                                                        <p>corporate</p>
                                                    </li>
                                                    <li>
                                                        <i>
                                                            <img selected="0" class="bordr" src="{{ asset('assets/order/img/kfc-log.jpg') }}" width="151" height="151" alt="">
                                                        </i>
                                                        <p>illustrative</p>
                                                    </li>
                                                    <li>
                                                        <i>
                                                            <img selected="0" class="bordr" src="{{ asset('assets/order/img/gn-lo.jpg') }}" width="151" height="151" alt="">
                                                        </i>
                                                        <p>initials</p>
                                                    </li>
                                                    <li>
                                                        <i>
                                                            <img selected="0" class="bordr" src="{{ asset('assets/order/img/fanta-log.jpg') }}" width="151" height="151" alt="">
                                                        </i>
                                                        <p>fun</p>
                                                    </li>
                                                    <li>
                                                        <i>
                                                            <img selected="0" class="bordr" src="{{ asset('assets/order/img/egale-log.jpg') }}" width="151" height="151" alt="">
                                                        </i>
                                                        <p>sporty</p>
                                                    </li>
                                                    <li>
                                                        <i>
                                                            <img selected="0" class="bordr" src="{{ asset('assets/order/img/porch-log.jpg') }}" width="151" height="151" alt="">
                                                        </i>
                                                        <p>shield</p>
                                                    </li>
                                                </ul>
                                            </div>
                                        </li>
                                        <li>
                                            <label>WORD/NAME THAT YOU WANT IN LOGO TO APPEAR (TYPE IN EXACTLY AS YOU WANTED).<span class="req-field-star">*</span></label>
                                            <input type="text" placeholder="" class="required" required name="orders_meta[brief_text]" required="">
                                        </li>
                                        <li>
                                            <label>TAGLINE THAT YOU WANT IN LOGO TO APPEAR.</label>
                                            <input type="text" name="orders_meta[brief_tagline]" placeholder="">
                                        </li>
                                        <li>
                                            <label>PLEASE PROVIDE A BRIEF DESCRIPTION OF YOUR BUSINESS. YOU MAY ALSO WANT TO LIST WEBSITE ADDRESSES OF YOUR COMPETITORS, IF ANY.</label>
                                            <input type="text" name="orders_meta[brief_Description]" placeholder="">
                                        </li>

                                        <li>
                                            <label>ANYTHING THAT YOU DO NOT LIKE AND WE SHOULD AVOID THAT IN OUR DESIGN CONCEPT. (COLOR, PICTURE OR CERTAIN NATURE, ETC)</label>
                                            <input type="text" name="orders_meta[design_concept]" placeholder="">
                                        </li>
                                        <li>
                                            <label>EXISTING WEBSITE ADDRESS, IF ANY</label>
                                            <input type="text" name="orders_meta[existing_website]" placeholder="">
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-md-12 form-sec ">
                                    <ul>
                                        <li class="submit-btn">
                                            <div id="formResult"></div>
                                            <button type="submit" class="btn btn-red a-btn" id="briefFormBtn">Continue</button>
                                        </li>
                                    </ul>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 sidebar">
                    <h2><span>Need</span> Assistance?</h2>
                    <ul>
                        <li>
                            <i class="fa fa-phone" aria-hidden="true"></i>
                            <span>Toll Free:</span> {{ config('variables.SITE_PHONE_NUMBER') }}
                        </li>
                        <li>
                            <a href="javascript:;" class="chat">
                                <i class="fa fa-comments" aria-hidden="true"></i>
                                <span>Live Chat:</span>with our design expert
                            </a>
                        </li>
                    </ul>
                    <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>
        </div>
    </section>
@endsection

@section('script')
    <script src="{{ url('assets/js/minify/briefManagement-min.js') }}"></script>
@endsection