@extends('layouts.app')
@section('content')
<div class="bg-light">
    <div class="container pt-3">
        <nav class="mb-0">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('index')}}"><u>Home</u></a></li>
                <li class="breadcrumb-item active" aria-current="page">Contact us</li>
            </ol>
        </nav>
    </div>
</div>
<div class="container py-5 my-4">
  <div class="row">
    <div class="col-lg-6 bg-grey p-lg-5 p-4 mb-4" style="border-bottom:7px solid var(--pry-color);">
      <h4 class="subtitle">Contact us:</h4>
      <p class="mb-4">If you have any questions about the Snyder HemBand system, hemorrhoid banding, or anything else, you can contact us anytime. We’ll get back to you shortly!</p>
      <form class="" action="{{ route('submit-contact') }}" method="post">
        @csrf
        <div class="row">
          <div class="col-12">
              @if($errors->any())
            <div class="alert alert-danger fade show" role="alert">
                There were errors found!
            </div>
            @endif
            @if(session('success'))
            <div class="alert alert-success fade show" role="alert">
                {{session('success')}}
            </div>
            @endif
          </div>
          <div class="col-lg-6 form-group mb-4">
            <input type="text" class="form-control rounded-0 py-3" name="name_first" placeholder="First Name" value="{{ old('name_first') }}">
            @error('name_first')
              <small class="text-warning">{{$message}}</small>
            @enderror
          </div>
          <div class="col-lg-6 form-group mb-4">
            <input type="text" class="form-control rounded-0 py-3" name="name_last" placeholder="Last Name" value="{{ old('name_last') }}">
            @error('name_last')
              <small class="text-warning">{{$message}}</small>
            @enderror
          </div>
        </div>
        <div class="row">
          <div class="col-lg-6 form-group mb-4">
            <input type="email" class="form-control rounded-0 py-3" name="email" placeholder="Email Address" value="{{ old('email') }}">
            @error('email')
                <small class="text-warning">{{$message}}</small>
              @enderror
          </div>
          <div class="col-lg-6 form-group mb-4">
            <input type="text" class="form-control rounded-0 py-3" name="phone" placeholder="Phone Number" value="{{ old('phone') }}">
            @error('phone')
                <small class="text-warning">{{$message}}</small>
              @enderror
          </div>
        </div>
        
        <div class="form-group mb-4">
          <input type="text" class="form-control rounded-0 py-3" name="zip" placeholder="Zip Code" value="{{ old('zip') }}">
          @error('zip')
              <small class="text-warning">{{$message}}</small>
            @enderror
        </div>
        <div class="form-group mb-4">
          <input type="text" class="form-control rounded-0 py-3" name="subject" placeholder="Subject" value="{{ old('subject') }}">
          @error('subject')
              <small class="text-warning">{{$message}}</small>
            @enderror
        </div>
        <div class="form-group mb-4">
          <textarea name="message" class="form-control rounded-0" placeholder="Message" rows="6">{{ old('message') }}</textarea>
          @error('message')
              <small class="text-warning">{{$message}}</small>
            @enderror
        </div>
        <button type="submit" class="btn btn-pry w-100 py-3">Submit message</button>
      </form>
    </div>
    <div class="col-lg-5 offset-lg-1">
      <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7319.087334623804!2d-75.68153637595971!3d39.66958345452699!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c700d1a9f368ed%3A0xe0065e295c0b7653!2s258%20Chapman%20Rd%2C%20Newark%2C%20DE%2019702%2C%20USA!5e0!3m2!1sen!2ske!4v1665057570431!5m2!1sen!2ske" height="350" class="w-100" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
      <div class="row mt-5">
        <div class="col-sm-6 mb-4">
          <h5 class="header m-0">Our Office</h5>
          <hr class="w-100 my-3">
          <div class="">
            258 Chapman Road, <br>
            Suite 101-A, <br>
            Newark, DE 19702
          </div>
        </div>
        <div class="col-sm-6 mb-4">
          <h5 class="header m-0">Contact</h5>
          <hr class="w-100 my-3">
          <h5 class="mb-2">General questions</h5>
          <div class="mb-4">
            <a class="text-dark" href="mailto:info@snyderhemband.com">info@snyderhemband.com</a> <br>
            <a class="text-dark" href="tel:+1-833-444-8448">+1-833-444-8448</a>
          </div>
          <h5 class="mb-2">For physicians</h5>
          <div class="mb-4">
            <a class="text-dark" href="mailto:phy@snyderhemband.com">phy@snyderhemband.com</a> <br>
            <a class="text-dark" href="tel:+1-833-444-8448">+1-833-444-8448</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection