@extends('site.layout.master')

@section('content')
    <!-- start -->
    <header class="header">
        <div class="container">

            <div class="slider-head">
                <div class="owl-carousel owl-theme owl-header">

                    @foreach($sliders as $slider)
                        <div class="item">
                            {{--                        <span> احصل على خصم  50%</span>--}}
                            <h2>{{$slider->title}}</h2>
                            <p>{{$slider->description}}</p>
                            {{--                            <div class="foot-main">--}}
                            {{--                                <a href="" class="main-btn">المزيد</a>--}}

                            {{--                            </div>--}}
                        </div>
                    @endforeach

                </div>
            </div>
        </div>
    </header>
    <!-- end -->
    <!-- start -->
    <div class="welcome-section">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-12 col-lg-5">
                    <div class="ws-img">
                        <img class="img-fluid" src="{{$setting->about_us_image}}" alt="">
                    </div>
                </div>
                <div class="col-12 col-md-12 col-lg-7">
                    <div class="ws-info">
                        <h6 class="m-title">مرحبا بك في المتجر </h6>
                        <h3>{{$setting->about_us_title}}</h3>
                        <p>{!! $setting->about_us_description !!}</p>

                        {{--                        <div class="row">--}}
                        {{--                            <div class="col-12 col-md-6">--}}
                        {{--                                <div class="list-ws">--}}
                        {{--                                    <img src="{{asset('site/img/list.svg')}}" alt="">--}}
                        {{--                                    <span>فريق كبير من المحترفين</span>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="list-ws">--}}
                        {{--                                    <img src="{{asset('site/img/list.svg')}}" alt="">--}}
                        {{--                                    <span>دعم كامل عالى مدار اليوم</span>--}}
                        {{--                                </div>--}}
                        {{--                            </div>--}}
                        {{--                            <div class="col-12 col-md-6">--}}
                        {{--                                <div class="list-ws">--}}
                        {{--                                    <img src="{{asset('site/img/list.svg')}}" alt="">--}}
                        {{--                                    <span>فريق كبير من المحترفين</span>--}}
                        {{--                                </div>--}}
                        {{--                                <div class="list-ws">--}}
                        {{--                                    <img src="{{asset('site/img/list.svg')}}" alt="">--}}
                        {{--                                    <span>دعم كامل عالى مدار اليوم</span>--}}
                        {{--                                </div>--}}
                        {{--                            </div>--}}
                        {{--                        </div>--}}
                        <div class="">
                            <a href="{{route('about_us')}}" class="main-btn">المزيد</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end -->

    <!-- start filter  -->
    <div class="container">

        <div class="title-main">
            <h5>الأقسام</h5>
            {{--            <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص--}}
            {{--                <br>--}}
            {{--                من مولد النص العربى</p>--}}
        </div>

        <div class="mu-portfolio-area">
            <!-- Title -->
            <!-- Start Portfolio Filter -->
            <div class="mu-portfolio-filter-area">
                <ul class="mu-simplefilter">
                    <li class="active" data-filter="all">الكل</li>
                    @foreach($categories as $category)
                        <li data-filter="{{$category->id}}">{{$category->title}}</li>
                    @endforeach
                </ul>
            </div>

            <!-- Start Portfolio Content -->
            <div class="mu-portfolio-content">
                <div class="filtr-container">
                    <div class="row">

                        @foreach($categories as $category)
                            @foreach($category->products()->take(3)->get() as $row)
                                <div class="col-12 col-md-6 col-lg-4 filtr-item" data-category="{{$category->id}}">
                                    @include('site.products.product_box')
                                </div>
                            @endforeach
                        @endforeach
                    </div>

                </div>
            </div>
            <!-- End Portfolio Content -->
            <div class="more-bt">
                <a href="{{route('categories')}}" class="main-btn">المزيد</a>
            </div>
        </div>
    </div>
    <!-- end filter -->
    <!-- start add -->
    <div class="container">
        <div class="add">
            <div class="row">
                @foreach($offers as $offer)


                    <div class="col-12 col-md-12 {{$loop->iteration % 2 == 0 ? 'col-lg-7' : 'col-lg-5' }} ">
                        <div class="add-l">
                            {{--                        <div class="add-overlay">--}}
                            {{--                            <span>احصل على خصم 50 نقطة</span>--}}
                            {{--                            <h6>تشكيلة جديدة</h6>--}}
                            {{--                            <a href="">تسوق الأن</a>--}}
                            {{--                        </div>--}}
                            <img src="{{$offer->image}}" alt="">
                        </div>
                    </div>

                @endforeach
            </div>
        </div>
    </div>
    <!-- end add -->
    <!-- free pro -->
    <div class="container">
        <div class="free-pro">
            <div class="title-main">
                <h5>منتجات مجانية</h5>
                {{--                <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص--}}
                {{--                    <br>--}}
                {{--                    من مولد النص العربى</p>--}}
            </div>
            <div class="row">

                @foreach($point_products as  $row)
                    <div class="col-12 col-md-6 col-lg-4">
                        @include('site.products.point_product_box')
                    </div>
                @endforeach
                <div class="col-md-12 more-bt">
                    <a href="{{route('all_point_products')}}" class="main-btn">المزيد</a>
                </div>
            </div>
        </div>
    </div>
    <!-- free pro -->
    <!-- start contact  -->
    <div class="contact-container">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-md-12 col-lg-10">
                    <div class="title-main">
                        <h5>تواصل معنا</h5>
                        {{--                        <p>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص</p>--}}
                    </div>
                    <div class="row">
                        <div class="col-12 col-md-6 col-lg-4">
                            <div class="item-con">
                                <img src="{{asset('site/img/meil.svg')}}" alt="">
                                <span>{{$setting->email}}</span>
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-lg-4">
                            <div class="item-con">
                                <img src="{{asset('site/img/call.svg')}}" alt="">
                                <span>{{$setting->mobile}}</span>
                            </div>
                        </div>
                        <div class="col-12 col-md-6 col-lg-4">
                            <div class="item-con">
                                <img src="{{asset('site/img/whats.svg')}}" alt="">
                                <span>{{$setting->whatsapp}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="form-contact">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-md-12 col-lg-12">
                    <div class="form-contact-input">
                        <form action="{{route('contact_us_post')}}" method="POST">
                            @csrf
                            <div class="row">
                                <div class="col-12 col-md-12 col-lg-6">
                                    <div class="input-form">
                                        <label for="">اسم المستخدم</label>
                                        <div class="has-icon">
                                            <input type="text" name="name" placeholder="الإسم">
                                            <object data="{{asset('site/img/user.svg')}}" type="image/svg+xml"></object>
                                        </div>
                                        @if ($errors->has('name'))
                                            <small class="text-danger">{{ $errors->first('name') }}</small>
                                        @endif
                                    </div>
                                    <div class="input-form">
                                        <label for="">البريد الإلكترونى</label>
                                        <div class="has-icon">
                                            <input type="text" name="email" placeholder="البريد ">
                                            <object data="{{asset('site/img/c-mai.svg')}}"
                                                    type="image/svg+xml"></object>
                                        </div>
                                        @if ($errors->has('email'))
                                            <small class="text-danger">{{ $errors->first('email') }}</small>
                                        @endif
                                    </div>
                                    <div class="input-form">
                                        <label for="">رقم الجوال</label>
                                        <div class="has-icon">
                                            <input type="text" name="mobile" placeholder="رقم الجوال ">
                                            <object data="{{asset('site/img/phone.svg')}}"
                                                    type="image/svg+xml"></object>
                                        </div>
                                        @if ($errors->has('mobile'))
                                            <small class="text-danger">{{ $errors->first('mobile') }}</small>
                                        @endif
                                    </div>

                                </div>
                                <div class="col-12 col-md-12 col-lg-6">
                                    <div class="input-form">
                                        <label for="">الموضوع</label>
                                        <input type="text" name="subject" placeholder="الموضوع">
                                        @if ($errors->has('subject'))
                                            <small class="text-danger">{{ $errors->first('subject') }}</small>
                                        @endif
                                    </div>
                                    <div class="input-form">
                                        <label for="">الرسالة</label>
                                        <textarea placeholder=" اكتب هنا ...." name="message" id="" cols="30"
                                                  rows="10"></textarea>
                                        @if ($errors->has('message'))
                                            <small class="text-danger">{{ $errors->first('message') }}</small>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-12">

                                    <div class="button-fo">
                                        <button type="submit" class="main-btn">إرسال الرسالة</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- end contact -->
@endsection