@extends('layouts.master')
@section('css')
<link rel="stylesheet" href="{{ URL::asset('/assets/css/tasks-calender.css') }}" />
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<style>
   .pac-container {
   z-index: 1055 !important; /* Should be higher than Bootstrap modal (default is 1050) */
   }
</style>
@endsection
@section('title', 'Task Scheduler')
@section('content')
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
   <h4 class="mb-sm-0 font-size-18">TASK MANAGER</h4>
   <div class="page-title-right">
      <ol class="breadcrumb m-0">
         <li class="breadcrumb-item"><a href="{{ route('client.index') }}">Dashboard</a></li>
         <li class="breadcrumb-item active"><a href="{{ route('client.create') }}">Task Scheduler</a></li>
      </ol>
   </div>
</div>
@php
$upcomingTasks = $tasks->filter(function ($task) {
$scheduledDate = \Carbon\Carbon::parse($task->scheduled_at);
return ($scheduledDate->isToday() || $scheduledDate->isFuture()) 
&& !in_array($task->status, ['completed', 'failed']);
})->sortBy('scheduled_at');
@endphp
<div class="dashboard-container">
   @if (session('status'))
   <div class="alert alert-success alert-dismissible alert-label-icon label-arrow fade show" role="alert">
      <i class="ri-check-double-line label-icon"></i><strong>Success</strong> - {{session('status')}}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
   </div>
   @endif @if (session('error'))
   <div class="alert alert-danger alert-dismissible alert-label-icon label-arrow fade show mb-xl-0" role="alert">
      <i class="ri-error-warning-line label-icon"></i><strong>Failed</strong>
      - {{session('error')}}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
   </div>
   <br />
   @endif
   <div class="dashboard-grid mb-4">
      <!-- Sidebar Panel -->
      <div class="sidebar-panel">
         @can('create task')
            <div class="card card-h-100 mb-0">
                <div class="card-body">
                    <a href="{{ route('tasks.create') }}" class="btn btn-info w-100">
                        <i class="mdi mdi-plus"></i> Create New Task
                    </a>
                </div>
            </div>
         @endcan
         <!-- Upcoming Tasks -->
         <div class="upcoming-tasks glass-card pb-4">
            <div class="section-header">
               <h3>Upcoming Tasks</h3>
               <span class="badge bg-primary">{{ $upcomingTasks->count() }}</span>
            </div>
            <div class="task-list-container">
               <div class="task-list">
                  @forelse ($upcomingTasks as $task)
                  <div class="task-item bg-light" onclick="window.location='{{ route('tasks.show', $task->id) }}'">
                     <div class="task-date">
                        <div class="date-day">{{ \Carbon\Carbon::parse($task->scheduled_at)->format('d') }}</div>
                        <div class="date-month">{{ \Carbon\Carbon::parse($task->scheduled_at)->format('M') }}</div>
                     </div>
                     <div class="task-details">
                        <div class="task-header">
                           <h4 class="task-title">{{ $task->title }}</h4>
                           <div class="task-status-indicator {{ $task->status }}"></div>
                        </div>
                        <div class="task-meta">
                           @if($task->assigned_to && $task->assignedUser)
                           <span class="meta-item">
                           <i class="ri-user-shared-line text-info"></i> {{ $task->assignedUser->fullName() }}
                           </span>
                           @endif
                           <!-- <span class="meta-item">
                              <i class="fas fa-clock"></i> {{ \Carbon\Carbon::parse($task->scheduled_at)->format('h:i A') }}
                              </span> -->
                        </div>
                        @if($task->description)
                        <p class="task-description">{{ Str::limit($task->description, 50) }}</p>
                        @endif
                     </div>
                  </div>
                  @empty
                  <div class="empty-state">
                     <i class="fas fa-calendar-plus"></i>
                     <p>No upcoming tasks</p>
                     <button class="btn-text" data-bs-toggle="modal" data-bs-target="#addTaskModal">
                     Create your first task
                     </button>
                  </div>
                  @endforelse
               </div>
               <!-- @if($upcomingTasks->count() > 4)
                  <div class="scroll-indicator">
                    <i class="fas fa-chevron-down"></i> Scroll for more tasks
                  </div>
                  @endif -->
            </div>
         </div>
      </div>
      <!-- Main Calendar Panel -->
      <div class="main-panel">
         <div class="calendar-container glass-card">
            <div id="task-calendar"></div>
         </div>
      </div>
   </div>
</div>
<div class="modal fade" id="permissionModal" tabindex="-1" aria-labelledby="permissionModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <!-- Header with soft info background and bold title -->
            <div class="modal-header p-3 bg-soft-warning">
                <h5 class="modal-title fw-bold mb-0" id="permissionModalLabel">
                    <i class="ri-error-warning-line me-2"></i> Permission Denied
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
            </div>

            <!-- Body -->
            <div class="modal-body text-center">
                <p>You do not have permission to create tasks. Please contact your administrator if you think this is an error.</p>
            </div>

            <!-- Footer -->
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>


<!-- Add/Edit Task Modal -->
@include('tasks.task-details-modal') 
@php
$latitude = 0;
$longitude = 0;
@endphp
@endsection
@section('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar/index.global.min.js"></script>
<script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
<script>
    window.userPermissions = @json(auth()->user()->getAllPermissions()->pluck('name'));
</script>
<script>
   document.addEventListener('DOMContentLoaded', function () {
       const calendarEl = document.getElementById('task-calendar');
       const rawEvents = @json($calendarEvents);
   
       const parsedEvents = rawEvents.map(event => {
           const start = event.start ? event.start.split('T')[0] : null;
           let end = event.end ? event.end.split('T')[0] : null;
   
           if (start && end && start !== end) {
               const endDate = new Date(event.end);
               end = endDate.toISOString().split('T')[0];
           }
   
           return {
               id: event.id,
               title: event.title,
               start: event.start, 
               end: event.end,
               description: event.description,
               status: event.status,
               type: event.type,
               client_id: event.client_id,
               client_name: event.client_name || 'Not Assigned',
               assigned_to: event.assigned_to,
               assigned_name: event.assigned_name || 'Not Assigned',
               location_name: event.location_name,
               allDay: true
           };
       });
   
       const calendar = new FullCalendar.Calendar(calendarEl, {
           initialView: window.innerWidth <= 768 ? 'listMonth' : 'dayGridMonth',
           headerToolbar: {
               left: 'prev,next today',
               center: 'title',
               right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
           },
           buttonText: {
               today: 'Today',
               month: 'Month',
               week: 'Week',
               day: 'Day',
               list: 'List',
               prev: '‹',
               next: '›'
           },
           height: 'auto',
           selectable: true,
           editable: true,
           events: parsedEvents,
   
           eventClassNames: function (info) {
               const status = info.event.extendedProps.status;
               return {
                   new: 'bg-soft-info text-info',
                   in_progress: 'bg-soft-warning text-warning',
                   completed: 'bg-soft-success text-success',
                   failed: 'bg-soft-danger text-danger'
               }[status] || 'bg-secondary text-white';
           },
   
           dateClick: function (info) {
                if (window.userPermissions.includes('create task')) {
                    window.location.href = `/dashboard/tasks/create?date=${info.dateStr}`;
                } else {
                    const permissionModal = new bootstrap.Modal(document.getElementById('permissionModal'));
                    permissionModal.show();
                }
            },
                        
           eventClick: function (info) {
                const task = info.event.extendedProps;
   
                // 1. Date Handling
                const startDate = formatDateLocal(info.event.start);
                const endDate = info.event.end ? formatDateLocal(info.event.end) : startDate;
                const dateDisplay = (startDate === endDate) ? startDate : `${startDate} to ${endDate}`;
                document.getElementById('details-date').textContent = dateDisplay;
   
                // 2. Title and Description
                document.getElementById('details-title').textContent = info.event.title || 'No Title';
                const description = task.description || 'No description provided.';
                document.getElementById('details-description').textContent = description;
   
                const descriptionSection = document.getElementById('description-section');
                description ? descriptionSection.classList.remove('d-none') : descriptionSection.classList.add('d-none');
   
                // 3. Location
                const locationSection = document.getElementById('location-section');
                if (task.location_name) {
                    document.getElementById('details-location').textContent = task.location_name;
                    locationSection.classList.remove('d-none');
                } else {
                    locationSection.classList.add('d-none');
                }
   
                // 4. Client
                const clientSection = document.getElementById('client-section');
                if (task.client_name) {
                    document.getElementById('details-client').textContent = task.client_name;
                    clientSection.classList.remove('d-none');
                } else {
                    clientSection.classList.add('d-none');
                }
   
                // 5. Assigned To
                const assignedSection = document.getElementById('assigned-section');
                if (task.assigned_name) {
                    document.getElementById('details-assigned').textContent = task.assigned_name;
                    assignedSection.classList.remove('d-none');
                } else {
                    assignedSection.classList.add('d-none');
                }
   
                // 6. Status Badge
                const statusElement = document.getElementById('details-status');
                const status = task.status || 'new';
                const statusStyles = {
                    new: { text: 'text-primary', bg: 'bg-soft-primary' },
                    in_progress: { text: 'text-warning', bg: 'bg-soft-warning' },
                    completed: { text: 'text-success', bg: 'bg-soft-success' },
                    failed: { text: 'text-danger', bg: 'bg-soft-danger' }
                };
                const styles = statusStyles[status] || { text: 'text-secondary', bg: 'bg-light' };
                statusElement.className = `d-inline-block px-3 py-1 rounded-pill small fw-medium ${styles.bg} ${styles.text}`;
                statusElement.innerHTML = `
                    <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" class="me-1" viewBox="0 0 24 24">
                        <circle cx="12" cy="12" r="5"></circle>
                    </svg> 
                    ${status.replace('_', ' ').toUpperCase()}
                `;
   
                // 7. Edit Button Logic
                const editBtn = document.getElementById('editTaskBtn');
                if (editBtn) {
                    editBtn.onclick = function () {
                        window.location.href = `/dashboard/tasks/${info.event.id}/edit`;
                    };
                }
                // 8. Delete Form
                const deleteForm = document.getElementById('deleteTaskForm');
                if (deleteForm) {
                    deleteForm.action = `/dashboard/tasks/${info.event.id}`;
                }
   
                // 9. Show the Modal
                const detailsModal = new bootstrap.Modal(document.getElementById('taskDetailsModal'));
                detailsModal.show();
            },
           eventDrop: function (info) {
               handleEventChange(info);
           },
   
           eventResize: function (info) {
               handleEventChange(info);
           }
       });
   
       calendar.render();
   
       function handleEventChange(info) {
           const event = info.event;
           const taskId = event.id;
   
           const updatedData = {
               title: event.title,
               description: event.extendedProps.description || '',  // ✅ Preserve Description
               status: event.extendedProps.status || 'new',
               type: event.extendedProps.type || 'installation',
               scheduled_at: formatDateLocal(new Date(event.start)),
               ends_at: event.end ? formatDateLocal(new Date(event.end)) : formatDateLocal(new Date(event.start)),
               client_id: event.extendedProps.client_id || null,
               assigned_to: event.extendedProps.assigned_to || null,
               _method: 'PUT',
               _token: '{{ csrf_token() }}'
           };
   
           fetch(`/dashboard/tasks/${taskId}`, {
               method: 'POST',
               headers: {
                   'Content-Type': 'application/json',
                   'Accept': 'application/json',
                   'X-Requested-With': 'XMLHttpRequest',
                   'X-CSRF-TOKEN': '{{ csrf_token() }}'
               },
               body: JSON.stringify(updatedData)
           })
           .then(response => {
               if (!response.ok) throw new Error('Failed to save event.');
               return response.json();
           })
           .then(data => {
               console.log('✅ Event updated successfully:', data);
           })
           .catch(error => {
               console.error('❌ Error updating event:', error);
               info.revert();
           });
       }
   
       function resetForm() {
           const form = document.getElementById('taskForm');
           form.reset();
           document.getElementById('task_id').value = '';
           document.getElementById('formMethod').value = 'POST';
           const endsAtInput = document.getElementById('ends_at');
           if (endsAtInput) endsAtInput.dataset.manualChange = '';
       }
   
       function showModal(title, action, method) {
           document.getElementById('addTaskModalLabel').textContent = title;
           const form = document.getElementById('taskForm');
           form.action = action;
           document.getElementById('formMethod').value = method;
           const modal = new bootstrap.Modal(document.getElementById('addTaskModal'));
           modal.show();
       }
   });
   
   function formatDateLocal(dateObj) {
       const year = dateObj.getFullYear();
       const month = String(dateObj.getMonth() + 1).padStart(2, '0');
       const day = String(dateObj.getDate()).padStart(2, '0');
       return `${year}-${month}-${day}`;
   }
</script>
<script>
   function confirmDelete() {
       Swal.fire({
           title: 'Are you sure?',
           text: "You won't be able to revert this!",
           icon: 'warning',
           showCancelButton: true,
           confirmButtonColor: '#dc3545',
           cancelButtonColor: '#6c757d',
           confirmButtonText: 'Yes, delete it!'
       }).then((result) => {
           if (result.isConfirmed) {
               document.getElementById('deleteTaskForm').submit();
           }
       });
   }
</script>
@endsection