@extends('layouts.app')

@section('title', 'SEU CRM - ' . __('app.task_details'))

@section('content')
<!-- Page Header -->
                <div class="my-4 page-header-breadcrumb d-flex align-items-center justify-content-between flex-wrap gap-2">
                    <div>
                        <h1 class="page-title fw-medium fs-18 mb-2">{{ __('app.task_details') }}</h1>
                        <div class="">
                            <nav>
                                <ol class="breadcrumb mb-0">
                                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">{{ __('app.dashboard') }}</a></li>
                                    <li class="breadcrumb-item"><a href="{{ route('tasks.index') }}">{{ __('app.tasks') }}</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">{{ __('app.task_details') }}</li>
                                </ol>
                            </nav>
                        </div>
                    </div>
                    <div class="btn-list">
                        <a href="{{ route('tasks.edit', $task) }}" class="btn btn-primary-light btn-wave me-2">
                            <i class="ri-edit-line align-middle"></i> {{ __('app.edit_task') }}
                        </a>
                        <a href="{{ route('tasks.index') }}" class="btn btn-secondary-light btn-wave me-0">
                            <i class="ri-arrow-left-line align-middle"></i> {{ __('app.tasks') }}
                        </a>
                    </div>
                </div>
                <!-- Page Header Close -->

                <!-- Start::row-1 -->
                <div class="row">
                    <div class="col-xxl-8">
                        <div class="card custom-card">
                            <div class="card-header justify-content-between">
                                <div class="card-title">{{ __('app.task_details') }}</div>
                                <div class="btn-list">
                                    <a href="{{ route('tasks.edit', $task) }}" class="btn btn-primary btn-sm btn-wave">
                                        <i class="ri-edit-line me-1 align-middle"></i>{{ __('app.edit_task') }}
                                    </a>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="d-flex align-items-center mb-4 gap-2 flex-wrap">
                                    <span class="avatar avatar-lg me-1 bg-primary-transparent">
                                        <i class="ri-briefcase-line fs-24 lh-1"></i>
                                    </span>
                                    <div>
                                        <h6 class="fw-medium mb-2 task-title">{{ $task->title }}</h6>
                                        <span class="badge bg-{{ $task->status === 'completed' ? 'success' : ($task->status === 'in_progress' ? 'info' : ($task->status === 'review' ? 'warning' : 'secondary')) }}-transparent">
                                            {{ ucfirst(str_replace('_', ' ', $task->status)) }}
                                        </span>
                                        <span class="text-muted fs-12">
                                            <i class="ri-circle-fill text-success mx-2 fs-9"></i>
                                            Last Updated {{ $task->updated_at->diffForHumans() }}
                                        </span>
                                    </div>
                                </div>
                                
                                <div class="fs-15 fw-medium mb-2">{{ __('app.description') }} :</div>
                                <p class="text-muted task-description">{{ $task->description }}</p>
                                
                                <div class="fs-15 fw-medium mb-2">{{ __('app.actions') }} :</div>
                                <div class="btn-list mb-3">
                                    @if($task->status !== 'todo')
                                    <button class="btn btn-secondary btn-sm" onclick="moveTask('todo')">{{ __('app.todo_task') }}</button>
                                    @endif
                                    @if($task->status !== 'in_progress')
                                    <button class="btn btn-info btn-sm" onclick="moveTask('in_progress')">{{ __('app.ongoing_task') }}</button>
                                    @endif
                                    @if($task->status !== 'review')
                                    <button class="btn btn-warning btn-sm" onclick="moveTask('review')">{{ __('app.in_review_task') }}</button>
                                    @endif
                                    @if($task->status !== 'completed')
                                    <button class="btn btn-success btn-sm" onclick="moveTask('completed')">{{ __('app.completed_task') }}</button>
                                    @endif
                                </div>
                                
                                @if($task->customer)
                                <div class="fs-15 fw-medium mb-2">{{ __('app.customer') }} :</div>
                                <div class="p-2 border rounded d-flex align-items-center mb-3" style="width: fit-content;">
                                    <span class="avatar avatar-sm avatar-rounded me-2 bg-primary-transparent">
                                        {{ substr($task->customer->name, 0, 1) }}
                                    </span>
                                    <div class="d-flex flex-column lh-1">
                                        <span class="mb-1">{{ $task->customer->name }}</span>
                                        <span class="fs-11 text-muted">{{ $task->customer->email }}</span>
                                    </div>
                                </div>
                                @endif

                                @if($task->assigned_to)
                                <div class="fs-15 fw-medium mb-2">{{ __('app.assigned_to') }} :</div>
                                <div class="p-2 border rounded d-flex align-items-center mb-3" style="width: fit-content;">
                                    <span class="avatar avatar-sm avatar-rounded me-2 bg-secondary-transparent">
                                        {{ substr($task->assigned_to, 0, 1) }}
                                    </span>
                                    <div class="d-flex flex-column lh-1">
                                        <span class="mb-1">{{ $task->assigned_to }}</span>
                                        <span class="fs-11 text-muted">{{ __('app.assigned_to') }}</span>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-xxl-4">
                        <div class="card custom-card">
                            <div class="card-header justify-content-between">
                                <div class="card-title">{{ __('app.task_details') }}</div>
                            </div>
                            <div class="card-body p-0">
                                <div class="table-responsive">
                                    <table class="table text-nowrap">
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <span><i class="ri-file-list-3-line fs-15 lh-1 p-1 text-primary bg-primary-transparent rounded-pill me-2"></i>{{ __('app.task_details') }} ID :</span>
                                                </td>
                                                <td>:</td>
                                                <td>
                                                    <span>#{{ $task->id }}</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <span><i class="ri-restart-line fs-15 lh-1 p-1 text-success bg-success-transparent rounded-pill me-2"></i>{{ __('app.status') }}</span>
                                                </td>
                                                <td>:</td>
                                                <td>
                                                    <span class="badge bg-{{ $task->status === 'completed' ? 'success' : ($task->status === 'in_progress' ? 'info' : ($task->status === 'review' ? 'warning' : 'secondary')) }}-transparent">
                                                        {{ ucfirst(str_replace('_', ' ', $task->status)) }}
                                                    </span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <span><i class="ri-article-line fs-15 lh-1 p-1 text-warning bg-warning-transparent rounded-pill me-2"></i>{{ __('app.priority') }}</span>
                                                </td>
                                                <td>:</td>
                                                <td>
                                                    <span class="badge bg-{{ $task->priority === 'high' ? 'danger' : ($task->priority === 'medium' ? 'warning' : 'success') }}-transparent">
                                                        {{ ucfirst($task->priority) }}
                                                    </span>
                                                </td>
                                            </tr>
                                            @if($task->due_at)
                                            <tr>
                                                <td>
                                                    <span><i class="ri-calendar-line fs-15 lh-1 p-1 text-info bg-info-transparent rounded-pill me-2"></i>{{ __('app.due_date') }}</span>
                                                </td>
                                                <td>:</td>
                                                <td>
                                                    <span>{{ $task->due_at->format('M d, Y') }}</span>
                                                </td>
                                            </tr>
                                            @endif
                                            <tr>
                                                <td>
                                                    <span><i class="ri-user-3-line fs-15 lh-1 p-1 text-danger bg-danger-transparent rounded-pill me-2"></i>{{ __('app.assigned_to') }}</span>
                                                </td>
                                                <td>:</td>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <div class="me-2 lh-1">
                                                            <span class="avatar avatar-xs avatar-rounded bg-primary-transparent">
                                                                {{ substr($task->owner->name ?? 'Unknown', 0, 1) }}
                                                            </span>
                                                        </div>
                                                        <span class="d-block fs-14 fw-medium">{{ $task->owner->name ?? 'Unknown' }}</span>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <span><i class="ri-time-line fs-15 lh-1 p-1 text-secondary bg-secondary-transparent rounded-pill me-2"></i>{{ __('app.created') }}</span>
                                                </td>
                                                <td>:</td>
                                                <td>
                                                    <span>{{ $task->created_at->format('M d, Y') }}</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="border-bottom-0">
                                                    <span><i class="ri-time-line fs-15 lh-1 p-1 text-info bg-info-transparent rounded-pill me-2"></i>{{ __('app.updated_at') }}</span>
                                                </td>
                                                <td class="border-bottom-0">:</td>
                                                <td class="border-bottom-0">
                                                    <span>{{ $task->updated_at->format('M d, Y') }}</span>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--End::row-1 -->
@endsection
@push('scripts')
<script>
        function moveTask(newStatus) {
            fetch(`/tasks/{{ $task->id }}/status`, {
                method: 'PATCH',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({ status: newStatus })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }
    </script>
@endpush