@extends('frontend.layouts.app')
@section('content')
  <!-- Header Start -->
    <div class="container-fluid py-5 mb-5 page-header"
        style="background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('{{ asset('uploads/bg-image/image.jpg') }}') center/cover no-repeat;">
        <div class="container py-5">
            <div class="row justify-content-center">
                <div class="col-lg-10 text-center">
                    <h1 class="display-3 text-white animated slideInDown">Contact Us</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb-item justify-content-center">
                            <li class="breadcrumb-item"><a class="text-white" href="{{ url('/') }}">Home</a></li>
                            <li class="breadcrumb-item"><a class="text-white" href="#">Pages</a></li>
                            <li class="breadcrumb-item text-white active" aria-current="page">Contact</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- Header End -->
<!-- Contact Start -->
<div class="container-xxl py-5">
    <div class="container">
        <div class="row g-5 justify-content-center mb-5">
            <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.1s">
                <div class="bg-light text-center h-100 p-5">
                    <div class="btn-square bg-white rounded-circle mx-auto mb-4" style="width: 90px; height: 90px;">
                        <i class="fa fa-phone-alt fa-2x text-primary"></i>
                    </div>
                    <h4 class="mb-3">Phone Number</h4>
                    <p class="mb-2">{{$phone}}</p>
               
                    <a class="btn btn-primary px-4" href="{{$phone}}">Call Now <i class="fa fa-arrow-right ms-2"></i></a>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.3s">
                <div class="bg-light text-center h-100 p-5">
                    <div class="btn-square bg-white rounded-circle mx-auto mb-4" style="width: 90px; height: 90px;">
                        <i class="fa fa-envelope-open fa-2x text-primary"></i>
                    </div>
                    <h4 class="mb-3">Email Address</h4>
                    <p class="mb-2">{{$email}}</p>
                    
                    <a class="btn btn-primary px-4" href="{{$email}}">Email Now <i class="fa fa-arrow-right ms-2"></i></a>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.5s">
                <div class="bg-light text-center h-100 p-5">
                    <div class="btn-square bg-white rounded-circle mx-auto mb-4" style="width: 90px; height: 90px;">
                        <i class="fa fa-map-marker-alt fa-2x text-primary"></i>
                    </div>
                    <h4 class="mb-3">Office Address</h4>
                    <p class="mb-2">{{$address}}</p>
                    
                    <a class="btn btn-primary px-4" href="https://goo.gl/maps/FsznshxgnULBGgkN9" target="blank">Direction <i class="fa fa-arrow-right ms-2"></i></a>
                </div>
            </div>
        </div>
        <div class="row mb-5">
            <div class="col-12 wow fadeInUp" data-wow-delay="0.1s">
                <iframe class="w-100" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3533.3853977850163!2d85.42535747453444!3d27.674480926942017!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39eb1ab0053bc1b3%3A0xf9176008f20e5874!2sBhaktapur%20No.2%20Ward%20Office!5e0!3m2!1sen!2snp!4v1775715108805!5m2!1sen!2snp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>"
                  
            </div>
        </div>
        <div class="container-fluid py-3">
            <div class="container">
                <div class="row">
                    <div class="col-md-5">
                        <p class="fw-medium text-uppercase text-primary mb-2">Contact Us</p>
                        <h1 class="display-5 mb-4">If You Have Any Queries, Please Feel Free To Contact Us</h1>
                        <p class="mb-4"></p>
                        <div class="row g-4">
                            <div class="col-6">
                                <div class="d-flex align-items-center">
                                    <i class="fas fa-2x fa-phone-alt text-primary mr-3"></i>
                                    <div class="d-flex flex-column">
                                        <h6 class="font-weight-bold">Call Us</h6>
                                        <p class="m-0">{{ $phone }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="d-flex align-items-center mb-3">
                                    <i class="fa fa-2x fa-envelope-open text-primary mr-3"></i>
                                    <div class="d-flex flex-column">
                                        <h6 class="font-weight-bold">Email Us</h6>
                                        <p class="m-0">{{ $email }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-7">
                        <div class="bg-light mb-3" style="padding: 30px;">
                            <form action="{{ route('suggestion.store') }}" method="post">
                                @csrf
                                <div class="form-row">
                                    <div class="col-md-6 mb-3">
                                        <div class="control-group">
                                            <input type="text" class="form-control p-4" id="name" name="name"
                                                placeholder="Your Name" />
                                            <x-input-error :messages="$errors->get('name')" class="mt-2" />
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <div class="control-group">
                                            <input type="email" class="form-control p-4" id="email" name="email"
                                                placeholder="Your Email" />
                                            <x-input-error :messages="$errors->get('email')" class="mt-2" />
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <div class="control-group">
                                            <input type="number" class="form-control p-4" id="phone" name="phone"
                                                placeholder="Your Phone" />
                                            <x-input-error :messages="$errors->get('phone')" class="mt-2" />
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <div class="control-group">
                                            <input type="text" class="form-control p-4" id="address" name="address"
                                                placeholder="Your Address" />
                                            <x-input-error :messages="$errors->get('address')" class="mt-2" />
                                        </div>
                                    </div>
                                </div>
                                <div class="control-group mb-3">
                                    <select name="type" class="form-control">
                                        <option value="">Select</option>
                                        <option value="Suggestion">सुझाव (Suggestion)</option>
                                        <option value="Complain">गुनासाे (complain)</option>
                                    </select>
                                    <x-input-error :messages="$errors->get('type')" class="mt-2" />

                                </div>
                                <div class="control-group mb-3">
                                    <input type="text" class="form-control p-4" id="subject" placeholder="Subject"
                                        name="subject" />
                                    <x-input-error :messages="$errors->get('subject')" class="mt-2" />
                                </div>
                                <div class="control-group mb-3">
                                    <textarea class="form-control" rows="4" id="message" name="message" placeholder="Message"></textarea>
                                    <x-input-error :messages="$errors->get('message')" class="mt-2" />
                                </div>
                                <div>
                                    <button class="btn btn-primary font-weight-semi-bold px-4" style="height: 50px;"
                                        type="submit">Send Message</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Contact End -->

@endsection