@extends('user.master')

@section('title', 'Contact Us')

@section('content')
      <!-- Banner Section Start -->
      <div class="container-fluid p-0">
        <div class="impl_page_banner_section">
          <div class="impl_page_wrapper">
            <div class="container-fluid impl_container">
              <div class="impl_page_heading">
                <h3>Contact Us</h3>
                <p>
                  <a href="{{ route('user.home') }}">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="size-6">
                      <path d="M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 0 1.06-1.061l-8.689-8.69a2.25 2.25 0 0 0-3.182 0l-8.69 8.69a.75.75 0 1 0 1.061 1.06l8.69-8.689Z" />
                      <path d="m12 5.432 8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V21a.75.75 0 0 1-.75.75H5.625a1.875 1.875 0 0 1-1.875-1.875v-6.198a2.29 2.29 0 0 0 .091-.086L12 5.432Z" />
                    </svg>
                    Home
                  </a>
                  <span>>  Contact Us</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Banner Section End -->

<!-- Contact Section Start -->
      <div class="impl_section_wrapper impl_contact_wrapper">
        <div class="container">
          <div class="row">
            <div class="col-lg-5" data-aos="fade-right">
              <div class="row">
                <div class="col-12">
                  <div class="impl_contact_heading">
                    <p>Contact Me</p>
                    <h3>Get In Touch With Me</h3>
                  </div>
                </div>
                <div class="col-lg-12 col-md-6">
                  <div class="impl_contact_box">
                    <div class="impl_contact_icon">
                      <img src="{{ asset('theme/assets/images/call.png') }}">
                    </div>
                    <div class="impl_contact_text">
                      <h6>Phone</h6>
                      @if(isset($websiteSetting) && !empty($websiteSetting->contact_phone))
                        <a href="tel:{{ $websiteSetting->contact_phone }}">{{ $websiteSetting->contact_phone }}</a>
                      @elseif(isset($websiteSetting) && !empty($websiteSetting->contact_mobile))
                        <a href="tel:{{ $websiteSetting->contact_mobile }}">{{ $websiteSetting->contact_mobile }}</a>
                      @else
                        <a href="javascript:void(0);">N/A</a>
                      @endif
                    </div>
                  </div>
                </div>
                <div class="col-lg-12 col-md-6">
                  <div class="impl_contact_box">
                    <div class="impl_contact_icon">
                      <img src="{{ asset('theme/assets/images/mail.png') }}">
                    </div>
                    <div class="impl_contact_text">
                      <h6>Email</h6>
                      @if(isset($websiteSetting) && !empty($websiteSetting->contact_email))
                        <a href="mailto:{{ $websiteSetting->contact_email }}">{{ $websiteSetting->contact_email }}</a>
                      @else
                        <a href="javascript:void(0);">N/A</a>
                      @endif
                    </div>
                  </div>
                </div>
                <div class="col-lg-12 col-md-6">
                  <div class="impl_contact_box">
                    <div class="impl_contact_icon">
                      <img src="{{ asset('theme/assets/images/location.png') }}">
                    </div>
                    <div class="impl_contact_text">
                      <h6>Address</h6>
                      <p>
                        @if(isset($websiteSetting))
                          @php
                            $addressParts = array_filter([
                              $websiteSetting->contact_address,
                              $websiteSetting->contact_city,
                              $websiteSetting->contact_state,
                              $websiteSetting->contact_pincode,
                              $websiteSetting->contact_country
                            ]);
                          @endphp
                          @if(!empty($addressParts))
                            {{ implode(', ', $addressParts) }}
                          @else
                            N/A
                          @endif
                        @else
                          N/A
                        @endif
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-7" data-aos="fade-left">
              <form class="impl_contact_form" id="contactForm" action="{{ route('user.contact.store') }}" method="POST">
                @csrf
                <div class="impl_input_flex">
                  <div class="impl_input">
                    <input type="text" placeholder="Your Name Here.." autocomplete="off" name="full_name" id="full_name" class="require" required>
                  </div>
                  <div class="impl_input">
                    <input type="email" placeholder="Your Email Here.." autocomplete="off" name="email" id="email" class="require" data-valid="email" data-error="Email should be valid." required>
                  </div>
                </div>
                <div class="impl_input_flex">
                  <div class="impl_input">
                    <input type="text" placeholder="Your Phone Here.." autocomplete="off" name="phone" id="phone">
                  </div>
                  <div class="impl_input">
                    <input type="text" placeholder="Subject Here.." name="subject" id="subject" class="require" autocomplete="off" required/>
                  </div>
                </div>
                <div class="impl_input">
                  <textarea name="message" id="message" class="require" placeholder="Your Message Here.." autocomplete="off" required></textarea>
                </div>
                <div class="response"></div>
                <div class="impl_form_btn">
                  <button type="submit" class="impl_btn submitForm">Send Message</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
      <!-- Contact Section End -->
      <!-- Map Section Start -->
       <div class="impl_map_wrapper">
          <div class="container-fluid p-0">
            <div class="row">
              <div class="col-12" data-aos="fade-down">
                <div class="impl_map_content">
                  @php
                    $mapUrl = null;
                    if (isset($websiteSetting) && $websiteSetting) {
                        // Get raw attribute value first to check if data exists
                        $rawMapUrl = $websiteSetting->getAttributes()['map_embed_url'] ?? null;
                        
                        // If raw value exists and is not null/empty, process it
                        if ($rawMapUrl !== null && trim($rawMapUrl) !== '') {
                            $mapUrl = $websiteSetting->map_embed_url;
                            // Check if map_embed_url is not empty (after model accessor processing)
                            if (!empty($mapUrl) && trim($mapUrl) !== '') {
                                // Extract src URL if full iframe HTML is stored
                                if (preg_match('/<iframe[^>]+src=["\']([^"\']+)["\']/', $mapUrl, $matches)) {
                                    $mapUrl = $matches[1];
                                }
                            } else {
                                $mapUrl = null;
                            }
                        }
                    }
                  @endphp
                  @if(!empty($mapUrl) && trim($mapUrl) !== '')
                    @if(strpos($mapUrl, 'maps.app.goo.gl') !== false || strpos($mapUrl, 'goo.gl/maps') !== false)
                      <div style="padding: 20px; text-align: center; background: #f8f9fa; border: 1px solid #dee2e6;">
                        <p style="color: #dc3545; margin: 0;"><strong>Map Error:</strong> Please use the embed URL, not the share link.</p>
                        <p style="margin: 10px 0 0 0; font-size: 14px;">Go to Google Maps → Share → Embed a map → Copy the iframe src URL</p>
                      </div>
                    @else
                      <iframe src="{{ $mapUrl }}" allowfullscreen loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                    @endif
                  @else
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d10390.586844541494!2d76.04834779555189!3d22.963952478203076!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3963172b725b9649%3A0xca9958ddaa36af60!2sPixelNX!5e0!3m2!1sen!2sin!4v1710943150690!5m2!1sen!2sin" allowfullscreen loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                  @endif
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Map Section End -->
@endsection