@extends('layouts.admin', ['title' => 'Лента'])

@section('content')
    <div class="content__wrapper content__wrapper--editor">
        <div class="block">
            <div class="block__wrapper block__wrapper--big">
                <a href="/admin" class="content__back text text--small text--medium text--grey--lighter">Вернуться назад</a>
                <div class="settings-filter">
                    <div class="settings-filter__row">
                        <a href="{{route('admin.pages.create')}}" class="button button--base button--base--middle button--base--small--radius button--full button--white">Новая страница +</a>
                        <div
                            class="settings-filter__select select select--input--filter select--input select--input--big custom-select">
                            <select class="select__tag" name="" id="">
                                <option value="">Все</option>
                                <option @selected(request()->get('status') === \App\Models\Page::STATUS_ACTIVE) value="{{\App\Models\Page::STATUS_ACTIVE}}">Опубликованные</option>
                                <option @selected(request()->get('status') === \App\Models\Page::STATUS_DRAFT) value="{{\App\Models\Page::STATUS_DRAFT}}">Черновики</option>
                            </select>
                        </div>
                    </div>
                    <div class="card settings-filter__input">
                        <div class="card__wrapper card__wrapper--radius--small">
                            <input type="text" class="input input--big" name="search" value="{{request()->get('search')}}" placeholder="Поиск...">
                        </div>
                    </div>
                </div>
                <div class="block__wrapper">
                    @if(count($pages) === 0)
                        Страниц не найдено
                    @endif
                    @foreach ($pages as $page)
                        <div class="card card__wrapper card__wrapper--mixed card__wrapper--radius--small">
                            <div class="card-table">

                                <div class="card__column card__column--small card-table__item card-table__item--big">
                                    <p class="text text--big text--black--dark">
                                        {{$page->name}}
                                    </p>
                                    <p class="text text--big text--grey text--regular">
                                        <a href="/{{$page->link}}">{{$page->link}}</a>
                                    </p>
                                </div>
                                <div class="card-table__item">
                                    <p class="status" style="--status-color: #40C700">
                                        <span class="text text--big text--grey">{{$page->status}}</span>
                                    </p>
                                </div>
                                <div class="card-table__item">
                                    <form action="{{ route('admin.pages.destroy', $page) }}"
                                          method="POST"
                                          onsubmit="window.confirmSubmit(event, {{$page->id}})">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="text text--big text--red">
                                            Удалить
                                        </button>
                                    </form>
                                </div>
                                <div class="card-table__item">
                                    <a href="{{route('admin.pages.edit', ['page' => $page->id])}}" class="text text--big text--blue">
                                        Редактировать
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            function refresh() {
                const status = document.querySelector('.select__tag').value;
                const search = document.querySelector('[name=search]').value;
                location.href = '/admin/pages?status=' + status + '&search=' + search;
            }

            document.querySelector('.select__tag').addEventListener('change', refresh)

            document.querySelector('[name=search]').addEventListener('blur', refresh)

            document.querySelector('[name=search]').addEventListener('keypress', function (e) {
                if (e.key === 'Enter') {
                    refresh()
                }
            })
        })
    </script>
@endsection