@extends('master')

@section('content')

    <!-- Main -->
    <main class="wrapper">
        <!-- Home -->
        <section id="home" data-scroll-index="0" class="home-section gray-bg">
            <div class="container">
                <div class="home-section-in">
                    <div class="row position-relative">
                        <div class="col-lg-8">
                            <div class="hs-left">
                                <h1>
                                    <span>{{ $homeField->_get('hero_title') }}</span>
                                    <br>{{ $homeField->_get('hero_title_2') }}
                                </h1>
                                <h2>{{ __('Ben,') }} <span id="type-it"></span></h2>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <div class="hs-right">
                                <p>{!! $homeField->_get('hero_content') !!}</p>
                                @if($homeField->_get('resume'))
                                    <div class="btn-bar">
                                        <a class="px-btn" target="_blank"
                                           href="{{ Storage::url($homeField->_get('resume')) }}">{{ __('CV İndir') }} <i
                                                class="bi-download"></i></a>
                                    </div>
                                @endif
                            </div>
                        </div>
                        <div class="bg-icon">
                            @if($homeField->_get('signature'))
                                <img style="max-height: 116px" src="{{ Storage::url($homeField->_get('signature')) }}"
                                     alt="Signature">

                            @endif

                        </div>
                    </div>
                    <div class="hs-banner">
                        <img src="{{ Storage::url($homeField->_get('hero_banner')) }}" title="" alt="">
                    </div>
                </div>
            </div>
        </section>
        <!-- End Home -->
        <!-- About -->
        <section id="about" data-scroll-index="1" class="section about-section">
            <div class="container">
                <div class="section-heading">
                    <h3>{{ $aboutField->_get('about_title') }}</h3>
                </div>
                <div class="row gy-4">
                    <div class="col-lg-5">
                        <div class="about-text">
                            {!! $aboutField->_get('about_content') !!}
                        </div>
                        <div class="about-banner">
                            <img src="{{ Storage::url($aboutField->_get('about_banner')) }}" title="" alt="">
                        </div>
                    </div>
                    <div class="col-lg-7">
                        <ul class="about-count">
                            @if(isset($aboutField->fields['values'][app()->getLocale()]))
                                @foreach($aboutField->fields['values'][app()->getLocale()] as $value)
                                    <li class="d-flex">
                                        <div class="col-5 col-sm-6">
                                            <div class="counter">
                                                {{ $value['value'] }}
                                            </div>
                                        </div>
                                        <div class="col-7 col-sm-6 ps-3">
                                            <h6>{{ $value['title'] }}</h6>
                                            <p>{{ $value['description'] }}</p>
                                        </div>
                                    </li>
                                @endforeach
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <!-- End About -->
        <!-- Services -->
        <section class="section gray-bg" data-scroll-index="1">
            <div class="container">

                <div class="row gy-4 gx-xxl-5">
                    <div class="{{ $educations->count() > 0 ? 'col-lg-4' : 'col-lg-6' }}">
                        <div class="section-heading">
                            <h4>
                                {{ __('Yetenekler') }}
                            </h4>
                        </div>
                        <div class="skill-section">

                            @foreach($skills as $skill)
                                <div class="skill-row">
                                    @if($skill->_get('icon'))
                                    <div class="skill-icon" style="padding: 7px">
                                        <x-dynamic-component :component="$skill->_get('icon')"/>
                                    </div>
                                    @endif
                                    <div class="skill-col">
                                        <h6>{{ $skill->_get('title') }}</h6>
                                        <div class="skill-bar">
                                        <span class="skill-bar-in" role="progressbar"
                                              aria-valuenow="{{ $skill->_get('value') }}"
                                              aria-valuemin="0" aria-valuemax="100"></span>
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                        </div>
                    </div>

                    @if($educations->count() > 0 )
                        <div class="col-lg-4">
                            <div class="section-heading">
                                <h4>
                                    {{ __('Eğitim') }}
                                </h4>
                            </div>
                            <ul class="aducation-box theme-bg">
                                @foreach($educations as $education)
                                    <li>
                                        <span class="dark-bg">{{ $education->_get('date') }}</span>
                                        <h6>{{ $education->_get('title') }}</h6>
                                        <p>{{ $education->_get('description') }}</p>
                                        <div class="icon">
                                            <i class="fa-solid fa-graduation-cap"></i>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <div class="{{ $educations->count() > 0 ? 'col-lg-4' : 'col-lg-6' }}">
                        <div class="section-heading">
                            <h4>
                                {{ __('Deneyim') }}
                            </h4>
                        </div>
                        <ul class="aducation-box dark-bg">
                            @foreach($experiences as $experience)
                                <li>
                                    <span class="theme-bg">{{ $experience->_get('date') }}</span>
                                    <h6>{{ $experience->_get('title') }}</h6>
                                    <p>{{ $experience->_get('description') }}</p>
                                    <div class="icon">
                                        <i class="fa-solid fa-briefcase"></i>
                                    </div>
                                </li>
                            @endforeach

                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <!-- End Services -->
        <!-- Services -->
        <section id="services" data-scroll-index="2" class="section services-section">
            <div class="container">
                <div class="section-heading">
                    <h3>
                        {{ __('Yetenekler & Hizmetler') }}
                    </h3>
                </div>
                <div class="row gy-4">
                    @foreach($services as $service)
                        <div class="col-sm-6 col-lg-4">
                            <div class="feature-box-01">
                                <div class="icon" style="padding: 16px">
                                    @if($service->_get('icon'))
                                        <x-dynamic-component :component="$service->_get('icon')"/>
                                    @endif

                                </div>
                                <div class="feature-content">
                                    <h5>{{ $service->_get('title') }}</h5>
                                    <p>{{ $service->_get('description') }}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>
        </section>
        <!-- End Services -->
        <!-- portfolio -->
        <section id="portfolio" data-scroll-index="3" class="section portfolio-section gray-bg">
            <div class="container">
                <div class="section-heading">
                    <h3>
                        <span>{{ __('Portfolyo') }}</span>
                    </h3>
                </div>
                <div class="lightbox-gallery">

                    @foreach($portfolios as $portfolio)
                        <div class="portfolio-row">
                            <div class="row align-items-center g-0 {{ $loop->even ? 'flex-row-reverse' : null }}">
                                <div class="col-sm-6 col-lg-6">
                                    <div class="portfolio-img">
                                        <img src="{{ Storage::url($portfolio->_get('image')) }}" title="" alt="">
                                        <a class="gallery-link" href="{{ Storage::url($portfolio->_get('image')) }}"><i
                                                class="bi-arrow-up-right-circle"></i></a>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-lg-5 col-xxl-4 pt-4 pt-sm-0 mx-auto">
                                    <div class="portfolio-text">
                                        <h6>{{ $portfolio->_get('type') }}</h6>
                                        <h5>{{ $portfolio->_get('title') }}</h5>
                                        <p>{!! $portfolio->_get('description') !!}</p>
                                        <div class="btn-bar">
                                            <a class="px_modal px-btn" href="#project"
                                               data-portfolio_id="{{ $portfolio->id }}">
                                                {{ __('Detaylar') }}<i class="fa fa-plus"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach

                </div>
            </div>
        </section>
        <!-- End portfolio -->

        <!-- contactus -->
        <section id="contactus" data-scroll-index="4" class="section contactus-section gray-bg">
            <div class="container">
                <div class="section-heading">
                    <h3>
                        <span>{{ __('İletişim Bilgileri') }}</span>
                    </h3>
                </div>
                <div class="row gy-5">
                    <div class="col-lg-7 pe-xl-5">
                        <div class="contact-form">
                            <div class="contact-head">
                                <h4>{{ __('Aklında bir fikir mi var?') }}</h4>
                                <p>{{ __('İletişime geçin ve hedeflerinize ulaşmanız için sonraki basamağı beraber tırmanalım.') }}</p>
                            </div>
                            <form id="contactForm" method="POST" action="{{ route('send-form') }}">
                                @csrf
                                <div class="row gx-3 gy-4">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label">{{ __('Adınız') }}</label>
                                            <input name="name" id="name" placeholder="{{ __('Adınız') }} *"
                                                   class="form-control" type="text">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label">{{ __('Email Adresiniz') }}</label>
                                            <input name="email" id="email" placeholder="{{ __('Email Adresiniz') }} *"
                                                   class="form-control" type="email">
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label class="form-label">{{ __('Konu') }}</label>
                                            <input name="subject" id="subject" placeholder="{{ __('Konu') }} *"
                                                   class="form-control" type="text">
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="form-label">{{ __('Mesajınız') }}</label>
                                            <textarea name="message" id="message" placeholder="{{ __('Mesajınız') }} *"
                                                      rows="6" class="form-control"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="send">
                                            <button id="sendButton" class="px-btn w-100" type="submit" value="Send"><i
                                                    id="sendButtonIcon"></i> {{ __('Mesaj Gönder') }}</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-lg-5 d-flex">
                        <div class="d-flex flex-column w-100">
                            <div class="contact-info">
                                <ul>
                                    @if($settings->_get('email'))
                                        <li>
                                            <div class="icon">
                                                <i class="bi-chat-left-dots-fill"></i>
                                            </div>
                                            <div class="text">
                                                <label>{{ __('Email') }}</label>
                                                <p>{{ __('Mail adresimizden iletişime geçebilirsiniz') }}
                                                    <span><a class="text-reset"
                                                             href="mailto:{{ $settings->_get('email') }}">{{ $settings->_get('email') }}</a></span>
                                                </p>
                                            </div>
                                        </li>
                                    @endif

                                    @if($settings->_get('address'))
                                        <li>
                                            <div class="icon">
                                                <i class="bi-compass"></i>
                                            </div>
                                            <div class="text">
                                                <label>{{ __('Adres') }}</label>
                                                <p> {{ __('Bir kahveye ne dersiniz?') }}
                                                    <span>{{ $settings->_get('address') }}</span></p>
                                            </div>
                                        </li>
                                    @endif

                                    @if($settings->_get('phone'))
                                        <li>
                                            <div class="icon">
                                                <i class="bi-phone"></i>
                                            </div>
                                            <div class="text">
                                                <label>{{ __('Telefon') }}</label>
                                                <p>{{ __('WhatsApp kullanarak 7/24 mesajlarınızı iletebilirsiniz') }}
                                                    <span>{{ $settings->_get('phone') }}</span></p>
                                            </div>
                                        </li>
                                    @endif
                                </ul>

                                @if($settings->_get('maps'))
                                    <div class="google-map mt-5">
                                        <div class="ratio ratio-21x9">
                                            {!! $settings->_get('maps') !!}
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End contactus -->
    </main>
    <!-- Main -->
    <!-- Snigle 1 -->
    <div id="project" class="px-modal mfp-hide">
        <div class="single-project-box">
            <div class="portfolio-loading">
                <span class="spinner-border"></span>
            </div>
            <div style="display: none" class="portfolio-content row align-items-start">
                <div class="col-lg-7">
                    <div class="row g-2" id="portfolio_gallery">
                        <!-- col-6 and img -->
                    </div>
                </div>
                <div class="col-lg-5 pt-4 pt-lg-0">
                    <h4 id="portfolio_title"></h4>
                    <p id="portfolio_description" class="mb-3"></p>

                    <div class="about-content">
                        <ul id="portfolio_features">
                            <!-- li -->
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if(isset($homeField->fields['slogans'][app()->getLocale()]))

        @php
            $get = collect($homeField->fields['slogans'][app()->getLocale()]);

            $all = $get->map(function($item, $key){
                return $item['slogan'];
            });

            $all = $all->toArray();
        @endphp
        <script>
            var typeit_list = {!! json_encode($all) !!}
        </script>

    @endif

@endsection