@extends('theme::layouts.app', ['alias' => 'Quests'])
@section('theme::title', __('seo.ranking.index'))
@section('theme::sidebar')
    @include('theme::frontend.account.sidebar', ['account_alias' => 'Quests'])
@endsection
@section('theme::content') 

<style>
    .fiery-button {
  position: relative;
  overflow: hidden;
  animation: glow 2s infinite alternate;
}

@keyframes glow {
  0% {
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.6), 0 0 10px rgba(255, 100, 0, 0.4);
  }
  100% {
    box-shadow: 0 0 20px rgba(255, 140, 0, 0.8), 0 0 30px rgba(255, 60, 0, 0.6);
  }
}

    </style>

    <div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12 main-content">
        <div class="container">
            <div class="card">
                <h2 class="text-center mb-4">🎯 Daily Tasks Calendar - {{ now()->format('F Y') }}</h2>

                <!-- Row for Calendar and Rewards -->
                <div class="row">
                    @php
                        // التحقق إذا كان المستخدم موجودًا في جدول tasks_user_progress
                        $progress = \App\Models\Z_Website\Quests\TaskUserProgress::where(
                            'user_id',
                            auth()->id(),
                        )->first();
                    @endphp

                    @if (!$progress)
                        <!-- إذا لم يكن المستخدم موجودًا -->
                        <div class="text-center col-lg-12">
                            <h2 class="text-warning">Welcome to the Quest System!</h2>
                            <p class="mb-4">Start your journey by choose char and clicking the button below:</p>
                            <form method="POST" action="{{ route('tasks.start.journey') }}">
                                @csrf
                                <div class="App-4t-choose-char">
                                    <select name="charID" id="charID" required>
                                        @if ($currentChar)
                                            <option value="" disabled selected>{{ $currentChar->char->CharName16 }}
                                                (Current)</option>
                                        @else
                                            <option value="" disabled selected>Choose Your Char</option>
                                        @endif
                                        @foreach ($availableChars as $char)
                                            <option value="{{ $char->CharID }}">{{ $char->CharName16 }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <button class="btn btn-primary btn-lg">Start Your Journey in Quests</button>
                            </form>
                        </div>
                    @else
                        <!-- Calendar Section -->
                        <div class="col-lg-8">
                            <div id="calendar" class="shadow-sm rounded p-3"></div>
                        </div>
                        <!-- Rewards Section -->
                        <div class="col-lg-4">
                            <div class="rewards-list shadow-sm rounded p-3">
                                <h4 class="text-center mb-3">📅 Progress Details</h4>
                                <ul class="list-group">
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        <strong>CharName:</strong>
                                        <span>{{ $currentChar->char->CharName16 ?? 'No Character Assigned' }}</span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        <strong>Status:</strong>
                                        @if ($currentChar && $currentChar->isVip())
                                            <span class="badge bg-warning text-dark">🔥 VIP</span>
                                        @else
                                            <span class="badge bg-secondary">Normal</span>
                                        @endif
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        <strong>Start Date:</strong>
                                        <span>{{ $progress->start_date->format('Y-m-d') }}</span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                        <strong>Next Reset:</strong>
                                        <span>{{ $progress->start_date->copy()->addMonth()->format('Y-m-d') }}</span>
                                    </li>
                                </ul>
                                <hr>
                                <div class="text-center mt-3">
                                    <h5>🎯 Total Completed Days: {{ $totalCompletedDays }}</h5>
                                </div>
                                <hr>
                                <!-- VIP Upgrade Button -->
                                @if (!$currentChar->isVip())
                                    <h5>🚀 Upgrade to <strong>VIP</strong> for <b style="color: cyan">500 💎 Balance</b> for
                                        this month</h5>
                                    <button id="upgradeToVIP" class="tasks-vip-button" data-toggle="modal"
                                        data-target="#vipUpgradeModal">
                                        🔥Upgrade VIP🔥
                                    </button>
                                @endif
                                <!-- المودال -->
                                <div class="modal fade" id="vipUpgradeModal" tabindex="-1" role="dialog"
                                    aria-labelledby="vipUpgradeModalLabel" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="vipUpgradeModalLabel">Confirm VIP Upgrade</h5>
                                                <button type="button" class="close" data-dismiss="modal"
                                                    aria-hidden="true">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body text-center">
                                                <p>Are you sure you want to upgrade to <strong>VIP</strong> for <b
                                                        style="color: cyan">500 💎 Balance</b> for this month?</p>
                                            </div>
                                            <div class="modal-footer d-flex justify-content-center">
                                                <!-- هنا بقينا نستخدم فورم -->
                                                <form id="vip-upgrade-form" action="{{ route('tasks.upgrade.vip') }}"
                                                    method="POST">
                                                    @csrf
                                                    <button type="submit" class="btn btn-success">Yes, Upgrade!</button>
                                                    <button type="button" class="btn btn-danger"
                                                        data-dismiss="modal">Cancel</button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <!-- Random Task Section -->
                                <div class="random-task-section text-center">
                                    @php
                                        // تحقق إذا الشهر خلص
                                        $monthIsOver = $progress && now()->greaterThanOrEqualTo($progress->start_date->copy()->addMonth());
                                    @endphp
                                
                                    @if ($monthIsOver)
                                        <!-- إذا خلص الشهر، إظهر زر RESET JOURNEY -->
                                        <h5 class="text-warning mb-3">Your month has ended. You can reset your journey.</h5>
                                        <!-- Reset Journey Button -->
                                        <button type="button" class="btn btn-danger task-reset fiery-button" data-toggle="modal" data-target="#resetJourneyModal">
                                            Reset Journey
                                        </button>
                                
                                        <!-- Confirmation Modal -->
                                        <div class="modal fade" id="resetJourneyModal" tabindex="-1" role="dialog" aria-labelledby="resetJourneyModalLabel" aria-hidden="true">
                                          <div class="modal-dialog modal-dialog-centered" role="document">
                                            <div class="modal-content">
                                              <div class="modal-header">
                                                <h5 class="modal-title" id="resetJourneyModalLabel">Confirm Journey Reset</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                  <span aria-hidden="true">&times;</span>
                                                </button>
                                              </div>
                                              <div class="modal-body">
                                                <p>
                                                  Are you sure you want to reset your journey?<br>
                                                  All Daily Tasks, progress, and rewards will be deleted, and your VIP status will revert to Normal.
                                                </p>
                                              </div>
                                              <div class="modal-footer">
                                                <form action="{{ route('tasks.reset.journey') }}" method="POST">
                                                    @csrf
                                                    <button type="submit" class="btn btn-danger">Yes, Reset Everything</button>
                                                </form>
                                                // <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                    @else
                                        <!-- لو الشهر لسه مخلصش، استخدم الأكواد القديمة الخاصة بعرض المهمة -->
                                        @if ($todaytask)
                                            @if ($charQuestTask && $charQuestTask->QuestData2 !== null && $charQuestTask->QuestData2 == 1)
                                                <h5 class="text-success mb-3">Your Daily Task Complete</h5>
                                                <button class="btn btn-primary btn-lg" id="completeTaskButton" data-day="{{ $thisday }}">
                                                    Complete Day ({{ $thisday }}) Task
                                                </button>
                                            @else
                                                <h5 class="text-success mb-3">Your Daily Task :</h5>
                                                @php
                                                $taskImage = optional($todaytask->task)->task_image;
                                                $imagePath = $taskImage && Str::startsWith($taskImage, ['http://', 'https://']) 
                                                    ? $taskImage 
                                                    : ($taskImage ? asset($taskImage) : null);
                                            @endphp
                                            
                                
                                                @if (!empty($taskImage))
                                                    <div class="text-center">
                                                        <img src="{{ $imagePath }}" alt="Task Image" class="task-image-preview img-fluid rounded shadow-sm"
                                                             style="max-width: 100px; cursor: pointer;" data-toggle="modal" data-target="#taskImageModal">
                                                    </div>
                                                    <!-- Modal to show a bigger image -->
                                                    <div class="modal fade" id="taskImageModal" tabindex="-1" role="dialog" aria-labelledby="taskImageModalLabel" aria-hidden="true">
                                                        <div class="modal-dialog modal-dialog-centered" role="document">
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <h5 class="modal-title" id="taskImageModalLabel">Task Image</h5>
                                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                        <span aria-hidden="true">&times;</span>
                                                                    </button>
                                                                </div>
                                                                <div class="modal-body text-center">
                                                                    <img src="{{ $imagePath }}" alt="Task Image" class="img-fluid rounded">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif
                                
                                                <p><strong>Task Name:</strong> {{ $todaytask->task->task_name ?? 'Task not found' }}</p>
                                            @endif
                                
                                            @if ($todaytask->is_completed)
                                                <p class="text-success"><strong>Task Completed ✔</strong></p>
                                            @else
                                                @if ($todaytask->task->duration_seconds > 0)
                                                    @php
                                                        $taskEndTime = $todaytask->created_at->addSeconds(intval($todaytask->task->duration_seconds));
                                                        $isExpired = now()->greaterThan($taskEndTime);
                                                    @endphp
                                                    @if ($isExpired)
                                                        <p class="text-danger">Task expired at: {{ $taskEndTime->format('H:i:s') }}</p>
                                                    @else
                                                        <p class="text-info">Time Remaining: {{ $taskEndTime->diffForHumans() }}</p>
                                                    @endif
                                                @endif
                                            @endif
                                        @else
                                            <h5 class="text-warning mb-3">No Task Found</h5>
                                            <form method="POST" action="{{ route('tasks.assign.random') }}">
                                                @csrf
                                                <button class="btn btn-primary">Assign Random Task</button>
                                            </form>
                                        @endif
                                    @endif
                                </div>
                                

                            </div>
                        </div>




                        <div class="quests-rewards-table-container">
                            <h4 class="text-center mb-3 quests-rewards-title">🎁 Rewards</h4>
                            <div class="table-responsive">
                                <table class="table table-bordered text-center quests-rewards-table">
                                    <thead>
                                        <tr>
                                            <th class="quests-days-header">Days Required</th>
                                            <th class="quests-normal-header">Normal Rewards</th>
                                            <th class="quests-vip-reward-cell vip-reward">VIP Rewards</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($rewards as $reward)
                                            <tr>
                                                <!-- Days Required -->
                                                <td
                                                    class="days-required-cell {{ $totalCompletedDays >= $reward->days_required ? 'quests-completed-day' : ($reward->days_required > $totalCompletedDays ? 'quests-upcoming-day' : '') }}">
                                                    <strong>
                                                        {{ $reward->days_required }}
                                                        @if (in_array($reward->days_required, $completedDays))
                                                            <span class="badge quests-completed-badge">✔</span>
                                                        @endif
                                                    </strong>
                                                </td>

                                                <!-- Normal Rewards -->
                                                <td class="quests-normal-reward-cell">
                                                    @php
                                                        $normalReward = \App\Models\Z_Website\Quests\TaskReward::find(
                                                            $reward->normal_reward,
                                                        );
                                                        $isClaimed = \App\Models\Z_Website\Quests\TasksUserReward::where(
                                                            'user_id',
                                                            auth()->id(),
                                                        )
                                                            ->where('reward_id', $reward->normal_reward)
                                                            ->where('reward_type', 'Normal')
                                                            ->value('is_claimed');
                                                    @endphp
                                                    @if ($normalReward)
                                                        <img src="{{ Str::startsWith($normalReward->reward_icon, ['http://', 'https://']) ? $normalReward->reward_icon : asset($normalReward->reward_icon) }}"
                                                            alt="{{ $normalReward->reward_name }}"
                                                            class="quests-reward-icon">

                                                        <p><span style="color: rgb(255, 179, 0); font-weight: bold;">{{ $normalReward->reward_count }}x </span> {{ $normalReward->reward_name }}</p>
                                                        @if ($totalCompletedDays >= $reward->days_required)
                                                            @if ($isClaimed)
                                                                <button class="quests-btn-success btn-sm" disabled>Claimed
                                                                    ✔</button>
                                                            @else
                                                                <form method="POST"
                                                                    action="{{ route('tasks.claim.reward', ['rewardId' => $reward->normal_reward, 'type' => 'Normal']) }}">
                                                                    @csrf
                                                                    <button class="quests-btn-primary btn-sm">Claim</button>
                                                                </form>
                                                            @endif
                                                        @else
                                                            <p class="quests-text-warning">Not eligible yet</p>
                                                        @endif
                                                    @else
                                                        <p>No Reward</p>
                                                    @endif
                                                </td>

                                                <!-- VIP Rewards -->
                                                <td class="quests-vip-reward-cell vip-reward">
                                                    @php
                                                        $vipReward = \App\Models\Z_Website\Quests\TaskReward::find(
                                                            $reward->vip_reward,
                                                        );
                                                        $isVip = auth()->user()->isVip();
                                                        $isVipClaimed = \App\Models\Z_Website\Quests\TasksUserReward::where(
                                                            'user_id',
                                                            auth()->id(),
                                                        )
                                                            ->where('reward_id', $reward->vip_reward)
                                                            ->where('reward_type', 'VIP')
                                                            ->value('is_claimed');
                                                    @endphp
                                                    @if ($vipReward)
                                                        <img src="{{ Str::startsWith($vipReward->reward_icon, ['http://', 'https://']) ? $vipReward->reward_icon : asset($vipReward->reward_icon) }}"
                                                            alt="{{ $vipReward->reward_name }}" class="quests-reward-icon">
                                                            <p><span style="color: rgb(0, 255, 38); font-weight: bold;">{{ $vipReward->reward_count }}x </span> {{ $vipReward->reward_name }}</p>
                                                        @if ($totalCompletedDays >= $reward->days_required)
                                                            @if ($isVip)
                                                                @if ($isVipClaimed)
                                                                    <button class="quests-btn-success btn-sm"
                                                                        disabled>Claimed
                                                                        ✔</button>
                                                                @else
                                                                    <form method="POST"
                                                                        action="{{ route('tasks.claim.reward', ['rewardId' => $reward->vip_reward, 'type' => 'VIP']) }}">
                                                                        @csrf
                                                                        <button
                                                                            class="quests-btn-primary btn-sm">Claim</button>
                                                                    </form>
                                                                @endif
                                                            @else
                                                                <img src="{{ asset('images/x-mark.jpg') }}"
                                                                    alt="Not Eligible" class="quests-not-eligible-icon">
                                                                <p>Not VIP</p>
                                                            @endif
                                                        @else
                                                            <p class="quests-text-warning">Not eligible yet</p>
                                                        @endif
                                                    @else
                                                        <p>No Reward</p>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="text-center col-lg-12">
                            <h2 class="text-warning">Change your char!</h2>
                            <p class="mb-4">Start your journey by choose char and clicking the button below:</p>
                            <form method="POST" action="{{ route('tasks.start.journey') }}">
                                @csrf
                                <div class="App-4t-choose-char">
                                    <select name="charID" id="charID" required>
                                        @if ($currentChar)
                                            <option value="" disabled selected>{{ $currentChar->char->CharName16 }}
                                                (Current)</option>
                                        @else
                                            <option value="" disabled selected>Choose Your Char</option>
                                        @endif
                                        @foreach ($availableChars as $char)
                                            <option value="{{ $char->CharID }}">{{ $char->CharName16 }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <button class="btn btn-primary btn-lg">Start Your Journey in Quests</button>
                            </form>
                        </div>

                    @endif

                </div>
            </div>
        </div>
    </div>




    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const calendarEl = document.getElementById('calendar');
            if (!calendarEl) {
                console.error("Calendar element not found");
                return;
            }

            const events = @json($tasksWithDates).map(task => {
                let backgroundColor = '#ffffff'; // اللون الافتراضي
                let borderColor = '#000000';
                let textColor = '#000000';

                switch (task.status) {
                    case 'today':
                        backgroundColor = '#FFEB3B'; // لون اليوم الحالي
                        borderColor = '#FFC107';
                        textColor = '#000000';
                        break;
                    case 'completed':
                        backgroundColor = '#4CAF50'; // لون المكتمل
                        borderColor = '#388E3C';
                        textColor = '#ffffff';
                        break;
                    case 'lost':
                        backgroundColor = '#FF5722'; // لون المفقود
                        borderColor = '#E64A19';
                        textColor = '#ffffff';
                        break;
                    case 'upcoming':
                        backgroundColor = '#2196F3'; // لون الأيام المستقبلية
                        borderColor = '#1976D2';
                        textColor = '#ffffff';
                        break;
                    default:
                        backgroundColor = '#BDBDBD'; // لون افتراضي
                        borderColor = '#757575';
                        textColor = '#ffffff';
                }

                return {
                    id: task.id,
                    title: task.title,
                    start: task.start,
                    backgroundColor: backgroundColor,
                    borderColor: borderColor,
                    textColor: textColor,
                };
            });

            const calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,dayGridWeek',
                },
                events: events,
            });

            calendar.render();






            // const upgradeButton = document.getElementById('upgradeToVIP');
            // const toast = document.getElementById('vip-toast');
            // const confirmButton = document.getElementById('confirmVipUpgrade');
            // const cancelButton = document.getElementById('cancelVipUpgrade');

            // if (upgradeButton) {
            //     upgradeButton.addEventListener('click', function() {
            //         toast.classList.remove('hidden');
            //     });

            //     cancelButton.addEventListener('click', function() {
            //         toast.classList.add('hidden');
            //     });

            //     confirmButton.addEventListener('click', function() {
            //         fetch("{{ route('tasks.upgrade.vip') }}", {
            //                 method: "POST",
            //                 headers: {
            //                     "Content-Type": "application/json",
            //                     "X-CSRF-TOKEN": "{{ csrf_token() }}"
            //                 }
            //             })
            //             .then(response => response.json())
            //             .then(data => {
            //                 if (data.success) {
            //                     alert("🔥 Successfully upgraded to VIP!");
            //                     window.location.reload();
            //                 } else {
            //                     alert("❌ Error: " + data.message);
            //                 }
            //             })
            //             .catch(error => {
            //                 console.error("Error:", error);
            //             });
            //     });
            // }



            const vipUpgradeForm = document.getElementById('vip-upgrade-form');
            if (vipUpgradeForm) {
                vipUpgradeForm.addEventListener('submit', function(e) {
                    e.preventDefault();

                    let formData = new FormData(vipUpgradeForm);

                    fetch(vipUpgradeForm.action, {
                            method: vipUpgradeForm.method,
                            body: formData,
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            }
                        })
                        .then(response => response.json())
                        .then(data => {
                            $('#vipUpgradeModal').modal('hide');

                            if (data.success) {
                                toastr.success(data.message);
                                setTimeout(() => location.reload(), 2000);
                            } else {
                                toastr.error(data.message);
                            }
                        })
                        .catch(error => {
                            $('#vipUpgradeModal').modal('hide');
                            toastr.error("An error occurred: " + error);
                        });
                });
            }








            const completeTaskButton = document.getElementById('completeTaskButton');
            if (completeTaskButton) {
                completeTaskButton.addEventListener('click', function(e) {
                    e.preventDefault();

                    let day = this.getAttribute('data-day'); // جلب اليوم الفعلي من العنصر
                    if (!day) {
                        console.error("Day parameter is missing!");
                        toastr.error("Error: Unable to determine the task day.");
                        return;
                    }

                    let requestUrl = "{{ route('tasks.complete.day', ':day') }}".replace(':day', day);

                    fetch(requestUrl, {
                            method: 'POST',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Content-Type': 'application/json'
                            },
                            body: JSON.stringify({})
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                toastr.success(data.message);
                                completeTaskButton.style.display =
                                    'none'; // إخفاء الزر بعد إكمال المهمة

                                // **إضافة التأخير قبل عمل الـ refresh**
                                setTimeout(() => {
                                    location.reload();
                                }, 2000); // **هيعمل reload بعد ثانيتين**

                            } else {
                                toastr.error(data.message);
                            }
                        })
                        .catch(error => {
                            toastr.error("An error occurred: " + error);
                        });
                });
            }




        });
    </script>




@endsection