@extends('frontend.home')
@section('content')

    <link href="{{asset('css/services.css')}}" rel="stylesheet">

    <style>
        textarea:-webkit-autofill, select:-webkit-autofill {
            background-color: transparent;
        }

        .search-bar {
            -moz-transition: all 0.5s cubic-bezier(0.7, 0.03, 0.17, 0.97) 0.25s;
            -o-transition: all 0.5s cubic-bezier(0.7, 0.03, 0.17, 0.97) 0.25s;
            -webkit-transition: all 0.5s cubic-bezier(0.7, 0.03, 0.17, 0.97);
            -webkit-transition-delay: 0.25s;
            transition: all 0.5s cubic-bezier(0.7, 0.03, 0.17, 0.97) 0.25s;
            position: relative;
            width: 300px;
            height: 50px;
            margin: 0 auto;
        }

        .search-bar input {
            outline: none;
            box-shadow: none;
            height: 120px;
            line-height: 50px;
            width: 350%;
            padding: 0 1.22em;
            box-sizing: border-box;
            background: transparent;
            color: white;
            border: 4px solid white;
            border-radius: 50px;
            margin-left: -425px;
            font-size: 50px;
            letter-spacing: 8px;
        }
    </style>
    <meta name="csrf-token" content="{{ csrf_token() }}"/>

    <div id="banner">
        <div class="banned" data-bg-img="{{asset('img/bottomimage.jpg')}}"></div>
        <div class="vc-parent">
            <div class="vc-child">
                <div class="banner--item">
                    <div class="container">
                        <div class="row">
                            <div class="banner--content">
                                <h3>Register Your Idea Online Today.</h3>
                                <p style="font-size: 25px;">No matter what your idea, we have a Domain Name and hosting
                                    plan
                                    to suit you.</p>
                                <div id="search-bar" class="search-bar">
                                    <form action="{{route('domainCheck')}}">
                                        <input type="text" name="domain"/>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<section>
    <div class="container" style="    margin-top: 50px;
padding-bottom: 40px;">
        <div class="row">
            <h3>{{ $result_text }}</h3>
            <br>
            <div class="col-md-10 offset-md-1">
                @foreach($results as $result)
                <ul class="job-list">
                    <li class="job-preview">
                        <div class="content float-left">
                            <h4 class="job-title">
                                Domain avaliable: {{substr($result, 0, strpos($result, "="))}} => {{get_local_currency_prefix()}}{{get_local_currency(substr($result, strpos($result, ">") + 1)) }}
                            </h4>
                        </div>
                        <a href="{{ route('cart.edit', [str_random(3).",".$service->first()->slug, $service->first()->name. " ". $result ]) }}" class="btn btn-apply float-sm-right float-xs-right">
                            Add to Cart
                        </a>
                        <img src="{{ asset('img/available.jpg') }}" class="float-sm-right" style="width:50px;height:43px;">
                    </li>
                </ul>
                @endforeach
            </div>
        </div>
    </div>
</section>
@push('scripts')
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript"
            src="{{ asset('js/libs/jquery-validation/dist/jquery.validate.min.js') }}"></script>
    <script type="text/javascript"
            src="{{ asset('js/libs/jquery-validation/dist/additional-methods.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('js/domain_validation.min.js') }}"></script>
    <script>
        var searchBarInput = $("#searchBarInput");
        var clearSearchBtn = $(".clearSearchBarField");

        $(document).ready(function () {
            searchBarInput.keyup(function () {
                if ($(this).val().length === 0) {
                    clearSearchBtn.hide()
                } else {
                    clearSearchBtn.show()
                }
            });
        });

        function resetInput() {
            clearSearchBtn.hide();
            searchBarInput.val('').focus();
        }
    </script>
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
@endpush

@endsection