@extends('layouts.portal')

@section('header_title', 'Daily Report')

@section('content')
<div class="max-w-4xl space-y-8 pb-12">
    <div class="bg-white rounded-[2.5rem] border border-slate-100 shadow-sm overflow-hidden">
        <div class="p-8 md:p-12">
            <div class="mb-10">
                <h3 class="text-2xl font-black text-slate-900 mb-2">Daily Progress</h3>
                <p class="text-slate-500 font-medium">Log your daily work and hours spent.</p>
            </div>

            <form action="{{ route('portal.reports.store') }}" method="POST" class="space-y-8">
                @csrf
                
                <!-- Date & Project -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="space-y-3">
                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400">Reporting Date</label>
                        <input type="date" name="date" required value="{{ date('Y-m-d') }}"
                               class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-portal-primary/10 transition-all outline-none">
                    </div>
                    <div class="space-y-3">
                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400">Project</label>
                        <select name="project_id" required class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-portal-primary/10 transition-all outline-none">
                            <option value="">Select Project</option>
                            @foreach($projects as $project)
                            <option value="{{ $project->id }}">{{ $project->title }}</option>
                            @endforeach
                            @if($projects->isEmpty())
                            <option value="">No Active Assignments</option>
                            @endif
                        </select>
                    </div>
                </div>

                <!-- Effort -->
                <div class="space-y-3">
                    <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400">Hours Worked</label>
                    <div class="flex items-center space-x-4">
                        <input type="number" name="hours_spent" required step="0.5" value="8" min="0" max="24"
                               class="w-32 px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-bold text-slate-900 focus:ring-4 focus:ring-portal-primary/10 transition-all outline-none">
                        <p class="text-xs text-slate-400 font-medium italic">Standard working shift is 8.0 hours.</p>
                    </div>
                </div>

                <!-- Descriptive Content -->
                <div class="space-y-8">
                    <div class="space-y-3">
                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400">Tasks Completed</label>
                        <textarea name="tasks_completed" rows="4" required placeholder="What objectives did you complete today?" 
                                  class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-medium text-slate-600 focus:ring-4 focus:ring-portal-primary/10 transition-all outline-none resize-none"></textarea>
                    </div>
                    
                    <div class="space-y-3">
                        <label class="block text-[10px] font-black uppercase tracking-widest text-slate-400">Blockers / Issues</label>
                        <textarea name="blockers" rows="3" placeholder="Identify any issues preventing progress (Leave blank if none)..." 
                                  class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-medium text-slate-600 focus:ring-4 focus:ring-portal-primary/10 transition-all outline-none resize-none"></textarea>
                    </div>
                </div>

                <div class="pt-8 border-t border-slate-50 flex items-center justify-end">
                    <button type="submit" class="px-10 py-4 bg-slate-900 text-white font-black rounded-2xl hover:bg-slate-800 transition-all shadow-xl shadow-slate-200">
                        Submit Report
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection