@extends('layouts.mainlayout')

@php $websitedata=get_website(); @endphp
@section('title',$page->metatitle??$websitedata->default_metatitle)
@section('description',$page->metadescription??$websitedata->default_metadescription)
@section('keywords', $page->metakeywords??$websitedata->default_metakeywords)

<!-- Open Graph / Facebook -->
@section('og:title',$product2->title ??$websitedata->default_metatitle)
@section('og:description',$product2->description ??$websitedata->default_metadescription)
@if(!empty($product2)  && !empty($product2->assets->first()->image))
@section('og:image',Storage::cloud()->temporaryUrl('ycs/products/assets/'.$product2->assets->first()->image , now()->addDays(6)) ??$websitedata->default_metadescription)
@endif
<!-- Twitter -->
@section('twitter:title',$product2->title ??$websitedata->default_metatitle)
@section('twitter:description',$product2->description ??$websitedata->default_metadescription)
@if( !empty($product2) && !empty($product2->assets->first()->image))
@section('twitter:image',Storage::cloud()->temporaryUrl('ycs/products/assets/'.$product2->assets->first()->image , now()->addDays(6)) ??$websitedata->default_metadescription)
@endif
@section('content')


@section('content')
@section('content')

  <!--page header section start-->
  <section class="page-header-section ptb-100 bg-image" image-overlay="8">
    <div class="background-image-wraper" style="background: url('assets/img/slider-bg-1.jpg'); opacity: 1;"></div>
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-9 col-lg-7">
                <div class="page-header-content text-white pt-4">
                    <h1 class="text-white mb-0">Request a quote</h1>
                    <!--
                    <p class="lead">This privacy statement provides information about your personal information that “ycsols”, or “we”, “us” “it’s joint ventures”, and “other corporate entities” working with us in collaboration collect, and how Ycsols and all above-mentioned use this information. Our major products where you would be adding your information are your cloud solutions, Nsol, Your cloud campus, Trulie, and similar other products so on and so forth.</p>
                -->
                </div>
            </div>
        </div>
    </div>
</section>
<!--page header section end-->

<!--breadcrumb section start-->
<div class="breadcrumb-bar gray-light-bg border-bottom">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="custom-breadcrumb">
                    <ol class="breadcrumb pl-0 mb-0 bg-transparent">
                        <li class="breadcrumb-item"><a href="{{route('home')}}">Home</a></li>
                        <li class="breadcrumb-item active">Request a quote</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>
<!--breadcrumb section end-->











<!--our contact section from partials/contact-section start-->
<section id="contact" class="contact-us-section ptb-100">
    <div class="container">
        <div class="row justify-content-around">
            <div class="col-12 pb-3 message-box d-none">
                <div class="alert alert-danger"></div>
            </div>
            <div class="col-md-12 col-lg-6 mb-6 mb-md-6 mb-sm-6 mb-lg-0">
                <div class="contact-us-form gray-light-bg rounded p-5">
                    <h4>Ready to Join Today?</h4>
                    <form action="#" method="POST" id="getatrialform" class="contact-us-form">
                        @csrf
                        <span id="getatrialform_result"></span>
                        <div class="form-row">

                            <div class="col-12">
                                <div class="form-group">
                                    <input type="text" class="form-control" name="name" placeholder="Full Name" required="required">
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                    <input type="email" class="form-control" name="email" placeholder="Email Address" required="required">
                                </div>
                            </div>
                               <div class="col-12">
                  <div class="form-group">
                    <select class=" required-field form-control" name="country" id="country" required="">
                        @php $countries=get_countries(); @endphp
                        <option value="">Select Country</option>
                        @foreach($countries as $country)

                            <option value="{{$country->name}}">{{$country->name}}</option>
                        @endforeach
                    </select>
                  </div>
                            </div>

                          <!--   <div class="col-12">
                                <div class="form-group">
                                    <input type="text" class="form-control" name="phone_number" placeholder="Phone Number" required="required">
                                </div>
                            </div> -->

                           <input type="hidden"  id="code" name ="code" value="92" >
                            <div class="col-12">
                                <div class="form-group">
                                    <input type="tel" class="form-control" name="phone_number"  placeholder="" id="telephone">
                                </div>
                            </div>


                            <div class="col-12">
                                <div class="form-group">
                                    <select class=" required-field form-control" name="subject" id="subject">
                                        <option value="">Select BPO Service</option>
                                        @php $subjects=get_subjects(); @endphp
                                            @foreach($subjects as $subject)
                                                <option value="{{$subject->courses}}">{{$subject->courses}}</option>
                                            @endforeach 
                                             @php $products=get_products(); @endphp
                                            @foreach($products as $product)
                                                <option value="{{$product->title}}">{{$product->title}}</option>
                                            @endforeach
                                            <option value="Investment Pool">Investment Pool</option>        
                                    </select>
                               </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                    <textarea name="message" id="message" class="form-control" rows="7" cols="25" placeholder="Message"></textarea>
                                </div>
                            </div>
                            <div class="col-sm-12 mt-3">
                                <button type="submit" class="btn btn-brand-02" id="btnContactUs">
                                    Send Message
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            @if(!empty($product) && !empty($user))
            <div class="col-md-12 col-lg-6">
                <div class="contact-us-content mt-5">
                    {{-- <h4>Product refer detail</h4> --}}
                   {{--  <p class="lead">Give us a call or drop by anytime, we endeavour to answer all enquiries within 24 hours on business days.</p>

                    <a href="#" class="btn btn-outline-brand-01 align-items-center">Get Directions <span class="ti-arrow-right pl-2"></span></a> --}}
                    <ul class="contact-info-list">
                       
                        <li class="d-flex pb-1">
                            <div class="contact-icon mr-3">
                                <span class="fas fa-user color-primary rounded-circle p-3"></span>
                            </div>
                            <div class="contact-text">
                                <h5 class="mb-1">Refered by </h5>
                                <p>
                                   {{$user->fname.' '.$user->lname}}
                                </p>
                            </div>
                        </li>
                    </ul>
                   
                    <hr class="my-2">

                    <ul class="contact-info-list">
                        <li class="d-flex pb-3">
                            <div class="contact-icon mr-3">
                                <span class="fab fa-product-hunt color-primary rounded-circle p-3"></span>
                            </div>
                            <div class="contact-text">
                                <h5 class="mb-1">Refered product</h5>
                                <p>
                                   {{$product->title}}
                                </p>
                                <p>
                                    {!! $product->description  !!}
                                </p>
                            </div>
                        </li>
                       
                    </ul>

                </div>
            </div>
            @endif
        </div>
    </div>
</section>
<!--our contact section from partials/contact-section end-->

        <!--our contact promo from partials/contact-section start-->
<section class="promo-section pt-100 ">
    <div class="container">
        <div class="row justify-content-md-center justify-content-sm-center">
            <div class="col-md-6 col-lg-4">
                <div class="card single-promo-card shadow-sm text-center p-3 my-3">
                    <div class="card-body">
                        <div class="pb-2">
                            <span class="fas fa-envelope icon-size-lg color-primary"></span>
                        </div>
                        <div class="pt-2 pb-3">
                            <h5>Mail Us</h5>
                            <p class="mb-0">Say something to start a live chat info@ycsmarketplace.com</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="card single-promo-card shadow-sm text-center p-3 my-3">
                    <div class="card-body">
                        <div class="pb-2">
                            <span class="fas fa-headset icon-size-lg color-primary"></span>
                        </div>
                        <div class="pt-2 pb-3">
                            <h5>24/7 Live Chat</h5>
                            <p class="mb-0">We endeavour to answer all enquiries within 24 hours on business days.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4">
                <div class="card single-promo-card shadow-sm text-center p-3 my-3">
                    <div class="card-body">
                        <div class="pb-2">
                            <span class="fas fa-map-marker-alt icon-size-lg color-primary"></span>
                        </div>
                        <div class="pt-2 pb-3">
                            <h5>Visit Us</h5>
                            <p class="mb-0">Rupyal Plaza, Murree Road, Rawalpindi, Pakistan.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--our contact promo from partials/contact-section end-->

<!--our google map section from partials/contact-section start-->
<div class="google-map">
    <iframe src="https://maps.google.com/maps?width=100%25&amp;height=600&amp;hl=en&amp;q=Rupyal%20Plaza,%20Murree%20Road,%20Rawalpindi,%20Pakistan+(YCS%20Marketplace)&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed" height="450" style="border:0;" allowfullscreen=""></iframe>
</div>
<!--our google map section from partials/contact-section end-->




<!--                             <div class="action-btns mt-4">
                        <a href="#" class="btn btn-brand-02 mr-3">Get Start Now</a>
                        <a href="#" class="btn btn-outline-brand-02">More About Us</a>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</section>

@push('scripts')


<script type="text/javascript">
    // Vanilla Javascript
var input = document.querySelector("#telephone");
window.intlTelInput(input,({

}));

// jQuery 
// $("#telephone").intlTelInput({
//  separateDialCode: true,
// });

$(document).ready(function () {
        $("#telephone").intlTelInput({
            separateDialCode: false,
            initialCountry: ""
        }).on('countrychange', function (e, countryData) {
            $("#code").val(($("#telephone").intlTelInput("getSelectedCountryData").dialCode));

        });
    });

</script>

<script>
    $(document).ready(function () {
        $('#getatrialform').on('submit', function (e) {
            e.preventDefault();
            $.ajax({
                "url": "{{route('savetrial')}}",
                type: "POST",
                data: new FormData(this),
                contentType: false,
                cache: false,
                processData:false,
                statusCode: {
                    403: function () {
                        swal("Failed", "Permission deneid for this action.", "error");
                        return false;
                    }
                },
                success: function (data) {
                    var html = '';
                    if(data.errors)
                    {
                        html = '<div class="alert alert-danger">';
                        for(var count = 0; count < data.errors.length; count++)
                        {
                            html += '<p>' + data.errors[count] + '</p>';
                        }
                        html += '</div>';
                        $('#getatrialform_result').html(html);
                        $('html, body').animate({ scrollTop: $('#getatrialform_result').offset().top-50 }, 'slow');

                    }
                    if(data.success)
                    {
                        html = '<div class="alert alert-success">' + data.success + '</div>';
                        $('#getatrialform')[0].reset();
                        $('#getatrialform_result').html(html);
                        $('html, body').animate({ scrollTop: $('#getatrialform_result').offset().top-70 }, 'slow');
                    }

                },
                error: function () {
                },
            });
        });
    });
</script>
@endpush
@endsection