{{-- Tasks data is now passed from the controller --}}

@extends('layouts/layoutMaster')

@section('title', 'Task Management')

@section('vendor-style')
  @vite(['resources/assets/vendor/libs/apex-charts/apex-charts.scss', 'resources/assets/vendor/libs/select2/select2.scss'])
@endsection

@section('vendor-script')
  @vite(['resources/assets/vendor/libs/apex-charts/apexcharts.js', 'resources/assets/vendor/libs/select2/select2.js'])
@endsection

@section('page-script')
  <script>
    // Task management JavaScript
    document.addEventListener('DOMContentLoaded', function() {
      // Initialize drag and drop functionality
      initializeDragAndDrop();
      
      // Initialize task modals
      initializeTaskModals();
      
      // Initialize form submission
      initializeTaskForm();
      
    });
    
    function initializeDragAndDrop() {
      // This would implement drag and drop functionality
      // For now, we'll just add click handlers
      const taskCards = document.querySelectorAll('.task-card');
      taskCards.forEach(card => {
        card.addEventListener('click', function() {
          // Open task details modal
          console.log('Task clicked:', this.dataset.taskId);
        });
      });
    }
    
    function initializeTaskModals() {
      // Initialize Bootstrap modals for task management
      const addTaskButtons = document.querySelectorAll('[data-bs-target="#addTaskModal"]');
      addTaskButtons.forEach(button => {
        button.addEventListener('click', function() {
          // Reset form
          document.getElementById('taskForm').reset();
          // Initialize assignee dropdown
          initializeAssigneeDropdown();
        });
      });
      
      // Handle modal show/hide events
      const addTaskModal = document.getElementById('addTaskModal');
      if (addTaskModal) {
        addTaskModal.addEventListener('shown.bs.modal', function() {
          // Reinitialize Select2 when modal is shown
          setTimeout(() => {
            initializeAssigneeDropdown();
          }, 100);
        });
        
        addTaskModal.addEventListener('hidden.bs.modal', function() {
          // Destroy Select2 when modal is hidden to prevent conflicts
          const assigneeSelect = $('#taskAssignee');
          if (assigneeSelect.hasClass('select2-hidden-accessible')) {
            assigneeSelect.select2('destroy');
          }
        });
      }
    }
    
    function initializeAssigneeDropdown() {
      const assigneeSelect = $('#taskAssignee');
      if (assigneeSelect.length) {
        // Initialize Select2 for the assignee dropdown
        assigneeSelect.select2({
          placeholder: 'Select Assignee',
          allowClear: true,
          width: '100%',
          dropdownParent: $('#addTaskModal'),
          templateResult: function(user) {
            if (!user.id) {
              return user.text;
            }
            
            const $user = $(user.element);
            const userName = $user.data('user-name');
            const userEmail = $user.data('user-email');
            
            const $result = $(
              '<div class="d-flex align-items-center">' +
                '<div class="avatar avatar-sm me-2">' +
                  '<div class="avatar-initial bg-primary rounded-circle">' +
                    (userName ? userName.charAt(0).toUpperCase() : 'U') +
                  '</div>' +
                '</div>' +
                '<div class="flex-grow-1">' +
                  '<div class="fw-medium">' + userName + '</div>' +
                  '<small class="text-muted">' + userEmail + '</small>' +
                '</div>' +
              '</div>'
            );
            
            return $result;
          },
          templateSelection: function(user) {
            if (!user.id) {
              return user.text;
            }
            
            const $user = $(user.element);
            const userName = $user.data('user-name');
            return userName || user.text;
          }
        });
        
        // Add change event to show selected user info
        assigneeSelect.on('change', function() {
          const selectedData = $(this).select2('data')[0];
          if (selectedData && selectedData.id) {
            const $selectedOption = $(this).find('option[value="' + selectedData.id + '"]');
            const userName = $selectedOption.data('user-name');
            const userEmail = $selectedOption.data('user-email');
            console.log('Selected assignee:', userName, userEmail);
          }
        });
      }
    }
    
    function initializeTaskForm() {
      const taskForm = document.getElementById('taskForm');
      if (taskForm) {
        taskForm.addEventListener('submit', function(e) {
          e.preventDefault();
          createTask();
        });
      }
    }
    
    
    function createTask() {
      const form = document.getElementById('taskForm');
      const formData = new FormData(form);
      
      // Add additional fields to FormData
      formData.append('column', 'todo'); // Always assign new tasks to 'To Do' column
      
      // Debug: Log form data to console
      console.log('Form data being sent:');
      for (let [key, value] of formData.entries()) {
        console.log(key, value);
      }
      
      // Show loading state
      const submitBtn = form.querySelector('button[type="submit"]');
      const originalText = submitBtn.textContent;
      submitBtn.disabled = true;
      submitBtn.textContent = 'Creating...';
      
      // Send AJAX request using FormData (more compatible with Laravel CSRF)
      const baseUrl = document.documentElement.getAttribute('data-base-url') || '';
      const url = baseUrl.endsWith('/') ? `${baseUrl}tasks` : `${baseUrl}/tasks`;
      
      // Enhanced console logging for debugging
      console.log('=== TASK CREATION DEBUG ===');
      console.log('Base URL:', baseUrl);
      console.log('Full URL:', url);
      console.log('Form Data:', Object.fromEntries(formData));
      console.log('CSRF Token:', document.querySelector('meta[name="csrf-token"]')?.getAttribute('content'));
      console.log('User Agent:', navigator.userAgent);
      console.log('Current URL:', window.location.href);
      console.log('Session Storage:', sessionStorage);
      console.log('Local Storage:', localStorage);
      
      fetch(url, {
        method: 'POST',
        body: formData,
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
          'Accept': 'application/json'
        },
        credentials: 'same-origin'
      })
      .then(response => {
        console.log('Response status:', response.status);
        console.log('Response headers:', response.headers);
        console.log('Response ok:', response.ok);
        
        if (!response.ok) {
          console.error('HTTP Error:', response.status, response.statusText);
          return response.text().then(text => {
            console.error('Error response body:', text);
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
          });
        }
        
        return response.json();
      })
      .then(data => {
        console.log('Success response data:', data);
        if (data.success) {
          // Show success message
          showSuccessMessage('Task created successfully!');
          
          // Close modal
          const modal = bootstrap.Modal.getInstance(document.getElementById('addTaskModal'));
          modal.hide();
          
          // Reset form
          form.reset();
          
          // Refresh the page to show new task
          setTimeout(() => {
            window.location.reload();
          }, 1000);
        } else {
          showErrorMessage(data.message || 'Failed to create task');
        }
      })
      .catch(error => {
        console.error('=== TASK CREATION ERROR ===');
        console.error('Error object:', error);
        console.error('Error message:', error.message);
        console.error('Error stack:', error.stack);
        console.error('Error name:', error.name);
        showErrorMessage('Network error. Please try again.');
      })
      .finally(() => {
        // Reset button state
        submitBtn.disabled = false;
        submitBtn.textContent = originalText;
      });
    }
    
    function showSuccessMessage(message) {
      const toast = document.createElement('div');
      toast.className = 'toast align-items-center text-white bg-success border-0';
      toast.setAttribute('role', 'alert');
      toast.innerHTML = `
        <div class="d-flex">
          <div class="toast-body">
            <i class="bx bx-check-circle me-2"></i>
            ${message}
          </div>
          <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
      `;
      
      let toastContainer = document.querySelector('.toast-container');
      if (!toastContainer) {
        toastContainer = document.createElement('div');
        toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';
        document.body.appendChild(toastContainer);
      }
      
      toastContainer.appendChild(toast);
      
      const bsToast = new bootstrap.Toast(toast);
      bsToast.show();
      
      toast.addEventListener('hidden.bs.toast', () => {
        toast.remove();
      });
    }
    
    function showErrorMessage(message) {
      const toast = document.createElement('div');
      toast.className = 'toast align-items-center text-white bg-danger border-0';
      toast.setAttribute('role', 'alert');
      toast.innerHTML = `
        <div class="d-flex">
          <div class="toast-body">
            <i class="bx bx-error-circle me-2"></i>
            ${message}
          </div>
          <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
      `;
      
      let toastContainer = document.querySelector('.toast-container');
      if (!toastContainer) {
        toastContainer = document.createElement('div');
        toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';
        document.body.appendChild(toastContainer);
      }
      
      toastContainer.appendChild(toast);
      
      const bsToast = new bootstrap.Toast(toast);
      bsToast.show();
      
      toast.addEventListener('hidden.bs.toast', () => {
        toast.remove();
      });
    }
  </script>
@endsection

@section('content')
  <!-- Page Header -->
  <div class="row mb-4">
    <div class="col-12">
      <div class="d-flex align-items-center justify-content-between">
        <div>
          <h4 class="mb-1">Task Management</h4>
          <p class="text-muted mb-0">Track and manage your team's tasks and projects</p>
        </div>
        <div class="d-flex gap-2">
          <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addTaskModal">
            <i class="bx bx-plus me-2"></i>New Task
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Task Statistics -->
  <div class="row mb-4">
    <div class="col-sm-6 col-xl-3 mb-4">
      <div class="card">
        <div class="card-body">
          <div class="d-flex align-items-center">
            <div class="avatar avatar-sm me-3">
              <div class="avatar-initial bg-primary rounded">
                <i class="bx bx-task"></i>
              </div>
            </div>
            <div>
              <h6 class="mb-0">Total Tasks</h6>
              <h4 class="mb-0 text-primary">{{ array_sum(array_map('count', $tasks)) }}</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-xl-3 mb-4">
      <div class="card">
        <div class="card-body">
          <div class="d-flex align-items-center">
            <div class="avatar avatar-sm me-3">
              <div class="avatar-initial bg-warning rounded">
                <i class="bx bx-time"></i>
              </div>
            </div>
            <div>
              <h6 class="mb-0">In Progress</h6>
              <h4 class="mb-0 text-warning">{{ count($tasks['inprogress']) }}</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-xl-3 mb-4">
      <div class="card">
        <div class="card-body">
          <div class="d-flex align-items-center">
            <div class="avatar avatar-sm me-3">
              <div class="avatar-initial bg-info rounded">
                <i class="bx bx-check-circle"></i>
              </div>
            </div>
            <div>
              <h6 class="mb-0">Completed</h6>
              <h4 class="mb-0 text-info">{{ count($tasks['done']) }}</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-xl-3 mb-4">
      <div class="card">
        <div class="card-body">
          <div class="d-flex align-items-center">
            <div class="avatar avatar-sm me-3">
              <div class="avatar-initial bg-danger rounded">
                <i class="bx bx-alarm"></i>
              </div>
            </div>
            <div>
              <h6 class="mb-0">Overdue</h6>
              <h4 class="mb-0 text-danger">{{ $overdueCount ?? 0 }}</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Kanban Board -->
  <div class="card">
    <div class="card-body p-0">
      <x-kanban-board :tasks="$tasks" :users="$users" />
    </div>
  </div>

  <!-- Add Task Modal -->
  <div class="modal fade" id="addTaskModal" tabindex="-1" aria-labelledby="addTaskModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="addTaskModalLabel">Create New Task</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <form id="taskForm">
          @csrf
          <div class="modal-body">
            <div class="row">
              <div class="col-md-6 mb-3">
                <label for="taskTitle" class="form-label">Task Title</label>
                <input type="text" class="form-control" id="taskTitle" name="title" required>
              </div>
              <div class="col-md-3 mb-3">
                <label for="taskPriority" class="form-label">Priority</label>
                <select class="form-select" id="taskPriority" name="priority" required>
                  <option value="low">Low</option>
                  <option value="medium" selected>Medium</option>
                  <option value="high">High</option>
                </select>
              </div>
            </div>
            <div class="mb-3">
              <label for="taskDescription" class="form-label">Description</label>
              <textarea class="form-control" id="taskDescription" name="description" rows="3"></textarea>
            </div>
            <div class="row">
              <div class="col-md-6 mb-3">
                <label for="taskAssignee" class="form-label">Assign To</label>
                <select class="form-select select2" id="taskAssignee" name="assignee">
                  <option value="">Select Assignee</option>
                  @if(count($users) > 0)
                    @foreach($users as $user)
                      <option value="user-{{ $user->id }}" data-user-name="{{ $user->first_name }} {{ $user->last_name }}" data-user-email="{{ $user->email }}">
                        {{ $user->first_name }} {{ $user->last_name }}
                        @if($user->name && $user->name !== $user->first_name . ' ' . $user->last_name)
                          ({{ $user->name }})
                        @endif
                        @if($user->email)
                          - {{ $user->email }}
                        @endif
                      </option>
                    @endforeach
                  @else
                    <option value="" disabled>No team members available</option>
                  @endif
                </select>
                <small class="form-text text-muted">
                  <i class="bx bx-search me-1"></i>Type to search for a team member ({{ count($users) }} available)
                </small>
              </div>
              <div class="col-md-6 mb-3">
                <label for="taskDueDate" class="form-label">Due Date</label>
                <input type="date" class="form-control" id="taskDueDate" name="dueDate">
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-primary">Create Task</button>
          </div>
        </form>
      </div>
    </div>
  </div>

@endsection