@extends('layouts.app')

@section('title', 'Team Calendar')

@php
    $monthParam = request('month', $currentMonth->month);
    $yearParam = request('year', $currentMonth->year);
@endphp

@section('content')
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1">Team Calendar</h4>
            <p class="text-muted mb-0">Plan and track departmental workloads.</p>
        </div>
        <div class="d-flex gap-2">
            @if($canCreateAnyTask ?? false)
                <div class="dropdown">
                    <button class="btn btn-primary dropdown-toggle" type="button" id="addTaskDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="icon-base ti tabler-plus me-1"></i>
                        Add Task
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="addTaskDropdown">
                        @if($canCreateInternal ?? false)
                            <li>
                                <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#taskModal">
                                    <i class="icon-base ti tabler-briefcase me-2"></i>
                                    Add Internal Task
                                </a>
                            </li>
                        @endif
                        @if($canCreateSupport ?? false)
                            <li>
                                <a class="dropdown-item" href="{{ route('tasks.support.create') }}">
                                    <i class="icon-base ti tabler-life-buoy me-2"></i>
                                    Add Support Task
                                </a>
                            </li>
                        @endif
                        @if($canCreateTeleMarketing ?? false)
                            <li>
                                <a class="dropdown-item" href="{{ route('tasks.digital-marketing.create') }}">
                                    <i class="icon-base ti tabler-brand-google-analytics me-2"></i>
                                    Create Tele-Marketing
                                </a>
                            </li>
                        @endif
                        @if($canCreatePaymentPlanning ?? false)
                            <li>
                                <a class="dropdown-item" href="{{ route('tasks.payment-planning.create') }}">
                                    <i class="icon-base ti tabler-currency-dollar me-2"></i>
                                    Create Payment Planning
                                </a>
                            </li>
                        @endif
                    </ul>
                </div>
            @endif
        </div>
    </div>

    @include('partials.alerts')

    <div class="row g-4">
        <div class="{{ ($canViewUpcomingTasks ?? false) ? 'col-md-8' : 'col-md-12' }}">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <form class="d-flex gap-2" method="get">
                        <select name="month" class="form-select">
                            @foreach(range(1, 12) as $month)
                                <option value="{{ $month }}" @selected($month == $currentMonth->month)>
                                    {{ \Carbon\Carbon::create()->month($month)->format('F') }}
                                </option>
                            @endforeach
                        </select>
                        <select name="year" class="form-select">
                            @foreach(range($currentMonth->year - 2, $currentMonth->year + 2) as $yearOption)
                                <option value="{{ $yearOption }}" @selected($yearOption == $currentMonth->year)>
                                    {{ $yearOption }}
                                </option>
                            @endforeach
                        </select>
                        <button class="btn btn-outline-secondary" type="submit">Go</button>
                    </form>
                    <a href="{{ route('tasks.index') }}" class="btn btn-sm btn-text-secondary">
                        Today
                    </a>
                </div>
                <div class="card-body">
                    <div class="calendar-grid">
                        <div class="calendar-grid__header">
                            @foreach(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] as $weekday)
                                <div class="calendar-grid__cell calendar-grid__cell--header">{{ $weekday }}</div>
                            @endforeach
                        </div>
                        @foreach($calendar as $week)
                            <div class="calendar-grid__row">
                                @foreach($week as $day)
                                    @php $dayKey = $day['date']->format('Y-m-d'); @endphp
                                    <div class="calendar-grid__cell {{ $day['is_current_month'] ? '' : 'calendar-grid__cell--muted' }} {{ $day['is_today'] ? 'calendar-grid__cell--today' : '' }}">
                                        <div class="calendar-grid__date">{{ $day['date']->format('j') }}</div>
                                        @if($tasksByDate->has($dayKey))
                                            <div class="calendar-grid__tasks">
                                                @foreach($tasksByDate->get($dayKey) as $task)
                                                    @php
                                                        $isSupportTask = $task->department && (str_contains(strtolower($task->department->name), 'support') || str_contains(strtolower($task->department->name), 'eshikshya'));
                                                        $isMarketingTask = $task->department && (str_contains(strtolower($task->department->name), 'marketing') || str_contains(strtolower($task->department->name), 'digital'));
                                                        $isPaymentPlanningTask = isset($task->is_payment_planning) && $task->is_payment_planning;
                                                    @endphp
                                                    @if($isSupportTask)
                                                        <a href="{{ route('tasks.support.show', $task) }}" class="badge bg-label-{{ [
                                                            \App\Models\Task::STATUS_NOT_STARTED => 'warning',
                                                            \App\Models\Task::STATUS_IN_PROGRESS => 'info',
                                                            \App\Models\Task::STATUS_COMPLETED => 'success',
                                                        ][$task->status] ?? 'primary' }} d-block text-start mb-1 text-decoration-none" title="Click to view details">
                                                            {{ $task->title }}
                                                        </a>
                                                    @elseif($isPaymentPlanningTask)
                                                        <a href="{{ route('tasks.payment-planning.show', $task) }}" class="badge bg-label-{{ [
                                                            \App\Models\Task::STATUS_NOT_STARTED => 'warning',
                                                            \App\Models\Task::STATUS_IN_PROGRESS => 'info',
                                                            \App\Models\Task::STATUS_COMPLETED => 'success',
                                                        ][$task->status] ?? 'primary' }} d-block text-start mb-1 text-decoration-none" title="Click to view details">
                                                            {{ $task->title }}
                                                        </a>
                                                    @elseif($isMarketingTask)
                                                        <a href="{{ route('tasks.digital-marketing.show', $task) }}" class="badge bg-label-{{ [
                                                            \App\Models\Task::STATUS_NOT_STARTED => 'warning',
                                                            \App\Models\Task::STATUS_IN_PROGRESS => 'info',
                                                            \App\Models\Task::STATUS_COMPLETED => 'success',
                                                        ][$task->status] ?? 'primary' }} d-block text-start mb-1 text-decoration-none" title="Click to view details">
                                                            {{ $task->title }}
                                                        </a>
                                                    @else
                                                        <span class="badge bg-label-{{ [
                                                            \App\Models\Task::STATUS_NOT_STARTED => 'warning',
                                                            \App\Models\Task::STATUS_IN_PROGRESS => 'info',
                                                            \App\Models\Task::STATUS_COMPLETED => 'success',
                                                        ][$task->status] ?? 'primary' }} d-block text-start mb-1">
                                                            {{ $task->title }}
                                                        </span>
                                                    @endif
                                                @endforeach
                                            </div>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        @if($canViewUpcomingTasks ?? false)
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-header">
                    <h5 class="mb-0">Upcoming Tasks</h5>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead>
                            <tr>
                                <th>Task Type</th>
                                <th>Status</th>
                                @if(($canUpdateUpcomingTasks ?? false) || ($canDeleteUpcomingTasks ?? false) || ($isSuperAdmin ?? false))
                                <th class="text-end">Action</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($tasksByDate->flatten() as $task)
                                @php
                                    $isSupportTask = $task->department && (str_contains(strtolower($task->department->name), 'support') || str_contains(strtolower($task->department->name), 'eshikshya'));
                                    $isMarketingTask = $task->department && (str_contains(strtolower($task->department->name), 'marketing') || str_contains(strtolower($task->department->name), 'digital'));
                                    $isPaymentPlanningTask = isset($task->is_payment_planning) && $task->is_payment_planning;
                                    
                                    if ($isSupportTask) {
                                        $taskType = 'Support';
                                        $taskTypeBadge = 'bg-label-info';
                                    } elseif ($isPaymentPlanningTask) {
                                        $taskType = 'Payment Planning';
                                        $taskTypeBadge = 'bg-label-success';
                                    } elseif ($isMarketingTask) {
                                        $taskType = 'Tele-Marketing';
                                        $taskTypeBadge = 'bg-label-warning';
                                    } else {
                                        $taskType = 'Internal';
                                        $taskTypeBadge = 'bg-label-secondary';
                                    }
                                @endphp
                                <tr>
                                    <td>
                                        <span class="badge {{ $taskTypeBadge }}">{{ $taskType }}</span>
                                    </td>
                                    <td>
                                        <span class="badge bg-label-{{ [
                                            \App\Models\Task::STATUS_NOT_STARTED => 'warning',
                                            \App\Models\Task::STATUS_IN_PROGRESS => 'info',
                                            \App\Models\Task::STATUS_COMPLETED => 'success',
                                        ][$task->status] ?? 'primary' }}">
                                            {{ ucfirst(str_replace('_', ' ', $task->status)) }}
                                        </span>
                                    </td>
                                    @if(($canDeleteUpcomingTasks ?? false) || ($isSuperAdmin ?? false))
                                    <td class="text-end">
                                        <div class="dropdown">
                                            <button class="btn btn-sm btn-icon btn-text-secondary" type="button"
                                                    data-bs-toggle="dropdown" aria-expanded="false">
                                                <i class="icon-base ti tabler-dots-vertical"></i>
                                            </button>
                                            <div class="dropdown-menu dropdown-menu-end">
                                                <a class="dropdown-item" href="{{ route('tasks.report', $task) }}">
                                                    <i class="icon-base ti tabler-file-report me-1"></i> Report
                                                </a>
                                                @if($isSupportTask)
                                                    <a class="dropdown-item" href="{{ route('tasks.support.show', $task) }}">
                                                        <i class="icon-base ti tabler-eye me-1"></i> View Details
                                                    </a>
                                                    <div class="dropdown-divider"></div>
                                                @elseif($isPaymentPlanningTask)
                                                    <a class="dropdown-item" href="{{ route('tasks.payment-planning.show', $task) }}">
                                                        <i class="icon-base ti tabler-eye me-1"></i> View Details
                                                    </a>
                                                    <div class="dropdown-divider"></div>
                                                @elseif($isMarketingTask)
                                                    <a class="dropdown-item" href="{{ route('tasks.digital-marketing.show', $task) }}">
                                                        <i class="icon-base ti tabler-eye me-1"></i> View Details
                                                    </a>
                                                    <div class="dropdown-divider"></div>
                                                @endif
                                                @if($isSuperAdmin ?? false)
                                                <button class="dropdown-item" data-bs-toggle="modal"
                                                        data-bs-target="#taskModal"
                                                        data-task-id="{{ $task->id }}"
                                                        data-task-title="{{ $task->title }}"
                                                        data-task-description="{{ $task->description }}"
                                                        data-task-due="{{ $task->due_date->format('Y-m-d') }}"
                                                        data-task-status="{{ $task->status }}"
                                                        data-task-department="{{ $task->department_id }}"
                                                        data-task-assignee="{{ $task->assigned_to_id }}">
                                                    <i class="icon-base ti tabler-edit me-1"></i> Edit
                                                </button>
                                                @endif
                                            </div>
                                        </div>
                                    </td>
                                    @endif
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="{{ (($canDeleteUpcomingTasks ?? false) || ($isSuperAdmin ?? false)) ? '3' : '2' }}" class="text-center text-muted py-4">
                                        No tasks scheduled for this month.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        @endif
    </div>

    <div class="modal fade" id="taskModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Task</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="post" id="taskForm">
                    @csrf
                    <input type="hidden" name="month" value="{{ $monthParam }}">
                    <input type="hidden" name="year" value="{{ $yearParam }}">
                    <div class="modal-body">
                        <div class="row g-3">
                            <div class="col-md-8">
                                <label class="form-label">Title <span class="text-danger">*</span></label>
                                <input type="text" name="title" class="form-control" required>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Due Date <span class="text-danger">*</span></label>
                                <input type="date" name="due_date" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Department</label>
                                <select name="department_id" id="taskDepartment" class="form-select" onchange="loadDepartmentEmployees()">
                                    <option value="">All Departments</option>
                                    @foreach($departments as $department)
                                        <option value="{{ $department->id }}">{{ $department->name }}</option>
                                    @endforeach
                                </select>
                                <small class="text-muted">Select a department or leave as "All Departments"</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Assigned To</label>
                                <select name="assigned_to_id" id="taskAssignedTo" class="form-select">
                                    <option value="">All Department Employees</option>
                                </select>
                                <small class="text-muted">Leave unassigned to assign to all department employees</small>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Status <span class="text-danger">*</span></label>
                                <select name="status" class="form-select" required>
                                    @foreach($statuses as $value => $label)
                                        <option value="{{ $value }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Description</label>
                                <textarea name="description" rows="3" class="form-control"
                                          placeholder="Describe the task objectives and key outcomes"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save Task</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('head')
    <style>
        .calendar-grid {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .calendar-grid__header,
        .calendar-grid__row {
            display: grid;
            grid-template-columns: repeat(7, minmax(0, 1fr));
            gap: 0.75rem;
        }

        .calendar-grid__cell {
            border: 1px solid var(--bs-border-color);
            border-radius: var(--bs-border-radius-lg);
            min-height: 110px;
            padding: 0.75rem;
            background-color: var(--bs-body-bg);
            position: relative;
        }

        .calendar-grid__cell--muted {
            opacity: 0.5;
        }

        .calendar-grid__cell--today {
            border-color: var(--bs-primary);
            box-shadow: 0 0 0 1px rgba(var(--bs-primary-rgb), .25);
        }

        .calendar-grid__cell--header {
            text-transform: uppercase;
            font-weight: 600;
            font-size: 0.75rem;
            text-align: center;
            border: none;
            background-color: transparent;
            min-height: auto;
        }

        .calendar-grid__date {
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .calendar-grid__tasks {
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
        }
    </style>
@endpush

@push('scripts')
    <script>
        const taskModalEl = document.getElementById('taskModal');
        const taskForm = document.getElementById('taskForm');
        const departmentSelect = document.getElementById('taskDepartment');
        const assignedToSelect = document.getElementById('taskAssignedTo');

        function loadDepartmentEmployees() {
            const departmentId = departmentSelect.value;
            const assignedToSelectEl = document.getElementById('taskAssignedTo');
            
            // Clear previous options
            assignedToSelectEl.innerHTML = '<option value="">All Employees</option>';
            
            if (!departmentId) {
                // If no department selected, show all employees
                @foreach($employees as $employee)
                    const optionAll = document.createElement('option');
                    optionAll.value = '{{ $employee->id }}';
                    optionAll.textContent = '{{ $employee->name }} — {{ $employee->department?->name }}';
                    assignedToSelectEl.appendChild(optionAll);
                @endforeach
                return;
            }

            // Show loading state
            assignedToSelectEl.disabled = true;
            assignedToSelectEl.innerHTML = '<option value="">Loading employees...</option>';

            fetch(`{{ url('/api/tasks/departments') }}/${departmentId}/employees`)
                .then(response => response.json())
                .then(data => {
                    assignedToSelectEl.innerHTML = '<option value="">All Department Employees</option>';
                    
                    if (data.length === 0) {
                        assignedToSelectEl.innerHTML += '<option value="" disabled>No employees in this department</option>';
                    } else {
                        data.forEach(employee => {
                            const option = document.createElement('option');
                            option.value = employee.id;
                            option.textContent = `${employee.name}${employee.department ? ` — ${employee.department}` : ''}`;
                            assignedToSelectEl.appendChild(option);
                        });
                    }
                    
                    assignedToSelectEl.disabled = false;
                })
                .catch(error => {
                    console.error('Error loading employees:', error);
                    assignedToSelectEl.innerHTML = '<option value="">Error loading employees</option>';
                    assignedToSelectEl.disabled = false;
                });
        }

        if (taskModalEl && taskForm) {
            taskModalEl.addEventListener('show.bs.modal', (event) => {
                const trigger = event.relatedTarget;
                const methodInput = taskForm.querySelector('input[name="_method"]');
                if (methodInput) {
                    methodInput.remove();
                }
                taskForm.reset();
                taskForm.action = "{{ route('tasks.store') }}";

                // Reset department and assigned to dropdowns
                departmentSelect.innerHTML = '<option value="">All Departments</option>';
                @foreach($departments as $department)
                    departmentSelect.innerHTML += '<option value="{{ $department->id }}">{{ $department->name }}</option>';
                @endforeach
                
                assignedToSelect.innerHTML = '<option value="">All Department Employees</option>';

                const dataset = trigger?.dataset || {};
                const payload = dataset.taskId ? {
                    id: dataset.taskId,
                    title: dataset.taskTitle || '',
                    description: dataset.taskDescription || '',
                    due_date: dataset.taskDue || '',
                    status: dataset.taskStatus || '',
                    department_id: dataset.taskDepartment || '',
                    assigned_to_id: dataset.taskAssignee || '',
                } : null;
                
                if (payload) {
                    const url = "{{ route('tasks.update', ':id') }}".replace(':id', payload.id);
                    taskForm.action = url;
                    taskForm.insertAdjacentHTML('afterbegin', '<input type="hidden" name="_method" value="PUT">');

                    Object.entries(payload).forEach(([key, value]) => {
                        const input = taskForm.querySelector(`[name="${key}"]`);
                        if (input) {
                            input.value = value ?? '';
                            
                            // If setting department, load employees for that department
                            if (key === 'department_id' && value) {
                                // Load employees for the selected department
                                loadDepartmentEmployees();
                                // After a short delay, set the assigned_to value
                                setTimeout(() => {
                                    const assignedInput = taskForm.querySelector(`[name="assigned_to_id"]`);
                                    if (assignedInput && payload.assigned_to_id) {
                                        assignedInput.value = payload.assigned_to_id;
                                    }
                                }, 500);
                            }
                        }
                    });

                    taskModalEl.querySelector('.modal-title').textContent = 'Edit Task';
                } else {
                    taskModalEl.querySelector('.modal-title').textContent = 'New Task';
                }
            });

            // Reset form when modal is closed
            taskModalEl.addEventListener('hidden.bs.modal', () => {
                taskForm.reset();
                departmentSelect.innerHTML = '<option value="">All Departments</option>';
                @foreach($departments as $department)
                    departmentSelect.innerHTML += '<option value="{{ $department->id }}">{{ $department->name }}</option>';
                @endforeach
                assignedToSelect.innerHTML = '<option value="">All Department Employees</option>';
            });
        }
    </script>
@endpush