
@extends('layouts.app')
@section('title','الرئيسية')
@section('content')

<?php
$setting=App\Models\WebsiteSetting::first()
?>

<div class="clearfix"></div>
<!-- Slider -->

<section id="home" class="slider-bg">
    <div class="page-slider-wrap">
        <div id="page-slider" >
            <ul>
                <!-- SLIDE  -->
                <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >

                    <!-- MAIN IMAGE -->
                    <img src="images/slider/slider_bg.png"  alt="slide1"  data-bgfit="scroll" data-bgposition="top center" data-bgrepeat="no-repeat">

                    <!-- LAYER NR. 1 -->
                    <div class="tp-caption slider-title customin customout"
                         data-x="center"
                         data-y="30"
                         data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
                         data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-speed="1000"
                         data-start="500"
                         data-easing="Back.easeInOut"
                         data-endspeed="300"
                         style="color:#fff;font-family:HelveticaNeueLTW20;">اهلا بكم في قالب مطور<br>ذي الصفحة الواحدة
                    </div>

                    <!-- LAYER NR. 2 -->
                    <div class="tp-caption slider-sub-title sfl"
                         data-x="center"
                         data-y="220"
                         data-speed="1000"
                         data-start="700"
                         data-easing="Back.easeInOut"
                         data-endspeed="300"

                         style="color:#fff;font-family:HelveticaNeueLTW20;"><img src="images/slider/macbook.png" alt="">
                    </div>
                </li>
                <!-- SLIDE  -->
                <li data-transition="fade" data-slotamount="7" data-masterspeed="1000" >

                    <!-- MAIN IMAGE -->
                    <img src="images/slider/slider_bg.png"  alt="slide1"  data-bgfit="scroll" data-bgposition="top center" data-bgrepeat="no-repeat">

                    <!-- LAYER NR. 1 -->
                    <div class="tp-caption slider-title text-center sft"
                         data-x="center"
                         data-y="40"
                         data-speed="1000"
                         data-start="500"
                         data-easing="Power1.easeOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="color:#fff;font-family:HelveticaNeueLTW20;">متوافق مع جميع الاجهزة
                    </div>

                    <!-- LAYER NR. 2 -->
                    <div class="tp-caption slider-sub-title text-center sfl"
                         data-x="center"
                         data-y="150"
                         data-speed="1000"
                         data-start="600"
                         data-easing="Power1.easeOut"
                         data-endspeed="300"
                         data-endeasing="Power1.easeIn"
                         data-captionhidden="off"
                         style="color:#fff"><img src="images/slider/ipad.png" alt="">
                    </div>
                </li>
                <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >

                    <!-- MAIN IMAGE -->
                    <img src="images/slider/slider_bg.png"  alt="slide1"  data-bgfit="scroll" data-bgposition="top center" data-bgrepeat="no-repeat">

                    <!-- LAYER NR. 1 -->
                    <div class="tp-caption slider-title text-right customin"
                         data-x="center"
                         data-y="40"
                         data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-speed="500"
                         data-start="500"
                         data-easing="Power3.easeInOut"
                         data-endspeed="300"
                         style="color:#fff;font-family:HelveticaNeueLTW20;">متوافق مع جميع المتصفحات
                    </div>

                    <!-- LAYER NR. 2 -->
                    <div class="tp-caption slider-sub-title text-center sfl"
                         data-x="center"
                         data-y="160"
                         data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;"
                         data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                         data-speed="1500"
                         data-start="500"
                         data-easing="Back.easeInOut"
                         data-endspeed="300"
                         style="color:#fff"><img src="images/slider/browser-window.png" alt="">
                    </div>
                </li>
            </ul>
            <div class="tp-bannertimer tp-bottom"></div>
        </div>
    </div>

    <div class="clearfix">&nbsp;</div>
    <div class="container">
        <div class="text-center row">
            <div class="col-md-12 welcome-note">
                <h4>هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى . <br><br>بداية الكثير من اصحاب الاعمال .</h4>

                <a href="#" class="btn orange scroll-link" data-id="portoflio">رؤية الاعمال</a> <a href="#" class="btn black scroll-link" data-id="contact">اتصل بنا</a>
            </div>
        </div>
    </div>
</section>

<!-- Slider End -->

<!-- About Us -->
<section id="about" class="content">
    <div class="container">
        <div class="row">
            <!--About Page-->
            <div class="col-md-12 text-center">
                <!--Main Heading-->
                <h2 class="page-head">من نحن</h2>
                <h4>يعتبر معهد مطور من أكبر المعاهد التطويرية لخدمة مواقع الويب والمنتديات <br><br> العامة والخدمات التقنية ,, حيث يحتوي المعهد على موسوعة من : الدروس |  <br><br> الشروحات | الهاكات | القوالب | النسخ | الإستايلات | التعريبات | السكريبتات | و المنتجات</h4>
                <!--Main Heading End-->

                <!--Icon Heading-->
                <div class="icon-head">
                    <i class="fa fa-user"></i>
                </div>
                <!--Icon Heading End-->

                <!--Sub Heading-->
                <h3>فريق الموقع</h3>
                <h4>هذا هو فريق مطور<br><br>فكل شحص يلعب دورا هاما في مجاله في تطوير الموقع !</h4>
                <!--Sub Heading End-->
            </div>
            <!--About Page End-->

            <!--Team Members-->
            <div class="col-sm-3">
                <div class="white-wrap team-wrap">
                    <img src="images/ls.png" alt="Our Team">
                    <h3>فلات يوري <span>فلات ديزاينر</span></h3>
                    <div class="social-icons">
                        <ul>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="white-wrap team-wrap">
                    <img src="images/ls.png" alt="Our Team">
                    <h3>فلات يوري <span>فلات ديزاينر</span></h3>
                    <div class="social-icons">
                        <ul>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="white-wrap team-wrap">
                    <img src="images/ls.png" alt="Our Team">
                    <h3>فلات يوري <span>فلات ديزاينر</span></h3>
                    <div class="social-icons">
                        <ul>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="white-wrap team-wrap">
                    <img src="images/ls.png" alt="Our Team">
                    <h3>فلات يوري <span>فلات ديزاينر</span></h3>
                    <div class="social-icons">
                        <ul>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
           
            <!--Team Members End-->
            <div class="clearfix"></div>
            <!--Our Skills-->
            <div class="col-md-12 text-center">
                <!--Icon Heading-->
                <div class="icon-head">
                    <i class="fa fa-code"></i>
                </div>
                <!--Icon Heading End-->

                <!--Sub Heading-->
                <h3>مهارات الفريق</h3>
                <h4>هذه مهارات الفريق ، فللفريق خبرة في شتى برامج التصميم و البرمجة<br><br> هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى .</h4>
                <!--Sub Heading End-->
            </div>
            <div class="col-md-12">
                <div class="skillbar-wrap">
                    <div class="col-md-6">
                        <div class="clearfix">
                            <span class="skillbar-title pull-left">Photoshop</span>
                            <span class="skill-bar-percent pull-right">90%</span>
                        </div>
                        <div class="skillbar" data-percent="90%">
                            <div class="skillbar-bar"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="clearfix">
                            <span class="skillbar-title pull-left">WordPress</span>
                            <span class="skill-bar-percent pull-right">85%</span>
                        </div>
                        <div class="skillbar" data-percent="85%">
                            <div class="skillbar-bar"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="clearfix">
                            <span class="skillbar-title pull-left">HTML5 &amp; CSS</span>
                            <span class="skill-bar-percent pull-right">95%</span>
                        </div>
                        <div class="skillbar" data-percent="95%">
                            <div class="skillbar-bar"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="clearfix">
                            <span class="skillbar-title pull-left">PHP</span>
                            <span class="skill-bar-percent pull-right">70%</span>
                        </div>
                        <div class="skillbar " data-percent="70%">
                            <div class="skillbar-bar"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="clearfix">
                            <span class="skillbar-title pull-left">Illustrator</span>
                            <span class="skill-bar-percent pull-right">75%</span>
                        </div>
                        <div class="skillbar" data-percent="75%">
                            <div class="skillbar-bar"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="clearfix">
                            <span class="skillbar-title pull-left">Shopify</span>
                            <span class="skill-bar-percent pull-right">90%</span>
                        </div>
                        <div class="skillbar" data-percent="90%">
                            <div class="skillbar-bar"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!--Our Skills End-->


        </div>
    </div>

    <!--Page Bottom Spacer-->
    <div class="spacer">&nbsp;</div>
    <!--Page Bottom Spacer End-->
</section>
<!-- About Us End -->


<!-- Services -->
<!-- Services -->
<!-- Services -->
@if($setting->show_services_section)
<section id="services" class="content">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <h2 class="page-head">خدماتنا</h2>
                <h4>
                    هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى . 
                    <br><br>
                    بداية الكثير من اصحاب الاعمال .
                </h4>
                <div class="icon-head">
                    <i class="fa fa-briefcase"></i>
                </div>
                <h3>ماذا نفعل ؟</h3>
                <h4>
                    و هنا تظهر خبرة فريق مطور
                    <br><br>
                    بداية الكثير من اصحاب الاعمال .
                </h4>
            </div>
        </div>

        <div class="row">
            @foreach (App\Models\Service::all() as $service)
                <div class="col-sm-4">
                    <div class="white-wrap service-wrap">
                        <div class="service-icon">
                            <i class="{{ $service->icon }} fa-2x"></i>
                        </div>
                        <h3>{{ $service->title }}</h3>
                        <p>{!! nl2br(e($service->description)) !!}</p>
                    </div>
                </div>
            @endforeach
        </div>

        <div class="clearfix"></div>

        <div class="col-md-12 col-lg-12">
            <div class="call-action text-center">
                <p>اعجبتك خدماتنا ؟ لديك شيء في مخيلتك تريد جعله حقيقة ؟ تريد ان تراسلنا بخصوص موضوع ؟</p>
                <div>
                    <a href="#" class="btn orange">اطلب برمجية خاصة</a>
                    <a href="#" class="btn white">اتصل بنا</a>
                </div>
            </div>
        </div>

        <div class="col-md-12 text-center"></div>

        <div class="spacer">&nbsp;</div>
    </div>
</section>
@endif


<!-- Services End -->

<!-- Portoflio -->
<section id="portoflio" class="content">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <!--Main Heading-->
                <h2 class="page-head">معرض اعمالنا</h2>
                <h4>هنا تعلق اعمالنا المميزة <br><br>المنجزة للمواقع</h4>
                <!--Main Heading End-->
            </div>
        </div>
    </div>


    <section id="portfolio-grid">
        <div class="container">
            <div class="row">
@php
    use Illuminate\Support\Str;
    use App\Models\Category;
    use App\Models\Project;
@endphp

<div class="row">
    <div class="wrapper wf">
        <div class="col-md-12">
            <ul class="unstyled" id="filters">
                {{-- "All" Filter --}}
                <li class="filter active" data-filter="all" data-role="button">
                    <a href="javascript:void(0)">All</a>
                </li>

                {{-- Dynamic Category Filters --}}
                @foreach(Category::all() as $category)
                    <li class="filter" data-filter="{{ Str::slug($category->name) }}" data-role="button">
                        <a href="javascript:void(0)">{{ $category->name }}</a>
                    </li>
                @endforeach
            </ul>
        </div>

        <div class="clearfix"></div>

        <ul id="Grid" class="unstyled">
            {{-- Dynamic Projects --}}
            @foreach(Project::with('category')->get() as $project)
                <li class="mix col-sm-3 {{ $project->category ? Str::slug($project->category->name) : '' }}" data-sort="data-name">
                    <div class="white-wrap">
                        <div class="image-holder">
                            <a href="{{ asset('storage/' . $project->image) }}" class="fancybox" data-fancybox-group="gallery" title="{{ $project->title }}">
                                <span class="item-on-hover">
                                    <span class="hover-image">
                                        <i class="fa fa-search fa-2x"></i>
                                    </span>
                                </span>
                                <img src="{{ asset('storage/' . $project->image) }}" alt="{{ $project->title }}">
                            </a>
                        </div>
                        <div class="text-holder">
                            <i class="fa fa-picture-o"></i>
                            <h3>{{ $project->title }}</h3>
                            <p>{{ $project->description }}</p>
                        </div>
                    </div>
                </li>
            @endforeach

            <div class="clearfix"></div>
        </ul>
    </div>
</div>



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

    <!-- END DEMO WRAPPER -->
    <!--Page Bottom Spacer-->
    <div class="spacer">&nbsp;</div>
    <!--Page Bottom Spacer End-->
</section>
<!-- Portoflio End -->

<!-- Our Blog -->
<section id="blog" class="content">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <!--Main Heading-->
                <h2 class="page-head">مدونتنا</h2>
                <h4>ما نفكر فيه ننشره في مدونتنا<br><br> هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى .</h4>
                <!--Main Heading End-->
            </div>
            <div class="col-md-12">
                <div id="bloglist" class="bloglist blog-grid">

                    <!-- loop starts here -->
                    <div class="blog-entry">
                        <div class="white-wrap">
                            <div class="image-holder">
                                <a href="images/blog/img_1.jpg" class="fancybox" title="هناك حقيقة مثبتة منذ زمن طويل ..">
                                    <span class="item-on-hover"><span class="hover-image"><i class="fa fa-search fa-2x"></i></span></span>
                                    <img src="images/blog/img_1.jpg" alt="Our Portfolio">
                                </a>
                            </div>
                            <div class="text-holder">
                                <i class="fa fa-picture-o"></i>
                                <div class="meta">
                                    <span> اكتوبر 2013 / المقالات / <a href="#">3 تعاليق</a></span>
                                </div>
                                <h3><a href="#">مقال صورة</a></h3>
                                <div>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق</div>
                                <a href="#" class="btn black">قراءة المزيد</a>
                            </div>
                        </div>
                    </div>
                    <!-- loop ends here  -->

                    <!-- loop starts here -->
                    <div class="blog-entry text-format">
                        <div class="white-wrap">
                            <div class="text-holder">
                                <i class="fa fa-headphones"></i>
                                <div class="meta">
                                    <span> اكتوبر 2013 / المقالات / <a href="#">3 تعاليق</a></span>
                                </div>
                                <h3><a href="#">مقال صوت</a></h3>
                                <div>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق</div>
                                <a href="#" class="btn black">قراءة المزيد</a>
                            </div>
                        </div>
                    </div>
                    <!-- loop ends here  -->

                    <!-- loop starts here -->
                    <div class="blog-entry">
                        <div class="white-wrap">
                            <div class="image-holder">
                                <div class="media video">
                                    <iframe src="http://player.vimeo.com/video/7449107" width="500" height="375" frameborder="0"></iframe>
                                </div>
                            </div>
                            <div class="text-holder">
                                <i class="fa fa-video-camera"></i>
                                <div class="meta">
                                    <span> اكتوبر 2013 / المقالات / <a href="#">3 تعاليق</a></span>
                                </div>
                                <h3><a href="#">مقال فيديو</a></h3>
                                <div>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق</div>
                                <a href="#" class="btn black">قراءة المزيد</a>
                            </div>
                        </div>
                    </div>
                    <!-- loop ends here  -->

                    <!-- loop starts here -->
                    <div class="blog-entry text-format">
                        <div class="white-wrap">
                            <div class="text-holder">
                                <i class="fa fa-quote-left"></i>
                                <div class="meta">
                                    <span> اكتوبر 2013 / المقالات / <a href="#">3 تعاليق</a></span>
                                </div>
                                <blockquote class="text-right">
                                    ليس هناك تصميم من دون تدريب . و ليس هناك تدريب دون ذكاء.                                        <small>ستيفن سنيل <cite title="المصدر">جوجل</cite></small>
                                </blockquote>
                            </div>
                        </div>
                    </div>
                    <!-- loop ends here  -->

                    <!-- loop starts here -->
                        <div class="blog-entry">
                            <div class="white-wrap">
                                <div class="image-holder">
                                    <a href="images/blog/img_2.jpg" class="fancybox" title="هناك حقيقة مثبتة منذ زمن طويل ..">
                                        <span class="item-on-hover"><span class="hover-image"><i class="fa fa-search fa-2x"></i></span></span>
                                        <img src="images/blog/img_2.jpg" alt="Our Portfolio">
                                    </a>
                                </div>
                                <div class="text-holder">
                                    <i class="fa fa-picture-o"></i>
                                    <div class="meta">
                                        <span> اكتوبر 2013 / المقالات / <a href="#">3 تعاليق</a></span>
                                    </div>
                                    <h3><a href="#">مقال صورة</a></h3>
                                    <div>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق</div>
                                    <a href="#" class="btn black">قراءة المزيد</a>
                                </div>
                            </div>
                        </div>
                    <!-- loop ends here  -->

                    <!-- loop starts here -->
                    <div class="blog-entry">
                        <div class="white-wrap">
                            <div class="image-holder">
                                <a href="images/blog/img_4.jpg" class="fancybox" title="هناك حقيقة مثبتة منذ زمن طويل ..">
                                    <span class="item-on-hover"><span class="hover-image"><i class="fa fa-search fa-2x"></i></span></span>
                                    <img src="images/blog/img_4.jpg" alt="Our Portfolio">
                                </a>
                            </div>
                            <div class="text-holder">
                                <i class="fa fa-picture-o"></i>
                                <div class="meta">
                                    <span> اكتوبر 2013 / المقالات / <a href="#">3 تعاليق</a></span>
                                </div>
                                <h3><a href="#">مقال صورة</a></h3>
                                <div>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق</div>
                                <a href="#" class="btn black">قراءة المزيد</a>
                            </div>
                        </div>
                    </div>
                    <!-- loop ends here  -->

                    <!-- loop starts here -->
                    <div class="blog-entry text-format">
                        <div class="white-wrap">
                            <div class="text-holder">
                                <i class="fa fa-picture-o"></i>
                                <div class="meta">
                                    <span> اكتوبر 2013 / المقالات / <a href="#">3 تعاليق</a></span>
                                </div>
                                <h3><a href="#">مقال مع رابط<br>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص .</a></h3>
                            </div>
                        </div>
                    </div>
                    <!-- loop ends here  -->



                </div>
            </div>

            <div class="col-sm-12">
                <a href="#" id="load-more">اظهر المزيد من المقالات</a>
            </div>

            <div class="clearfix"></div>
        </div>
    </div>

    <!--Page Bottom Spacer-->
    <div class="spacer">&nbsp;</div>
    <!--Page Bottom Spacer End-->
</section>
<!-- Our Blog End -->




<!-- Contact Us -->
<section id="contact" class="content last">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <!--Main Heading-->
                <h2 class="page-head">اتصل بنا</h2>
                <h4>تريد زيارة مقر العمل ؟<br><br>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى .</h4>                <!--Main Heading End-->
            </div>
        </div>
    </div>

    <div class="parallax-area parallax-image" data-stellar-background-ratio="0.1" id="contacr-form">

    <?php
    $setting= App\Models\Setting::all();
    ?>
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <div class="white-wrap">
                        <div class="text-holder">
                            <i class="fa fa-map-marker"></i>
                            <h3>العنوان</h3>
                    @foreach($settings['address'] ?? [] as $item)
                        <div>{{ $item->value }}</div>
                    @endforeach                      
                  </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="white-wrap">
                        <div class="text-holder">
                            <i class="fa fa-phone"></i>
                            <h3>اتصل بنا</h3>
                    @foreach($settings['phone'] ?? [] as $item)
                        <div>{{ $item->value }}
                        </div>
                    @endforeach
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="white-wrap">
                        <div class="text-holder">
                            <i class="fa fa-envelope"></i>
                            <h3>ارسل لنا ايميل</h3>

                       @foreach($settings['email'] ?? [] as $item)
                        <div><a href="mailto:{{ $item->value }}">{{ $item->value }}</a></div>
                    @endforeach                       
                 </div>
                    </div>
                </div>
            </div>
        </div>
        <br>
        <div class="container">
            <div class="row">
                <div class="form-div">
                    <div class="col-sm-12">
                        <div id="sucessmessage"> </div>
                    </div>

                    <!--Success Message-->
                    @if(session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif
           <form id="contactus_form" method="POST" action="{{ route('contact.store') }}">
                    @csrf
                    <div class="col-sm-4">
                        <input type="text" placeholder="الاسم الكامل" name="name"  class="form-control" required>
                    </div>
                    <div class="col-sm-4">
                        <input type="email" name="email" placeholder="الايميل"  class="form-control" required>
                    </div>
                    <div class="col-sm-4">
                        <input type="text" name="phone" placeholder="رقم الجوال" id="phone" class="form-control">
                    </div>
                    <div class="clearfix"></div>
                    <div class="col-sm-12">
                        <textarea name="message" id="message" placeholder="الرسالة" class="form-control" rows="3" required></textarea>
                    </div>
                    <div class="col-sm-6">
                        <input type="submit" class="btn" value="ارسل" id="submit">
                    </div>
                    <div class="col-sm-6 text-right">
                        <h5>سيتم الرد على رسالتك في 24 ساعة على اكثر تقدير.</h5>
                    </div>
                </form>

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


@endsection