@extends('dashboard.layouts.app')

@section('content')
    <div class="container mt-5">
        <div class="card shadow-lg border-0 rounded-3">
            <div class="card-header py-3">
                <div class="mb-0"><i class="fas fa-edit"></i> Edit Task</div>
            </div>
            <div class="card-body px-4 py-4">
                <form action="{{ route('tasks.update', $task->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <!-- Task Name -->

                @if($task->created_by == Auth::id())
                    <div class="mb-3">
                        <label for="task_name" class="form-label">Task Name <span class="text-danger">*</span></label>
                        <input type="text" name="task_name" id="task_name"
                            class="form-control rounded-3 @error('task_name') is-invalid @enderror"
                            value="{{ old('task_name', $task->task_name) }}" pattern="^[A-Za-z0-9\s]+$"
                            title="Only letters, numbers, and spaces are allowed." required>
                        @error('task_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <!-- Description -->
                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea name="description" id="description" rows="4"
                            class="form-control rounded-3 @error('description') is-invalid @enderror">{{ old('description', $task->description) }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Assign to Me -->
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="assign_to_me" name="assign_to_me" value="1"
                            {{ old('assign_to_me', $task->assign_to_me) == 1 ? 'checked' : '' }}>
                        <label class="form-check-label" for="assign_to_me">Assign to Me</label>
                    </div>

                    <!-- Assign to Staff -->
                    <div class="mb-3">
                        <label for="staff_id" class="form-label">Assign to Staff <span class="text-danger">*</span></label>
                        <select name="staff_id" id="staff_id"
                            class="form-select select2 @error('staff_id') is-invalid @enderror"
                            {{ old('assign_to_me', $task->assign_to_me) == 1 ? 'disabled' : '' }}>
                            <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>
                        @error('staff_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>


                    <!-- Dates -->
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label for="start_date" class="form-label">Start Date <span class="text-danger">*</span></label>
                            <input type="date" name="start_date" id="start_date"
                                class="form-control rounded-3 @error('start_date') is-invalid @enderror"
                                value="{{ old('start_date', $task->start_date) }}" required>
                            @error('start_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="due_date" class="form-label">Due Date <span class="text-danger">*</span></label>
                            <input type="date" name="due_date" id="due_date"
                                class="form-control rounded-3 @error('due_date') is-invalid @enderror"
                                value="{{ old('due_date', $task->due_date) }}" required>
                            @error('due_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-4 mb-3">
                            <label for="reminder" class="form-label">Reminder Date</label>
                            <input type="date" name="reminder" id="reminder"
                                class="form-control rounded-3 @error('reminder') is-invalid @enderror"
                                value="{{ old('reminder', $task->reminder) }}">
                            @error('reminder')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Priority & Status -->
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="priority" class="form-label">Priority</label>
                            <select name="priority" id="priority" class="form-select rounded-3">
                                <option value="high" {{ old('priority', $task->priority) == 'high' ? 'selected' : '' }}>
                                    High</option>
                                <option value="medium"
                                    {{ old('priority', $task->priority) == 'medium' ? 'selected' : '' }}>Medium</option>
                                <option value="low" {{ old('priority', $task->priority) == 'low' ? 'selected' : '' }}>
                                    Low</option>
                            </select>
                        </div>
                        
                @endif

                        <div class="col-md-6 mb-3">
                            <label for="status" class="form-label">Status</label>
                            <select name="status" id="status" class="form-select rounded-3">
                                <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>
                        </div>
                    </div>
                                        <div class="mb-3">
                        <label for="progress_range" class="form-label">Progress (Slider)</label>
                        <input type="range" name="progress" id="progress_range" class="form-range"
                            value="{{ old('progress', $task->progress) }}" min="0" max="100" step="1"
                            oninput="document.getElementById('progress_value').innerText = this.value + '%'">
                        <div><strong id="progress_value">{{ old('progress', $task->progress) }}%</strong></div>
                    </div>

                @if($task->created_by == Auth::id())


                    <!-- Task Type -->
                    <div class="mb-3">
                        <label for="task_type" class="form-label">Task Type</label>
                        @if($task_type == "select")
                        <select name="task_type" id="task_type"
                            class="form-select rounded-3 @error('task_type') is-invalid @enderror">
                            <option value="">Select 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>
                        </select>
                        
                        @else 
                        <input type="task_type" name="task_type" 
                                class="form-control rounded-3 @error('task_type') is-invalid @enderror"
                                value="{{ old('task_type', $task->task_type) }}">
                        @endif
                        @error('task_type')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Attachments -->
                    <div class="mb-3">
                        <label for="attachments" class="form-label">Attachments</label>
                        <input type="file" name="attachments[]" id="attachments"
                            class="form-control rounded-3 @error('attachments') is-invalid @enderror @error('attachments.*') is-invalid @enderror"
                            multiple>
                        @error('attachments')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        @error('attachments.*')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror

                        @if ($attachments)
                            <div class="mt-2">
                                <strong>Existing Attachments:</strong>
                                <ul>
                                    @foreach ($attachments as $file)
                                        <li>
                                            <a href="{{ asset('/' . $file->file_path) }}" target="_blank">
                                                <img src="{{ asset('/' . $file->file_path) }}"
                                                    alt="{{ $file->original_name }}" width="120" height="120"
                                                    class="img-thumbnail rounded">
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                    </div>
                @endif
                    <!-- Submit -->
                    <div class="d-flex justify-content-end mt-3">
                        <button type="submit" class="btn btn-primary px-4">
                            <i class="fas fa-save me-2"></i> Update Task
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            $('.select2').select2({
                allowClear: true,
                width: '100%'
            });
        });
        document.getElementById('assign_to_me').addEventListener('change', function() {
            let staffSelect = document.getElementById('staff_id').closest('.mb-3');
            if (this.checked) {
                staffSelect.style.display = 'none';
                document.getElementById('staff_id').value = "";
            } else {
                staffSelect.style.display = 'block';
            }
        });
    </script>
@endpush