{{-- 
    Task Module — My Tasks / All Tasks (Kanban Board)
    Extend your existing layout. Replace 'layouts.app' with your layout name.
--}}
@extends('layouts.app')

@section('title', $view === 'my' ? 'My Tasks' : 'All Tasks')

@push('styles')
<style>
    .task-board { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
    .task-column { background: #1a2035; border-radius: 10px; padding: 1rem; min-height: 300px; }
    .task-column-header { display: flex; align-items: center; gap: .5rem; font-size:.75rem; font-weight:700;
        letter-spacing:.1em; text-transform:uppercase; margin-bottom:1rem; }
    .task-column-header .dot { width:10px; height:10px; border-radius:50%; }
    .dot-todo { background:#6b7280; }
    .dot-progress { background:#3b82f6; }
    .dot-done { background:#10b981; }
    .task-count { background:rgba(255,255,255,.1); border-radius:999px;
        font-size:.7rem; padding:1px 8px; margin-left:auto; }
    .task-card { background:#111827; border-radius:8px; padding:.85rem 1rem;
        margin-bottom:.75rem; cursor:pointer; transition:transform .15s,box-shadow .15s;
        border:1px solid rgba(255,255,255,.06); }
    .task-card:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,.35); }
    .task-card.overdue { border-left:3px solid #ef4444; }
    .task-card.done-card { opacity:.7; }
    .task-title { font-size:.88rem; font-weight:600; color:#f3f4f6; margin-bottom:.4rem; }
    .task-meta { font-size:.72rem; color:#6b7280; margin-bottom:.5rem; }
    .task-meta a { color:#3b82f6; text-decoration:none; }
    .badge-priority { display:inline-block; font-size:.65rem; font-weight:700; padding:1px 7px;
        border-radius:4px; text-transform:uppercase; }
    .badge-high   { background:rgba(239,68,68,.2); color:#f87171; }
    .badge-medium { background:rgba(234,179,8,.2);  color:#fbbf24; }
    .badge-low    { background:rgba(34,197,94,.2);  color:#4ade80; }
    .overdue-tag { font-size:.68rem; color:#f87171; display:inline-flex; align-items:center; gap:3px; }
    .done-date  { font-size:.68rem; color:#6b7280; }
    .avatar { width:28px; height:28px; border-radius:50%; background:#3b82f6; color:#fff;
        display:inline-flex; align-items:center; justify-content:center; font-size:.65rem;
        font-weight:700; flex-shrink:0; }
    .card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:.5rem; }
    .task-filters { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.25rem; align-items:center; }
    .filter-btn { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
        color:#9ca3af; font-size:.78rem; padding:4px 14px; border-radius:999px; cursor:pointer;
        transition:.15s; }
    .filter-btn.active { background:#3b82f6; color:#fff; border-color:#3b82f6; }
    .filter-btn:hover:not(.active) { background:rgba(255,255,255,.12); color:#fff; }
    .btn-new-task { background:#3b82f6; color:#fff; border:none; padding:8px 18px;
        border-radius:7px; font-size:.82rem; font-weight:600; cursor:pointer; text-decoration:none; }
    .btn-new-task:hover { background:#2563eb; color:#fff; }
    @media(max-width:768px){ .task-board{ grid-template-columns:1fr; } }
</style>
@endpush

@section('content')
<div class="container-fluid px-4 py-4">

    {{-- Header --}}
    <div class="d-flex align-items-center justify-content-between mb-1">
        <div>
            <h2 class="text-white mb-0">Tasks</h2>
            <p class="text-muted small mb-0">
                @if($isAdmin)
                    Admin view &mdash; showing {{ $view === 'my' ? 'your' : 'all' }} tasks
                @else
                    Your assigned tasks
                @endif
            </p>
        </div>
        @if(auth()->user()->role === 'office_admin')
        <!-- <a href="{{ route('tasks.create', $jobId ? ['job_id' => $jobId] : []) }}" class="btn-new-task">
            + New Task
        </a> -->
        @endif
    </div>

    {{-- View switcher (admin only) --}}
    @if($isAdmin)
    <div class="task-filters mt-3">
        <a href="{{ route('tasks.index', ['view'=>'my', 'job_id'=>$jobId]) }}"
           class="filter-btn {{ $view === 'my' ? 'active' : '' }}">My Tasks</a>
        <a href="{{ route('tasks.index', ['view'=>'all', 'job_id'=>$jobId]) }}"
           class="filter-btn {{ $view === 'all' ? 'active' : '' }}">All Tasks</a>
        <a href="{{ route('tasks.all') }}" class="filter-btn">Table View</a>
        <a href="{{ route('tasks.report') }}" class="filter-btn">Outstanding Report</a>
    </div>
    @endif

    {{-- Kanban Board --}}
    <div class="task-board">

        {{-- TO DO --}}
        <div class="task-column" id="col-to_do">
            <div class="task-column-header text-white">
                <span class="dot dot-todo"></span> To Do
                <span class="task-count">{{ $todo->count() }}</span>
            </div>
            @forelse($todo as $task)
                @include('tasks._card', ['task' => $task])
            @empty
                <p class="text-muted small text-center mt-4">No tasks</p>
            @endforelse
        </div>

        {{-- IN PROGRESS --}}
        <div class="task-column" id="col-in_progress">
            <div class="task-column-header" style="color:#60a5fa;">
                <span class="dot dot-progress"></span> In Progress
                <span class="task-count">{{ $inProgress->count() }}</span>
            </div>
            @forelse($inProgress as $task)
                @include('tasks._card', ['task' => $task])
            @empty
                <p class="text-muted small text-center mt-4">No tasks</p>
            @endforelse
        </div>

        {{-- DONE --}}
        <div class="task-column" id="col-done">
            <div class="task-column-header" style="color:#34d399;">
                <span class="dot dot-done"></span> Done
                <span class="task-count">{{ $done->count() }}</span>
            </div>
            @forelse($done as $task)
                @include('tasks._card', ['task' => $task, 'isDone' => true])
            @empty
                <p class="text-muted small text-center mt-4">No tasks</p>
            @endforelse
        </div>
    </div>
</div>

{{-- Task Detail Modal --}}
@include('tasks._detail_modal')
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Open task detail on card click
    document.querySelectorAll('.task-card[data-task-id]').forEach(card => {
        card.addEventListener('click', function () {
            loadTaskDetail(this.dataset.taskId);
        });
    });
});

function loadTaskDetail(taskId) {
    fetch(`/tasks/${taskId}`, { headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' } })
        .then(r => r.json())
        .catch(() => { window.location.href = `/tasks/${taskId}`; });
}

function changeStatus(taskId, newStatus) {
    fetch(`/tasks/${taskId}/status`, {
        method: 'PATCH',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json',
        },
        body: JSON.stringify({ status: newStatus })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) { window.location.reload(); }
    });
}
</script>
@endpush