@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">
                    <select class="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="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>
@endsection