@extends('web.layouts.app')

@section('title', transWord('الرئيسية'))
@description(Str::limit(strip_tags(getSetting('desc_seo', app()->getLocale())), 160))
@keywords(implode(',', json_decode(getSetting('keyword', app()->getLocale()))))
@image(asset('storage/' . getSetting('logo')))

@section('sub_header')
    <div class="subheader">
        <div class="owl-carousel owl-theme" id="slider-1">
            @foreach ($banners as $banner)
                <div class="item">
                    <div class="slider-header" style=" background-image: url({{ asset('storage/' . $banner->image) }});">
                        <div class="main-container">
                            <div class="text-slider-header">
                                <h1>{{ $banner->name }}</h1>
                                <p>{{ $banner->desc }}</p>
                                <a href="{{ route('web.solutions.sectors.show', $banner->sector->slug) }}"
                                    class="ctm-btn">{{ transWord('أعرف المزيد') }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach

        </div>
    </div>
@endsection

@section('content')
    <!-- start about us -->
    <section class="about-us  mr-section">
        <div class="details-aboutus">
            <div class="main-container">
                <div class="row align-items-center">
                    <div class="col-lg-7">
                        <div data-aos="fade-left" class="text-about">
                            <div class="titel-start">
                                <h2>{{ transWord('من نحن') }}</h2>
                                <img src="imges/1.png" alt="">
                            </div>
                            <p>
                                {!! getSetting('about_us', app()->getLocale()) !!}
                            </p>
                            <h3>{{ transWord('وتتميز شركة رتام بخبرة واسعة في مجالات تكنولوجيا المعلومات ومنها') }} : </h3>
                            <ul>

                                @foreach ($features as $feature)
                                    <li>
                                        <img src="{{ asset('storage/' . $feature->image) }}" alt="{{ $feature->name }}">
                                        {{ $feature->name }}
                                    </li>
                                @endforeach
                            </ul>
                            <a href="{{ route('web.solutions.about') }}"
                                class="ctm-btn">{{ transWord('أعرف المزيد') }}</a>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div data-aos="fade-right" class="img-aboutus-index">

                            <img src="{{ asset('storage/' . getSetting('about_us_first_image')) }}" alt="">
                            <img src="{{ asset('storage/' . getSetting('about_us_second_image')) }}" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end about us -->

    <!-- start subscribe -->
    <section class="subscribe mr-section">
        <div class="main-container">
            <div class="titel-center d-flex  justify-content-center">
                <h2>{{ transWord('هل تحتاج إلى أي نوع من حلول تكنولوجيا المعلومات لعملك؟') }}</h2>
            </div>

            <form action="{{ route('web.solutions.subscription') }}" method="POST" id="subscriptionForm">
                @csrf
                <div class="form-row justify-content-center">
                    <div class="col-auto">
                        <img src="{{ url('web') }}/imges/sms.png" alt="">
                        <input type="email" name="email" class="form-control"
                            placeholder="{{ transWord('البريد الإلكتروني') }}" required>
                        @error('email')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                    <div class="col-auto">
                        <button type="submit">{{ transWord('اشترك الان') }}</button>
                    </div>
                </div>
            </form>

        </div>
    </section>
    <!-- end subscribe -->

    <!-- start news -->
    <section class="our-news mr-section">
        <div class="main-container">
            <div class="slider-news">
                <div class="title-start">
                    <h2>{{ transWord('اخر الاخبار') }}</h2>
                </div>
                <div class="owl-carousel owl-theme" id="slider-news">
                    @foreach ($news as $item)
                        <div class="item">
                            <a href="{{ route('web.solutions.news.show', $item->slug) }}">
                                <div class="sub-news">
                                    <div class="img-news">
                                        <img src="{{ asset('storage/' . $item->image) }}" alt="{{ $item->name }}">
                                    </div>
                                    <div class="text-news">
                                        <p>
                                            {{ $item->date }}
                                        </p>
                                        <h3>{{ $item->name }}</h3>
                                        <ul>

                                            @foreach ($item->categories->take(2) as $category)
                                                <li> {{ $category->name }} </li>
                                            @endforeach

                                        </ul>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach

                </div>
            </div>

        </div>
    </section>
    <!-- end news -->

    <!-- start customer-index  -->
    <section class="customer-index pg-section">
        <div class="main-container">
            <div class="title-start">
                <h2> {{ transWord('اراء عملاءنا') }} </h2>
            </div>

            <div class="owl-carousel owl-theme" id="slider-customer">
                @foreach ($feedbacks as $feedback)
                    <div class="item">
                        <div class="sub-customer-index">
                            <div class="img-customer-index">
                                <img src="{{ url('web') }}/imges/feedback.png" alt="{{ $feedback->name }}">
                            </div>
                            <div class="text-customer-index">
                                <p>{{ $feedback->review }}</p>
                                <h2>{{ $feedback->name }} </h2>
                                <h4>{{ $feedback->job_title }}</h4>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    <!-- end customer-index  -->

    <!-- our-partners -->
    <section class="our-partners mr-section">
        <div class="main-container">
            <div class="title-center">
                <h2>{{ transWord('شركائنا') }}</h2>
            </div>

            <div class="owl-carousel owl-theme" id="slider-our-partners">
                @foreach ($partners as $partner)
                    <div class="item">
                        <div class="sub-our-partners">
                            <img src="{{ asset('storage/' . $partner->image) }}" alt="">
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
    <!--end our-partners -->


    <!-- our-customers -->
    <section class="our-customers mr-section">
        <div class="title-center">
            <h2> {{ transWord('عملائنا') }}</h2>
        </div>
        <div class="main-our-customers">
            <div class="main-container">
                <div class="owl-carousel owl-theme" id="slider-our-customer">
                    @foreach ($clients as $client)
                        <div class="item">
                            <div class="sub-our-customers">
                                <img src="{{ asset('storage/' . $client->image) }}" alt="">
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
    <!--end our-customers -->

    @push('js')
        <script src="{{ asset('web/js/custom/validation/subscriptionForm.js') }}"></script>
    @endpush
@endsection