@extends('layouts.client')
@section('title', "Day {{ $day }} / Week {{ $week }}")
@push('styles')
<style>
    .meal-bg {
        height: 500px !important;
        width: 100%;
        object-fit: cover;
    }
</style>
@endpush
@section('content')
<div class="row">
    <div class="col-md-4 border-end">
        <button class="btn btn-outline-secondary mb-3" onclick="history.back()">
            ← Back
        </button>
        
        <h4 class="mb-3">Day {{ $day }} <small class="text-muted">/ Week {{ $week }}</small></h4>

        @foreach($meals as $meal)
        <div class="d-flex mb-3 p-2 border meal-item"
            style="cursor: pointer;"
            data-image="{{ asset('storage/' . $meal->image_path) }}"
            data-type="{{ ucfirst($meal->meal_type) }}"
            data-title="{{ $meal->recipe_name }}"
            data-time="{{ $meal->prep_time }}"
            data-description="{{ $meal->description }}"
        >
            <img src="{{ asset('storage/' . $meal->image_path) }}" class="rounded me-3" width="80" height="80" alt="Meal image">
            <div>
                <strong>{{ ucfirst($meal->meal_type) }}</strong>
                <div>{{ $meal->short_description }}</div>
                <div class="text-muted small">{{ $meal->prep_time }} min</div>
            </div>
        </div>
        @endforeach
    </div>

    <div class="col-md-8" id="meal-detail">
        <p class="text-muted">Click on a meal to view full details.</p>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const items = document.querySelectorAll('.meal-item');
    const detail = document.getElementById('meal-detail');

    function renderMeal(item) {
        const image = item.getAttribute('data-image');
        const type = item.getAttribute('data-type');
        const title = item.getAttribute('data-title');
        const prepTime = item.getAttribute('data-time');
        const description = item.getAttribute('data-description');

        detail.innerHTML = `
            <img src="${image}" class="img-fluid meal-bg mb-4" alt="Meal Image">
            <h4>${type} - ${title}</h4>
            <p class="text-muted small pull-right">Preparation Time: ${prepTime} minutes</p>
            <div class="mt-3">${description}</div>
        `;
    }

    items.forEach(item => {
        item.addEventListener('click', () => renderMeal(item));
    });

    // Show the first meal by default
    if (items.length > 0) {
        renderMeal(items[0]);
    }
});
</script>
@endpush