@extends('web.layouts.app')
@section('title') Widex || {{@$seo->title}} @endsection
@section('meta_description')
  <meta property="og:title" content="{{@$seo->title}}">
    @if(@$seo->og_image)
     <meta property="og:image" content="{{asset('images/seos')}}/{{@$seo->og_image}}">
    @else
        <meta property="og:image" content="{{asset('public/web/images/Image-Edit-Expert.png')}}">
    @endif
     <meta name="description" content="{{@$seo->meta_desc}}">
     <meta name="og:url" content="{{@$seo->og_url}}">
@endsection

@section('css')
@endsection

@section('content')

    <!--=============== Blog Section ============-->
    <section class="py-5">
        <div class="container">
            @if ($message = Session::get('order_success'))
                <div class="row" id="hideThis">
                    <div class="alert alert-success alert-dismissible" style="position: absolute;top:135px;right: 22px;">
                        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                      <strong>Thanks!</strong> {{$message}}
                    </div>
                </div>
            @endif
            <div class="row mb-3">
                <div class="col text-center">
                    <h1 title="Book an Appointment">Book an Appointment</h1>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col"> 
                    {!!$seo->p_desc!!}
                </div>
            </div>
            @if($errors)
             <div class="row mt-2 mb-3">
                <div class="col"> 
                    <ul>
                    @foreach ($errors->all() as $error)
                          <li class="text-danger">{{ $error }}</li>
                      @endforeach
                  </ul>
                </div>
            </div>
           @endif
            @if ($message = Session::get('success'))
                <div class="row" id="hideThis">
                    <div class="alert alert-success alert-dismissible" style="position: absolute;top:135px;right: 22px;">
                        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                      <strong>Thanks!</strong> {{$message}}
                    </div>
                </div>
            @endif

                <form action="{{route('client_appoinment_submit')}}" method="post">
                    @csrf
                    <div class="row contact-form">
                        <div class="col-md-4 mb-3">
                            <input type="text" placeholder="Write Your Name" class="form-control form-control-lg" name="name" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <input type="email" placeholder="Write your Email Address" class="form-control form-control-lg" name="email" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <input type="text" placeholder="Write your Phone" class="form-control form-control-lg" maxlength="14" name="phone" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <input type="date" placeholder="Date" class="form-control form-control-lg" name="date" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <input type="time" placeholder="Quantity" class="form-control form-control-lg" name="time" required>
                        </div>
                        
                        <div class="col-md-12 mb-3">
                            <textarea rows="5" placeholder="Write your Note" class="form-control form-control-lg" name="note" required minlength="10"></textarea>
                        </div>

                        <div class="col-md-12 text-right">
                            <button type="button" class="btn btn-md btn-warning mr-2" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-md btn-crusta">Submit</button>
                        </div>
                    </div>
                </form>
           



        </div>
    </section>
    <!--============ End Blog Section =============-->

@endsection

@section('js')
<script type="text/javascript">
    setTimeout(function() {
    $('#hideThis').fadeOut('fast');
}, 5000);
</script>
@endsection