@extends('front.layout')

@section('title')
    المهام - كريبتوتاسكي
@endsection

@section('css')
    <link rel="stylesheet" href="{{ asset('assets/css/work.css') }}">
@endsection

@php
    $color = ['fee4cb', 'e9e7fd', 'ffd3e2', 'c8f7dc', 'd5deff'];
@endphp

@section('content')

    <div class="app-container">

        {{-- Top Part --}}
        <div class="app-header">
            <div class="app-header-right justify-content-center">

                {{-- User Profile --}}
                <span class="fw-bold mx-2"> {{ auth()->user()->name }} </span>
                <span class="fw-bold"> : مرحباً بعودتك </span>

            </div>
        </div>

        {{-- Bottom Part --}}
        <div class="app-content container-fluid">

            {{-- Tasks --}}
            <div class="projects-section py-5 px-3">
                {{-- Head --}}
                <div class="projects-section-header" style="flex-direction: row-reverse;">
                    <p>المهام</p>
                    <p class="time">{{ Carbon\Carbon::parse(date('m/d/Y h:i a'))->translatedFormat('F , j') }}</p>
                </div>
                {{-- /Head --}}

                <div class="projects-section-line d-block">
                    {{-- Statics --}}
                    <div class=" mb-5">
                        <div class="row dir text-center">
                            <div class="col-md-4 col-sm-12 mb-5">
                                <div class="px-2">
                                    <span
                                        class="fw-bold fs-4 text-center">{{ count(\App\Models\Submit::where('user_id', '=', auth()->user()->id)->where('created_at', 'LIKE', '%' . date('Y-m-d') . '%')->get()) }}</span><br>
                                    <span class=" fw-bold">عدد المهام التي اتممتها اليوم</span>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-12 mb-5">

                                <div class="px-2">
                                    <span
                                        class="fw-bold fs-4 text-center">{{ intval(\App\Models\Option::where('name', '=', 'max_per_day')->get()[0]->value1) -count(\App\Models\Submit::where('user_id', '=', auth()->user()->id)->where('created_at', 'LIKE', '%' . date('Y-m-d') . '%')->get()) }}</span><br>
                                    <span class=" fw-bold">عدد المهام المتبقية اليوم</span>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-12 mb-5">
                                <span class="fw-bold fs-4 text-center">{{ $total_balance }}</span><br>
                                <span class=" fw-bold">رصيدك الكلي ( Trx )</span>
                            </div>
                        </div>
                    </div>
                    {{-- /Statics --}}

                    {{-- Change View --}}
                    <div class="view-actions">

                        {{-- List View --}}
                        <button class="view-btn list-view">
                            <i class="fa-solid fa-list"></i>
                        </button>

                        {{-- Grid View --}}
                        <button class="view-btn grid-view active">
                            <i class="fa-solid fa-grip"></i>
                        </button>
                    </div>
                    {{-- /Change View --}}

                </div>

                @if (count($tasks) > 0)
                    <div class="project-boxes jsGridView dir">

                        {{-- Single Task Box --}}
                        @foreach ($tasks as $task)
                            @if (count(
                                    \App\Models\Submit::where('user_id', '=', auth()->user()->id)->where('task_id', '=', $task->id)->get()) == 0 &&
                                    \App\Models\Submit::where('user_id', '=', auth()->user()->id)->where('task_id', '=', $task->id)->get())
                                <div class="project-box-wrapper" style="cursor: pointer;"
                                    @if (
                                        $task->users_per_duration - count(App\Models\Submit::where('task_id', '=', $task->id)->get()) != 0 ||
                                            intval(\App\Models\Option::where('name', '=', 'max_per_day')->get()[0]->value1) -
                                                count(
                                                    \App\Models\Submit::where('user_id', '=', auth()->user()->id)->where('created_at', 'LIKE', '%' . date('Y-m-d') . '%')->get()) ==
                                                0) onclick="getData({{ $task->id }});"
                                    data-id="{{ $task->id }}" data-bs-toggle="modal"
                                    data-bs-target="#TaskDetails" @endif>
                                    <div class="project-box"
                                        style="background-color: #{{ $color[rand(0, 4)] }};position: relative;">
                                        @if (intval(\App\Models\Option::where('name', '=', 'max_per_day')->get()[0]->value1) -
                                                count(
                                                    \App\Models\Submit::where('user_id', '=', auth()->user()->id)->where('created_at', 'LIKE', '%' . date('Y-m-d') . '%')->get()) ==
                                                0)
                                            <div class="text-center fw-bold bg-secondary text-white py-1"
                                                style="position: absolute;top: 21px;left: 0;right: 0;z-index: 100;">لا يمكنك
                                                تنفيذ أي مهام اليوم</div>
                                        @endif
                                        <div class="project-box-header">
                                            <span class="fw-bold">
                                                {{ Carbon\Carbon::parse($task->created_at)->diffForHumans() }}
                                            </span>
                                            <div class="more-wrapper">
                                                <button class="project-btn-more">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                        viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                        class="feather feather-more-vertical">
                                                        <circle cx="12" cy="12" r="1" />
                                                        <circle cx="12" cy="5" r="1" />
                                                        <circle cx="12" cy="19" r="1" />
                                                    </svg>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="project-box-content-header">
                                            <p class="box-content-header fs-5">
                                                @if ($task->type == 1)
                                                    تقيم 5 نجوم
                                                @elseif ($task->type == 2)
                                                    تقيم 5 نجوم + تعليق
                                                @else
                                                    تقيم 5 نجوم + تعليق + رفع صورة
                                                @endif
                                            </p>

                                            <p class="box-content-subheader dir fw-bold mt-2">
                                                ستحصل علي
                                                {{ $task->price }}
                                                Trx
                                            </p>
                                        </div>
                                        <div class="box-progress-wrapper dir">
                                            <p class="box-progress-header">حالة المهمة</p>
                                            <div class="box-progress-bar">
                                                <span class="box-progress"
                                                    style="width: {{ (count(App\Models\Submit::where('task_id', '=', $task->id)->where('status', '!=', 'Canceled')->get()) /$task->users) *100 }}%; background-color: #ff942e"></span>
                                            </div>
                                            <p class="box-progress-percentage mb-2">
                                                {{ (count(App\Models\Submit::where('task_id', '=', $task->id)->where('status', '!=', 'Canceled')->get()) /$task->users) *100 }}%
                                            </p>
                                        </div>
                                        <div class="project-box-footer">
                                            <div class="participants">

                                            </div>
                                            <div class="days-left" style="color: #ff942e;">
                                                @if ($task->users_per_duration - count(App\Models\Submit::where('task_id', '=', $task->id)->get()) != 0)
                                                    متبقي <span
                                                        class="fw-bold">{{ $task->users_per_duration - count(App\Models\Submit::where('task_id', '=', $task->id)->get()) }}</span>
                                                    عضو
                                                @else
                                                    <span class="text-danger" id="demo{{ $task->id }}"></span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <script>
                                    var countDownDate = new Date('@php
                                    $data = str_replace('"}', '', str_replace('{"created_at":"', '' ,\App\Models\Submit::where('task_id', '=', $task->id)->orderBy('created_at', 'DESC')->first('created_at')));
                                    $data1 = str_replace('T', ' ', $data);
                                    echo date('Y-m-d H:i:s', strtotime('+' . $task->duration . ' hours' . explode('.', $data1)[0]));
                                    @endphp').getTime();
                                    var x = setInterval(function() {
                                        var now = new Date().getTime();
                                        var distance = countDownDate - now;
                                        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                                        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                                        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                                        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                                        document.getElementById("demo{{ $task->id }}").innerHTML = days + " يوم " + hours + " ساعة " +
                                            minutes + " دقيقة " + seconds + " ثانية";
                                        if (distance < 0) {
                                            clearInterval(x);
                                            window.reload();
                                        }
                                    }, 1000);
                                </script>
                            @endif
                        @endforeach
                        {{-- /Single Task Box --}}

                    </div>
                @else
                    <hr>
                    <p class="text-center fw-bold fs-6">
                        لا يوجد اي مهام حالياً حاول مجدداً لاحقاً
                    </p>
                    <hr>
                @endif
            </div>
            {{-- /Tasks --}}

        </div>

    </div>

    {{-- Modals --}}

    {{-- Task Details --}}
    <div class="modal fade" id="TaskDetails" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header dir">
                    <h5 class="modal-title fw-bold" id="exampleModalLabel">تنفيذ المهمة</h5>
                    <button type="button" class="btn-close shadow-none" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body dir">
                    <div class="loading text-center">
                        <i class="fa-solid fa-spinner fa-spin"></i>
                    </div>
                    <div class="box-data"
                        data-nextID="{{ count(\App\Models\Submit::where('task_id', '=', $task->id)->get()) }}">
                        {{-- Type 1 --}}
                        <form action="{{ route('submitType1') }}" method="POST" enctype="multipart/form-data"
                            class="type1">
                            @csrf
                            @method('POST')
                            <input type="hidden" name="id" id="taskID1" value="">
                            <h6 class="fw-bold">خطوات التنفيذ : </h2>
                                <ul class="list-unstyled">
                                    <li class="fw-bold mb-2">
                                        <span class="text-danger">*</span>
                                        يجب عليك ان تقوم بتقيم خمسه نجوم لهاذا المحل التجاري
                                    </li>
                                    <li>
                                        <div style="position: relative;">
                                            <input type="text" class="form-control shadow-none fw-bold"
                                                style="text-align: end;" value=". . ." id="link1" readonly>
                                            <button class="btn btn-secondary fw-bold" onclick="copyLink1();"
                                                style="font-size: 12px;position: absolute;top: 50%;right: 5px;transform: translateY(-50%);">نسخ</button>
                                        </div>
                                    </li>

                                    <li class="mt-4 fw-bold">
                                        <span class="text-danger">*</span>
                                        يجب عليك عمل سكرين شوت ( لقطه شاشه ) للتقيم الخاص بك ورفعها هنا
                                    </li>
                                    <li class="mb-2">
                                        <label for="TaskScreen1" class="fw-bold w-100 btn btn-primary mt-2">أختر
                                            الملف</label>
                                        <input type="file" name="TaskScreen" id="TaskScreen1" accept="images/*"
                                            style="display: none;" required>
                                    </li>
                                </ul>

                                <button type="submit" class="fw-bold btn btn-success">تقديم الطلب</button>
                                <button type="button" class="btn btn-secondary shadow-none fw-bold"
                                    data-bs-dismiss="modal">إلغاء</button>
                        </form>

                        {{-- Type 2 --}}
                        <form action="{{ route('submitType2') }}" method="POST" enctype="multipart/form-data"
                            class="type2">
                            @csrf
                            @method('POST')
                            <input type="hidden" name="id" id="taskID2" value="">
                            <h6 class="fw-bold">خطوات التنفيذ : </h2>
                                <ul class="list-unstyled">
                                    <li class="fw-bold mb-2">
                                        <span class="text-danger">*</span>
                                        يجب عليك ان تقوم بتقيم خمسه نجوم لهاذا المحل التجاري
                                    </li>
                                    <li>
                                        <div style="position: relative;">
                                            <input type="text" class="form-control shadow-none fw-bold"
                                                style="text-align: end;" value=". . ." id="link2" readonly>
                                            <button class="btn btn-secondary fw-bold" onclick="copyLink2();"
                                                style="font-size: 12px;position: absolute;top: 50%;right: 5px;transform: translateY(-50%);">نسخ</button>
                                        </div>
                                    </li>

                                    <li class="fw-bold mb-2">
                                        <span class="text-danger">*</span>
                                        يجب عليك ان تقوم بكتابة هذا التعليق
                                    </li>
                                    <li>
                                        <div style="position: relative;">
                                            <textarea class="form-control shadow-none fw-bold" name="comment"
                                                style="text-align: start;resize: none;padding-top: 35px;" id="comment2" rows="4" readonly>. . . </textarea>
                                            <button class="btn btn-secondary fw-bold" onclick="copyComment2();"
                                                style="font-size: 12px;position: absolute;top: 5px;right: 5px;">نسخ</button>
                                        </div>
                                    </li>

                                    <li class="mt-4 fw-bold">
                                        <span class="text-danger">*</span>
                                        يجب عليك عمل سكرين شوت ( لقطه شاشه ) للتقيم الخاص بك ورفعها هنا
                                    </li>
                                    <li class="mb-2">
                                        <label for="TaskScreen2" class="fw-bold w-100 btn btn-primary mt-2">أختر
                                            الملف</label>
                                        <input type="file" name="TaskScreen" id="TaskScreen2" accept="images/*"
                                            style="display: none;" required>
                                    </li>
                                </ul>

                                <button type="submit" class="fw-bold btn btn-success">تقديم الطلب</button>
                                <button type="button" class="btn btn-secondary shadow-none fw-bold"
                                    data-bs-dismiss="modal">إلغاء</button>
                        </form>

                        {{-- Type 3 --}}
                        <form action="{{ route('submitType3') }}" method="POST" enctype="multipart/form-data"
                            class="type3">
                            @csrf
                            @method('POST')
                            <input type="hidden" name="id" id="taskID3" value="">
                            <h6 class="fw-bold">خطوات التنفيذ : </h2>
                                <ul class="list-unstyled">
                                    <li class="fw-bold mb-2">
                                        <span class="text-danger">*</span>
                                        يجب عليك ان تقوم بتقيم خمسه نجوم لهاذا المحل التجاري
                                    </li>
                                    <li>
                                        <div style="position: relative;">
                                            <input type="text" class="form-control shadow-none fw-bold"
                                                style="text-align: end;" value=". . ." id="link3" readonly>
                                            <button class="btn btn-secondary fw-bold" onclick="copyLink3();"
                                                style="font-size: 12px;position: absolute;top: 50%;right: 5px;transform: translateY(-50%);">نسخ</button>
                                        </div>
                                    </li>

                                    <li class="fw-bold mb-2 mt-3">
                                        <span class="text-danger">*</span>
                                        يجب عليك ان تقوم بكتابة هذا التعليق
                                    </li>
                                    <li>
                                        <div style="position: relative;">
                                            <textarea class="form-control shadow-none fw-bold" style="text-align: start;resize: none;padding-top: 35px;"
                                                name="comment" id="comment3" rows="4" readonly>. . . </textarea>
                                            <button class="btn btn-secondary fw-bold" onclick="copyComment3();"
                                                style="font-size: 12px;position: absolute;top: 5px;right: 5px;">نسخ</button>
                                        </div>
                                    </li>

                                    <li class="fw-bold mb-2 mt-3">
                                        <span class="text-danger">*</span>
                                        يجب عليك وضع هذة الصورة
                                    </li>
                                    <li>
                                        <a href="" target="_blank" id="image3" class="btn btn-primary fw-bold"
                                            download="">تحميل الصورة</a>
                                        <input type="hidden" id="image33" name="image" value="">
                                    </li>

                                    <li class="mt-4 fw-bold">
                                        <span class="text-danger">*</span>
                                        يجب عليك عمل سكرين شوت ( لقطه شاشه ) للتقيم الخاص بك ورفعها هنا
                                    </li>
                                    <li class="mb-2">
                                        <label for="TaskScreen3" class="fw-bold w-100 btn btn-primary mt-2">أختر
                                            الملف</label>
                                        <input type="file" name="TaskScreen" id="TaskScreen3" accept="images/*"
                                            style="display: none;" required>
                                    </li>
                                </ul>

                                <button type="submit" class="fw-bold btn btn-success">تقديم الطلب</button>
                                <button type="button" class="btn btn-secondary shadow-none fw-bold"
                                    data-bs-dismiss="modal">إلغاء</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var listView = document.querySelector('.list-view');
            var gridView = document.querySelector('.grid-view');
            var projectsList = document.querySelector('.project-boxes');

            listView.addEventListener('click', function() {
                gridView.classList.remove('active');
                listView.classList.add('active');
                projectsList.classList.remove('jsGridView');
                projectsList.classList.add('jsListView');
            });

            gridView.addEventListener('click', function() {
                gridView.classList.add('active');
                listView.classList.remove('active');
                projectsList.classList.remove('jsListView');
                projectsList.classList.add('jsGridView');
            });
        });

        // Copy Link
        function copyLink1() {
            var copyText = document.getElementById("link1");
            copyText.select();
            copyText.setSelectionRange(0, 99999);
            navigator.clipboard.writeText(copyText.value);
        }

        function copyLink2() {
            var copyText = document.getElementById("link2");
            copyText.select();
            copyText.setSelectionRange(0, 99999);
            navigator.clipboard.writeText(copyText.value);
        }

        function copyLink3() {
            var copyText = document.getElementById("link3");
            copyText.select();
            copyText.setSelectionRange(0, 99999);
            navigator.clipboard.writeText(copyText.value);
        }

        // Copy Comment
        function copyComment2() {
            var copyText = document.getElementById("comment2");
            copyText.select();
            copyText.setSelectionRange(0, 99999);
            navigator.clipboard.writeText(copyText.value);
        }

        function copyComment3() {
            var copyText = document.getElementById("comment3");
            copyText.select();
            copyText.setSelectionRange(0, 99999);
            navigator.clipboard.writeText(copyText.value);
        }

        function getData(id) {
            $('.loading').show();
            $('.type1').hide();
            $('.type2').hide();
            $('.type3').hide();

            $.ajax({
                url: "http://127.0.0.1:8000/get/tasks/" + id,
                type: 'GET',
                dataType: 'json',
                success: function(res) {
                    $('.loading').hide();

                    if (res.type == 1) {
                        $('.type1').fadeIn();
                        $('#link1').val(res.link);
                        $('#taskID1').val(res.id);
                    } else {
                        $('.type1').fadeOut();
                    }

                    if (res.type == 2) {
                        $('.type2').fadeIn();
                        $('#link2').val(res.link);
                        $('#comment2').html(res.comments[$('.box-data').attr('data-nextID')]);
                        $('#taskID2').val(res.id);
                    } else {
                        $('.type2').fadeOut();
                    }

                    if (res.type == 3) {
                        $('#link3').val(res.link);
                        $('#taskID3').val(res.id);
                        $('#comment3').html(res.comments[$('.box-data').attr('data-nextID')]);
                        $('#image3').attr('href', res.images[$('.box-data').attr('data-nextID')]);
                        $('#image33').val(res.images[$('.box-data').attr('data-nextID')]);
                        $('.type3').fadeIn();
                    } else {
                        $('.type3').fadeOut();
                    }
                }
            });
        }
    </script>
@endsection