126 lines
7.3 KiB
PHP
126 lines
7.3 KiB
PHP
|
<x-app-layout>
|
||
|
|
<section class="bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800">
|
||
|
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8">
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<div>
|
||
|
|
<a href="{{ route('workouts.show', $workout) }}" class="text-sm text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">← {{ __('app.sessions.back_to_workout') }}</a>
|
||
|
|
<h1 class="mt-2 text-2xl sm:text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white">{{ $workout->title }}</h1>
|
||
|
|
<p class="mt-1 text-gray-600 dark:text-gray-300">{{ __('app.sessions.progress') }}: {{ $doneByItemId->where('done', true)->count() }} / {{ $workout->items->count() }}</p>
|
||
|
|
</div>
|
||
|
|
<form method="POST" action="{{ route('sessions.complete', $session) }}" onsubmit="return confirm('{{ __('app.sessions.mark_complete_confirm') }}');">
|
||
|
|
@csrf
|
||
|
|
<button type="submit" class="inline-flex items-center rounded-xl bg-gradient-to-r from-indigo-600 to-fuchsia-600 px-4 py-2 text-sm font-semibold text-white shadow hover:from-indigo-500 hover:to-fuchsia-500" title="{{ __('app.sessions.mark_complete') }}" aria-label="{{ __('app.sessions.mark_complete') }}">{{ __('app.sessions.mark_complete') }}</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8">
|
||
|
|
<div class="rounded-2xl ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-800 p-5">
|
||
|
|
@if($workout->items->count() === 0)
|
||
|
|
<div class="mt-3 rounded-xl border border-dashed border-gray-300 dark:border-gray-700 p-6 text-sm text-gray-600 dark:text-gray-300">{{ __('app.sessions.no_items') }}</div>
|
||
|
|
@else
|
||
|
|
<ul class="mt-1 space-y-3">
|
||
|
|
@foreach($workout->items as $item)
|
||
|
|
@php $si = $doneByItemId->get($item->id); $isDone = $si && $si->done; @endphp
|
||
|
|
<li class="rounded-xl ring-1 ring-gray-200 dark:ring-gray-700 bg-white dark:bg-gray-900 p-4 flex items-start justify-between">
|
||
|
|
<div class="flex items-start gap-3">
|
||
|
|
<form method="POST" action="{{ route('sessions.items.toggle', [$session, $item]) }}" class="session-toggle-form" data-item-id="{{ $item->id }}" data-initial-done="{{ $isDone ? '1' : '0' }}">
|
||
|
|
@csrf
|
||
|
|
@method('PATCH')
|
||
|
|
<button type="submit" class="h-6 w-6 rounded-md border flex items-center justify-center transition-colors duration-150"
|
||
|
|
aria-pressed="{{ $isDone ? 'true' : 'false' }}"
|
||
|
|
title="{{ $isDone ? __('app.sessions.mark_complete') : __('app.sessions.progress') }}">
|
||
|
|
<span class="sr-only">Toggle</span>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4 {{ $isDone ? 'text-white' : 'text-transparent' }}">
|
||
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-7.5 7.5a1 1 0 01-1.414 0l-3-3a1 1 0 111.414-1.414L8.5 12.086l6.793-6.793a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</form>
|
||
|
|
<div>
|
||
|
|
<div class="exercise-title text-base font-semibold {{ $isDone ? 'line-through text-gray-500 dark:text-gray-400' : 'text-gray-900 dark:text-white' }}">{{ $item->exercise->name }}</div>
|
||
|
|
<div class="mt-1 text-sm text-gray-600 dark:text-gray-300">
|
||
|
|
@if($item->sets) {{ $item->sets }} {{ __('app.sessions.sets') }} @endif
|
||
|
|
@if($item->reps) · {{ $item->reps }} {{ __('app.sessions.reps') }} @endif
|
||
|
|
@if($item->weight) · {{ $item->weight }} kg @endif
|
||
|
|
@if($item->rest_seconds) · {{ $item->rest_seconds }}s {{ __('app.sessions.rest') }} @endif
|
||
|
|
</div>
|
||
|
|
@if($item->notes)
|
||
|
|
<div class="mt-2 text-sm text-gray-600 dark:text-gray-300">{{ $item->notes }}</div>
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
@endforeach
|
||
|
|
</ul>
|
||
|
|
@endif
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
@push('scripts')
|
||
|
|
<script>
|
||
|
|
(function(){
|
||
|
|
function updateBtnState(btn, done) {
|
||
|
|
btn.setAttribute('aria-pressed', done ? 'true' : 'false');
|
||
|
|
// Background/border colors
|
||
|
|
if (done) {
|
||
|
|
btn.classList.add('bg-emerald-500','border-emerald-600','text-white');
|
||
|
|
btn.classList.remove('border-gray-300','dark:border-gray-700');
|
||
|
|
} else {
|
||
|
|
btn.classList.remove('bg-emerald-500','border-emerald-600','text-white');
|
||
|
|
btn.classList.add('border-gray-300','dark:border-gray-700');
|
||
|
|
}
|
||
|
|
const icon = btn.querySelector('svg');
|
||
|
|
if (icon) {
|
||
|
|
icon.classList.toggle('text-white', !!done);
|
||
|
|
icon.classList.toggle('text-transparent', !done);
|
||
|
|
}
|
||
|
|
// Also toggle line-through for exercise name in the same item row
|
||
|
|
const row = btn.closest('li');
|
||
|
|
if (row) {
|
||
|
|
const titleEl = row.querySelector('.exercise-title');
|
||
|
|
if (titleEl) {
|
||
|
|
if (done) {
|
||
|
|
titleEl.classList.add('line-through','text-gray-500','dark:text-gray-400');
|
||
|
|
titleEl.classList.remove('text-gray-900','dark:text-white');
|
||
|
|
} else {
|
||
|
|
titleEl.classList.remove('line-through','text-gray-500','dark:text-gray-400');
|
||
|
|
titleEl.classList.add('text-gray-900','dark:text-white');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener('click', function(e){
|
||
|
|
const btn = e.target.closest('.session-toggle-form button[type="submit"]');
|
||
|
|
if (!btn) return;
|
||
|
|
const form = btn.closest('form.session-toggle-form');
|
||
|
|
if (!form) return;
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
// Optimistically toggle UI
|
||
|
|
const wasDone = btn.getAttribute('aria-pressed') === 'true';
|
||
|
|
const next = !wasDone;
|
||
|
|
updateBtnState(btn, next);
|
||
|
|
|
||
|
|
fetch(form.action, {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {
|
||
|
|
'X-Requested-With': 'XMLHttpRequest',
|
||
|
|
'X-CSRF-TOKEN': form.querySelector('input[name="_token"]').value,
|
||
|
|
'Accept': 'text/html',
|
||
|
|
},
|
||
|
|
body: new URLSearchParams(new FormData(form))
|
||
|
|
}).then(function(res){
|
||
|
|
if (!res.ok) throw new Error('Network response was not ok');
|
||
|
|
}).catch(function(){
|
||
|
|
// Revert on error
|
||
|
|
updateBtnState(btn, wasDone);
|
||
|
|
alert('Failed to update. Please try again.');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
@endpush
|
||
|
|
</x-app-layout>
|