@extends('layouts.app')
@section('metades')
<meta name="description" content="{{$data['metaDescription']}}" />
<meta name="author" content="{{$data['metaTitle']}}" />
<meta name="keywords" content="{{$data['metaKeyword']}}" />

<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://www.mdpl.co/contact-us/">
<meta property="og:type" content="website">
<meta property="og:title" content="Contact Us">
<meta property="og:description" content="Contact Us">
<meta property="og:image" content="https://mdpl.coundefined">

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="mdpl.co">
<meta property="twitter:url" content="https://www.mdpl.co/contact-us/">
<meta name="twitter:title" content="Contact Us">
<meta name="twitter:description" content="Contact Us">
<meta name="twitter:image" content="https://mdpl.coundefined">

<!-- Meta Tags Generated via https://www.opengraph.xyz -->

@endsection
@section('title')
<title>{{$data['metaTitle']}}</title>
@endsection
@section('css')
@endsection
@section('content')
<div class="hs_page_title">
    @foreach ($data['moduleItems'] as $item)
		@if ($item['id'] == '927')
		<div class="container">
			<h3>{{ $item['title'] }}</h3>
			<ul>
				<li><a href="{{url('/')}}">{{__('HOME')}}</a></li>
				<li><a href="{{url('/contact-us')}}">{{ $item['title'] }}</a></li>
			</ul>
		</div>
		@endif
    @endforeach
</div>
<div class="container float-left">
    <div class="row">
		@foreach ($data['moduleItems'] as $item)
			@if ($item['id'] == '917')
				<div class="col-lg-8 col-md-7 col-sm-7">
					<h4 class="hs_heading">{{__('Leave a Message')}}</h4>
					@if(Session::has('message'))
					<p class="alert alert-info text-center">{{ Session::get('message') }}</p>
					@endif
					<form class="hs_comment_form" action="{{ route('contactUsSave') }}" method="POST">
						@csrf
						<div class="row">
							<div class="col-lg-6 col-md-6 col-sm-12">
								<div class="input-group">
									<span class="input-group-btn">
										<button class="btn btn-success" type="button"><i class="fa fa-user"></i></button>
									</span>
									<input id="name" name="fname" type="text" class="form-control" placeholder="Full Name" pattern="^[a-zA-Z\s]{1,100}$" />
								</div>
							</div>
							<div class="col-lg-6 col-md-6 col-sm-12">
								<div class="input-group">
									<span class="input-group-btn">
										<button class="btn btn-success" type="button"><i class="fa fa-envelope"></i></button>
									</span>
									<input id="email" name="email" type="text" class="form-control" placeholder="Email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" />
								</div>
							</div>
							<div class="col-lg-6 col-md-6 col-sm-12">
								<div class="input-group">
									<input type="date" id="datePicker" name="date" class="form-control">
								</div>
							</div>
							<div class="col-lg-6 col-md-6 col-sm-12">
								<!-- <div class="input-group">
									<input type="text" id="case" name="case" class="form-control" placeholder="Case" pattern="^[a-zA-Z\s]{1,100}$" />
								</div> -->
							</div>
							<div class="col-lg-12">
								<div class="form-group">
									<div class="tophead56">
										<label for="usr">{{ $item['title'] }}</label>
										<div class="input-group">
											<input type="text" id="case" name="case" class="form-control price_append" placeholder="price" pattern="^[a-zA-Z\s]{1,100}$" />
										</div>
									</div>
									<div class="radio service_row">
                                        @if (count($item['dynamicSections'])> 0 )
                                             <ul class="nav nav-tabs">
                                                @foreach($item['dynamicSections'] as $dk => $dynamicSection)
                                                    <li class="@if($dk==0) active @endif">
                                                        <a data-toggle="tab" href="#newscan-{{$dk}}">{{ $dynamicSection['title'] }}</a>
                                                    </li>
                                                @endforeach
                                            </ul>
                                            <div class="tab-content" style="border-bottom: 0">
                                                @if(count($dynamicSection['subSections'])> 0 )
                                                    @foreach($item['dynamicSections'] as $dk => $dynamicSection)
                                                        <div id="newscan-{{$dk}}" class="tab-pane fade in @if($dk==0) active @endif">
                                                        <h3>{{ $dynamicSection['title'] }}</h3>
                                                        <div class="form-group">
                                                            <input type="hidden" name="selected_scan_id" id="selected_scan_id" value="{{$dk}}">
                                                            <select class="form-control select_scan selectnewscanid" name="select_scan" id="select_scan-{{$dk}}" style="display:block;">
                                                                <option value="">--Select hospital--</option>
                                                                @foreach($dynamicSection['subSections'] as $subSection)
                                                                    <option value="{{$subSection['id']}}:{{$subSection['shortText']}}">{!! html_entity_decode($subSection['description']) !!} </option>
                                                                @endforeach
                                                                </select>
                                                                <span id="error_scan" style="color: #FF0000;"> </span>
                                                            </div>
                                                        </div>
                                                        @foreach($dynamicSection['subSections'] as $key=>$subSection)
                                                            <input type="hidden" name="selected_price_id" id="selected_price_id" value="{{$key}}">
                                                            <input type="hidden" value="{{$subSection['shortText']}}" id="new_price-{{$key}}" class="new_price">
                                                        @endforeach
                                                    @endforeach
                                                @endif
                                            </div>
                                        @endif
									</div>
									<span id="error_hospital" style="color: #FF0000 "></span>
								</div>
							</div>
							<div class="col-lg-12">
								<div class="form-group">
									<textarea id="message" name="message" class="form-control" rows="8"></textarea>
								</div>
							</div>
							<p id="err"></p>
							<div class="form-group">
								<div class="col-lg-8 col-md-8 col-sm-12">
									<div class="checkbox">
										<label>
											<input type="checkbox" id="hs_checkbox" name="hscheckbox" class="css-checkbox lrg" checked="checked" />
											<label for="hs_checkbox" name="checkbox69_lbl" class="css-label lrg hs_checkbox">{{__('Receive Your Comments By Email')}}</label>
										</label>
										<div class="g-recaptcha" id="rcaptcha" data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}" data-callback="recaptchaCallback"></div>
										@if ($errors->has('g-recaptcha-response'))
										<span class="text-danger">{{ $errors->first('g-recaptcha-response') }}</span>
										@endif
									</div>
								</div>
								<div class="col-lg-4 col-md-6 col-sm-12">
									<input type="hidden" id="phone" name="phone" />
									<input type="hidden" id="url" name="url" />
									<input type="hidden" id="date" name="date" />
									<button id="em_sub" class="btn btn-success pull-right btn-gap" type="button">{{__('Send')}}</button>
								</div>
							</div>
						</div>
					</form>
				</div>
			@endif
		@endforeach
        @foreach ($data['moduleItems'] as $item)
        @if ($item['id'] == '918')
        <div class="col-lg-4 col-md-6 col-sm-12">
            <h4 class="hs_heading">{{ $item['title'] }}</h4>
            <div class="hs_contact">
                @if (count($item['dynamicSections']) > 0)
                @foreach ($item['dynamicSections'] as $dynamicSection)
                <ul>
                    <li>
                        <i class="{{ $dynamicSection['cssClass'] }}"></i>
                        <p>{!! html_entity_decode($dynamicSection['description']) !!}</p>
                        {{-- <p>{!! html_entity_decode($dynamicSection['longDescription']) !!}</p> --}}
                    </li>
                </ul>
                @endforeach
                @endif
            </div>
            <div class="hs_contact_social">
                <div class="hs_profile_social">
                    <ul>
                        <li><a href="https://www.facebook.com/mdpl.co" target="_blank"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="https://twitter.com/mdpl_co" target="_blank"><i class="fa fa-twitter"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
        @endif
        @endforeach
    </div>
    <div class="clearfix"></div>
</div>
@endsection
@section('js')
@endsection
@push('scripts')
<script src="https://www.google.com/recaptcha/api.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready( function() {
    var now = new Date();
    var month = (now.getMonth() + 1);               
    var day = now.getDate();
    if (month < 10) 
        month = "0" + month;
    if (day < 10) 
        day = "0" + day;
    var today = now.getFullYear() + '-' + month + '-' + day;
    $('#datePicker').val(today);
});
</script>
<script>
    $(document).ready(function() {
        err_name = true;
        err_date = true;
        err_email = true;
        err_message = true;
        err_case = true;
        err_select_scan = true;

        $("#name").keyup(function() {
            name_check_fun();
        });

        $("#email").keyup(function() {
            email_check_fun();
        });

        $("#slider_date").blur(function() {
            date_check_fun();
        });

        $("#case").keyup(function() {
            case_check_fun();
        });

        $("#message").keyup(function() {
            message_check_fun();
        });

        $("#select_scan").change(function() {
            select_scan_check_fun();
        });

        function name_check_fun() {
            let k = $("#name").val();
            let val = k.trim();
            if (val.length == "") {
                $("#name").css("border", "2px solid red")
                err_name = false;
                return false;
            } else {
                $("#name").css("border", "2px solid green")
                err_name = true;
            }
        }

        function date_check_fun() {
            let k = $("#slider_date").val();
            let val = k.trim();
            if (val.length == "") {
                $("#slider_date").css("border", "2px solid red")
                err_date = false;
                return false;
            } else {
                $("#slider_date").css("border", "2px solid green")
                err_date = true;
            }
        }

        function email_check_fun() {
            const regex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/i;
            let k = $("#email").val();
            let val = k.trim();
            if (val.length == "") {
                $("#email").css("border", "2px solid red")
                err_email = false;
                return false;
            } else if (!regex.test(val)) {
                $("#email").css("border", "2px solid red")
                err_email = false;
                return false;
            } else {
                $("#email").css("border", "2px solid green")
                err_email = true;
            }
        }

        function case_check_fun() {
            let k = $("#case").val();
            let val = k.trim();
            if (val.length == "") {
                $("#case").css("border", "2px solid red")
                err_case = false;
                return false;
            } else {
                $("#case").css("border", "2px solid green")
                err_case = true;
            }
        }

        function message_check_fun() {
            let k = $("#message").val();
            let val = k.trim();
            if (val.length == "") {
                $("#message").css("border", "2px solid red")
                err_message = false;
                return false;
            } else {
                $("#message").css("border", "2px solid green")
                err_message = true;
            }
        }

        function select_scan_check_fun() {
            let k = $("#select_scan").val();
            let val = k.trim();
            if (val.length == "") {
                $("#select_scan").css("border", "2px solid red")
                err_select_scan = false;
                return false;
            } else {
                $("#select_scan").css("border", "2px solid green")
                err_select_scan = true;
            }
        }

        $("#em_sub").click(function() {
            err_name = true;
            err_date = true;
            err_email = true;
            err_message = true;
            err_case = true;
            err_select_scan = true;
            name_check_fun();
            email_check_fun();
            message_check_fun();
            date_check_fun();
            select_scan_check_fun();
            case_check_fun();

            if ((err_name == true) && (err_email == true) && (err_date == true) && (err_message == true) &&
                (err_case == true) && (err_select_scan == true)) {
                return true;
            } else {
                return false;

            }

        });
    });
</script>
<script>
    function recaptchaCallback() {
        $("#em_sub").attr("type", "submit")
    }
</script>
<script>
    $(document).ready(function() {
        setTimeout(function() {
            $('#topManu ul#bs-example-navbar-collapse-1 li a#Contact-Us-top').addClass('active');
        }, 2000);
    });
</script>
<script>
    var selected_scan_id = $('#selected_scan_id').val();
    $(document).on('change', '.selectnewscanid', function() {
        var selected_scan = $(this).val();
        var idAndPrice = selected_scan.split(":")
        let id = idAndPrice[0];
        let price = idAndPrice[1];
        $("#case").val(price)
        //    var new_price_id = $('#selected_price_id').val()
        //    var new_price = $('#new_price'+'-'+new_price_id).val();
       $(".price_append").val(new_price);
    });
</script>

@endpush