@extends('layouts.app')

@section('content')
<style>
    .btn-check:checked+.btn {
        background-color: rgb(231, 117, 11);
        color: white;
    }

    td,
    h4 {
        color: #333c4e !important
    }
</style>
<div class="container">
    <div>
        <form class="d-lg-flex mb-3" method="GET" action="{{ route('posts') }}">
            <div class="p-2 border rounded-3 border-1 p-1 bg-white">
                <input type="radio" class="btn-check" onclick="this.form.submit()" name="filter[category]" value="all"
                    id="option_all" autocomplete="off" checked>
                <label class="btn p-2 fs-5" for="option_all">Все</label>

                @foreach ($categories as $category)
                <input type="radio" class="btn-check" onclick="this.form.submit()" name="filter[category]"
                    value="{{ $category->value }}" id="cat_{{ $category->name }}" autocomplete="off"
                    {{ isset($filter) && isset($filter['category']) && $filter['category'] == $category->value ? 'checked' : '' }}>
                <label class="btn p-2 fs-5" for="cat_{{ $category->name }}">{{ __($category->name) }}</label>
                @endforeach
            </div>

            <div class="ms-auto py-2 hstack gap-2">
                @can('create', \Modules\Post\Models\Post::class)
                <div class="mb-3">
                    @livewire('post.form', ['post' => new \Modules\Post\Models\Post()])
                </div>
                @endcan
                <select class="d-none form-select form-select-lg bg-white" disabled aria-label="Large select example">
                    <option selected>Город: любой</option>
                    <option value="1">Иркутск</option>
                    <option value="2">Владивосток</option>
                    <option value="3">Красноярск</option>
                </select>
                <select class="d-none form-select form-select-lg bg-white" disabled aria-label="Large select example">
                    <option selected>Проект: все проекты</option>
                    <option value="1">Проект 1</option>
                    <option value="2">Проект 2</option>
                    <option value="3">Проект 3</option>
                </select>
            </div>

        </form>
    </div>

    <div>
        @livewire('posts.list', $filter)
    </div>
    <div class="position-fixed bottom-0 end-0 me-0 me-md-5" style="z-index:2000">
        <a class="m-2 me-md-5 btn btn-primary rounded-circle d-flex justify-content-center align-items-center"
            style="width:4rem;height:4rem" href="{{ route('post.create') }}">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-plus-lg"
                viewBox="0 0 16 16">
                <path fill-rule="evenodd"
                    d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2" />
            </svg>
        </a>
    </div>


</div>
@endsection