@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-plus-circle"></i>Add New Task</div>
        </div>
        <div class="card-body px-4 py-4">
            <form action="{{ route('tasks.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <!-- Task Name -->
                <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"s
                        class="form-control rounded-3 @error('task_name') is-invalid @enderror"
                        value="{{ old('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') }}</textarea>
                    @error('description')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                <div class="mb-3 form-check d-flex align-items-center">
                    <input type="checkbox" name="assign_to_me" id="assign_to_me" class="form-check-input"
                        value="{{ Auth::id() }}" {{ old('assign_to_me') ? 'checked' : '' }}>
                    <label class="form-check-label ms-2" for="assign_to_me">
                        Assign to myself
                    </label>
                    @error('assign_to_me')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>
                <!-- Assign to Staff -->
                <div class="mb-3" id="assign-staff-wrapper">
                    <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">
                        <option value="">Select Staff</option>
                        @foreach ($staffs as $staff)
                        @if($staff->user_id != Auth::id())
                        <option value="{{ $staff->id }}" {{ old('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') }}" 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') }}" 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') }}">
                        @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') == 'high' ? 'selected' : '' }}>High</option>
                            <option value="medium" {{ old('priority', 'medium') == 'medium' ? 'selected' : '' }}>Medium
                            </option>
                            <option value="low" {{ old('priority') == 'low' ? 'selected' : '' }}>Low</option>
                        </select>
                    </div>
                    <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', 'open') == 'open' ? 'selected' : '' }}>Open
                            </option>
                            <option value="hold" {{ old('status') == 'hold' ? 'selected' : '' }}>On Hold</option>
                            <option value="closed" {{ old('status') == 'closed' ? 'selected' : '' }}>Closed</option>
                        </select>
                    </div>
                </div>
                <!-- Task Type -->
                <div class="mb-3">
                    <label for="task_type" class="form-label">
                        Task Type <span class="text-danger">*</span>
                    </label>
                    
                    @if($task_type == "select")
                    <select name="task_type" id="task_type"
                        class="form-select rounded-3 @error('task_type') is-invalid @enderror"
                        required>
                        <option value="">Select Task Type</option>
                        <option value="Report" {{ old('task_type') == 'Report' ? 'selected' : '' }}>Report</option>
                        <option value="Meeting" {{ old('task_type') == 'Meeting' ? 'selected' : '' }}>Meeting</option>
                        <option value="Training" {{ old('task_type') == 'Training' ? 'selected' : '' }}>Training</option>
                        <option value="Follow-up" {{ old('task_type') == 'Follow-up' ? 'selected' : '' }}>Follow-up</option>
                        <option value="Documentation" {{ old('task_type') == 'Documentation' ? 'selected' : '' }}>Documentation</option>
                        <option value="Resignation" {{ old('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') }}">
                    @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 for the attachments array --}}
                    @error('attachments')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror

                    {{-- Error for individual files --}}
                    @error('attachments.*')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Submit -->
                <div class="d-flex justify-content-end mt-3">
                    <button type="submit" class="btn btn-success px-4">
                        <i class="fas fa-save me-2"></i> Save Task
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        $('.select2').select2({
            allowClear: true,
            width: '100%'
        });
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const assignToMeCheckbox = document.getElementById('assign_to_me');
        const assignStaffWrapper = document.getElementById('assign-staff-wrapper');

        function toggleAssignStaff() {
            if (assignToMeCheckbox.checked) {
                assignStaffWrapper.style.display = 'none';
                assignToMeCheckbox.value = '1';
                document.getElementById('staff_id').value = '';
            } else {
                assignStaffWrapper.style.display = 'block';
            }
        }
        toggleAssignStaff();
        assignToMeCheckbox.addEventListener('change', toggleAssignStaff);
    });
</script>
@endpush