@extends('back.layout')

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

@section('content')
    <div class="content-wrapper content-wrapper--with-bg">
        <div class="d-flex justify-content-between" style="flex-direction: row-reverse;">
            <div>
                <h1 class="page-title fw-bold dir">{{ __('c5') }}</h1>
            </div>

            <div>
                <a href="" data-bs-toggle="modal" data-bs-target="#newTask" class="btn btn-primary fw-bold fs-6">
                    <i class="fa-solid fa-plus"></i>
                    {{ __('c7') }}
                </a>
            </div>
        </div>

        <div class="page-content dir" style="overflow-x: scroll;">

            {{-- All Tasks --}}
            @if (count($tasks) > 0)
                <div id="tasks" style="width: 150vh;">
                    <input class="search form-control text-center fw-bold mb-2 shadow-none" placeholder="{{ __('c8') }}" />
                    <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="title">{{ __('c9') }}</th>
                                <th class="fs-6 fw-bold text-center sort" data-sort="price">{{ __('c10') }}</th>
                                <th class="fs-6 fw-bold text-center sort" data-sort="users">{{ __('c11') }}</th>
                                <th class="fs-6 fw-bold text-center sort" data-sort="type">{{ __('c12') }}</th>
                                <th class="fs-6 fw-bold text-center sort" data-sort="status">{{ __('c13') }}</th>
                                <th class="fs-6 fw-bold text-center"></th>
                            </tr>
                        </thead>
                        <tbody class="list">
                            @foreach ($tasks as $task)
                                <tr>
                                    <td class="fs-6 fw-bold text-center id">{{ $task->id }}</td>
                                    <td class="fs-6 fw-bold text-center title">{{ $task->title }}</td>
                                    <td class="fs-6 fw-bold text-center price">{{ $task->price }} TRX</td>
                                    <td class="fs-6 fw-bold text-center users">{{ $task->users }}</td>
                                    <td class="fs-6 fw-bold text-center type">
                                        @if ($task->type == 1)
                                        {{ __('c14') }}
                                        @elseif ($task->type == 2)
                                        {{ __('c15') }} + تعليق
                                        @else
                                        {{ __('c16') }} + تعليق + صورة
                                        @endif
                                    </td>
                                    <td class="fs-6 fw-bold text-center status">
                                        @if ($task->status == 1)
                                        {{ __('c17') }}
                                        @else
                                        {{ __('c18') }}
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <a href="{{ route('taskShow', $task->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">
                {{ __('c19') }}
                </p>
            @endif

        </div>
    </div>

    {{-- Modals --}}

    {{-- New Task --}}
    <div class="modal fade" id="newTask" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" style="flex-direction: row-reverse;">
                    <h5 class="modal-title fw-bold fs-6" id="staticBackdropLabel">{{ __('c20') }}</h5>
                    <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

                    <form action="{{ route('storeTask') }}" method="POST">

                        @csrf
                        @method('POST')

                        <div class="mb-3 dir">
                            <label for="link" class="mb-1 fw-bold text-dark">{{ __('c21') }} <span class="text-danger">*</span></label>
                            <input type="url" 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">{{ __('c22') }} <span class="text-danger">*</span></label>
                            <input type="text" 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">{{ __('c23') }}</label>
                            <textarea name="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">{{ __('c24') }} <span class="text-danger">*</span></label>
                            <input type="number" name="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">{{ __('c26') }} <span class="text-danger">*</span></label>
                            <input type="number" name="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">{{ __('c27') }}<span class="text-danger">*</span></label>
                            <input type="number" name="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">{{ __('c28') }} <span class="text-danger">*</span></label>
                            <input type="number" name="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">{{ __('c29') }} <span class="text-danger">*</span></label>
                            <select class="form-select fw-bold fs-6" name="type" id="type" required>
                                <option value="1" class="fw-bold fs-6">{{ __('c30') }}</option>
                                <option value="2" class="fw-bold fs-6">{{ __('c31') }}</option>
                                <option value="3" class="fw-bold fs-6">{{ __('c32') }}</option>
                            </select>
                        </div>

                        <button type="button" class="btn btn-secondary shadow-none fw-bold fs-6" data-bs-dismiss="modal">{{ __('c33') }}</button>
                        <button class="btn btn-primary fw-bold fs-6 shadow-none submitForm" type="submit">{{ __('c34') }}</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