@extends('layouts.layout')
@section('title') {{ __('Strona Główna') }} @stop
@section('content')
<style>
    .go-to-link:hover {
        cursor: pointer;
        opacity: 0.8;
    }
    .chart-bar {
        width: 15%;
        display: inline-block;
        margin: 0 8px;
        background-color: white;
    }

    .chart-bar.gold {
        background-color: var(--main-gold);
    }

    .fs-text-1 {
        font-size: 2.2rem;
    }
    .fs-text-2 {
        font-size: 1.1rem;
    }

    @media (min-width: 1200px) {
        .chart-bar {
            width: 85px;
            display: inline-block;
            margin: 0 8px;
            background-color: white;
        }
        .fs-text-1 {
            font-size: 2.7rem;
        }
        .fs-text-2 {
            font-size: 1.25rem;
        }
    }

</style>
<script>
    $(document).ready(function() {
        $('.go-to-link').on('click', function () {
            let id = $(this).data('id');
            window.location.href = '/blog/post/' + id;
        });
        $('.category-btn').on('click', function () {
            let id = $(this).data('category-id');
            let toggled = $(this).data('toggled');
            let url = new URL(window.location.href);
            let params = new URLSearchParams(url.search);

            if (toggled === 1) {
                let values = params.getAll('category_ids[]');
                params.delete('category_ids[]');
                values.forEach(value => {
                    if (value !== String(id)) {
                        params.append('category_ids[]', value);
                    }
                });
            } else {
                params.append('category_ids[]', id);
            }

            url.search = params.toString();
            window.location.href = url.toString();

        });

    });
</script>
<section class="container-fluid bg-main font-white pb-lg-5" style="margin-top: -1px">
    <div class="container py-3">
        <div class="row">
            <div class="col-lg-5 font-libre">
                <p class="text-lg-start fs-text-1">{{ __('Wychodzimy poza ramy klasycznych finansów') }}</p>
                <p class="font-open-sans mt-5 mb-4 fs-text-2">{{ __('by dostarczyć wartość dla Twojej firmy.') }}</p>
                <div class="row pt-3 d-lg-flex d-none">
                    <div class="col-6">
                        <a href="/kontakt" class="btn btn-gold me-2 font-open-sans w-100 py-2">{{ __('Skontaktuj się') }}</a>
                    </div>
                    <div class="col-6">
                        <a href="/o-nas" class="btn btn-outline-gold font-open-sans w-100 py-2">{{ __('O nas') }}</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-7 text-center mt-4">
                {{-- lg --}}
                <div class="d-none justify-content-end align-items-end d-lg-flex pe-lg-4">
                    <div class="chart-bar" style="height: 90px;"></div>
                    <div class="chart-bar" style="height: 170px;"></div>
                    <div class="chart-bar" style="height: 260px;"></div>
                    <div class="chart-bar" style="height: 210px;"></div>
                    <div class="chart-bar gold" style="height: 340px;"></div>
                </div>
                {{-- sm --}}
                <div class="d-flex justify-content-center align-items-end d-lg-none mx-2 mt-3 pt-3">
                    <div class="chart-bar" style="height: 50px;"></div>
                    <div class="chart-bar" style="height: 75px;"></div>
                    <div class="chart-bar" style="height: 170px;"></div>
                    <div class="chart-bar" style="height: 100px;"></div>
                    <div class="chart-bar gold" style="height: 230px;"></div>
                </div>
                <div class="row pt-2 d-flex d-lg-none mt-5 pb-5">
                    <div class="col-6">
                        <a href="/kontakt" class="btn btn-gold font-open-sans w-100 p-2" style="font-size: 1rem">{{ __('Skontaktuj się') }}</a>
                    </div>
                    <div class="col-6">
                        <a href="/o-nas" class="btn btn-outline-gold font-open-sans w-100 p-2" style="font-size: 1rem">{{ __('O nas') }}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="container-fluid py-5 my-lg-5">
    <div class="container pe-lg-5">
        <h1 class="fw-light font-libre text-center my-3" style="font-size: 2.5rem"><span class="golden-half px-2 py-1 mb-5">{{ __('Dlaczego') }} </span> {{ __('My') }}?</h1>
        @include('components.expandable-4', [
            'key' => 'main-1',
            'title_1' => __('Zero papieru'),
            'text_1' => __('Eliminacja papierowych dokumentów na rzecz <b>cyfrowych rozwiązań</b>, co pozwala na <b>szybszy obieg informacji</b>, lepsze zabezpieczenie danych i <b>oszczędność zasobów</b>.'),
            'image_path_1' => '/images/paperless.webp',
            'title_2' => __('Raportowanie overnight'),
            'text_2' => __('Śledzimy sytuację finansową firmy w <b>czasie rzeczywistym</b>, co daje <b>pełną kontrolę</b> nad przepływami gotówki. Dzięki temu możesz <b>natychmiastowo reagować</b> na wszelkie zmiany i podejmować decyzje na podstawie <b>najbardziej aktualnych</b> danych.'),
            'image_path_2' => '/images/raportowanie.webp',
            'title_3' => __('Dedykowani specjaliści'),
            'text_3' => __('Nasi <b>dedykowani specjaliści zarekomendują</b> i wdrożą rozwiązanie <b>idealne dla Twojego biznesu</b> wspierając jego rozwój na każdym etapie.'),
            'image_path_3' => '/images/Dedykowani specjaliści.webp',
            'title_4' => __('Oszczędność środków'),
            'text_4' => __('Zajmujemy się Twoimi finansami, dzięki czemu <b>nie musisz budować całego zespołu</b> - oszczędzasz czas, pieniądze i zyskujesz dostęp do <b>doświadczonych</b> specjalistów.'),
            'image_path_4' => '/images/oszczednosc-srodkow.webp',
        ])
    </div>
</section>
<section class="container py-lg-5 text-center text-lg-start">
    <div class="row px-lg-5">
        <div class="col-lg-5">
            <h1 class="fw-light font-libre pt-3 my-lg-5 pt-lg-5 pb-5 font-libre" style="font-size: 2.5rem">{{ __('Nasze') }} <span class="golden-half">{{ __('usługi') }}</span></h1>
            <ul class="list-unstyled font-open-sans" style="font-size:1.5rem">
                <li class="my-4">{{ __('Raportowanie BI') }} &nbsp;</li>
                <li>{{ __('Doradztwo') }}</li>
            </ul>
            <a href="/uslugi" class="btn btn-main mt-4">{{ __('Poznaj nasze usługi') }}</a>
        </div>
        <div class="col-lg-7 d-flex mt-5">
            <img src="/images/section-2-image.webp" class="img img-fluid" alt="">
        </div>
    </div>
</section>
<section class="container py-lg-5">
    <div class="row px-lg-5">
        <div class="col-12">
            <h1 class="fw-light font-libre my-5 pt-lg-2 text-center" style="font-size: 2.5rem"> {{ __('Zobacz co mamy do') }} <span class="golden-half">{{ __('powiedzenia') }}<span></h1>
        </div>
    </div>
    {{-- desktop --}}
    <div class="row py-lg-5 d-none d-lg-flex">
        <div id="carousel-home" class="carousel slide carousel-dark" data-bs-ride="carousel">
            <div class="carousel-inner">
                @foreach ($chunked_posts as $key => $chunk)
                    <div class="carousel-item @if ($key == 0) active @endif">
                        <div class="row justify-content-center mx-0 font-open-sans">
                            @foreach ($chunk as $post)
                                <div class="col-12 col-md-6 col-lg-4 my-3">
                                    <div class="card shadow-sm rounded-3 go-to-link" data-id="{{ $post->id }}">
                                        <img src="{{ $post->thumbnail_base64 }}" class="img img-fluid" alt="{{ __('Miniaturka publikacji') }}">
                                        <div class="card-body pt-2">
                                            <div class="my-2">
                                                <span class="bg-main rounded-2 font-white px-2 py-1" style="font-size: 0.8rem">
                                                    {{ $post->category }}
                                                </span>
                                            </div>
                                            <p class="card-text ms-1" style="font-weight:500; font-size:1.1rem">
                                                {{ $post->getTransTitle() }}
                                            </p>
                                            <div class="d-flex align-items-center">
                                                @if (strlen($post->author_thumbnail_base64) > 0)
                                                    <div>
                                                        <img src="{{ $post->author_thumbnail_base64 }}"
                                                            class="img img-fluid rounded-circle"
                                                            style="max-width:40px"
                                                            alt="{{ $post->getTransTitle() }} {{ __('Miniaturka') }}">
                                                    </div>
                                                @endif
                                                <span class="px-1" style="font-size: 0.8rem">
                                                    <span class="mx-2">{{ Str::limit($post->author, 50) }}</span>
                                                    <span class="ms-auto text-secondary">{{ $post->created_at->diffForHumans() }}</span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carousel-home" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Poprzedni</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carousel-home" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Następny</span>
            </button>
        </div>
    </div>
    {{-- mobile --}}
    <div class="row py-lg-5 d-flex d-lg-none">
        <div id="carousel-home" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                @foreach ($chunked_posts as $chunk)
                    @foreach ($chunk as $key => $post)
                        <div class="carousel-item p-3 @if ($key == 0) active @endif">
                            <div class="row justify-content-center mx-0 font-open-sans">
                                <div class="col-12 col-md-6 col-lg-4 my-3">
                                    <div class="card shadow-sm rounded-3 go-to-link" data-id="{{ $post->id }}">
                                        <img src="{{ $post->thumbnail_base64 }}" class="img img-fluid" alt="Post Thumbnail">
                                        <div class="card-body pt-2">
                                            <div class="my-2">
                                                <span class="bg-main rounded-2 font-white px-2 py-1" style="font-size: 0.8rem">
                                                    {{ $post->category }}
                                                </span>
                                            </div>
                                            <p class="card-text ms-1" style="font-weight:500; font-size:1.1rem">
                                                {{ $post->getTransTitle() }}
                                            </p>
                                            <div class="d-flex align-items-center">
                                                <div>
                                                    <img src="{{ $post->author_thumbnail_base64 }}"
                                                        class="img img-fluid rounded-circle"
                                                        style="max-width:40px"
                                                        alt="{{ $post->getTransTitle() }} {{ __('Miniaturka') }}">
                                                </div>
                                                <span class="px-1" style="font-size: 0.8rem">
                                                    <span class="mx-2">{{ Str::limit($post->author, 50) }}</span>
                                                    <span class="ms-auto text-secondary">{{ $post->created_at->diffForHumans() }}</span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endforeach
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carousel-home" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden"></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carousel-home" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden"></span>
            </button>
        </div>
    </div>
    <div class="row my-5">
        <div class="col-lg-12 text-center">
            <a href="/blog" class="btn btn-main font-open-sans px-5">{{ __('Zobacz więcej') }}</a>
        </div>
    </div>
</section>
@stop