@extends('layouts.app')

@section('title', 'Add Time Entry')

@section('content')
<div class="mb-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-1 small text-uppercase">
            <li class="breadcrumb-item"><a href="{{ route('timesheets.index') }}" class="text-decoration-none">Time Tracking</a></li>
            <li class="breadcrumb-item active">Add Time Entry</li>
        </ol>
    </nav>
    <h2 class="h4 mb-0 text-dark fw-bold">Log Time</h2>
</div>

<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body p-5">
                <form action="{{ route('timesheets.store') }}" method="POST" id="timesheetForm">
                    @csrf
                    <div class="row g-4">
                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold text-uppercase">Date *</label>
                            <input type="date" name="date" class="form-control" value="{{ date('Y-m-d') }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold text-uppercase">User *</label>
                            <select name="user_id" class="form-select" required>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}" {{ $user->id == auth()->id() ? 'selected' : '' }}>{{ $user->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold text-uppercase">Project *</label>
                            <select name="project_id" id="project_id" class="form-select" required>
                                <option value="">Select Project</option>
                                @foreach($projects as $project)
                                    <option value="{{ $project->id }}">{{ $project->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold text-uppercase">Task *</label>
                            <select name="task_id" id="task_id" class="form-select" required disabled>
                                <option value="">Select Task</option>
                            </select>
                            <div class="form-text small" id="taskHint">Please select a project first.</div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold text-uppercase">Hours *</label>
                            <div class="input-group">
                                <span class="input-group-text bg-white"><i class="fas fa-clock text-muted"></i></span>
                                <input type="number" name="hours" class="form-control" step="0.01" min="0.01" placeholder="e.g. 2.50" required>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold text-uppercase">Status *</label>
                            <select name="status" class="form-select" required>
                                <option value="unbilled" selected>Unbilled</option>
                                <option value="billed">Billed</option>
                            </select>
                        </div>

                        <div class="col-12">
                            <label class="form-label small text-muted fw-bold text-uppercase">Description</label>
                            <textarea name="description" class="form-control" rows="3" placeholder="What did you work on?"></textarea>
                        </div>

                        <div class="col-12 pt-3 border-top d-flex justify-content-end gap-2">
                            <a href="{{ route('timesheets.index') }}" class="btn btn-light px-4 fw-bold border text-muted">Cancel</a>
                            <button type="submit" class="btn btn-primary px-5 fw-bold shadow-sm">Save Entry</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const projectSelect = document.getElementById('project_id');
    const taskSelect = document.getElementById('task_id');
    const taskHint = document.getElementById('taskHint');

    // Project -> Task Data Mapping
    const projectTasks = @json($projects->keyBy('id'));

    projectSelect.addEventListener('change', function() {
        const projectId = this.value;
        taskSelect.innerHTML = '<option value="">Select Task</option>';
        
        if (projectId && projectTasks[projectId]) {
            const tasks = projectTasks[projectId].tasks;
            
            if (tasks && tasks.length > 0) {
                tasks.forEach(task => {
                    const option = document.createElement('option');
                    option.value = task.id;
                    option.textContent = task.name;
                    taskSelect.appendChild(option);
                });
                taskSelect.disabled = false;
                taskHint.style.display = 'none';
            } else {
                taskSelect.disabled = true;
                taskHint.textContent = 'No tasks found for this project.';
                taskHint.style.display = 'block';
                taskHint.classList.add('text-danger');
            }
        } else {
            taskSelect.disabled = true;
            taskHint.textContent = 'Please select a project first.';
            taskHint.style.display = 'block';
            taskHint.classList.remove('text-danger');
        }
    });

    // Simple Form Validation Feedback
    const form = document.getElementById('timesheetForm');
    form.addEventListener('submit', function(event) {
        if (!form.checkValidity()) {
            event.preventDefault();
            event.stopPropagation();
        }
        form.classList.add('was-validated');
    }, false);
});
</script>
@endsection