@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>
                    <p class="second-line">@lang('website.about1.line_3')</p>
                    {{-- <a href="https://digital-hotel.app/branches/01H1V92NRTSYQVZ77P8XCP7QET/portfolio" 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_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 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="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="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>
                </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-hotel.app">
                                        <i class="las la-envelope"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="https://t.snapchat.com/1AGn0lx5">
                                        <img src="{{ mix('website/images/links/snapchat.png','assets') }}">
                                    </a>
                                </li>
                                <li>
                                    <a href="https://twitter.com/DigitalHotelksa?s=09">
                                        <img src="{{ mix('website/images/links/twitter.png','assets') }}">
                                    </a>
                                </li>
                                <li>
                                    <a href="https://www.linkedin.com/in/digitalhotel-hotel-94a363278">
                                        <img src="{{ mix('website/images/links/linkedin.png','assets') }}">
                                    </a>
                                </li>
                                <li>
                                    <a href="https://instagram.com/digitalhotelksa?igshid=MzRlODBiNWFlZA==">
                                        <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