<?php $__env->startSection('content'); ?>
    <main>
    <style>
header {
    width: 100%;
    padding: 400px 0px 150px;
    position: relative;
    z-index: 9;
    overflow: hidden;
    background-color: var(--primary-color);
}

.intro-img {
    transform: none !important; 
    width: 100%;
    height: auto; 
    display: block; 
}

/* بقية الأنماط الأخرى هنا */
</style>


      <header>
        <div class="container">
          <div class="row">
            <div class="col-lg-6 col-12">
              <div class="swiper swiper-header">
                <div class="swiper-wrapper">
                    <?php $__currentLoopData = $sliders; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $slider): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                  <div class="swiper-slide">
                    <div class="contain">
                      

                      <h1>
                        <?php if(App::getLocale() == 'ar'): ?>
                                            <?php echo e($slider->ar_title); ?>

                                        <?php else: ?>
                                            <?php echo e($slider->en_title); ?>

                                        <?php endif; ?>
                      </h1>

                    <!--  <p class="desc">-->
                    <!--    <?php if(App::getLocale() == 'ar'): ?>-->
                    <!--    <?php echo $slider->ar_summary; ?>-->
                    <!--<?php else: ?>-->
                    <!--    <?php echo $slider->en_summary; ?>-->
                    <!--<?php endif; ?>-->
                    <!--  </p>-->

                      <div class="button-contain">
                        <!--<a href="<?php echo e(route('about')); ?>" class="custom-btn primary-color">-->
                        <!--  <span>   <?php echo e(__('messages.about_us')); ?>  </span>-->
                        <!--</a>-->

                        <a href="<?php echo e(route('new_details', $slider->id)); ?>" class="custom-btn light-border">
                          <span>      <?php echo e(__('messages.new_details')); ?> </span>
                        </a>
                      </div>
                    </div>
                  </div>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                </div>

                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
              </div>
            </div>
          </div>

          <ul class="socail">
            <li class="name">   <?php echo e(__('messages.follow_us')); ?></li>
            <li>
                <a href="<?php echo e($socials->facebook); ?>" target="_blank">
                    <img
                        src="<?php echo e(asset('assets/images/footer/facebook.svg')); ?>"
                        loading="lazy"
                        alt=""
                    />
                </a>
            </li>

            <li>
                <a href="<?php echo e($socials->instagram); ?>" target="_blank">
                    <img
                        src="<?php echo e(asset('assets/images/footer/instagram.svg')); ?>"
                        loading="lazy"
                        alt=""
                    />
                </a>
            </li>

            

            <!-- LinkedIn -->
            <li>
                <a href="<?php echo e($socials->linked_in); ?>" target="_blank">
                    <img
                        src="<?php echo e(asset('assets/images/footer/linkedin.svg')); ?>"
                        loading="lazy"
                        alt=""
                    />
                </a>
            </li>


            <li>
                <a href="<?php echo e($socials->twitter); ?>" target="_blank">
                    <img
                        src="<?php echo e(asset('assets/images/footer/x.svg')); ?>"
                        loading="lazy"
                        alt=""
                    />
                </a>
            </li>
            <li>
                <a href="https://wa.me/<?php echo e($socials->whatsApp); ?>" target="_blank">
                    <img
                        src="<?php echo e(asset('assets/images/footer/whatsapp.svg')); ?>"
                        loading="lazy"
                        alt=""
                    />
                </a>
            </li>

    </ul>
        </div>
<img
  src="<?php echo e(asset('assets/images/intro/news.jpg')); ?>"
  loading="lazy"
  class="intro-img"
  style="transform: scaleX(-1);" 
  alt=""
/>

      </header>


      <section class="blog general-section">
        <div class="container">
          <div class="data-heading">
            <div class="custom-heading">
                <h1>  <?php echo e(__('messages.news')); ?> </h1>


            </div>

            <a href="<?php echo e(route('news')); ?>" class="see-more">
                <img
                  src="<?php echo e(asset('assets/images/icons/arrow_right.svg')); ?>"
                  loading="lazy"
                  alt=""
                />

                <span>   <?php echo e(__('messages.see_more')); ?>  </span>
              </a>
          </div>

          <div class="swiper swiper-blog">
            <div class="swiper-wrapper">
                <?php $__currentLoopData = $specialEvents; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $one): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="swiper-slide">
                    <div class="blog-box">
                        <div class="image-contain">
                            <img
                                src="<?php echo e(asset('Events_images/' . $one->photo)); ?>"
                                loading="lazy"
                                alt=""
                            />
                        </div>

                        <div class="contain">
                            <div class="date">
                                <img
                                    src="<?php echo e(asset('assets/images/icons/time.svg')); ?>"
                                    loading="lazy"
                                    alt="Time icon"
                                />
                                <span> <?php echo e($one->date); ?> </span>
                            </div>

                            <h2>
                              <?php if(App::getLocale() == 'ar'): ?>
        <?php echo e(\Illuminate\Support\Str::limit($one->ar_title, 50, '...')); ?>

    <?php else: ?>
        <?php echo e(\Illuminate\Support\Str::limit($one->en_title, 50, '...')); ?>

    <?php endif; ?>
                            </h2>

                            <p>
                                <?php if(App::getLocale() == 'ar'): ?>
        <?php echo \Illuminate\Support\Str::limit($one->ar_summary, 100, '...'); ?>

    <?php else: ?>
        <?php echo \Illuminate\Support\Str::limit($one->en_summary, 100, '...'); ?>

    <?php endif; ?>
                            </p>

                            <a href="<?php echo e(route('new_details', $one->id)); ?>" class="see-more">
                                <img
                                    src="<?php echo e(asset('assets/images/icons/arrow_right.svg')); ?>"
                                    loading="lazy"
                                    alt="Arrow icon"
                                />
                                <span> <?php echo e(__('messages.see_more')); ?>  </span>
                            </a>
                        </div>
                    </div>
                </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>

            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>




        </div>
      </section>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css" />
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css" />

<style>
    /* تخصيص تنسيق الخريطة */
    #map {
        height: 500px;
        width: 100%;
        margin-top: 20px;
    }
    .container {
        max-width: 900px;
        margin: auto;
        text-align: center;
    }
</style>

<section class="general-section map">
    <div class="container">
        <div class="custom-heading">
            <h1><?php echo e(__('messages.company_locations')); ?></h1>
            <p><?php echo e(__('messages.company_locations_info')); ?></p>
        </div>
        <div id="map"></div>
    </div>
</section>

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js"></script>
<script>
    // إعداد الخريطة
    var map = L.map('map', {
        fullscreenControl: true // إضافة زر ملء الشاشة
    }).setView([33.0, 44.0], 6);

    // إضافة طبقة الخريطة
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: ''
    }).addTo(map);

    // مواقع المعامل
    var locations = [
        { name: "مقر الشركة", lat: 33.273956, lng: 44.461031 },
        { name: "معمل سمنت القائم", lat: 34.258806, lng: 41.213611 },
        { name: "معمل سمنت كبيسة", lat: 33.590458, lng: 42.504912 },
        { name: "معمل سمنت الفلوجة", lat: 33.369920, lng: 43.849409 },
        { name: "معمل سمنت كركوك", lat: 35.343504, lng: 44.477172 },
        { name: "معاونية السمنت الشمالية", lat: 36.329021, lng: 43.178142 },
        { name: "معمل سمنت الحدباء", lat: 36.199265, lng: 43.213692 },
        { name: "معمل سمنت حمام العليل الجديد", lat: 36.162020, lng: 43.246613 },
        { name: "معمل سمنت سنجار", lat: 36.349831, lng: 42.076104 },
        { name: "معمل سمنت الرافدين", lat: 36.441786, lng: 42.931207 },
        { name: "معمل سمنت بادوش الجديد", lat: 36.441786, lng: 42.931207 },
        { name: "معمل سمنت بادوش التوسيع", lat: 36.441786, lng: 42.931207 },
        { name: "معاونية السمنت الجنوبية", lat: 31.965165, lng: 44.434160 },
        { name: "معمل سمنت الكوفة", lat: 31.964414, lng: 44.437246 },
        { name: "معمل سمنت النجف الاشرف", lat: 31.970307, lng: 44.440691 },
        { name: "معمل سمنت بابل", lat: 32.738890, lng: 44.272180 },
        { name: "معمل سمنت المثنى", lat: 31.224966, lng: 45.001604 },
        { name: "معمل سمنت السماوة", lat: 31.300051, lng: 45.299678 },
        { name: "معمل سمنت كربلاء", lat: 32.342805, lng: 43.326302 },
        { name: "معمل كربلاء المقدسة للسمنت والنورة", lat: 32.563637, lng: 43.904103 },
        { name: "معمل سمنت البصرة", lat: 30.035008, lng: 47.946278 }
    ];

    function offsetDuplicateLocations(locations) {
        const offset = 0.001; // زيادة قيمة الإزاحة
        const adjustedLocations = [];

        locations.forEach(location => {
            // التحقق مما إذا كان الموقع متكررًا مع أي من المواقع المعدلة بالفعل
            const duplicate = adjustedLocations.find(
                loc => loc.lat === location.lat && loc.lng === location.lng
            );

            // إذا كان الموقع متكررًا، يتم تطبيق الإزاحة
            if (duplicate) {
                location.lat += (Math.random() - 0.5) * offset; // إزاحة عشوائية بسيطة
                location.lng += (Math.random() - 0.5) * offset;
            }

            // إضافة الموقع المعدل إلى القائمة
            adjustedLocations.push(location);
        });

        return adjustedLocations;
    }

    // إزاحة المواقع المتداخلة
    var adjustedLocations = offsetDuplicateLocations(locations);

    // إضافة العلامات إلى الخريطة
    adjustedLocations.forEach(function(location) {
        L.marker([location.lat, location.lng])
            .addTo(map)
            .bindPopup(`<b>${location.name}</b><br><a href="https://www.google.com/maps/search/?api=1&query=${location.lat},${location.lng}" target="_blank">افتح في خرائط جوجل</a>`);
    });

    // ضبط الخريطة لعرض جميع المواقع
    var bounds = new L.LatLngBounds(adjustedLocations.map(location => [location.lat, location.lng]));
    map.fitBounds(bounds);
</script>


      <section class="contact-us general-section pattern-section">
        <div class="container">
          <div class="row">
            <div class="col-lg-4 col-12 mb-3 order-mobile-1">
              <div class="contact-info">
                <a href="<?php echo e(route('home')); ?>" target="_blank" class="contact-data">
                  <img
                    src="<?php echo e(asset('assets/images/contact/location.svg')); ?>"
                    loading="lazy"
                    alt=""
                  />

                  <p>    <?php echo e(__('messages.location')); ?></p>

                  <span>
                    <?php if(App::getLocale() == 'ar'): ?>
                    <?php echo e($socials->ar_location); ?>

                <?php else: ?>
                    <?php echo e($socials->en_location); ?>

                <?php endif; ?>

                  </span>
                </a>

                <a
                  href="mailto:info@gmail.com"
                  target="_blank"
                  class="contact-data"
                >
                  <img
                    src="<?php echo e(asset('assets/images/contact/sms.svg')); ?>"
                    loading="lazy"
                    alt=""
                  />

                  <p> <?php echo e(__('messages.email')); ?> </p>

                  <span>
                    <?php if(App::getLocale() == 'ar'): ?>
                    <?php echo e($socials->email); ?>

                <?php else: ?>
                    <?php echo e($socials->email); ?>

                <?php endif; ?>

                  </span>
                </a>

                <a
                  href="tel:542280536"
                  target="_blank"
                  class="contact-data"
                >
                  <img
                    src="<?php echo e(asset('assets/images/contact/call.svg')); ?>"
                    loading="lazy"
                    alt=""
                  />

                  <p> <?php echo e(__('messages.phone')); ?> </p>

                  <span>
                    <?php if(App::getLocale() == 'ar'): ?>
                    <?php echo e($socials->phone); ?>

                <?php else: ?>
                    <?php echo e($socials->phone); ?>

                <?php endif; ?>

                  </span>
                </a>
              </div>
            </div>

            <div class="col-lg-8 col-12 mb-3 order-mobile-0">
                <form class="form-contain" method="POST" id="contactForm">
                    <?php echo csrf_field(); ?>

                    <div class="custom-heading">
                        <h1><?php echo e(__('messages.need_help')); ?></h1>
                        <p><?php echo e(__('messages.contac')); ?></p>
                    </div>

                    <div class="form-group">
                        <label for="name"><?php echo e(__('messages.name')); ?></label>
                        <div class="form-icon">
                            <img src="<?php echo e(asset('assets/images/contact/user.svg')); ?>" loading="lazy" alt="" />
                            <input type="text" class="form-control" placeholder="<?php echo e(__('messages.name')); ?>" id="name" name="name" required />
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="email"><?php echo e(__('messages.email')); ?></label>
                        <div class="form-icon">
                            <img src="<?php echo e(asset('assets/images/contact/email.svg')); ?>" loading="lazy" alt="" />
                            <input type="email" class="form-control" placeholder="example@gmail.com" id="email" name="email" required />
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="telephone"><?php echo e(__('messages.phone')); ?></label>
                        <div class="form-icon">
                            <img src="<?php echo e(asset('assets/images/contact/call.svg')); ?>" loading="lazy" alt="" />
                            <input type="text" class="form-control" placeholder="<?php echo e(__('messages.phone')); ?>" name="phone" required />
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="message"><?php echo e(__('messages.message')); ?></label>
                        <div class="form-icon text-area">
                            <img src="<?php echo e(asset('assets/images/contact/edit.svg')); ?>" loading="lazy" alt="" />
                            <textarea name="massage" id="message" class="form-control" placeholder="<?php echo e(__('messages.message')); ?>" cols="30" rows="10" required></textarea>
                        </div>
                    </div>

                    <div class="form-group">
                        <?php echo NoCaptcha::renderJs(); ?>

                        <?php echo NoCaptcha::display(); ?>

                        <div id="recaptchaError" class="text-danger" style="display: none;">
                            هذا التحقق مطلوب.
                        </div>
                    </div>

                    <button type="submit" class="custom-btn primary-color">
                        <img src="<?php echo e(asset('assets/images/icons/send.svg')); ?>" class="arrow" loading="lazy" alt="" />
                        <span><?php echo e(__('messages.send_now')); ?></span>
                    </button>
                </form>

                <!-- Modal -->
                <div class="modal fade" id="DoneContactModal" tabindex="-1" role="dialog" aria-labelledby="DoneContactModal" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-body">
                                <div class="contain">
                                    <img src="<?php echo e(asset('assets/images/icons/check_circle.svg')); ?>" loading="lazy" alt="" />
                                    <h1><?php echo e(__('messages.request_success')); ?></h1>
                                    <p><?php echo e(__('messages.contact_soon')); ?></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- jQuery for Ajax and Modal -->
            <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
            <script>
                $(document).ready(function () {
                    $('#contactForm').on('submit', function (e) {
                        e.preventDefault(); // Prevent form submission

                        var recaptchaResponse = grecaptcha.getResponse(); // Get the reCAPTCHA response
                        if (recaptchaResponse.length === 0) {
                            $('#recaptchaError').show(); // Show error if reCAPTCHA is not checked
                            return; // Prevent form submission
                        } else {
                            $('#recaptchaError').hide(); // Hide error if reCAPTCHA is checked
                        }

                        var formData = $(this).serialize(); // Serialize form data

                        $.ajax({
                            url: "<?php echo e(route('send_massage')); ?>",
                            type: "POST",
                            data: formData,
                            success: function (response) {
                                if (response.success) {
                                    // Show the modal on successful response
                                    $('#DoneContactModal').modal('show');
                                    // Clear form fields after success
                                    $('#contactForm')[0].reset();
                                    grecaptcha.reset(); // Reset reCAPTCHA
                                } else {
                                    alert("Error: " + response.message);
                                }
                            },
                            error: function (response) {
                                alert("Something went wrong. Please try again.");
                            }
                        });
                    });

                    // Optionally, listen for reCAPTCHA checkbox clicks to hide error message when clicked
                    grecaptcha.render('your-recaptcha-element-id', {
                        'callback': function(response) {
                            $('#recaptchaError').hide(); // Hide error if reCAPTCHA is checked
                        }
                    });
                });
            </script>




          </div>
        </div>
      </section>
    </main>


<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/farassaz/icsc.industry.gov.iq/resources/views/index.blade.php ENDPATH**/ ?>