@extends('portfolio.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>
                    <a href="https://digital-clinic.app/spas/01HQJPMESGHTY0NERRCNW7HGQ3/menu" 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">
                        <h2>@lang('website.about2.line_1')</h2>
                    </div>
                    <div class="tree">
                        <ul>
                            <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>
                            <li>@lang('website.about2.line_8')</li>
                            <li>@lang('website.about2.line_9')</li>
                            <li>@lang('website.about2.line_10')</li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-4 text-center">
                    <img src='{{ mix("website/images/$locale/about-2.png","assets") }}' width="300px" />
                </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>
                </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">7200 SAR</div>
                                <div class="period">@lang('global.yearly')</div>
                            </div>
                            <a href="#" class="register">
                                <button class="btn brn-danger">
                                    @lang('global.subscribe_now')
                                </button>
                            </a>
                        </div>

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

                        <ul class="features">
                            <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>
                            <li>@lang('website.subscriptions.platinum.features.line_14')</li>
                            <li>@lang('website.subscriptions.platinum.features.line_15')</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">5175 SAR</div>
                                <div class="period">@lang('global.yearly')</div>
                            </div>
                            <a href="#" class="register">
                                <button class="btn brn-danger">
                                    @lang('global.subscribe_now')
                                </button>
                            </a>
                        </div>

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

                        <ul class="features">
                            <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>
                        </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">1575 SAR</div>
                                <div class="period">@lang('global.yearly')</div>
                            </div>
                            <a href="#" class="register">
                                <button class="btn brn-danger">
                                    @lang('global.subscribe_now')
                                </button>
                            </a>
                        </div>
                        <h4 class="features-title">
                            @lang('global.features-1') :
                        </h4>
                        <ul class="features">
                            <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>
                        </ul>
                    </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="" 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-clinic.app">
                                        <i class="las la-envelope"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="https://twitter.com/digitalclinicsa">
                                        <img src='{{ mix("website/images/twitter.png","assets") }}'>
                                    </a>
                                </li>
                                <li>
                                    <a href="https://www.instagram.com/digitalclinicksa/">
                                        <i class="lab la-instagram"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="https://www.facebook.com/Digitalclinicksa">
                                        <i class="lab la-facebook"></i>
                                    </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