@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    @php
        $currentStaffDepartmentSlug = Auth::user()?->staff?->department?->slug;
        $additionalInfoValues = [];

        if (is_array($task->additional_info)) {
            $additionalInfoValues = $task->additional_info;
        } elseif (is_string($task->additional_info) && $task->additional_info !== '') {
            $additionalInfoValues = json_decode($task->additional_info, true) ?: [$task->additional_info];
        }

        $additionalInfoValues = collect($additionalInfoValues)
            ->filter(fn ($value) => filled($value))
            ->values();
    @endphp

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title title="Task Details"
                    description="Review the full task information, assignment details, dates, attachments, and available actions.">
                    <a href="{{ route('tasks.index') }}" class="asset-btn asset-btn--secondary">
                        Back to Tasks
                    </a>
                </x-page-title>

                <div class="ui-card">
                    <div class="form-section">
                        <div class="form-section__head">
                            <h5 class="form-section__title mb-1">Task Overview</h5>
                            <p class="form-section__sub mb-0">
                                Core task information and description.
                            </p>
                        </div>

                        <div class="details-grid">
                            {{-- {{ dd($task); }} --}}

                            <div class="detail-item">
                                <div class="detail-item__label">Task Name</div>
                                <div class="detail-item__value">{{ $task->task_name }}</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-item__label">Task ID</div>
                                <div class="detail-item__value">#{{ $task->id }}</div>
                            </div>



                            <div class="detail-item ">
                                <div class="detail-item__label">Description</div>
                                <div class="detail-item__value">
                                    {{ $task->description ?: '-' }}
                                </div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-item__label">Task Type</div>
                                <div class="detail-item__value">
                                    <span class="ui-pill ui-pill--neutral">{{ $task->task_type ?: '-' }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="ui-card">
                    <div class="form-section">
                        <div class="form-section__head">
                            <h5 class="form-section__title mb-1">Assignment</h5>
                            <p class="form-section__sub mb-0">
                                Task ownership and linked students.
                            </p>
                        </div>

                        <div class="details-grid">
                            <div class="detail-item">
                                <div class="detail-item__label">Assigned To</div>
                                <div class="detail-item__value">
                                    @if ($task->assign_to_me)
                                        <span class="ui-pill ui-pill--info">Myself</span>
                                    @elseif($task->staff)
                                        <a href="{{ route('staffs.show', $task->staff->id) }}" class="detail-link">
                                            {{ $task->staff->first_name . ' ' . $task->staff->last_name }}
                                        </a>
                                    @else
                                        <span class="text-muted">Not Assigned</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="ui-card">
                    <div class="form-section">
                        <div class="form-section__head">
                            <h5 class="form-section__title mb-1">Timeline & Priority</h5>
                            <p class="form-section__sub mb-0">
                                Schedule, reminder, priority, and status details.
                            </p>
                        </div>

                        <div class="details-grid">
                            <div class="detail-item">
                                <div class="detail-item__label">Start Date</div>
                                <div class="detail-item__value">{{ $task->start_date ?: '-' }}</div>
                            </div>

                            <div class="detail-item">
                                <div class="detail-item__label">Due Date</div>
                                <div class="detail-item__value">{{ $task->due_date ?: '-' }}</div>
                            </div>

                            <div class="detail-item">
                                <div class="detail-item__label">Reminder</div>
                                <div class="detail-item__value">{{ $task->reminder ?: '-' }}</div>
                            </div>

                            <div class="detail-item">
                                <div class="detail-item__label">Priority</div>
                                <div class="detail-item__value">
                                    @if ($task->priority === 'high')
                                        <span class="ui-pill ui-pill--danger">High</span>
                                    @elseif($task->priority === 'medium')
                                        <span class="ui-pill ui-pill--warn">Medium</span>
                                    @else
                                        <span class="ui-pill ui-pill--success">Low</span>
                                    @endif
                                </div>
                            </div>

                            <div class="detail-item">
                                <div class="detail-item__label">Status</div>
                                <div class="detail-item__value">
                                    @if ($task->status === 'open')
                                        <span class="ui-pill ui-pill--primary">Open</span>
                                    @elseif($task->status === 'hold')
                                        <span class="ui-pill ui-pill--neutral">On Hold</span>
                                    @else
                                        <span class="ui-pill ui-pill--dark">Closed</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="ui-card">
                    <div class="form-section">
                        <div class="form-section__head">
                            <h5 class="form-section__title mb-1">Progress Tracking</h5>
                            <p class="form-section__sub mb-0">
                                Current completion percentage for this task.
                            </p>
                        </div>

                        <div class="task-progress-show">
                            <div class="task-progress-show__bar">
                                <div class="task-progress-show__fill"
                                    style="width: {{ (int) ($task->progress ?? 0) }}%;"></div>
                            </div>
                            <div class="task-progress-show__value">{{ (int) ($task->progress ?? 0) }}%</div>
                        </div>
                    </div>
                </div>

                <div class="ui-card">
                    <div class="form-section">
                        <div class="form-section__head">
                            <h5 class="form-section__title mb-1">Additional Settings</h5>
                            <p class="form-section__sub mb-0">
                                Task type and linked staff context.
                            </p>
                        </div>

                        <div class="details-grid">
                            <div class="detail-item">
                                <div class="detail-item__label">Task Type</div>
                                <div class="detail-item__value">
                                    <span class="ui-pill ui-pill--neutral">{{ $task->task_type ?: '-' }}</span>
                                </div>
                            </div>

                            @if ($task->task_type === 'New Staff' && $task->new_staff)
                                <div class="detail-item">
                                    <div class="detail-item__label">New Staff</div>
                                    <div class="detail-item__value">
                                        <a href="{{ route('staffs.show', $task->new_staff->id) }}" class="detail-link">
                                            {{ $task->new_staff->first_name }} {{ $task->new_staff->last_name }}
                                        </a>
                                    </div>
                                </div>

                                <div class="detail-item">
                                    <div class="detail-item__label">Contract</div>
                                    <div class="detail-item__value">
                                        @if ($task->new_staff->contract)
                                            <a href="{{ asset($task->new_staff->contract) }}" target="_blank" class="detail-link">
                                                View Contract
                                            </a>
                                        @else
                                            <span class="ui-pill ui-pill--warn">Missing</span>
                                        @endif
                                    </div>
                                </div>
                            @endif

                            @if ($resignation?->staff)
                                <div class="detail-item">
                                    <div class="detail-item__label">Resigned Staff</div>
                                    <div class="detail-item__value">
                                        <a href="{{ route('staffs.show', $resignation->staff->id) }}" class="detail-link">
                                            {{ $resignation->staff->first_name }} {{ $resignation->staff->last_name }}
                                        </a>
                                    </div>
                                </div>

                                <div class="detail-item">
                                    <div class="detail-item__label">Resignation Date</div>
                                    <div class="detail-item__value">{{ $resignation->resignation_date ?: '-' }}</div>
                                </div>

                                <div class="detail-item detail-item--full">
                                    <div class="detail-item__label">Reason</div>
                                    <div class="detail-item__value detail-item__value--multiline">
                                        {{ $resignation->reason ?: '-' }}
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                @if ($task->students->count() > 0)
                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Assigned Students</h5>
                                <p class="form-section__sub mb-0">
                                    Students linked to this task.
                                </p>
                            </div>

                            <div class="linked-items-grid">
                                @foreach ($task->students as $student)
                                    <a href="{{ config('app.Retention_URL') . 'students/' . $student->id }}"
                                        class="linked-item" target="_blank">
                                        <div class="linked-item__icon">
                                            <i class="fas fa-user-graduate"></i>
                                        </div>
                                        <div class="linked-item__content">
                                            <div class="linked-item__title">
                                                {{ $student->first_name . ' ' . $student->last_name }}
                                            </div>
                                            <div class="linked-item__sub">
                                                Open student profile
                                            </div>
                                        </div>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

                {{-- {{ dd($task->staff?->department?->slug) }} --}}

                @php
                    $user = Auth::user();
                @endphp
                @if ( $task->task_type === 'New Staff')
                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Linked with Assets</h5>
                                <p class="form-section__sub mb-0">
                                    Assets assigned to the new staff member and available In Store assets.
                                </p>
                            </div>

                            <div class="asset-subsection-title">Assigned Assets</div>
                            @if ($newStaffAssignedAssets->isNotEmpty())
                                <div class="linked-items-grid">
                                    @foreach ($newStaffAssignedAssets as $asset)
                                        @include('dashboard.tasks.partials.asset-card', ['asset' => $asset])
                                    @endforeach
                                </div>
                            @else
                                <div class="empty-state-box">
                                    <div class="empty-state-box__icon">
                                        <i class="fas fa-laptop"></i>
                                    </div>
                                    <div>
                                        <div class="empty-state-box__title">No assigned assets</div>
                                        <div class="empty-state-box__text">No assets are linked to this new staff member yet.</div>
                                    </div>
                                </div>
                            @endif


                        </div>
                    </div>
                @endif

                @if (  $assets->isNotEmpty() && $task->task_type === 'Resignation')
                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Linked with Assets</h5>
                                <p class="form-section__sub mb-0">
                                    Assets assigned to the resigned employee.
                                </p>
                            </div>

                            <div class="linked-items-grid">
                                @foreach ($assets as $asset)
                                    <div class="linked-item">
                                        <div class="linked-item__icon">
                                            <i class="fas fa-laptop"></i>
                                        </div>

                                        <div class="linked-item__content">
                                            <div class="linked-item__title">
                                                {{ $asset->name }}
                                            </div>

                                            <div class="linked-item__sub">
                                                Model: {{ $asset->model ?? '-' }} <br>
                                                Name: {{ $asset->product->name ?? '-' }} <br>
                                                Serial: {{ $asset->serial_number ?? '-' }} <br>
                                                Purchase Cost: {{ $asset->purchase_cost ?? '-' }} <br>
                                                Acquisition Date: {{ $asset->acquisition_date ?? '-' }} <br>
                                                status: {{ $asset->is_currently_in_use ?? '-' }} <br>
                                            </div>
                                            <div>
                                                @if ($user && $currentStaffDepartmentSlug === 'it')
                                                    <div style="margin-top: 15px;">
                                                        <form action="{{ route('tasks.updateAssetStatus') }}"
                                                            method="POST">
                                                            @csrf
                                                            <label style="font-weight:bold; margin-bottom:5px;">Update
                                                                Status</label>
                                                            <select name="assets[{{ $asset->id }}][status]"
                                                                style="padding:5px 10px; border-radius:5px; border:1px solid #ccc; min-width:150px;
                               color: {{ $asset->is_currently_in_use === 'in_use' ? '#155724' : ($asset->is_currently_in_use === 'in_repair' ? '#856404' : '#383838') }};
                               background-color: {{ $asset->is_currently_in_use === 'in_use' ? '#d4edda' : ($asset->is_currently_in_use === 'in_repair' ? '#fff3cd' : '#e2e3e5') }};
                        ">
                                                                <option value="in_use"
                                                                    {{ $asset->is_currently_in_use === 'in_use' ? 'selected' : '' }}>
                                                                    In Use</option>
                                                                <option value="in_repair"
                                                                    {{ $asset->is_currently_in_use === 'in_repair' ? 'selected' : '' }}>
                                                                    In Repair</option>
                                                                <option value="in_store"
                                                                    {{ $asset->is_currently_in_use === 'in_store' ? 'selected' : '' }}>
                                                                    In Store</option>
                                                            </select>
                                                            <button type="submit"
                                                                style="padding:6px 12px; margin-left:10px; border:none; border-radius:5px; background-color:#007bff; color:#fff; cursor:pointer;">
                                                                Save
                                                            </button>
                                                        </form>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            {{-- Dropdown for status (IT only) --}}


                        </div>
                    </div>
                @endif

                @if ($additionalInfoValues->isNotEmpty())
                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Additional Information</h5>
                                <p class="form-section__sub mb-0">
                                    Extra details attached to this task.
                                </p>
                            </div>

                            <div class="details-grid">
                                @foreach ($additionalInfoValues as $info)
                                    <div class="detail-item detail-item--full">
                                        <div class="detail-item__label">Extra Detail</div>
                                        <div class="detail-item__value detail-item__value--multiline">{{ $info }}</div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

                <div class="ui-card">
                    <div class="form-section">
                        <div class="form-section__head">
                            <h5 class="form-section__title mb-1">Attachments</h5>
                            <p class="form-section__sub mb-0">
                                Files and uploaded assets related to this task.
                            </p>
                        </div>

                        @if ($attachments->count())
                            <div class="attachment-grid">
                                @foreach ($attachments as $file)
                                    @php
                                        $extension = strtolower(pathinfo($file->file_path, PATHINFO_EXTENSION));
                                        $imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
                                        $isImage = in_array($extension, $imageExtensions);
                                    @endphp

                                    <a href="{{ asset($file->file_path) }}" target="_blank" class="attachment-item">
                                        <div class="attachment-preview">
                                            @if ($isImage)
                                                <img src="{{ asset($file->file_path) }}"
                                                    alt="{{ $file->original_name }}">
                                            @else
                                                <div class="file-icon">
                                                    <i class="fas fa-paperclip"></i>
                                                </div>
                                            @endif
                                        </div>

                                        <div class="attachment-info">
                                            <div class="attachment-info__name">{{ $file->original_name }}</div>
                                            <div class="attachment-info__action">View Attachment</div>
                                        </div>
                                    </a>
                                @endforeach
                            </div>
                        @else
                            <div class="empty-state-box">
                                <div class="empty-state-box__icon">
                                    <i class="fas fa-paperclip"></i>
                                </div>
                                <div>
                                    <div class="empty-state-box__title">No attachments</div>
                                    <div class="empty-state-box__text">
                                        There are no uploaded files attached to this task yet.
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <div class="asset-actions">
                    <a href="{{ route('tasks.edit', $task->id) }}" class="asset-btn asset-btn--primary">
                        Edit Task
                    </a>

                    @if (Auth::id() === $task->created_by)
                        <form action="{{ route('tasks.destroy', $task->id) }}" method="POST"
                            onsubmit="return confirm('Are you sure you want to delete this task?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="asset-btn asset-btn--danger">
                                Delete Task
                            </button>
                        </form>
                    @endif
                </div>

            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .ui-card {
            border: 0;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            padding: 1.25rem;
            margin-bottom: 1.25rem;
        }

        .task-show-card {
            padding: 0;
            overflow: hidden;
        }

        .task-show-hero {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1rem;
            flex-wrap: wrap;
            padding: 1.4rem;
            background:
                linear-gradient(135deg, rgba(79, 70, 229, 0.06), rgba(6, 182, 212, 0.04));
        }

        .task-show-hero__eyebrow {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-size: 0.8rem;
            font-weight: 700;
            color: #4f46e5;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .task-show-hero__title {
            font-size: 1.35rem;
            font-weight: 800;
            color: #111827;
        }

        .task-show-hero__sub {
            color: #6b7280;
            font-size: 0.94rem;
            max-width: 760px;
            line-height: 1.65;
        }

        .task-id-chip {
            display: inline-flex;
            flex-direction: column;
            gap: 0.15rem;
            min-width: 130px;
            padding: 0.85rem 1rem;
            border-radius: 14px;
            border: 1px solid #e5e7eb;
            background: #fff;
        }

        .task-id-chip__label {
            font-size: 0.8rem;
            color: #64748b;
        }

        .task-id-chip__value {
            font-size: 1rem;
            font-weight: 800;
            color: #111827;
        }

        .form-section__head {
            margin-bottom: 1rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid #eef2f7;
        }

        .form-section__title {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
        }

        .form-section__sub {
            color: #6b7280;
            font-size: 0.92rem;
        }

        .details-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .detail-item {
            grid-column: span 6 / span 6;
            border: 1px solid #edf2f7;
            background: #fbfcfe;
            border-radius: 16px;
            padding: 1rem;
        }

        .detail-item--full {
            grid-column: span 12 / span 12;
        }

        .detail-item__label {
            font-size: 0.84rem;
            font-weight: 700;
            color: #64748b;
            margin-bottom: 0.4rem;
            text-transform: uppercase;
            letter-spacing: 0.03em;
        }

        .detail-item__value {
            color: #111827;
            font-size: 0.97rem;
            font-weight: 600;
            line-height: 1.6;
        }

        .detail-item__value--multiline {
            white-space: pre-line;
            font-weight: 500;
        }

        .linked-items-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }

        .linked-item {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            padding: 1rem;
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            background: #fff;
            text-decoration: none;
            transition: 0.2s ease;
        }

        .linked-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
        }

        .linked-item__icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #ecfeff;
            color: #0891b2;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .linked-item__title {
            font-size: 0.95rem;
            font-weight: 700;
            color: #111827;
        }

        .linked-item__sub {
            font-size: 0.85rem;
            color: #6b7280;
        }

        .asset-subsection-title {
            color: #111827;
            font-size: 0.92rem;
            font-weight: 800;
            margin-bottom: 0.75rem;
        }

        .task-progress-show {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 0.9rem;
            align-items: center;
        }

        .task-progress-show__bar {
            width: 100%;
            height: 12px;
            border-radius: 999px;
            background: #eef2f7;
            overflow: hidden;
        }

        .task-progress-show__fill {
            height: 100%;
            border-radius: 999px;
            background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%);
        }

        .task-progress-show__value {
            min-width: 54px;
            color: #111827;
            font-weight: 800;
            text-align: right;
        }

        .attachment-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 1rem;
        }

        .attachment-item {
            display: block;
            text-decoration: none;
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            overflow: hidden;
            background: #fff;
            transition: 0.2s ease;
        }

        .attachment-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
        }

        .attachment-preview {
            height: 130px;
            background: #f8fafc;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .attachment-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .file-icon {
            font-size: 2rem;
            color: #4f46e5;
        }

        .attachment-info {
            padding: 0.8rem 0.9rem;
        }

        .attachment-info__name {
            font-size: 0.88rem;
            font-weight: 700;
            color: #111827;
            line-height: 1.45;
            word-break: break-word;
            margin-bottom: 0.2rem;
        }

        .attachment-info__action {
            font-size: 0.8rem;
            color: #4f46e5;
            font-weight: 700;
        }

        .empty-state-box {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            padding: 1rem 1.1rem;
            border: 1px dashed #cbd5e1;
            border-radius: 14px;
            background: #f8fafc;
        }

        .empty-state-box__icon {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #eef2ff;
            color: #4f46e5;
            flex-shrink: 0;
        }

        .empty-state-box__title {
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 0.1rem;
        }

        .empty-state-box__text {
            font-size: 0.9rem;
            color: #64748b;
        }

        .asset-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .asset-btn {
            min-height: 44px;
            padding: 0.72rem 1.05rem;
            border-radius: 12px;
            border: 1px solid transparent;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            text-decoration: none;
            font-weight: 700;
            transition: 0.2s ease;
        }

        .asset-btn--secondary {
            background: #fff;
            color: #374151;
            border-color: #dbe2ea;
        }

        .asset-btn--secondary:hover {
            background: #f8fafc;
            color: #111827;
        }

        .asset-btn--primary {
            background: #4f46e5;
            color: #fff;
        }

        .asset-btn--primary:hover {
            background: #4338ca;
            color: #fff;
        }

        .asset-btn--danger {
            background: #fff;
            color: #dc3545;
            border-color: #f1c7cd;
        }

        .asset-btn--danger:hover {
            background: #fff5f5;
            color: #b42318;
        }

        .ui-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 28px;
            padding: 0.28rem 0.7rem;
            border-radius: 999px;
            font-size: 0.82rem;
            font-weight: 700;
            border: 1px solid transparent;
        }

        .ui-pill--primary {
            background: #eef2ff;
            color: #4338ca;
            border-color: #c7d2fe;
        }

        .ui-pill--info {
            background: #ecfeff;
            color: #0f766e;
            border-color: #a5f3fc;
        }

        .ui-pill--success {
            background: #ecfdf3;
            color: #027a48;
            border-color: #abefc6;
        }

        .ui-pill--warn {
            background: #fffaeb;
            color: #b54708;
            border-color: #fedf89;
        }

        .ui-pill--danger {
            background: #fef3f2;
            color: #b42318;
            border-color: #fecdca;
        }

        .ui-pill--neutral {
            background: #f8fafc;
            color: #475467;
            border-color: #e2e8f0;
        }

        .ui-pill--dark {
            background: #111827;
            color: #fff;
            border-color: #111827;
        }

        @media (max-width: 991.98px) {

            .detail-item,
            .detail-item--full {
                grid-column: span 12 / span 12;
            }

            .linked-items-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endpush