<div>
    @if(session()->has('message'))
        <div class="alert alert-success mb-2">{{ session('message') }}</div>
    @endif

    <div class="card bg-base-100 shadow-xl">
        <div class="card-body">
            <h2 class="card-title">{{ __('Progress') }}: {{ $phase->name }}</h2>
            <p class="text-sm opacity-70">{{ $phase->project->name ?? '' }}</p>

            <div class="mt-4">
                <div class="w-full bg-gray-200 rounded-full h-4 mb-2">
                    <div class="bg-primary h-4 rounded-full transition-all duration-500" style="width: {{ $phase->progress_percent }}%"></div>
                </div>
                <p class="text-lg font-bold text-center">{{ $phase->progress_percent }}%</p>
            </div>

            <form wire:submit.prevent="updateProgressManual" class="mt-6 space-y-4">
                <div class="form-control">
                    <label class="label">{{ __('Progress updated') }}</label>
                    <input type="range" min="0" max="100" wire:model.live="progress" class="range range-primary" />
                    <div class="flex justify-between text-xs px-2">
                        <span>0%</span><span>25%</span><span>50%</span><span>75%</span><span>100%</span>
                    </div>
                    <div class="text-center mt-1 font-bold">{{ $progress }}%</div>
                </div>

                <div class="form-control">
                    <label class="label">{{ __('Comment') }} ({{ __('optional') }})</label>
                    <textarea wire:model="comment" rows="3" class="textarea textarea-bordered" placeholder="{{ __('Comment') }}..."></textarea>
                </div>

                <button type="submit" class="btn btn-primary w-full">{{ __('Save progress') }}</button>
            </form>

            @if($phase->progressUpdates->count() > 0)
                <div class="mt-6">
                    <h3 class="font-semibold mb-2">{{ __('History') }}</h3>
                    <div class="space-y-2">
                        @foreach($phase->progressUpdates()->latest()->take(10)->get() as $update)
                            <div class="border rounded p-2 text-sm">
                                <div class="flex justify-between">
                                    <span class="font-medium">{{ $update->progress_percent }}%</span>
                                    <span class="text-xs opacity-60">{{ $update->created_at->diffForHumans() }}</span>
                                </div>
                                @if($update->comment)
                                    <p class="text-xs mt-1">{{ $update->comment }}</p>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </div>

    <div class="mt-4">
        <a href="{{ url()->previous() }}" class="btn btn-outline btn-sm">← {{ __('Back') }}</a>
    </div>
</div>
