@extends('website.layouts.index')

@section('content')
<div id="home_page">
    <section id="about">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 image">
                    <img src='{{ mix("website/images/$locale/about-1.png","assets") }}'>
                </div>
                <div class="col-lg-5 text">
                    <h2 class="heading">@lang('website.about1.line_1')</h2>
                    <p class="first-line">@lang('website.about1.line_2')</p>
                    <p class="second-line">@lang('website.about1.line_3')</p>
                    <a href="https://digital-food.app/branches/97ee079e-9b82-46fd-897e-43677e4f6576" target="_blank">
                        <button class="button button-danger">
                            @lang('global.try_now')
                        </button>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <section id="about2">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 text">
                    <div class="logo">
                        <img src="{{ mix('images/logo.png','assets') }}">
                        <h2>@lang('website.digital-food')</h2>
                    </div>
                    <div class="tree">
                        <img src='{{ mix("website/images/$locale/list.png","assets") }}' class="tree-image">
                        <ul>
                            <li>@lang('website.about2.line_1')</li>
                            <li>@lang('website.about2.line_2')</li>
                            <li>@lang('website.about2.line_3')</li>
                            <li>@lang('website.about2.line_4')</li>
                            <li>@lang('website.about2.line_5')</li>
                            <li>@lang('website.about2.line_6')</li>
                            <li>@lang('website.about2.line_7')</li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-4 video d-lg-block d-none">
                    <video-js id="about2Video" class="video-js vjs-big-play-centered" muted controls height="500" loop data-setup='{}'>
                        <source src='{{ mix("website/images/$locale/about-2.mp4","assets") }}' type="video/mp4" />
                    </video-js>
                </div>
            </div>
        </div>
    </section>

    <section id="about3">
        <div class="container">
            <div class="row">
                <div class="col-lg-5 image">
                    <img src='{{ mix("website/images/$locale/about-3.png","assets") }}'>
                </div>
                <div class="col-lg-6 text">
                    <h2 class="heading">@lang('website.about3.line_1')</h2>
                    <p class="first-line">@lang('website.about3.line_2')</p>
                </div>
            </div>
        </div>
    </section>

    <section id="features">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 main-title">
                    <h2>@lang('website.features.title')</h2>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="owl-carousel owl-theme">
                        <div class="feature item">
                            <div class="card">
                                <img src="{{ mix('website/images/features/1.png','assets') }}">
                                <div class="card-body">
                                    <h5 class="card-title">@lang('website.features.feature_1.line_1')</h5>
                                    <p class="card-text">@lang('website.features.feature_1.line_2')</p>
                                </div>
                            </div>
                        </div>

                        <div class="feature item">
                            <div class="card">
                                <img src="{{ mix('website/images/features/2.png','assets') }}">
                                <div class="card-body">
                                    <h5 class="card-title">@lang('website.features.feature_2.line_1')</h5>
                                    <p class="card-text">@lang('website.features.feature_2.line_2')</p>
                                </div>
                            </div>
                        </div>

                        <div class="feature item">
                            <div class="card">
                                <img src="{{ mix('website/images/features/3.png','assets') }}">
                                <div class="card-body">
                                    <h5 class="card-title">@lang('website.features.feature_3.line_1')</h5>
                                    <p class="card-text">@lang('website.features.feature_3.line_2')</p>
                                </div>
                            </div>
                        </div>

                        <div class="feature item">
                            <div class="card">
                                <img src="{{ mix('website/images/features/4.png','assets') }}">
                                <div class="card-body">
                                    <h5 class="card-title">@lang('website.features.feature_4.line_1')</h5>
                                    <p class="card-text">@lang('website.features.feature_4.line_2')</p>
                                </div>
                            </div>
                        </div>

                        <div class="feature item">
                            <div class="card">
                                <img src="{{ mix('website/images/features/5.png','assets') }}">
                                <div class="card-body">
                                    <h5 class="card-title">@lang('website.features.feature_5.line_1')</h5>
                                    <p class="card-text">@lang('website.features.feature_5.line_2')</p>
                                </div>
                            </div>
                        </div>

                        <div class="feature item">
                            <div class="card">
                                <img src="{{ mix('website/images/features/6.png','assets') }}">
                                <div class="card-body">
                                    <h5 class="card-title">@lang('website.features.feature_6.line_1')</h5>
                                    <p class="card-text">@lang('website.features.feature_6.line_2')</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="subscriptions">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 main-title">
                    <h2>@lang('website.subscriptions.title')</h2>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row gap-lg-0 gap-4">
                <div class="col-lg-4 order-3 order-sm-1">
                    <div class="package">
                        <div class="details">
                            <h5 class="title">(@lang('website.subscriptions.platinum.title'))</h5>
                            <div class="price">
                                <div class="amount">$149</div>
                                <div class="period">@lang('global.monthly')</div>
                            </div>
                            <a href="{{ route('website.showRegisterForm',['package' => 'platinum']) }}" class="register">
                                <button class="btn brn-danger">
                                    @lang('global.subscribe_now')
                                </button>
                            </a>
                            <ul class="main-features">
                                <li>@lang('website.subscriptions.platinum.main_features.line_1')</li>
                                <li>{{-- @lang('website.subscriptions.platinum.main_features.line_2') --}}
                                    {{-- @lang('website.subscriptions.platinum.features.line_10') --}}
                                </li>
                            </ul>
                        </div>

                        <h4 class="features-title">
                            @lang('global.features-1') :
                        </h4>

                        <ul class="features">
                            {{-- <li>@lang('website.subscriptions.platinum.features.line_10')</li> --}}
                            <li>@lang('website.subscriptions.platinum.features.line_1')</li>
                            <li>@lang('website.subscriptions.platinum.features.line_2')</li>
                            <li>@lang('website.subscriptions.platinum.features.line_3')</li>
                            <li>@lang('website.subscriptions.platinum.features.line_4')</li>
                            <li>@lang('website.subscriptions.platinum.features.line_5')</li>
                            <li>@lang('website.subscriptions.platinum.features.line_6')</li>
                            <li>@lang('website.subscriptions.platinum.features.line_7')</li>
                            <li>@lang('website.subscriptions.platinum.features.line_8')</li>
                            <li>@lang('website.subscriptions.platinum.features.line_9')</li>
                            <li>@lang('website.subscriptions.platinum.features.line_10')</li>
                            <li>@lang('website.subscriptions.platinum.features.line_11')</li>
                            <li>@lang('website.subscriptions.platinum.features.line_12')</li>
                            <li>@lang('website.subscriptions.platinum.features.line_13')</li>
                        </ul>
                    </div>
                </div>

                <div class="col-lg-4 order-2">
                    <div class="package">
                        <div class="details">
                            <h5 class="title">(@lang('website.subscriptions.golden.title'))</h5>
                            <div class="price">
                                <div class="amount">$99</div>
                                <div class="period">@lang('global.monthly')</div>
                            </div>
                            <a href="{{ route('website.showRegisterForm',['package' => 'golden']) }}" class="register">
                                <button class="btn brn-danger">
                                    @lang('global.subscribe_now')
                                </button>
                            </a>

                            <ul class="main-features">
                                <li>@lang('website.subscriptions.golden.main_features.line_1')</li>
                                <li>{{-- @lang('website.subscriptions.golden.main_features.line_2') --}}
                                    {{-- lang('website.subscriptions.golden.features.line_10') --}}
                                </li>
                            </ul>
                        </div>

                        <h4 class="features-title">
                            @lang('global.features-1') :
                        </h4>

                        <ul class="features">
                            {{-- <li>@lang('website.subscriptions.golden.features.line_10')</li> --}}
                            <li>@lang('website.subscriptions.golden.features.line_1')</li>
                            <li>@lang('website.subscriptions.golden.features.line_2')</li>
                            <li>@lang('website.subscriptions.golden.features.line_3')</li>
                            <li>@lang('website.subscriptions.golden.features.line_4')</li>
                            <li>@lang('website.subscriptions.golden.features.line_5')</li>
                            <li>@lang('website.subscriptions.golden.features.line_6')</li>
                            <li>@lang('website.subscriptions.golden.features.line_7')</li>
                            <li>@lang('website.subscriptions.golden.features.line_8')</li>
                            <li>@lang('website.subscriptions.golden.features.line_9')</li>
                            <li>@lang('website.subscriptions.golden.features.line_10')</li>
                        </ul>
                    </div>
                </div>

                <div class="col-lg-4 order-1 order-sm-3">
                    <div class="package">
                        <div class="details">
                            <h5 class="title">(@lang('website.subscriptions.silver.title'))</h5>
                            <div class="price">
                                <div class="amount">$30</div>
                                <div class="period">@lang('global.monthly')</div>
                            </div>
                            <a href="{{ route('website.showRegisterForm',['package' => 'silver']) }}" class="register">
                                <button class="btn brn-danger">
                                    @lang('global.subscribe_now')
                                </button>
                            </a>

                            <ul class="main-features">
                                <li>@lang('website.subscriptions.silver.main_features.line_1')</li>
                                <li>{{-- @lang('website.subscriptions.silver.main_features.line_2') --}}
                                    {{-- @lang('website.subscriptions.silver.features.line_6') --}}
                                </li>
                            </ul>
                        </div>
                        <h4 class="features-title">
                            @lang('global.features-1') :
                        </h4>
                        <ul class="features">
                            {{-- <li>@lang('website.subscriptions.silver.features.line_6')</li> --}}
                            <li>@lang('website.subscriptions.silver.features.line_1')</li>
                            <li>@lang('website.subscriptions.silver.features.line_2')</li>
                            <li>@lang('website.subscriptions.silver.features.line_3')</li>
                            <li>@lang('website.subscriptions.silver.features.line_4')</li>
                            {{-- <li>@lang('website.subscriptions.silver.features.line_5')</li> --}}
                            <li>@lang('website.subscriptions.silver.features.line_6')</li>
                            <li>@lang('website.subscriptions.silver.features.line_7')</li>
                            <li>@lang('website.subscriptions.silver.features.line_8')</li>
                            <li>@lang('website.subscriptions.silver.features.line_9')</li>
                            <li>@lang('website.subscriptions.silver.features.line_10')</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="partners">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 main-title">
                    <h2>@lang('website.partners')</h2>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12">
                    <div class="owl-carousel owl-theme">
                        <div class="partner item m-auto" style="max-width: 70%;">
                            <img src="{{ mix('website/images/partners/1.png','assets') }}">
                        </div>

                        <div class="partner item m-auto" style="max-width: 70%;">
                            <img src="{{ mix('website/images/partners/2.png','assets') }}">
                        </div>

                        <div class="partner item m-auto" style="max-width: 70%;">
                            <img src="{{ mix('website/images/partners/3.png','assets') }}">
                        </div>

                        <div class="partner item m-auto" style="max-width: 70%;">
                            <img src="{{ mix('website/images/partners/4.png','assets') }}">
                        </div>

                        <div class="partner item m-auto" style="max-width: 70%;">
                            <img src="{{ mix('website/images/partners/5.png','assets') }}">
                        </div>

                        <div class="partner item m-auto" style="max-width: 70%;">
                            <img src="{{ mix('website/images/partners/6.png','assets') }}">
                        </div>

                        <div class="partner item m-auto" style="max-width: 70%;">
                            <img src="{{ mix('website/images/partners/7.png','assets') }}">
                        </div>

                        <div class="partner item m-auto" style="max-width: 70%;">
                            <img src="{{ mix('website/images/partners/8.png','assets') }}">
                        </div>

                        <div class="partner item m-auto" style="max-width: 70%;">
                            <img src="{{ mix('website/images/partners/9.png','assets') }}">
                        </div>

                        <div class="partner item m-auto" style="max-width: 70%;">
                            <img src="{{ mix('website/images/partners/10.png','assets') }}">
                        </div>

                        <div class="partner item m-auto" style="max-width: 70%;">
                            <img src="{{ mix('website/images/partners/11.png','assets') }}">
                        </div>
                    </div>
                </div>

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

    <section id="payment-methods">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 main-title">
                    <h2>@lang('website.payment_methods')</h2>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12">
                    <div class="owl-carousel owl-theme">
                        <div class="payment_method item">
                            <img src="{{ mix('website/images/payment_methods/1.png','assets') }}">
                        </div>

                        <div class="payment_method item">
                            <img src="{{ mix('website/images/payment_methods/2.png','assets') }}">
                        </div>

                        <div class="payment_method item">
                            <img src="{{ mix('website/images/payment_methods/3.png','assets') }}">
                        </div>

                        <div class="payment_method item">
                            <img src="{{ mix('website/images/payment_methods/4.png','assets') }}">
                        </div>

                        <div class="payment_method item">
                            <img src="{{ mix('website/images/payment_methods/5.png','assets') }}">
                        </div>
                    </div>
                </div>

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

    <section id="counters">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 main-title">
                    <h2>@lang('website.counters')</h2>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-4 col-6 counter">
                    <i class="las la-globe"></i>
                    <div>
                        <div class="number">+70</div>
                        <div class="text">@lang('website.country')</div>
                    </div>
                </div>
                <div class="col-lg-4 col-6 counter">
                    <i class="las la-language"></i>
                    <div>
                        <div class="number">+130</div>
                        <div class="text">@lang('website.languages')</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="contact">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 main-title">
                    <h2>@lang('global.contact_us')</h2>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 form-container">
                    <form class="row" action="{{ route('website.contact') }}" method="POST">
                        @if (session('success_contact'))
                        <div class="col-12">
                            <x-bootstrap.alert type="success" :messages="session('success_contact')" :with-exit="false" />
                        </div>
                        @endif

                        @csrf
                        <div class="col-lg-6 mb-3">
                            <label class="col-form-label">@lang('validation.attributes.first_name')</label>
                            <input class="form-control" name="first_name" required>
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label class="col-form-label">@lang('validation.attributes.last_name')</label>
                            <input class="form-control" name="last_name" required>
                        </div>
                        <div class="col-12 mb-3">
                            <label class="col-form-label">@lang('validation.attributes.email')</label>
                            <input class="form-control" name="email" type="email" required>
                        </div>
                        <div class="col-12 mb-3">
                            <label class="col-form-label">@lang('validation.attributes.message')</label>
                            <textarea class="form-control" name="message" rows="5" required></textarea>
                        </div>
                        <div class="col-lg-8 d-grid mx-auto">
                            <button type="submit" class="btn btn-danger">@lang('global.submit')</button>
                        </div>
                    </form>

                    <div class="row">
                        <div class="col-12">
                            <ul class="links">
                                <li>
                                    <a href="mailto:info@digital-food.app">
                                        <i class="las la-envelope"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="https://t.snapchat.com/9xF6iKpX">
                                        <img src="{{ mix('website/images/links/snapchat.png','assets') }}">
                                    </a>
                                </li>
                                <li>
                                    <a href="https://twitter.com/digitalfoodksa?s=21&t=iTG9GGVd7H-aBLxozjf4Gg">
                                        <img src="{{ mix('website/images/links/twitter.png','assets') }}">
                                    </a>
                                </li>
                                <li>
                                    <a href="http://www.linkedin.com/in/digital-food-760360255">
                                        <img src="{{ mix('website/images/links/linkedin.png','assets') }}">
                                    </a>
                                </li>
                                <li>
                                    <a href="https://instagram.com/digitalfoodksa?igshid=YmMyMTA2M2Y=">
                                        <img src="{{ mix('website/images/links/instagram.png','assets') }}">
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="map">
        <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14838.306627623553!2d39.1082886!3d21.6024419!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xf11d981517c55a1f!2z2LDYpyDZh9mK2K8g2YPZiNin2LHYqtix2LIg2KjYstmG2LMg2KjYp9ix2YM!5e0!3m2!1sar!2ssa!4v1635332690710!5m2!1sar!2ssa"></iframe>
    </section>
</div>
@endsection