@php
use App\Components\SearchQueryComponent;
use Carbon\Carbon;
use App\Enums\TaskStatus;
use App\Enums\Service;
use App\Models\User;
@endphp
@extends('layouts.user')
@section('content')
<div class="wrapper-page page-tasks page-common">
    <div class="wrapper-breadcrumbs d-flex align-items-center">

        <span>タスク一覧</span>
    </div>
    <div class="wrapper-container">
        <div class="wrapper-scroll">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 col-sm-12 col-xs-12">
                                <div class="new-search-form d-flex">

                                    <search-task :page-limit="{{ $newSizeLimit }}"
                                        :url="{{ json_encode(route('tasks.index')) }}"
                                        :data-query="{{json_encode(!empty($request) ? $request->all() : new stdClass)}}"
                                        :status="{{ json_encode($data) }}">
                                    </search-task>

                                    @can('create', [User::class, Service::TASK])
                                        <a href="{{ route('tasks.create') }}"
                                            class="btn btn-create">
                                            <span>新規登録</span>
                                        </a>
                                    @endCan
                                </div>
                            </div>
                        </div>
                        <div class="task-list">
                            <div class="row mb-14">
                                <div class="col-md-5 col-sm-5 col-xs-12 group-select-page d-flex">
                                    <limit-page-option :limit-page-option="{{ json_encode([20, 50, 100]) }}"
                                        :new-size-limit="{{ $newSizeLimit }}"></limit-page-option>
                                </div>
                            </div>
                            @if (!$task->isEmpty())
                                <div class="custom-paginate">
                                    {{ $task->appends(SearchQueryComponent::alterQuery($request))->links('pagination.admin') }}
                                </div>
                            @endif
                            <div class="new-table">
                                <table class="table table-striped table-bordered ">
                                    <thead>
                                        <tr>
                                            <th>
                                                <span class="fz-12">@sortablelink('title', ' タスク')</span>
                                                <br>
                                                <span class="fz-10">@sortablelink('plan', ' 完了予定日')</span>
                                            </th>
                                            <th> <span class="fz-12">@sortablelink('status', ' ステータス')</span> </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($task as $item)
                                        <tr>
                                            <td>
                                                <h6> <span class="text-title">{{ $item->title }}</span> <br>
                                                    <span class="text-date">
                                                        {{ Carbon::parse($item->plan)->format('Y-m-d') }}
                                                    </span>
                                                </h6>
                                            </td>
                                            <td >
                                                @if ($item->status == TaskStatus::CREATED)
                                                <button type="submit"
                                                    class="btn btn-warning btn-radius-auto badge bg-secondary"
                                                    data-coreui-toggle="modal"
                                                    data-coreui-target="{{ '#exampleModal' . $item->id }}">
                                                    {{ TaskStatus::getDescription($item->status) }}
                                                </button>
                                                @endif
                                                @if ($item->status == TaskStatus::PROCESSING)
                                                <button type="submit"
                                                    class="btn btn-warning btn-radius-auto badge bg-success"
                                                    data-coreui-toggle="modal"
                                                    data-coreui-target="{{ '#exampleModal' . $item->id }}">
                                                    {{ TaskStatus::getDescription($item->status) }}
                                                </button>
                                                @endif
                                                @if ($item->status == TaskStatus::COMPLETED)
                                                <button type="submit"
                                                    class="btn btn-warning btn-radius-auto badge bg-warning"
                                                    data-coreui-toggle="modal"
                                                    data-coreui-target="{{ '#exampleModal' . $item->id }}">
                                                    {{ TaskStatus::getDescription($item->status) }}
                                                </button>
                                                @endif
                                                <div class="modal fade " id="{{ 'exampleModal' . $item->id }}">
                                                    <div class="modal-dialog modal-dialog-centered">
                                                        <div class="modal-content">
                                                            <div class="modal-header">
                                                                <h5 class="modal-title"
                                                                    id="{{ 'exampleModalLabel' . $item->id }}">
                                                                    タスクのステータスを変更
                                                                </h5>
                                                                <button type="button" class="btn-close"
                                                                    data-coreui-dismiss="modal"
                                                                    aria-label="Close"></button>
                                                            </div>
                                                            <div class="modal-body text-center">
                                                                <div class="row row-cols item-model">
                                                                    <div class="row">
                                                                        <task-list :data="{{ json_encode([
                                                                                        'task' => $task,
                                                                                        'PROCESSING' => TaskStatus::PROCESSING,
                                                                                        'COMPLETED' => TaskStatus::COMPLETED,
                                                                                        'urlUpdateStatus' => route('tasks.updateStatus', $item->id),
                                                                                    ]) }}">

                                                                        </task-list>
                                                                        <button
                                                                            class="btn btn-outline-secondary btn-radius-auto btn-select mt-2">
                                                                            <a class="dropdown-item"
                                                                                href="{{ route('tasks.edit', $item->id) }}"
                                                                                class="dropdown-item">
                                                                                編集
                                                                            </a>
                                                                        </button>
                                                                        <status-delete
                                                                            class="btn btn-outline-secondary bg-danger btn-action-create btn-select chart mt-2 "
                                                                            :message-confirm="{{ json_encode('このタスクを削除しますか？') }}"
                                                                            :delete-action="{{ json_encode(route('tasks.destroy', $item->id)) }}">
                                                                            削除
                                                                        </status-delete>
                                                                    </div>

                                                                </div>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>
                                                <button onclick="showDetail('{{ route('tasks.show', $item->id) }}')" class="btn btn-warning btn-radius-auto badge bg-success mt-1">
                                                    内容を見る
                                                </button>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        @if (!$task->isEmpty())
                        <div class="group-paginate">
                            {{ $task->appends(SearchQueryComponent::alterQuery($request))->links('pagination.admin') }}
                        </div>
                        @else
                        <data-empty></data-empty>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
<script>
    function showDetail(route) {
        window.location.href = route;
    }
</script>