@extends('layouts.admin', ['title' => 'Кейсы'])

@section('content')
    <div class="container">
        <div class="page__header">
            <a href="{{route('admin.cases.create')}}" class="button button--mobile--full button--middle button--white">
                Добавить +
            </a>
            <form action="#" class="search-form">
                <label class="search-form__label">
                    <input type="text" class="search-form__input" placeholder="Найти...">
                </label>
            </form>
        </div>
        <div class="page__content">
            <div class="table">
                <div class="table__wrapper">
                    <div class="table__row table__row--title">
                        <div class="table__column table__column--tiny">
                            <p class="title title--small title--bold title--grey">
                                №
                            </p>
                        </div>
                        <div class="table__column table__column--full">
                            <p class="title title--small title--bold title--grey">
                                Название
                            </p>
                        </div>
                        <div class="table__column table__column--base">
                            <p class="title title--small title--bold title--grey">
                                Клиент
                            </p>
                        </div>
                        <div class="table__column table__column--base">
                            <p class="title title--small title--bold title--grey">
                                Теги
                            </p>
                        </div>
                        <div class="table__column table__column--small">
                            <p class="title title--small title--bold title--grey">
                                Дата
                            </p>
                        </div>
                        <div class="table__column table__column--small">
                            <p class="title title--small title--bold title--center title--grey">
                                Статус
                            </p>
                        </div>
                        <div class="table__column table__column--small">
                            <p class="title title--small title--bold title--grey">
                                Действия
                            </p>
                        </div>
                    </div>
                    @foreach ($cases as $case)
                        <div class="table__row">
                            <div class="table__column table__column--tiny">
                                <label>
                                    <input type="text" data-change-order="{{$case->id}}" class="title title--base title--grey table__input" value="{{$case->order}}">
                                </label>
                            </div>
                            <div class="table__column table__column--full">
                                <p class="title title--base title--grey">
                                    {{$case->title}}
                                </p>
                            </div>
                            <div class="table__column table__column--base">
                                <p class="title title--base title--grey">
                                    {{$case->client_name}}
                                </p>
                            </div>
                            <div class="table__column table__column--base">
                                @foreach ($case->tags_link()->get() as $tag)
                                    <p class="title title--base title--grey">
                                        {{$tag->tag->name}}
                                    </p>
                                @endforeach
                            </div>
                            <div class="table__column table__column--small">
                                <p class="title title--base title--grey">
                                    {{\Illuminate\Support\Carbon::parse($case->created_at)->format('d.m.Y')}}
                                </p>
                            </div>
                            <div class="table__column  table__column--small">
                                <span class="table__status table__status--disabled">
                                </span>
                            </div>
                            <div class="table__column table__column--small">
                                <div class="table__action">
                                    <a href="{{ route('admin.cases.edit', $case) }}" class="table__edit">
                                        <svg class="icon">
                                            <use xlink:href="/assets/images/sprite-admin.svg#edit"></use>
                                        </svg>
                                    </a>
                                    <form action="{{ route('admin.cases.destroy', $case) }}" method="post" onsubmit="window.confirmSubmit(event, {{$case->id}})">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="table__edit">
                                            <a href="#" class="table__edit">
                                                <svg class="icon">
                                                    <use xlink:href="/assets/images/sprite-admin.svg#trash"></use>
                                                </svg>
                                            </a>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-center">
            {!! $cases->links() !!}
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let elements = document.querySelectorAll('[data-change-order]')
            for(let el of elements) {
                el.addEventListener('blur', function (event) {
                    let case_id = event.target.getAttribute('data-change-order');
                    let order = event.target.value;

                    window.AdminAPI.cases.change_order(case_id, order, function (data) {
                        console.log(data)
                    })
                })
            }
        })
    </script>
@endsection