@extends('back.layout')

@section('title')
{{ __('e27') }} - {{ __('n1') }}
@endsection

@section('content')
    <div class="content-wrapper content-wrapper--with-bg">
        <h1 class="page-title fw-bold dir">{{ __('e28') }} : {{ $task->title }}</h1>
        <div class="page-content dir">
            <table class="table">
                <thead>
                    <tr>
                        <th class="fw-bold text-center fs-6">{{ __('e29') }}</th>
                        <th class="fw-bold text-center fs-6">{{ $task->title }}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="fw-bold text-center fs-6">{{ __('e30') }}</td>
                        <td class="fw-bold text-center fs-6">{{ $task->description }}</td>
                    </tr>
                    <tr>
                        <td class="fw-bold text-center fs-6">{{ __('e31') }}</td>
                        <td class="fw-bold text-center fs-6">
                            <a href="{{ $task->link }}" class="btn btn-success fw-bold" target="_blank">{{ __('e32') }}</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="fw-bold text-center fs-6">{{ __('e33') }}</td>
                        <td class="fw-bold text-center fs-6">{{ $task->price }} TRX</td>
                    </tr>

                    @if (auth()->user()->id == 1)
                        <tr>
                            <td class="fw-bold text-center fs-6">{{ __('e34') }}</td>
                            <td class="fw-bold text-center fs-6">{{ $task->duration }} {{ __('e34s') }}</td>
                        </tr>
                        <tr>
                            <td class="fw-bold text-center fs-6">{{ __('e35') }}</td>
                            <td class="fw-bold text-center fs-6">{{ $task->users_per_duration }} {{ __('e35s') }}</td>
                        </tr>
                    @endif
                    <tr>
                        <td class="fw-bold text-center fs-6">{{ __('e36') }}</td>
                        <td class="fw-bold text-center fs-6">
                            @if ($task->type == 1)
                            {{ __('e37') }}
                            @elseif ($task->type == 2)
                            {{ __('e38') }}
                            @elseif ($task->type == 3)
                            {{ __('e39') }}
                            @endif
                        </td>
                    </tr>

                    @if (auth()->user()->id == 1)
                    <tr>
                        <td class="fw-bold text-center fs-6">{{ __('e40') }}</td>
                        <td class="fw-bold text-center fs-6">
                            @if ($task->status == 1)
                            {{ __('e41') }}
                            @else
                            {{ __('e42') }}
                            @endif
                        </td>
                    </tr>
                    @endif
                    <tr>
                        <td class="fw-bold text-center fs-6">{{ __('e43') }}</td>
                        <td class="fw-bold text-center fs-6">{{ \Carbon\Carbon::parse($task->created_at)->diffForHumans() }}</td>
                    </tr>

                    @if (auth()->user()->id == 1)
                    <tr>
                        <td class="fw-bold text-center fs-6">{{ __('e44') }}</td>
                        <td class="fw-bold text-center fs-6">{{ \Carbon\Carbon::parse($task->updated_at)->diffForHumans() }}</td>
                    </tr>
                    @endif
                </tbody>
            </table>

            <div class="d-flex justify-content-between dd-bb">
                @if (auth()->user()->id == 1)
                <a href="" data-bs-toggle="modal" data-bs-target="#editModal" class="btn btn-primary fw-bold">
                    <i class="fa-solid fa-edit"></i>
                    {{ __('e45') }}
                </a>

                

                @if ($task->status == 1)
                    <a href="" data-bs-toggle="modal" data-bs-target="#NoModal" class="btn btn-warning fw-bold">
                        <i class="fa-solid fa-ban"></i>
                        {{ __('e47') }}
                    </a>
                @else
                    <a href="" data-bs-toggle="modal" data-bs-target="#YesModal" class="btn btn-success fw-bold">
                        <i class="fa-solid fa-check"></i>
                        {{ __('e48') }}
                    </a>
                @endif

                <a href="" data-bs-toggle="modal" data-bs-target="#deleteModal" class="btn btn-danger fw-bold">
                    <i class="fa-solid fa-trash-can"></i>
                    {{ __('e49') }}
                </a>
                @endif
            </div>
        </div>

        {{-- Task History --}}
        <h1 class="page-title fw-bold dir mt-5">{{ __('e50') }}</h1>
        <div class="page-content dir" style="overflow-x: scroll;">
            {{-- All Tasks --}}
            @if (auth()->user()->id == 1)
                @if (count($history) > 0)
                    <div id="tasks" style="width: 100vh;">
                        <input class="search form-control text-center fw-bold mb-2 shadow-none" placeholder="{{ __('g1') }}" />
                        <table class="table w-100">
                            <thead>
                                <tr>
                                    <th class="fs-6 fw-bold text-center sort" data-sort="id">#</th>
                                    <th class="fs-6 fw-bold text-center sort" data-sort="name">{{ __('g2') }}</th>
                                    <th class="fs-6 fw-bold text-center sort" data-sort="email">{{ __('g3') }}</th>
                                    <th class="fs-6 fw-bold text-center sort" data-sort="status">{{ __('g4') }}</th>
                                    <th class="fs-6 fw-bold text-center sort" data-sort="date">{{ __('g5') }}</th>
                                    <th class="fs-6 fw-bold text-center"></th>
                                </tr>
                            </thead>
                            <tbody class="list">
                                @foreach ($history as $data)
                                    <tr>
                                        <td class="fs-6 fw-bold text-center id">{{ $data->id }}</td>
                                        <td class="fs-6 fw-bold text-center name">{{ \App\Models\User::find($data->user_id)->name }}</td>
                                        <td class="fs-6 fw-bold text-center email">{{ \App\Models\User::find($data->user_id)->email }}</td>
                                        <td class="fs-6 fw-bold text-center status">
                                            @if ($data->status == 'Pending')
                                            {{ __('g6') }}
                                            @elseif ($data->status == 'Complete')
                                            {{ __('g7') }}
                                            @elseif ($data->status == 'Canceled')
                                            {{ __('g8') }}
                                            @endif
                                        </td>
                                        <td class="fs-6 fw-bold text-center date">{{ \Carbon\Carbon::parse($data->created_at)->diffForHumans() }}</td>
                                        <td class="text-center">
                                            <a href="{{ route('submitShow', $data->id) }}" class="btn btn-success fs-6">
                                                <i class="fa-solid fa-eye"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <ul class="pagination"></ul>
                    </div>
                @else
                    <p class="fw-bold text-center text-dark fs-4">
                    {{ __('g9') }}
                    </p>
                @endif
            @else
                @if (count($history) > 0)
                    <table class="table w-100">
                        <thead>
                            <tr>
                                <th class="fs-6 fw-bold text-center sort" data-sort="id">#</th>
                                <th class="fs-6 fw-bold text-center sort" data-sort="name">{{ __('g10') }}</th>
                                <th class="fs-6 fw-bold text-center sort" data-sort="email">{{ __('g11') }}</th>
                                <th class="fs-6 fw-bold text-center sort" data-sort="status">{{ __('g12') }}</th>
                                <th class="fs-6 fw-bold text-center sort" data-sort="date">{{ __('g13') }}</th>
                            </tr>
                        </thead>
                        <tbody class="list">
                            @foreach ($history as $data)
                                @if ($data->user_id == auth()->user()->id)
                                    <tr>
                                        <td class="fs-6 fw-bold text-center id">{{ $data->id }}</td>
                                        <td class="fs-6 fw-bold text-center name">{{ \App\Models\User::find($data->user_id)->name }}</td>
                                        <td class="fs-6 fw-bold text-center email">{{ \App\Models\User::find($data->user_id)->email }}</td>
                                        <td class="fs-6 fw-bold text-center status">
                                            @if ($data->status == 'Pending')
                                            {{ __('g14') }}
                                            @elseif ($data->status == 'Complete')
                                            {{ __('g15') }}
                                            @elseif ($data->status == 'Canceled')
                                            {{ __('g16') }}
                                            @endif
                                        </td>
                                        <td class="fs-6 fw-bold text-center date">{{ \Carbon\Carbon::parse($data->created_at)->diffForHumans() }}</td>
                                    </tr>
                                @endif
                            @endforeach
                        </tbody>
                    </table>
                @else
                    <p class="fw-bold text-center text-dark fs-4">
                    {{ __('g17') }}
                    </p>
                @endif
            @endif
        </div>
    </div>


    {{-- Modals --}}

    {{-- Edit Task Data --}}
    <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" style="flex-direction: row-reverse;">
                    <h1 class="modal-title fs-6 fw-bold" id="editModalLabel">{{ __('g18') }}</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body dir">
                    <form action="{{ route('editTask') }}" method="POST">

                        @csrf
                        @method('POST')

                        <input type="hidden" name="id" value="{{ $task->id }}">

                        <div class="mb-3 dir">
                            <label for="link" class="mb-1 fw-bold text-dark">{{ __('g19') }} <span class="text-danger">*</span></label>
                            <input type="url" value="{{ $task->link }}" name="link" id="link" class="form-control shadow-none fw-bold text-dark" required>
                        </div>

                        <div class="mb-3 dir">
                            <label for="title" class="mb-1 fw-bold text-dark">{{ __('g20') }} <span class="text-danger">*</span></label>
                            <input type="text" value="{{ $task->title }}" name="title" id="title" class="form-control shadow-none fw-bold text-dark" required>
                        </div>

                        <div class="mb-3 dir">
                            <label for="description" class="mb-1 fw-bold text-dark">{{ __('g21') }}</label>
                            <textarea name="description" value="{{ $task->description }}" id="description" class="form-control shadow-none fw-bold text-dark"></textarea>
                        </div>

                        <div class="mb-3 dir">
                            <label for="price" class="mb-1 fw-bold text-dark">{{ __('g22') }} <span class="text-danger">*</span></label>
                            <input type="number" name="price" value="{{ $task->price }}" min="1" id="price" class="form-control shadow-none fw-bold text-dark" required>
                        </div>

                        <div class="mb-3 dir">
                            <label for="users" class="mb-1 fw-bold text-dark">{{ __('g23') }} <span class="text-danger">*</span></label>
                            <input type="number" name="users" value="{{ $task->users }}" min="1" id="users" class="form-control shadow-none fw-bold text-dark" required>
                        </div>

                        <div class="mb-3 dir">
                            <label for="duration" class="mb-1 fw-bold text-dark">{{ __('g24') }}<span class="text-danger">*</span></label>
                            <input type="number" name="duration" value="{{ $task->duration }}" min="1" id="duration" value="24" class="form-control shadow-none fw-bold text-dark" required>
                        </div>

                        <div class="mb-3 dir">
                            <label for="users_per_duration" class="mb-1 fw-bold text-dark">{{ __('g25') }} <span class="text-danger">*</span></label>
                            <input type="number" name="users_per_duration" value="{{ $task->users_per_duration }}" min="1" id="users_per_duration" class="form-control shadow-none fw-bold text-dark" required>
                        </div>

                        <div class="mb-3 dir">
                            <label for="type" class="mb-1 fw-bold text-dark">{{ __('g26') }} <span class="text-danger">*</span></label>
                            <select class="form-select fw-bold fs-6" name="type" id="type" required>
                                @if ($task->type == 1)
                                    <option value="1" class="fw-bold fs-6" selected>{{ __('g27') }}</option>
                                @else
                                    <option value="1" class="fw-bold fs-6">{{ __('g28') }}</option>
                                @endif

                                @if ($task->type == 2)
                                    <option value="2" class="fw-bold fs-6" selected>{{ __('g29') }}</option>
                                @else
                                    <option value="2" class="fw-bold fs-6">{{ __('g30') }}</option>
                                @endif

                                @if ($task->type == 3)
                                    <option value="3" class="fw-bold fs-6" selected>{{ __('g31') }}</option>
                                @else
                                    <option value="3" class="fw-bold fs-6">{{ __('g32') }}</option>
                                @endif
                            </select>
                        </div>

                        <button type="submit" class="btn btn-success submitForm">{{ __('g33') }}</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('g34') }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Delete Task Data --}}
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" style="flex-direction: row-reverse;">
                    <h1 class="modal-title fs-6 fw-bold" id="editModalLabel">{{ __('g35') }}</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body dir">
                    <form action="{{ route('deleteTask') }}" method="POST">

                        @csrf
                        @method('DELETE')

                        <input type="hidden" name="id" value="{{ $task->id }}">

                        <p class="fw-bold text-dark fs-6">
                            <span class="text-danger">*</span>
                            {{ __('g36') }}
                        </p>

                        <button type="submit" class="btn btn-danger submitForm">{{ __('g37') }}</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('g38') }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{-- Make Task Available --}}
    <div class="modal fade" id="YesModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" style="flex-direction: row-reverse;">
                    <h1 class="modal-title fs-6 fw-bold" id="editModalLabel">{{ __('g39') }}</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body dir">
                    <form action="{{ route('taskYes') }}" method="POST">

                        @csrf
                        @method('POST')

                        <input type="hidden" name="id" value="{{ $task->id }}">

                        <p class="fw-bold text-dark fs-6">
                        {{ __('g40') }}
                        </p>

                        <button type="submit" class="btn btn-success submitForm">{{ __('g41') }}</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('g42') }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {{--  Make Task Not Available --}}
    <div class="modal fade" id="NoModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" style="flex-direction: row-reverse;">
                    <h1 class="modal-title fs-6 fw-bold" id="editModalLabel">{{ __('g43') }}</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body dir">
                    <form action="{{ route('taskNo') }}" method="POST">

                        @csrf
                        @method('POST')

                        <input type="hidden" name="id" value="{{ $task->id }}">

                        <p class="fw-bold text-dark fs-6">
                        {{ __('g44') }}
                        </p>

                        <button type="submit" class="btn btn-danger submitForm">{{ __('g45') }}</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('g46') }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('jss')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.0.2/list.min.js"
        integrity="sha512-MT5YyrGWqMGkIbwkVUZEWGrRDjlNx8loukEdFyzLo4s8INKVxnDQy2eFcpmnWGrFwJ+X8mRTQOJpWCayXz7+Og=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        var options = {
            valueNames: ['id', 'title', 'price', 'users', 'type', 'status'],
            page: 50,
            pagination: true
        };

        var userList = new List('tasks', options);
    </script>
@endsection