@extends('user_layouts.app')

@section('title', 'Contact')

@section('content')

<!-- Contact Start -->
<div class="container-xxl py-5">
    <div class="container">

        <div class="text-center mx-auto wow fadeInUp" data-wow-delay="0.1s" style="max-width: 500px;">
            <p class="section-title bg-white text-center text-primary px-3">Contact Us</p>
            <h1 class="mb-5">Have Any Query About Cattle Farm Management?</h1>
        </div>

        <div class="row g-5">

            <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.1s">
                <h3 class="mb-4">Need Help With Your Farm Records?</h3>

                <p class="mb-4">
                    If you need support related to cattle names, animal records, expenses, purchase details,
                    sale records, images, or profit reports, please send us your query. Our team will guide
                    you and help you manage your cattle farm system easily.
                </p>

                {{-- Success Message --}}
                @if(session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </div>
                @endif

                {{-- Error Messages --}}
                @if($errors->any())
                    <div class="alert alert-danger">
                        <ul class="mb-0">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form action="{{ route('contact.store') }}" method="POST">
                    @csrf

                    <div class="row g-3">

                        <div class="col-md-6">
                            <div class="form-floating">
                                <input 
                                    type="text" 
                                    class="form-control @error('name') is-invalid @enderror" 
                                    id="name" 
                                    name="name" 
                                    value="{{ old('name') }}"
                                    placeholder="Your Name"
                                >
                                <label for="name">Your Name</label>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-floating">
                                <input 
                                    type="email" 
                                    class="form-control @error('email') is-invalid @enderror" 
                                    id="email" 
                                    name="email" 
                                    value="{{ old('email') }}"
                                    placeholder="Your Email"
                                >
                                <label for="email">Your Email</label>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="form-floating">
                                <input 
                                    type="text" 
                                    class="form-control @error('subject') is-invalid @enderror" 
                                    id="subject" 
                                    name="subject" 
                                    value="{{ old('subject') }}"
                                    placeholder="Subject"
                                >
                                <label for="subject">Subject</label>
                            </div>
                        </div>

                        <div class="col-12">
                            <div class="form-floating">
                                <textarea 
                                    class="form-control @error('message') is-invalid @enderror" 
                                    placeholder="Leave a message here" 
                                    id="message" 
                                    name="message" 
                                    style="height: 250px"
                                >{{ old('message') }}</textarea>
                                <label for="message">Message</label>
                            </div>
                        </div>

                        <div class="col-12">
                            <button class="btn btn-secondary rounded-pill py-3 px-5" type="submit">
                                Send Message
                            </button>
                        </div>

                    </div>
                </form>
            </div>

            <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.5s">
                <h3 class="mb-4">Contact Details</h3>

                <div class="d-flex border-bottom pb-3 mb-3">
                    <div class="flex-shrink-0 btn-square bg-secondary rounded-circle">
                        <i class="fa fa-map-marker-alt text-body"></i>
                    </div>
                    <div class="ms-3">
                        <h6>Our Office</h6>
                        <span>Cattle Farm Office, Pakistan</span>
                    </div>
                </div>

                <div class="d-flex border-bottom pb-3 mb-3">
                    <div class="flex-shrink-0 btn-square bg-secondary rounded-circle">
                        <i class="fa fa-phone-alt text-body"></i>
                    </div>
                    <div class="ms-3">
                        <h6>Call Us</h6>
                        <span>+92 300 0000000</span>
                    </div>
                </div>

                <div class="d-flex border-bottom-0 pb-3 mb-3">
                    <div class="flex-shrink-0 btn-square bg-secondary rounded-circle">
                        <i class="fa fa-envelope text-body"></i>
                    </div>
                    <div class="ms-3">
                        <h6>Mail Us</h6>
                        <span>info@cattlefarm.com</span>
                    </div>
                </div>

                <iframe 
                    class="w-100 rounded"
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3001156.4288297426!2d-78.01371936852176!3d42.72876761954724!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4ccc4bf0f123a5a9%3A0xddcfc6c1de189567!2sNew%20York%2C%20USA!5e0!3m2!1sen!2sbd!4v1603794290143!5m2!1sen!2sbd"
                    frameborder="0" 
                    style="min-height: 300px; border:0;" 
                    allowfullscreen="" 
                    aria-hidden="false"
                    tabindex="0">
                </iframe>
            </div>

        </div>
    </div>
</div>
<!-- Contact End -->

@endsection