@extends('dashboard.layouts.app')

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

    @php
        $department = $task->staff->department ?? null;
        $currentStaffDepartmentSlug = Auth::user()?->staff?->department?->slug;

        $additionalInfoValues = [''];

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

        if (empty($additionalInfoValues)) {
            $additionalInfoValues = [''];
        }

        $selectedUrgentType = old('urgent_type');
        if (!$selectedUrgentType) {
            $urgentPrefix = 'Urgent Type: ';
            foreach ($additionalInfoValues as $infoValue) {
                if (is_string($infoValue) && str_starts_with($infoValue, $urgentPrefix)) {
                    $selectedUrgentType = trim(substr($infoValue, strlen($urgentPrefix)));
                    break;
                }
            }
        }

        $assetAssignmentOptions = collect($availableAssets ?? [])->map(function ($asset) {
            return [
                'id' => $asset->id,
                'label' => trim($asset->name . ($asset->product?->name ? ' - ' . $asset->product->name : '') . ($asset->serial_number ? ' - ' . $asset->serial_number : '')),
                'name' => $asset->name,
                'serial_number' => $asset->serial_number,
                'product' => $asset->product?->name,
            ];
        })->values();

        $resignationAssetOptions = collect($resignationAssets ?? [])->map(function ($asset) {
            return [
                'id' => $asset->id,
                'label' => trim($asset->name . ($asset->product?->name ? ' - ' . $asset->product->name : '') . ($asset->serial_number ? ' - ' . $asset->serial_number : '')),
                'name' => $asset->name,
                'serial_number' => $asset->serial_number,
                'product' => $asset->product?->name,
            ];
        })->values();

        $resignedStaff = $resignation?->staff;
    @endphp

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

                <x-page-title
                    title="Edit Task"
                    description="Update task details, assignment, progress, files, and any additional information required.">
                    <a href="{{ route('tasks.index') }}" class="asset-btn asset-btn--secondary">
                        Back to Tasks
                    </a>
                </x-page-title>

                <form action="{{ route('tasks.update', $task->id) }}" method="POST" enctype="multipart/form-data"
                    id="taskForm">
                    @csrf
                    @method('PUT')

                    <div class="ui-card task-hero-card">
                        <div class="task-hero-card__progress">
                            <div class="task-hero-card__progress-bar"
                                style="width: {{ old('progress', $task->progress ?? 0) }}%;"></div>
                        </div>

                    </div>

                    <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">
                                    Review the main task information and update the primary details.
                                </p>
                            </div>

                            <div class="asset-form-grid">
                                @if ($task->created_by == Auth::id())
                                    <div class="asset-col-12">
                                        <label for="task_name" class="asset-label">
                                            Task Name <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" name="task_name" id="task_name"
                                            class="asset-input @error('task_name') asset-invalid @enderror"
                                            value="{{ old('task_name', $task->task_name) }}"
                                            placeholder="Enter task name"
                                            pattern="^[A-Za-z0-9\s]+$"
                                            title="Only letters, numbers, and spaces are allowed."
                                            required>
                                        @error('task_name')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                @endif

                                @if (($task->created_by == Auth::id() && $task->task_type != 'New Staff') || $task->task_type == 'New Staff')
                                    <div class="asset-col-12">
                                        <label for="description" class="asset-label">Description</label>
                                        <textarea name="description" id="description" rows="4"
                                            class="asset-input @error('description') asset-invalid @enderror"
                                            placeholder="Describe the task in detail...">{{ old('description', $task->description) }}</textarea>
                                        <div class="field-hint text-end mt-2">
                                            <span id="descCount">{{ strlen(old('description', $task->description ?? '')) }}</span>/500 characters
                                        </div>
                                        @error('description')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    @if ($task->created_by == Auth::id())
                        <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">
                                        Control task ownership and optionally attach students to this task.
                                    </p>
                                </div>

                                <div class="asset-form-grid">
                                    <div class="asset-col-12">
                                        <label class="toggle-card" for="assign_to_me">
                                            <div class="toggle-card__main">
                                                <div>
                                                    <div class="toggle-card__title">Assign to Me</div>
                                                    <div class="toggle-card__text">
                                                        When enabled, the task is assigned to your account and manual staff assignment is hidden.
                                                    </div>
                                                </div>

                                                <div class="toggle-card__switch-wrap">
                                                    <input type="checkbox" id="assign_to_me" name="assign_to_me"
                                                        value="1"
                                                        {{ old('assign_to_me', $task->staff_id == (Auth::user()->staff->id ?? null)) == 1 ? 'checked' : '' }}>
                                                    <span class="toggle-card__switch"></span>
                                                </div>
                                            </div>
                                        </label>
                                    </div>

                                    <div class="asset-col-12" id="staff_assign_section">
                                        <label for="staff_id" class="asset-label">
                                            Assign to Staff <span class="text-danger">*</span>
                                        </label>
                                        <div class="asset-select2-wrap">
                                            <select
                                                class="asset-select general-select select2 @error('staff_id') asset-invalid @enderror"
                                                name="staff_id" id="staff_id" data-placeholder="Select Staff">
                                                <option value="">Select Staff</option>
                                                @foreach ($staffs as $staff)
                                                    @if ($staff->user_id != Auth::id())
                                                        <option value="{{ $staff->id }}"
                                                            {{ old('staff_id', $task->staff_id) == $staff->id ? 'selected' : '' }}>
                                                            {{ $staff->first_name . ' ' . $staff->last_name }}
                                                        </option>
                                                    @endif
                                                @endforeach
                                            </select>
                                        </div>
                                        @error('staff_id')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="asset-col-12">
                                        <label for="student_ids" class="asset-label">Assign to Students</label>
                                        <div class="asset-select2-wrap">
                                            @include('dashboard.tasks.schedule-demo-student-modal', [
                                                'initialSelectedStudents' => old('student_ids')
                                                    ? \App\Models\Student::whereIn('id', old('student_ids'))->get()
                                                    : ($task->students ?? collect()),
                                            ])
                                        </div>
                                        @error('student_ids')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    <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">
                                    Define the schedule, reminder date, priority, and status rules for this task.
                                </p>
                            </div>

                            <div class="asset-form-grid">
                                <div class="asset-col-4">
                                    <label for="start_date" class="asset-label">
                                        Start Date <span class="text-danger">*</span>
                                    </label>
                                    <input type="date" name="start_date" id="start_date"
                                        class="asset-input @error('start_date') asset-invalid @enderror"
                                        value="{{ old('start_date', $task->start_date) }}"
                                        required>
                                    @error('start_date')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-4">
                                    <label for="due_date" class="asset-label">
                                        Due Date <span class="text-danger">*</span>
                                    </label>
                                    <input type="date" name="due_date" id="due_date"
                                        class="asset-input @error('due_date') asset-invalid @enderror"
                                        value="{{ old('due_date', $task->due_date) }}"
                                        required>
                                    @error('due_date')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-4">
                                    <label for="reminder" class="asset-label">Reminder Date</label>
                                    <input type="date" name="reminder" id="reminder"
                                        class="asset-input @error('reminder') asset-invalid @enderror"
                                        value="{{ old('reminder', $task->reminder) }}">
                                    @error('reminder')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="asset-col-6">
                                    <label for="priority" class="asset-label">Priority</label>
                                    <select name="priority" id="priority" class="asset-select priority-select">
                                        <option value="high" {{ old('priority', $task->priority) == 'high' ? 'selected' : '' }} data-color="#ef4444">
                                            High
                                        </option>
                                        <option value="medium" {{ old('priority', $task->priority) == 'medium' ? 'selected' : '' }} data-color="#f59e0b">
                                            Medium
                                        </option>
                                        <option value="low" {{ old('priority', $task->priority) == 'low' ? 'selected' : '' }} data-color="#10b981">
                                            Low
                                        </option>
                                    </select>
                                </div>

                                {{-- @if ($task->task_type == 'New Staff') --}}
                                    <div class="asset-col-6">
                                        <label for="status" class="asset-label">Status</label>

                                        @if ($task->new_staff && !$task->new_staff->contract && $department && $department->slug == 'hr')
                                            <div class="inline-note inline-note--warning">
                                                <div class="inline-note__title">Contract data required</div>
                                                <div class="inline-note__text">
                                                    Please update the staff contract data to close this task
                                                    <a href="{{ route('staffs.edit', $task->new_staff->id) }}">here</a>.
                                                </div>
                                            </div>
                                        @else
                                            <select name="status" id="status" class="asset-select status-select">
                                                <option value="open" {{ old('status', $task->status) == 'open' ? 'selected' : '' }}>
                                                    Open
                                                </option>
                                                <option value="hold" {{ old('status', $task->status) == 'hold' ? 'selected' : '' }}>
                                                    On Hold
                                                </option>
                                                <option value="closed" {{ old('status', $task->status) == 'closed' ? 'selected' : '' }}>
                                                    Closed
                                                </option>
                                            </select>
                                        @endif
                                    </div>
                                {{-- @endif --}}
                            </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">
                                    Adjust the completion percentage and track the task state visually.
                                </p>
                            </div>

                            <div class="progress-block">
                                <label for="progress_range" class="asset-label">Progress</label>

                                <input type="range" name="progress" id="progress_range" class="progress-slider"
                                    value="{{ old('progress', $task->progress) }}" min="0" max="100" step="1">

                                <div class="progress-track">
                                    <div class="progress-track__bar" id="progressBar"
                                        style="width: {{ old('progress', $task->progress) }}%;"></div>
                                </div>

                                <div class="progress-block__meta">
                                    <small class="text-muted">Just started</small>
                                    <div class="progress-badge" id="progress_value">
                                        {{ old('progress', $task->progress) }}%
                                    </div>
                                    <small class="text-muted">Completed</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    @if ($task->created_by == Auth::id())
                        <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">
                                        Configure the task type, review linked new staff data, and manage attachments.
                                    </p>
                                </div>

                                <div class="asset-form-grid">
                                    <div class="asset-col-12">
                                        <label for="task_type" class="asset-label">Task Type</label>

                                        @if ($task_type == 'select')
                                            <select name="task_type" id="task_type"
                                                class="asset-select task-type-select @error('task_type') asset-invalid @enderror">
                                                <option value="">Choose task type...</option>
                                                <option value="Report" {{ old('task_type', $task->task_type) == 'Report' ? 'selected' : '' }}>Report</option>
                                                <option value="Meeting" {{ old('task_type', $task->task_type) == 'Meeting' ? 'selected' : '' }}>Meeting</option>
                                                <option value="Training" {{ old('task_type', $task->task_type) == 'Training' ? 'selected' : '' }}>Training</option>
                                                <option value="Follow-up" {{ old('task_type', $task->task_type) == 'Follow-up' ? 'selected' : '' }}>Follow-up</option>
                                                <option value="Documentation" {{ old('task_type', $task->task_type) == 'Documentation' ? 'selected' : '' }}>Documentation</option>
                                                <option value="Resignation" {{ old('task_type', $task->task_type) == 'Resignation' ? 'selected' : '' }}>Resignation</option>
                                                <option value="New Staff" {{ old('task_type', $task->task_type) == 'New Staff' ? 'selected' : '' }}>New Staff</option>
                                            </select>
                                        @else
                                            <input type="text" name="task_type" readonly
                                                class="asset-input"
                                                value="{{ old('task_type', $task->task_type) }}">
                                        @endif

                                        @error('task_type')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    @if ($task->task_type == 'New Staff' && isset($task->new_staff))
                                        <div class="asset-col-12">
                                            <label class="asset-label">New Staff</label>
                                            <div class="staff-info-card">
                                                <div class="staff-info-card__name">
                                                    {{ $task->new_staff->first_name . ' ' . $task->new_staff->last_name }}
                                                </div>
                                                <div class="staff-info-card__type">
                                                    {{ $task->task_type }}
                                                </div>
                                            </div>
                                        </div>
                                    @endif

                                    <div class="asset-col-12">
                                        <label for="attachments" class="asset-label">Attachments</label>

                                        <div class="file-upload-wrapper">
                                            <input type="file" name="attachments[]" id="attachments" multiple
                                                class="file-upload @error('attachments') asset-invalid @enderror @error('attachments.*') asset-invalid @enderror"
                                                accept="image/*,.pdf,.doc,.docx,.xls,.xlsx">

                                            <label for="attachments" class="file-upload-label">
                                                <div class="file-upload-label__icon">
                                                    <i class="fas fa-cloud-upload-alt"></i>
                                                </div>
                                                <div class="file-upload-label__title">Click to upload files</div>
                                                <div class="file-upload-label__text">
                                                    Supports: JPG, PNG, PDF, DOC, DOCX, XLS, XLSX
                                                </div>
                                            </label>
                                        </div>

                                        @error('attachments')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                        @error('attachments.*')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    @if (isset($attachments) && count($attachments) > 0)
                                        <div class="asset-col-12">
                                            <div class="attachment-section">
                                                <div class="attachment-section__head">
                                                    <h6 class="attachment-section__title mb-0">Existing Attachments</h6>
                                                </div>

                                                <div class="attachment-grid">
                                                    @foreach ($attachments as $file)
                                                        @php
                                                            $extension = strtolower(pathinfo($file->file_path, PATHINFO_EXTENSION));
                                                            $isImage = in_array($extension, ['jpg', 'jpeg', 'png', 'gif', 'webp']);
                                                        @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-file-{{ $extension === 'pdf' ? 'pdf' : 'alt' }}"></i>
                                                                    </div>
                                                                @endif
                                                            </div>

                                                            <div class="attachment-info">
                                                                <div class="attachment-info__name">
                                                                    {{ $file->original_name }}
                                                                </div>
                                                                <div class="attachment-info__action">View File</div>
                                                            </div>
                                                        </a>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endif

                    @if ($currentStaffDepartmentSlug === 'it' && $task->task_type == 'New Staff' && $task->new_staff?->user_id)
                        <div class="ui-card">
                            <div class="form-section asset-assignment-panel"
                                id="newStaffAssetAssignment"
                                data-assign-url="{{ route('tasks.assignNewStaffAsset', $task->id) }}"
                                data-csrf="{{ csrf_token() }}">
                                <div class="form-section__head">
                                    <h5 class="form-section__title mb-1">Linked with Assets</h5>
                                    <p class="form-section__sub mb-0">
                                        Assign one or more In Store assets to
                                        {{ $task->new_staff->first_name }} {{ $task->new_staff->last_name }}.
                                    </p>
                                </div>

                                @if ($newStaffAssignedAssets->isNotEmpty())
                                    <div class="assigned-assets-list" id="assignedAssetsList">
                                        @foreach ($newStaffAssignedAssets as $assignedAsset)
                                            <div class="assigned-asset-pill">
                                                <span class="assigned-asset-pill__name">{{ $assignedAsset->name }}</span>
                                                <span class="assigned-asset-pill__meta">
                                                    {{ $assignedAsset->product?->name ?? 'Asset' }}
                                                    @if ($assignedAsset->serial_number)
                                                        - {{ $assignedAsset->serial_number }}
                                                    @endif
                                                </span>
                                            </div>
                                        @endforeach
                                    </div>
                                @else
                                    <div class="assigned-assets-list" id="assignedAssetsList"></div>
                                @endif

                                <div id="assetAssignmentRows" class="asset-assignment-rows">
                                    <div class="asset-assignment-row">
                                        <div class="asset-assignment-row__field">
                                            <label class="asset-label">Asset</label>
                                            <div class="asset-select2-wrap">
                                                <select class="asset-select select2 asset-assignment-select"
                                                    data-placeholder="Choose In Store asset"
                                                    {{ $availableAssets->isEmpty() ? 'disabled' : '' }}>
                                                    <option value="">Choose In Store asset</option>
                                                    @foreach ($availableAssets as $assetOption)
                                                        <option value="{{ $assetOption->id }}">
                                                            {{ $assetOption->name }}
                                                            @if ($assetOption->product?->name)
                                                                - {{ $assetOption->product->name }}
                                                            @endif
                                                            @if ($assetOption->serial_number)
                                                                - {{ $assetOption->serial_number }}
                                                            @endif
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="asset-assignment-row__actions">
                                            <button type="button" class="asset-btn asset-btn--primary save-asset-row"
                                                {{ $availableAssets->isEmpty() ? 'disabled' : '' }}>
                                                Save Row
                                            </button>
                                            <div class="asset-row-message"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="asset-assignment-footer">
                                    <button type="button" class="asset-btn asset-btn--secondary" id="addAssetRow"
                                        {{ $availableAssets->isEmpty() ? 'disabled' : '' }}>
                                        + Add Asset Row
                                    </button>

                                    @if ($availableAssets->isEmpty())
                                        <span class="ui-muted">No In Store assets available.</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endif

                    @if ($currentStaffDepartmentSlug === 'it' && $task->task_type == 'Resignation' && $resignedStaff?->user_id)
                        <div class="ui-card">
                            <div class="form-section asset-assignment-panel"
                                id="resignationAssetReturn"
                                data-unlink-url="{{ route('tasks.unlinkResignationAsset', $task->id) }}"
                                data-unlink-all-url="{{ route('tasks.unlinkAllResignationAssets', $task->id) }}"
                                data-csrf="{{ csrf_token() }}">
                                <div class="form-section__head">
                                    <h5 class="form-section__title mb-1">Assets to Unlink</h5>
                                    <p class="form-section__sub mb-0">
                                        Unlink assets from
                                        {{ $resignedStaff->first_name }} {{ $resignedStaff->last_name }}
                                        and return them back to In Store.
                                    </p>
                                </div>

                                <div id="returnedAssetsList" class="assigned-assets-list"></div>

                                <div id="resignationAssetRows" class="resignation-asset-list">
                                    @foreach ($resignationAssets as $assetOption)
                                        @php
                                            $assetProductName = $assetOption->product?->name ?? '';
                                            $assetSerialNumber = $assetOption->serial_number ?? '';
                                        @endphp
                                        <div class="resignation-asset-item" data-asset-id="{{ $assetOption->id }}">
                                            <div class="resignation-asset-item__main">
                                                <div class="resignation-asset-item__icon">
                                                    <i class="fas fa-laptop"></i>
                                                </div>
                                                <div class="resignation-asset-item__content">
                                                    <div class="resignation-asset-item__name">{{ $assetOption->name }}</div>
                                                    <div class="resignation-asset-item__meta">
                                                        @if ($assetProductName)
                                                            <span>{{ $assetProductName }}</span>
                                                        @endif
                                                        @if ($assetSerialNumber)
                                                            <span>Serial: {{ $assetSerialNumber }}</span>
                                                        @endif
                                                        @if (! $assetProductName && ! $assetSerialNumber)
                                                            <span>Linked to staff</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="resignation-asset-item__actions">
                                                <button type="button" class="asset-btn asset-btn--primary return-asset-row"
                                                    data-asset-id="{{ $assetOption->id }}">
                                                    Unlink
                                                </button>
                                                <div class="asset-row-message"></div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                                <div class="asset-assignment-footer">
                                    <button type="button" class="asset-btn asset-btn--primary" id="unlinkAllResignationAssets"
                                        {{ $resignationAssets->isEmpty() ? 'disabled' : '' }}>
                                        Unlink All
                                    </button>

                                    <span id="unlinkAllResignationAssetsMessage" class="asset-row-message"></span>

                                    @if ($resignationAssets->isEmpty())
                                        <span class="ui-muted">No assets available to unlink for this staff.</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endif

                    @if ($task->new_staff && $department && ($department->slug == 'hr' || $department->slug == 'it'))
                        <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">
                                        Add one or more extra fields to support onboarding or department-specific requirements.
                                    </p>
                                </div>

                                <div id="additionalInfoSection">
                                    <label class="asset-label">
                                        Extra Details
                                    </label>

                                    <div id="additionalInfoContainer" class="space-y-3">
                                        @foreach ($additionalInfoValues as $info)
                                            <div class="additional-info-item">
                                                <div class="additional-info-row">
                                                    <input type="text" name="additional_info[]"
                                                        class="asset-input"
                                                        placeholder="Enter additional information..."
                                                        value="{{ $info }}">
                                                    <button type="button"
                                                        class="level-action-btn level-action-btn--danger remove-info-btn"
                                                        title="Remove">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>

                                    <div class="mt-3">
                                        <button type="button" class="asset-btn asset-btn--secondary" id="addInfoBtn">
                                            + Add More Info
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif

                    <div class="asset-actions">
                        <input type="hidden" name="urgent_type" id="urgent_type" value="{{ $selectedUrgentType }}">

                        <a href="{{ route('tasks.index') }}" class="asset-btn asset-btn--secondary">
                            Cancel
                        </a>

                        <button type="submit" class="asset-btn asset-btn--primary btn-submit">
                            Update Task
                            <span class="spinner-border spinner-border-sm ms-2 d-none" id="submitSpinner"></span>
                        </button>
                    </div>
                </form>

            </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.5rem;
        }
        .selection{
            width: 100%;
        }

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

        .task-hero-card__progress {
            width: 100%;
            height: 5px;
            background: #eef2f7;
        }

        .task-hero-card__progress-bar {
            height: 100%;
            border-radius: 999px;
            background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%);
            transition: width 0.3s ease;
        }

        .task-hero-card__content {
            padding: 1.25rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .task-hero-card__title {
            font-size: 1.2rem;
            font-weight: 800;
            color: #111827;
        }

        .task-hero-card__sub {
            color: #6b7280;
            font-size: 0.92rem;
        }

        .task-id-badge {
            display: inline-flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.15rem;
            padding: 0.8rem 1rem;
            border-radius: 14px;
            background: #f8fafc;
            border: 1px solid #e5e7eb;
            min-width: 140px;
        }

        .task-id-badge__label {
            font-size: 0.78rem;
            color: #64748b;
        }

        .task-id-badge__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;
        }

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

        .asset-col-12 {
            grid-column: span 12 / span 12;
        }

        .asset-col-6 {
            grid-column: span 6 / span 6;
        }

        .asset-col-4 {
            grid-column: span 4 / span 4;
        }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 600;
            color: #374151;
            font-size: 0.92rem;
        }

        .asset-input,
        .asset-select {
            width: 100%;
            min-height: 44px;
            border: 1px solid #dbe2ea;
            border-radius: 12px;
            padding: 0.7rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
        }

        textarea.asset-input {
            min-height: 120px;
            resize: vertical;
        }

        .asset-input:focus,
        .asset-select:focus {
            outline: none;
            border-color: #b8c4d6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .asset-invalid {
            border-color: #dc3545 !important;
        }

        .field-hint {
            color: #6b7280;
            font-size: 0.86rem;
        }

        .toggle-card {
            display: block;
            cursor: pointer;
            margin: 0;
        }

        .toggle-card__main {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            padding: 1rem 1.1rem;
            background: #fbfcfe;
        }

        .toggle-card__title {
            font-size: 0.96rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.2rem;
        }

        .toggle-card__text {
            color: #6b7280;
            font-size: 0.9rem;
            line-height: 1.55;
        }

        .toggle-card__switch-wrap {
            position: relative;
            width: 52px;
            height: 30px;
            flex-shrink: 0;
        }

        .toggle-card__switch-wrap input {
            opacity: 0;
            width: 0;
            height: 0;
            position: absolute;
        }

        .toggle-card__switch {
            position: absolute;
            inset: 0;
            background: #d1d5db;
            border-radius: 999px;
            transition: 0.25s ease;
        }

        .toggle-card__switch::before {
            content: "";
            position: absolute;
            width: 22px;
            height: 22px;
            left: 4px;
            top: 4px;
            border-radius: 50%;
            background: #fff;
            transition: 0.25s ease;
            box-shadow: 0 3px 10px rgba(15, 23, 42, 0.15);
        }

        .toggle-card__switch-wrap input:checked + .toggle-card__switch {
            background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
        }

        .toggle-card__switch-wrap input:checked + .toggle-card__switch::before {
            transform: translateX(22px);
        }

        .asset-select2-wrap .select2-container {
            width: 100% !important;
        }

        .asset-select2-wrap .select2-container--default .select2-selection--single,
        .asset-select2-wrap .select2-container--default .select2-selection--multiple {
            min-height: 44px;
            border: 1px solid #dbe2ea;
            border-radius: 12px;
            padding: 0.35rem 0.55rem;
            background: #fff;
        }

        .asset-select2-wrap .select2-container--default.select2-container--focus .select2-selection--single,
        .asset-select2-wrap .select2-container--default.select2-container--focus .select2-selection--multiple {
            border-color: #b8c4d6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .asset-select2-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 28px;
            color: #111827;
        }

        .asset-select2-wrap .select2-container--default .select2-selection--multiple .select2-selection__rendered {
            display: flex;
            flex-wrap: wrap;
            gap: 0.35rem;
            padding: 0;
        }

        .asset-select2-wrap .select2-container--default .select2-selection--multiple .select2-selection__choice {
            margin-top: 0;
            background: #eef2ff;
            border: 1px solid #c7d2fe;
            border-radius: 999px;
            padding: 0.2rem 0.55rem;
            color: #3730a3;
            font-size: 0.84rem;
        }

        .inline-note {
            border-radius: 14px;
            padding: 0.95rem 1rem;
            border: 1px solid #f3e8c1;
            background: #fffbeb;
        }

        .inline-note__title {
            font-weight: 700;
            color: #92400e;
            margin-bottom: 0.15rem;
        }

        .inline-note__text {
            color: #78350f;
            font-size: 0.9rem;
            line-height: 1.55;
        }

        .inline-note__text a {
            font-weight: 700;
            color: #b45309;
            text-decoration: none;
        }

        .progress-block {
            max-width: 100%;
        }

        .progress-slider {
            width: 100%;
            appearance: none;
            -webkit-appearance: none;
            height: 8px;
            border-radius: 999px;
            background: #e5e7eb;
            outline: none;
        }

        .progress-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: none;
            background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
        }

        .progress-slider::-moz-range-thumb {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: none;
            background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);
            cursor: pointer;
        }

        .progress-track {
            width: 100%;
            height: 10px;
            border-radius: 999px;
            background: #eef2f7;
            margin-top: 1rem;
            overflow: hidden;
        }

        .progress-track__bar {
            height: 100%;
            border-radius: 999px;
            background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%);
            transition: width 0.3s ease, background 0.3s ease;
        }

        .progress-block__meta {
            margin-top: 0.75rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .progress-badge {
            min-width: 72px;
            text-align: center;
            padding: 0.35rem 0.75rem;
            border-radius: 999px;
            background: linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%);
            color: #fff;
            font-weight: 700;
            font-size: 0.9rem;
        }

        .staff-info-card {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            background: #f8fafc;
            padding: 0.95rem 1rem;
        }

        .staff-info-card__name {
            font-weight: 700;
            color: #111827;
        }

        .staff-info-card__type {
            display: inline-flex;
            align-items: center;
            padding: 0.35rem 0.7rem;
            border-radius: 999px;
            background: #e0e7ff;
            color: #3730a3;
            font-size: 0.82rem;
            font-weight: 700;
        }

        .file-upload-wrapper {
            position: relative;
        }

        .file-upload {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .file-upload-label {
            display: block;
            border: 1.5px dashed #cbd5e1;
            border-radius: 16px;
            padding: 2rem 1.25rem;
            text-align: center;
            background: #f8fafc;
            transition: 0.2s ease;
            cursor: pointer;
        }

        .file-upload-label:hover {
            border-color: #a5b4fc;
            background: #f5f7ff;
        }

        .file-upload-label__icon {
            font-size: 2rem;
            line-height: 1;
            color: #4f46e5;
            margin-bottom: 0.65rem;
        }

        .file-upload-label__title {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.2rem;
        }

        .file-upload-label__text {
            font-size: 0.9rem;
            color: #6b7280;
        }

        .attachment-section__head {
            margin-bottom: 0.9rem;
        }

        .attachment-section__title {
            font-size: 0.98rem;
            font-weight: 700;
            color: #111827;
        }

        .attachment-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(170px, 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: 120px;
            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: 2.4rem;
            color: #ef4444;
        }

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

        .attachment-info__name {
            font-size: 0.88rem;
            font-weight: 600;
            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;
        }

        .additional-info-row {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 0.75rem;
            align-items: center;
        }

        .asset-assignment-panel {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .assigned-assets-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.65rem;
        }

        .assigned-asset-pill {
            display: inline-flex;
            flex-direction: column;
            gap: 0.15rem;
            border: 1px solid #bbf7d0;
            border-radius: 12px;
            background: #f0fdf4;
            padding: 0.55rem 0.75rem;
        }

        .assigned-asset-pill__name {
            color: #166534;
            font-weight: 700;
            font-size: 0.9rem;
        }

        .assigned-asset-pill__meta {
            color: #15803d;
            font-size: 0.78rem;
        }

        .asset-assignment-rows {
            display: flex;
            flex-direction: column;
            gap: 0.85rem;
        }

        .asset-assignment-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 0.9rem;
            align-items: end;
            padding: 0.9rem;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            background: #fbfcfe;
        }

        .asset-assignment-row__actions {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            flex-wrap: wrap;
            min-width: 210px;
        }

        .resignation-asset-list {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .resignation-asset-item {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 1rem;
            align-items: center;
            padding: 0.95rem 1rem;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            background: #ffffff;
            box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
            transition: 0.2s ease;
        }

        .resignation-asset-item:hover {
            border-color: #c7d2fe;
            box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
            transform: translateY(-1px);
        }

        .resignation-asset-item.is-returned {
            border-color: #bbf7d0;
            background: #f0fdf4;
        }

        .resignation-asset-item__main {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            min-width: 0;
        }

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

        .resignation-asset-item__content {
            min-width: 0;
        }

        .resignation-asset-item__name {
            color: #111827;
            font-size: 0.95rem;
            font-weight: 800;
            overflow-wrap: anywhere;
        }

        .resignation-asset-item__meta {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem 0.75rem;
            margin-top: 0.15rem;
            color: #6b7280;
            font-size: 0.82rem;
            font-weight: 600;
        }

        .resignation-asset-item__actions {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.65rem;
            flex-wrap: wrap;
            min-width: 220px;
        }

        .asset-row-message {
            color: #6b7280;
            font-size: 0.82rem;
            font-weight: 600;
            min-height: 18px;
        }

        .asset-row-message.is-success {
            color: #15803d;
        }

        .asset-row-message.is-danger {
            color: #dc2626;
        }

        .asset-assignment-footer {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        @media (max-width: 640px) {
            .resignation-asset-item {
                grid-template-columns: 1fr;
            }

            .resignation-asset-item__actions {
                justify-content: flex-start;
                min-width: 0;
            }
        }

        .level-action-btn {
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            border: 1px solid #dbe2ea;
            background: #fff;
            color: #475569;
            transition: 0.2s ease;
        }

        .level-action-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
        }

        .level-action-btn--danger {
            color: #dc3545;
            border-color: #f1c7cd;
        }

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

        .btn-submit {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .shake {
            animation: shake 0.5s ease-in-out;
        }

        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }

        @media (max-width: 991.98px) {
            .asset-col-4,
            .asset-col-6,
            .asset-col-12 {
                grid-column: span 12 / span 12;
            }

            .additional-info-row {
                grid-template-columns: 1fr;
            }

            .asset-assignment-row {
                grid-template-columns: 1fr;
            }

            .asset-assignment-row__actions {
                min-width: 0;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function () {
            const $studentSelect = $('#student_ids');
            const $staffSelect = $('#staff_id');
            const $assignToMe = $('#assign_to_me');
            const $staffSection = $('#staff_assign_section');
            const $descTextarea = $('#description');
            const $descCount = $('#descCount');
            const $progressSlider = $('#progress_range');
            const $progressBar = $('#progressBar');
            const $progressValue = $('#progress_value');
            const $prioritySelect = $('#priority');
            const $taskForm = $('#taskForm');
            const $submitSpinner = $('#submitSpinner');
            const $submitBtn = $('.btn-submit');
            const $attachmentsInput = $('#attachments');
            const $fileUploadLabel = $('.file-upload-label');
            const $startDate = $('#start_date');
            const $dueDate = $('#due_date');
            const $addInfoBtn = $('#addInfoBtn');
            const $infoContainer = $('#additionalInfoContainer');

            if ($('.select2').length) {
                $('.select2').select2({
                    width: '100%',
                    allowClear: true,
                    placeholder: function () {
                        return $(this).data('placeholder') || 'Select option';
                    }
                });
            }

            function updateDescriptionCount() {
                if ($descTextarea.length && $descCount.length) {
                    const currentLength = ($descTextarea.val() || '').length;
                    $descCount.text(currentLength);

                    if (currentLength > 500) {
                        $descCount.addClass('text-danger');
                    } else {
                        $descCount.removeClass('text-danger');
                    }
                }
            }

            updateDescriptionCount();
            $descTextarea.on('input', updateDescriptionCount);

            function updatePriorityStyle() {
                if ($prioritySelect.length) {
                    const color = $prioritySelect.find(':selected').data('color');
                    if (color) {
                        $prioritySelect.css({
                            borderColor: color,
                            boxShadow: `0 0 0 4px ${color}15`
                        });
                    } else {
                        $prioritySelect.css({
                            borderColor: '',
                            boxShadow: ''
                        });
                    }
                }
            }

            updatePriorityStyle();
            $prioritySelect.on('change', updatePriorityStyle);

            function updateProgressUI(value) {
                value = parseInt(value || 0, 10);

                if ($progressValue.length) {
                    $progressValue.text(value + '%');
                }

                if ($progressBar.length) {
                    $progressBar.css('width', value + '%');

                    if (value === 100) {
                        $progressBar.css('background', 'linear-gradient(90deg, #10b981 0%, #34d399 100%)');
                    } else if (value >= 70) {
                        $progressBar.css('background', 'linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%)');
                    } else {
                        $progressBar.css('background', 'linear-gradient(90deg, #4f46e5 0%, #06b6d4 100%)');
                    }
                }
            }

            if ($progressSlider.length) {
                updateProgressUI($progressSlider.val());
                $progressSlider.on('input change', function () {
                    updateProgressUI($(this).val());
                });
            }

            function toggleStaffAssignment() {
                if ($assignToMe.length && $staffSection.length && $staffSelect.length) {
                    if ($assignToMe.is(':checked')) {
                        $staffSection.stop(true, true).slideUp(200);
                        $staffSelect.val('').trigger('change');
                        $staffSelect.prop('disabled', true);
                    } else {
                        $staffSection.stop(true, true).slideDown(200);
                        $staffSelect.prop('disabled', false);
                    }
                }
            }

            toggleStaffAssignment();
            $assignToMe.on('change', toggleStaffAssignment);

            function validateDates() {
                if ($startDate.length && $dueDate.length) {
                    const startValue = $startDate.val();
                    const dueValue = $dueDate.val();

                    if (startValue && dueValue && dueValue < startValue) {
                        $dueDate.addClass('asset-invalid is-invalid');
                        if ($dueDate[0].setCustomValidity) {
                            $dueDate[0].setCustomValidity('Due date must be after or equal to start date');
                        }
                    } else {
                        $dueDate.removeClass('asset-invalid is-invalid');
                        if ($dueDate[0].setCustomValidity) {
                            $dueDate[0].setCustomValidity('');
                        }
                    }
                }
            }

            $startDate.on('change', validateDates);
            $dueDate.on('change', validateDates);
            validateDates();

            if ($attachmentsInput.length && $fileUploadLabel.length) {
                $attachmentsInput.on('change', function (e) {
                    const files = e.target.files;

                    if (files && files.length > 0) {
                        $fileUploadLabel.css({
                            borderColor: '#a5b4fc',
                            background: '#f5f7ff'
                        });

                        $fileUploadLabel.find('.file-upload-label__title').html(
                            `<i class="fas fa-check-circle me-2"></i>${files.length} file(s) selected`
                        );
                    }
                });
            }

            if ($addInfoBtn.length && $infoContainer.length) {
                $addInfoBtn.on('click', function () {
                    const $firstItem = $infoContainer.find('.additional-info-item:first');

                    if ($firstItem.length) {
                        const $newItem = $firstItem.clone();
                        $newItem.find('input').val('');
                        $newItem.hide();
                        $infoContainer.append($newItem);
                        $newItem.slideDown(250);
                    }
                });

                $infoContainer.on('click', '.remove-info-btn', function () {
                    const $items = $infoContainer.find('.additional-info-item');

                    if ($items.length > 1) {
                        $(this).closest('.additional-info-item').slideUp(250, function () {
                            $(this).remove();
                        });
                    } else {
                        const $current = $(this).closest('.additional-info-item');
                        $current.addClass('shake');
                        setTimeout(() => {
                            $current.removeClass('shake');
                        }, 500);
                    }
                });
            }

            const assetOptions = @json($assetAssignmentOptions);
            const assignedAssetIds = new Set();
            const $assetPanel = $('#newStaffAssetAssignment');
            const $assetRows = $('#assetAssignmentRows');
            const $addAssetRow = $('#addAssetRow');
            const $assignedAssetsList = $('#assignedAssetsList');

            function escapeHtml(value) {
                return String(value || '')
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;')
                    .replace(/'/g, '&#039;');
            }

            function initializeRowSelect($scope) {
                const $selects = $scope.find('.asset-assignment-select');

                if ($selects.length && $.fn.select2) {
                    $selects.each(function () {
                        const $select = $(this);

                        if ($select.data('select2')) {
                            return;
                        }

                        $select.select2({
                            width: '100%',
                            allowClear: true,
                            placeholder: $select.data('placeholder') || 'Choose In Store asset'
                        });
                    });
                }
            }

            function buildAssetOptionsHtml() {
                let html = '<option value="">Choose In Store asset</option>';

                assetOptions.forEach(function (asset) {
                    if (!assignedAssetIds.has(String(asset.id))) {
                        html += `<option value="${escapeHtml(asset.id)}">${escapeHtml(asset.label)}</option>`;
                    }
                });

                return html;
            }

            function createAssetRow() {
                const hasOptions = assetOptions.some(function (asset) {
                    return !assignedAssetIds.has(String(asset.id));
                });
                const disabled = hasOptions ? '' : 'disabled';
                const row = `
                    <div class="asset-assignment-row">
                        <div class="asset-assignment-row__field">
                            <label class="asset-label">Asset</label>
                            <div class="asset-select2-wrap">
                                <select class="asset-select select2 asset-assignment-select"
                                    data-placeholder="Choose In Store asset" ${disabled}>
                                    ${buildAssetOptionsHtml()}
                                </select>
                            </div>
                        </div>
                        <div class="asset-assignment-row__actions">
                            <button type="button" class="asset-btn asset-btn--primary save-asset-row" ${disabled}>
                                Save Row
                            </button>
                            <div class="asset-row-message"></div>
                        </div>
                    </div>
                `;

                const $row = $(row);
                $assetRows.append($row);
                initializeRowSelect($row);
            }

            function removeAssignedOption(assetId) {
                $('.asset-assignment-select:not(:disabled)').each(function () {
                    const $select = $(this);
                    $select.find(`option[value="${assetId}"]`).remove();
                    $select.trigger('change.select2');
                });

                const hasOptionsLeft = assetOptions.some(function (asset) {
                    return !assignedAssetIds.has(String(asset.id));
                });

                if (!hasOptionsLeft) {
                    $addAssetRow.prop('disabled', true);
                }
            }

            function appendAssignedAsset(asset) {
                const meta = asset.serial_number ? asset.serial_number : 'Assigned';
                const $pill = $(`
                    <div class="assigned-asset-pill">
                        <span class="assigned-asset-pill__name"></span>
                        <span class="assigned-asset-pill__meta"></span>
                    </div>
                `);

                $pill.find('.assigned-asset-pill__name').text(asset.name || 'Asset');
                $pill.find('.assigned-asset-pill__meta').text(meta);
                $assignedAssetsList.append($pill);
            }

            initializeRowSelect($(document));

            $addAssetRow.on('click', function () {
                createAssetRow();
            });

            $assetRows.on('click', '.save-asset-row', function () {
                const $button = $(this);
                const $row = $button.closest('.asset-assignment-row');
                const $select = $row.find('.asset-assignment-select');
                const $message = $row.find('.asset-row-message');
                const assetId = String($select.val() || '');

                $message.removeClass('is-success is-danger').text('');

                if (!assetId) {
                    $message.addClass('is-danger').text('Choose an asset first.');
                    return;
                }

                $button.prop('disabled', true).text('Saving...');

                fetch($assetPanel.data('assign-url'), {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': $assetPanel.data('csrf')
                    },
                    body: JSON.stringify({
                        asset_id: assetId
                    })
                })
                    .then(async function (response) {
                        const payload = await response.json().catch(function () {
                            return {};
                        });

                        if (!response.ok) {
                            throw new Error(payload.message || 'Unable to save this row.');
                        }

                        assignedAssetIds.add(assetId);
                        $select.prop('disabled', true).trigger('change.select2');
                        $button.text('Saved');
                        $message.addClass('is-success').text(payload.message || 'Saved.');
                        appendAssignedAsset(payload.asset || {});
                        removeAssignedOption(assetId);
                    })
                    .catch(function (error) {
                        $button.prop('disabled', false).text('Save Row');
                        $message.addClass('is-danger').text(error.message);
                    });
            });

            const resignationAssetOptions = @json($resignationAssetOptions);
            const returnedAssetIds = new Set();
            const $resignationAssetPanel = $('#resignationAssetReturn');
            const $resignationAssetRows = $('#resignationAssetRows');
            const $unlinkAllResignationAssets = $('#unlinkAllResignationAssets');
            const $unlinkAllResignationAssetsMessage = $('#unlinkAllResignationAssetsMessage');
            const $returnedAssetsList = $('#returnedAssetsList');

            function appendReturnedAsset(asset) {
                const meta = asset.serial_number ? asset.serial_number : 'Returned to store';
                const $pill = $(`
                    <div class="assigned-asset-pill">
                        <span class="assigned-asset-pill__name"></span>
                        <span class="assigned-asset-pill__meta"></span>
                    </div>
                `);

                $pill.find('.assigned-asset-pill__name').text(asset.name || 'Asset');
                $pill.find('.assigned-asset-pill__meta').text(meta);
                $returnedAssetsList.append($pill);
            }

            function unlinkResignationAsset(assetId) {
                return fetch($resignationAssetPanel.data('unlink-url'), {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': $resignationAssetPanel.data('csrf')
                    },
                    body: JSON.stringify({
                        asset_id: assetId
                    })
                })
                    .then(async function (response) {
                        const payload = await response.json().catch(function () {
                            return {};
                        });

                        if (!response.ok) {
                            throw new Error(payload.message || 'Unable to unlink this asset.');
                        }

                        return payload;
                    });
            }

            function markResignationAssetReturned(asset) {
                const assetId = String(asset.id || '');
                const $item = $resignationAssetRows.find(`.resignation-asset-item[data-asset-id="${assetId}"]`);

                returnedAssetIds.add(assetId);
                appendReturnedAsset(asset);

                $item.addClass('is-returned');
                $item.find('.return-asset-row').prop('disabled', true).text('Unlinked');
                $item.find('.asset-row-message').removeClass('is-danger').addClass('is-success').text('Returned to store.');
                $item.slideUp(220, function () {
                    $(this).remove();

                    if (!$resignationAssetRows.find('.resignation-asset-item').length) {
                        $unlinkAllResignationAssets.prop('disabled', true);
                    }
                });
            }

            $resignationAssetRows.on('click', '.return-asset-row', function () {
                const $button = $(this);
                const $item = $button.closest('.resignation-asset-item');
                const $message = $item.find('.asset-row-message');
                const assetId = String($button.data('asset-id') || $item.data('asset-id') || '');

                $message.removeClass('is-success is-danger').text('');

                if (!assetId) {
                    $message.addClass('is-danger').text('Asset was not found.');
                    return;
                }

                $button.prop('disabled', true).text('Unlinking...');

                unlinkResignationAsset(assetId)
                    .then(function (payload) {
                        markResignationAssetReturned(payload.asset || { id: assetId });
                    })
                    .catch(function (error) {
                        $button.prop('disabled', false).text('Unlink');
                        $message.addClass('is-danger').text(error.message);
                    });
            });

            $unlinkAllResignationAssets.on('click', function () {
                $unlinkAllResignationAssetsMessage.removeClass('is-success is-danger').text('');

                if (!$resignationAssetRows.find('.resignation-asset-item').length) {
                    $unlinkAllResignationAssetsMessage.addClass('is-success').text('All assets are already unlinked.');
                    return;
                }

                if (!window.confirm('Unlink all assets from this staff and return them to In Store?')) {
                    return;
                }

                const originalText = $unlinkAllResignationAssets.text().trim();

                $unlinkAllResignationAssets.prop('disabled', true).text('Unlinking...');
                $resignationAssetRows.find('.return-asset-row').prop('disabled', true);

                fetch($resignationAssetPanel.data('unlink-all-url'), {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': $resignationAssetPanel.data('csrf')
                    }
                })
                    .then(async function (response) {
                        const payload = await response.json().catch(function () {
                            return {};
                        });

                        if (!response.ok) {
                            throw new Error(payload.message || 'Unable to unlink all assets.');
                        }

                        return payload;
                    })
                    .then(function (payload) {
                        (payload.assets || []).forEach(function (asset) {
                            markResignationAssetReturned(asset);
                        });

                        $unlinkAllResignationAssetsMessage
                            .addClass('is-success')
                            .text(payload.message || 'All assets unlinked successfully.');
                    })
                    .catch(function (error) {
                        $unlinkAllResignationAssets.prop('disabled', false).text(originalText);
                        $resignationAssetRows.find('.return-asset-row').prop('disabled', false).text('Unlink');
                        $unlinkAllResignationAssetsMessage.addClass('is-danger').text(error.message);
                    });
            });

            if ($taskForm.length && $submitBtn.length && $submitSpinner.length) {
                $taskForm.on('submit', function () {
                    validateDates();

                    if (this.checkValidity()) {
                        $submitSpinner.removeClass('d-none');
                        $submitBtn.prop('disabled', true);
                    }
                });
            }
        });
    </script>
@endpush

{{--
@push('scripts')
    <script>
        // Additional Info Repeater
        const addInfoBtn = $('#addInfoBtn');
        const infoContainer = $('#additionalInfoContainer');

        // Add new info field
        addInfoBtn.on('click', function() {
            const newItem = infoContainer.find('.additional-info-item:first').clone();
            newItem.find('input').val(''); // Clear the cloned input
            newItem.hide(); // Hide for animation
            infoContainer.append(newItem);
            newItem.slideDown(300); // Smooth animation
        });

        // Remove info field
        infoContainer.on('click', '.remove-info-btn', function() {
            const items = infoContainer.find('.additional-info-item');
            if (items.length > 1) {
                $(this).closest('.additional-info-item').slideUp(300, function() {
                    $(this).remove();
                });
            } else {
                // Shake animation if trying to remove last item
                $(this).closest('.additional-info-item').addClass('shake');
                setTimeout(() => {
                    $(this).closest('.additional-info-item').removeClass('shake');
                }, 500);
            }
        });
    </script>


    <script>
        $(document).ready(function() {
            // Initialize Select2 with custom theme
            if ($('.select2-custom').length) {
                $('.select2-custom').select2({
                    theme: 'bootstrap-5',
                    width: '100%',
                    placeholder: function() {
                        return $(this).data('placeholder');
                    },
                    allowClear: true
                });
            }

            // Character counter for description
            const descTextarea = $('#description');
            const descCount = $('#descCount');

            if (descTextarea.length && descCount.length) {
                descCount.text((descTextarea.val() || '').length);

                descTextarea.on('input', function() {
                    const currentLength = ($(this).val() || '').length;
                    descCount.text(currentLength);
                    if (currentLength > 500) {
                        descCount.addClass('text-danger');
                    } else {
                        descCount.removeClass('text-danger');
                    }
                });
            }

            // Dynamic progress bar
            const progressSlider = $('#progress_range');
            const progressBar = $('#progressBar');
            const progressValue = $('#progress_value');

            if (progressSlider.length && progressBar.length && progressValue.length) {
                progressSlider.on('input', function() {
                    const value = $(this).val();
                    progressValue.text(value + '%');
                    progressBar.css('width', value + '%');

                    // Change color based on progress
                    if (value == 100) {
                        progressBar.css('background', 'var(--success-gradient)');
                    } else if (value >= 70) {
                        progressBar.css('background', 'var(--warning-gradient)');
                    } else {
                        progressBar.css('background', 'var(--info-gradient)');
                    }
                });
            }

            // Priority select with color coding
            const prioritySelect = $('#priority');

            function updatePriorityColor() {
                if (prioritySelect.length) {
                    const selected = prioritySelect.find(':selected');
                    const color = selected.data('color');
                    if (color) {
                        prioritySelect.css('border-color', color);
                        prioritySelect.css('box-shadow', `0 0 0 0.25rem ${color}40`);
                    }
                }
            }
            if (prioritySelect.length) {
                prioritySelect.on('change', updatePriorityColor);
                updatePriorityColor();
            }

            // Toggle staff assignment
            const assignToMeCheckbox = $('#assign_to_me');
            const staffSection = $('#staff_assign_section');
            const staffSelect = $('#staff_id');

            if (assignToMeCheckbox.length && staffSection.length && staffSelect.length) {
                assignToMeCheckbox.on('change', function() {
                    if (this.checked) {
                        staffSection.slideUp(300);
                        staffSelect.prop('disabled', true).val('');
                    } else {
                        staffSection.slideDown(300);
                        staffSelect.prop('disabled', false);
                    }
                }).trigger('change');
            }

            // Date validation
            const startDate = $('#start_date');
            const dueDate = $('#due_date');

            if (dueDate.length) {
                dueDate.on('change', function() {
                    if (startDate.length && startDate.val() && $(this).val() < startDate.val()) {
                        $(this).addClass('is-invalid');
                        if (this.setCustomValidity) {
                            this.setCustomValidity('Due date must be after start date');
                        }
                    } else {
                        $(this).removeClass('is-invalid');
                        if (this.setCustomValidity) {
                            this.setCustomValidity('');
                        }
                    }
                });
            }

            // Form submit animation
            const taskForm = $('#taskForm');
            const submitSpinner = $('#submitSpinner');
            const submitBtn = $('.btn-submit');

            if (taskForm.length && submitSpinner.length && submitBtn.length) {
                taskForm.on('submit', function() {
                    submitSpinner.removeClass('d-none');
                    submitBtn.prop('disabled', true);
                });
            }

            // File upload feedback
            const attachmentsInput = $('#attachments');
            const fileUploadLabel = $('.file-upload-label');

            if (attachmentsInput.length && fileUploadLabel.length) {
                attachmentsInput.on('change', function(e) {
                    const files = e.target.files;
                    const label = $(this).next('.file-upload-label');

                    if (files && files.length > 0) {
                        label.css('border-color', '#667eea');
                        label.css('background', 'rgba(102, 126, 234, 0.1)');
                        label.find('span').html(
                            `<i class="fas fa-check-circle me-2"></i>${files.length} file(s) selected`);
                    }
                });
            }
        });
    </script>
@endpush --}}