@extends('layouts.app')
@section('title', 'Nutrition')

@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">Nutrition
        <small class="tw-text-sm md:tw-text-base tw-text-gray-700 tw-font-semibold">Nutrition Tracking</small>
    </h1>
</section>

<!-- Main content -->
<section class="content">
    <form method="POST" action="{{ route('nutrition.store') }}">
        @csrf

        <!-- Member Selector -->
        <div class="tw-mb-4">
            <label class="tw-block tw-font-semibold tw-mb-1" for="member_id">Member</label>
            <select name="member_id" id="member_id" class="tw-w-full tw-border tw-rounded tw-p-2" required>
                <option value="">-- Select Member --</option>
                @foreach($members as $member)
                    <option value="{{ $member->contact_id }}">{{ $member->contact_id }} - {{ $member->name }}</option>
                @endforeach
            </select>
        </div>

        <!-- Date Range -->
        <div class="tw-flex tw-gap-4 tw-mb-4">
            <div class="tw-flex-1">
                <label class="tw-block tw-font-semibold tw-mb-1">From Date:</label>
                <input type="date" name="from_date" class="tw-w-full tw-border tw-rounded tw-p-2" required>
            </div>
            <div class="tw-flex-1">
                <label class="tw-block tw-font-semibold tw-mb-1">To Date:</label>
                <input type="date" name="to_date" class="tw-w-full tw-border tw-rounded tw-p-2" required>
            </div>
        </div>

        <!-- Nutrition Table -->
        <div class="tw-overflow-x-auto">
            <table class="tw-min-w-full tw-table-auto tw-border tw-text-sm">
                <thead>
                    <tr class="tw-bg-gray-200">
                        <th class="tw-border tw-p-2">Day</th>
                        <th class="tw-border tw-p-2">Breakfast</th>
                        <th class="tw-border tw-p-2">Mid Morning Snacks</th>
                        <th class="tw-border tw-p-2">Lunch</th>
                        <th class="tw-border tw-p-2">Afternoon Snacks</th>
                        <th class="tw-border tw-p-2">Dinner</th>
                        <th class="tw-border tw-p-2">Remarks</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (['Saturday','Sunday','Monday','Tuesday','Wednesday','Thursday','Friday'] as $day)
                        <tr>
                            <td class="tw-border tw-p-2">{{ $day }}</td>
                            <input type="hidden" name="nutrition[{{ $day }}][day]" value="{{ $day }}">
                            <td class="tw-border tw-p-2">
                                <input type="text" name="nutrition[{{ $day }}][breakfast]" class="tw-w-full tw-p-1 tw-border tw-rounded">
                            </td>
                            <td class="tw-border tw-p-2">
                                <input type="text" name="nutrition[{{ $day }}][mid_morning_snacks]" class="tw-w-full tw-p-1 tw-border tw-rounded">
                            </td>
                            <td class="tw-border tw-p-2">
                                <input type="text" name="nutrition[{{ $day }}][lunch]" class="tw-w-full tw-p-1 tw-border tw-rounded">
                            </td>
                            <td class="tw-border tw-p-2">
                                <input type="text" name="nutrition[{{ $day }}][afternoon_snacks]" class="tw-w-full tw-p-1 tw-border tw-rounded">
                            </td>
                            <td class="tw-border tw-p-2">
                                <input type="text" name="nutrition[{{ $day }}][dinner]" class="tw-w-full tw-p-1 tw-border tw-rounded">
                            </td>
                            <td class="tw-border tw-p-2">
                                <input type="text" name="nutrition[{{ $day }}][remarks]" class="tw-w-full tw-p-1 tw-border tw-rounded">
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Submit Button -->
        <div class="tw-mt-4">
            <button type="submit" class="tw-bg-blue-600 tw-text-white tw-px-4 tw-py-2 tw-rounded hover:tw-bg-blue-700">
                Save Nutrition Data
            </button>
        </div>
    </form>
</section>
<!-- /.content -->
@endsection

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        $('#member_id').select2({
            placeholder: '-- Select Member --',
            allowClear: true,
            width: '100%'
        });
    });
</script>