@extends('layouts.layout')
@section('title') {{ __('Blog') }} @stop
@section('content')
<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>
<style>
    .go-to-link {
        height: 450px;
    }
    .go-to-link:hover {
        cursor: pointer;
        opacity: 0.8;
    }
</style>
<main>
	<section class="pt-5 pb-3 text-center container">
	<div class="row ">
		<div class="col-lg-12 mx-auto">
		<h1 class="fw-light font-libre" style="font-size: 4rem"><span class="golden-half px-2 py-1 mb-5">Blog</span></h1>
        <p>
            @if (in_array(1, Request::get('category_ids', [])))
                <button class="btn btn-gold my-3 category-btn" data-toggled="1" data-category-id="1">{{ __('Księgowość') }}</button>
            @else
                <button class="btn btn-main my-3 category-btn" data-toggled="0" data-category-id="1">{{ __('Księgowość') }}</button>
            @endif
            @if (in_array(2, Request::get('category_ids', [])))
                <button class="btn btn-gold my-3 category-btn" data-toggled="1" data-category-id="2">{{ __('Podatki') }}</button>
            @else
                <button class="btn btn-main my-3 category-btn" data-toggled="0" data-category-id="2">{{ __('Podatki') }}</button>
            @endif
            @if (in_array(3, Request::get('category_ids', [])))
                <button class="btn btn-gold my-3 category-btn" data-toggled="1" data-category-id="3">{{ __('Kadry') }}</button>
            @else
                <button class="btn btn-main my-3 category-btn" data-toggled="0" data-category-id="3">{{ __('Kadry') }}</button>
            @endif
            @if (in_array(4, Request::get('category_ids', [])))
                <button class="btn btn-gold my-3 category-btn" data-toggled="1" data-category-id="4">{{ __('Raportowanie') }}</button>
            @else
                <button class="btn btn-main my-3 category-btn" data-toggled="0" data-category-id="4">{{ __('Raportowanie') }}</button>
            @endif
            @if (in_array(5, Request::get('category_ids', [])))
                <button class="btn btn-gold my-3 category-btn" data-toggled="1" data-category-id="5">{{ __('Biznes') }}</button>
            @else
                <button class="btn btn-main my-3 category-btn" data-toggled="0" data-category-id="5">{{ __('Biznes') }}</button>
            @endif
            @if (in_array(0, Request::get('category_ids', [])))
                <button class="btn btn-gold my-3 category-btn" data-toggled="1" data-category-id="0">{{ __('Inne') }}</button>
            @else
                <button class="btn btn-main my-3 category-btn" data-toggled="0" data-category-id="0">{{ __('Inne') }}</button>
            @endif

        </p>
        @if (Auth::check())
            <p>
                <a href="/blog/post/create" class="btn btn-success my-2">Dodaj</a>
            </p>
            <form action="/logout" method="POST">
                @csrf
                <button class="btn btn-danger" type="submit">Wyloguj się</button>
            </form>
        @endif
        </div>
    </div>
    </section>
    <div class="album bg-body-tertiary font-open-sans">
        <div class="container py-5">
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
                @foreach($posts as $post)
                    <div class="col p-4">
                        @if (Auth::check())
                            <div style="display:flex">
                                <form action="/blog/post/delete/{{ $post->id }}" method="POST">
                                    @csrf
                                    <button type="submit" class="btn btn-danger btn-sm me-3">Usuń</button>
                                </form>
                                <a href="/blog/post/edit/{{ $post->id }}" class="btn btn-secondary btn-sm">Edytuj</a>
                            </div>
                        @endif
                        <div class="card shadow-sm rounded-3 go-to-link d-flex" data-id="{{ $post->id }}">
                            <img src="{{ $post->thumbnail_base64 }}" class="img img-fluid" alt="">
                            <div class="card-body">
                                <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 py-2" style="font-weight:500">{{ $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->title }} Thumbnail Photo">
                                    </div>
                                @endif
                                <div class="">
                                    <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>
                                <small class="text-body-secondary"></small>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="row mx-auto mt-4">
                <div class="offset-5 col-2">
                    {{ $posts->links() }}
                </div>
            </div>
        </div>
    </div>
</main>
@stop