@extends('layouts.app')

@section('content')
<!-- Page Header -->
<div class="contact-header">
    <h1 class="contact-title">Contact Us</h1>
    <p class="contact-breadcrumb">
        <a href="{{ url('/') }}">Home</a> / <span>Contact Us</span>
    </p>
</div>

<div class="contact-container">
    
    <div class="contact-intro">
        <h2>Get In Touch</h2>
        <div class="divider"></div>
        <p>We would love to hear from you. Feel free to reach out using the contact details below or drop us a message using the form.</p>
    </div>

    <div class="contact-wrapper">
        
        <!-- Contact Info Left -->
        <div class="contact-info-card">
            <h3>Contact Information</h3>
            
            <div class="contact-item">
                <div class="icon-circle">
                    <i class="fas fa-map-marker-alt"></i>
                </div>
                <div class="info-text">
                    <h5>Corporate Office</h5>
                    <p>{{ $siteSettings->corporate_office }}</p>
                    <h5 style="margin-top: 15px;">Factory Address</h5>
                    <p>{{ $siteSettings->factory_address }}</p>
                </div>
            </div>
            
            <div class="contact-item">
                <div class="icon-circle">
                    <i class="fas fa-phone-alt"></i>
                </div>
                <div class="info-text">
                    <h5>Call Us (Helpline)</h5>
                    <p>
                        <a href="tel:01936900216">01936 900 216</a><br>
                        <a href="tel:01988816483">01988 816 483</a>
                    </p>
                </div>
            </div>

            <div class="contact-item">
                <div class="icon-circle">
                    <i class="fas fa-envelope"></i>
                </div>
                <div class="info-text">
                    <h5>Email Address</h5>
                    <p>
                        <a href="mailto:sales@jandsagricare.com">sales@jandsagricare.com</a>
                    </p>
                </div>
            </div>
        </div>

        <!-- Contact Form Right -->
        <div class="contact-form-card">
            <h3>Send Us a Message</h3>
            
            <form action="#" method="POST">
                <div class="form-row">
                    <div class="form-group">
                        <label>Your Name <span>*</span></label>
                        <input type="text" name="name" required>
                    </div>
                    <div class="form-group">
                        <label>Your Email <span>*</span></label>
                        <input type="email" name="email" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label>Subject</label>
                    <input type="text" name="subject">
                </div>
                
                <div class="form-group">
                    <label>Message</label>
                    <textarea name="message" rows="5"></textarea>
                </div>
                
                <button type="button" class="submit-btn" onclick="alert('Message sent successfully!');">
                    SEND MESSAGE <i class="fas fa-paper-plane"></i>
                </button>
            </form>
        </div>
    </div>
    
    <!-- Map Section -->
    <div class="map-section">
        @if(!empty($siteSettings->map_url))
            {!! $siteSettings->map_url !!}
        @else
            <iframe src="https://maps.google.com/maps?q=j%26s%20agricare&t=m&z=11&output=embed&iwloc=near" width="100%" height="100%" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
        @endif
    </div>
</div>

<style>
    /* Global fixes for contact page */
    .contact-header, .contact-container, .contact-container *, .map-section {
        box-sizing: border-box;
    }
    
    .contact-header {
        background-color: #f8f9fa; 
        padding: 50px 20px; 
        border-bottom: 1px solid #e9ecef; 
        text-align: center;
    }
    .contact-title {
        margin: 0; color: #222; font-weight: 700; font-size: 36px;
    }
    .contact-breadcrumb {
        margin: 10px 0 0 0; color: #666; font-size: 16px;
    }
    .contact-breadcrumb a {
        color: #0170B9; text-decoration: none;
    }
    .contact-container {
        max-width: 1200px; margin: 60px auto; padding: 0 20px;
    }
    .contact-intro {
        text-align: center; margin-bottom: 50px;
    }
    .contact-intro h2 {
        font-size: 32px; font-weight: 700; color: #333; margin-bottom: 15px;
    }
    .contact-intro .divider {
        width: 60px; height: 3px; background: #0170B9; margin: 0 auto 20px;
    }
    .contact-intro p {
        color: #666; font-size: 16px; max-width: 600px; margin: 0 auto;
    }
    .contact-wrapper {
        display: flex; gap: 40px; align-items: stretch; margin-bottom: 60px;
    }
    .contact-info-card {
        flex: 1; background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); border: 1px solid #eee;
    }
    .contact-info-card h3, .contact-form-card h3 {
        font-size: 24px; font-weight: 700; color: #222; margin-bottom: 30px;
    }
    .contact-item {
        display: flex; gap: 20px; margin-bottom: 30px; align-items: flex-start;
    }
    .icon-circle {
        width: 50px; height: 50px; background: rgba(1, 112, 185, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .icon-circle i {
        font-size: 20px; color: #0170B9;
    }
    .info-text h5 {
        font-size: 18px; font-weight: 700; color: #333; margin: 0 0 8px 0;
    }
    .info-text p {
        margin: 0; color: #666; font-size: 15px; line-height: 1.6; word-break: break-word;
    }
    .info-text a {
        color: #666; text-decoration: none; transition: color 0.3s; word-break: break-word;
    }
    .info-text a:hover {
        color: #0170B9;
    }
    .contact-form-card {
        flex: 1.5; background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 5px 20px rgba(0,0,0,0.05); border: 1px solid #eee;
    }
    .form-row {
        display: flex; gap: 20px; margin-bottom: 20px;
    }
    .form-group {
        flex: 1; margin-bottom: 20px; width: 100%;
    }
    .form-group label {
        display:block; font-weight: 600; margin-bottom: 8px; color: #444; font-size: 14px;
    }
    .form-group label span {
        color: red;
    }
    .form-group input, .form-group textarea {
        width: 100%; padding: 14px; border: 1px solid #ddd; border-radius: 6px; font-family: inherit; font-size: 15px; outline: none; transition: border-color 0.3s;
    }
    .form-group input:focus, .form-group textarea:focus {
        border-color: #0170B9;
    }
    .submit-btn {
        background-color: #0170B9; color: white; border: none; padding: 14px 35px; font-size: 16px; font-weight: 600; border-radius: 6px; cursor: pointer; transition: background 0.3s; display: inline-flex; align-items: center; gap: 10px;
    }
    .submit-btn:hover {
        background-color: #015a96;
    }
    .map-section {
        width: 100%; height: 450px; background: #eee; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    }

    /* Responsive Design */
    @media (max-width: 991px) {
        .contact-wrapper {
            flex-direction: column;
        }
        .form-row {
            flex-direction: column; gap: 0;
        }
    }
    @media (max-width: 768px) {
        .contact-title {
            font-size: 28px;
        }
        .contact-intro h2 {
            font-size: 26px;
        }
        .contact-info-card, .contact-form-card {
            padding: 25px;
        }
        .map-section {
            height: 350px;
        }
    }
    @media (max-width: 768px) {
        .contact-header {
            padding: 100px 20px 40px 20px !important;
        }
        .contact-title, .team-header h1 {
            font-size: 28px !important;
        }
    }
</style>

<div class="elementor elementor-12">
    @include('layouts.footer')
</div>
@endsection