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

@section('content')
<!-- Custom Styling (Optional Enhancement) -->
<style>
    .nutrition-header h1 {
        font-size: 2rem;
        font-weight: bold;
        color: #1f2937;
    }

    .nutrition-header small {
        font-size: 0.9rem;
        color: #6b7280;
        font-weight: 500;
    }

    .nutrition-table tbody tr:hover {
        background-color: #f9fafb;
    }

    .nutrition-table tbody tr:nth-child(even) {
        background-color: #f8fafc;
    }
</style>

<!-- Header -->
<section class="nutrition-header tw-text-center tw-mb-8">
    <h1>Nutrition List</h1>
    <small>View Nutrition Records</small>
</section>

<!-- Filter Form -->
<form method="GET" action="{{ route('nutrition.index') }}" class="tw-flex tw-flex-wrap tw-gap-4 tw-justify-center tw-mb-6 tw-p-4 tw-rounded tw-bg-gray-50">
    <div>
        <label for="member_id" class="tw-block tw-font-semibold tw-mb-1">Member</label>
        <select name="member_id" id="member_id" class="tw-w-full tw-border tw-rounded tw-p-2">
            <option value="">-- All Members --</option>
            @foreach($members as $member)
                <option value="{{ $member->contact_id }}" {{ request('member_id') == $member->contact_id ? 'selected' : '' }}>
                    {{ $member->contact_id }} - {{ $member->name }}
                </option>
            @endforeach
        </select>
    </div>

    <div>
        <label for="from_date" class="tw-block tw-font-semibold tw-mb-1">From Date</label>
        <input type="date" name="from_date" id="from_date" value="{{ request('from_date') }}" class="tw-border tw-rounded tw-p-2">
    </div>

    <div>
        <label for="to_date" class="tw-block tw-font-semibold tw-mb-1">To Date</label>
        <input type="date" name="to_date" id="to_date" value="{{ request('to_date') }}" class="tw-border tw-rounded tw-p-2">
    </div>

    <div class="tw-flex tw-items-end tw-gap-2">
        <button type="submit" class="tw-bg-blue-600 tw-text-white tw-px-4 tw-py-2 tw-rounded hover:tw-bg-blue-700">Filter</button>
        <a href="{{ route('nutrition.index') }}" class="text-white tw-px-4 tw-py-2 tw-rounded bg-gray">Reset</a>
        <a href="{{ route('nutrition.report', [
            'member_id' => request('member_id'),
            'from_date' => request('from_date'),
            'to_date' => request('to_date')
        ]) }}" 
        class="tw-bg-red-600 tw-text-white tw-px-4 tw-py-2 tw-rounded hover:tw-bg-red-700"
        target="_blank">
            Print Report
        </a>
    </div>
</form>

<!-- Table Content -->
<section class="tw-overflow-x-auto tw-shadow-sm tw-rounded-lg m-5">
    <table class="nutrition-table tw-w-full tw-table-auto tw-text-sm tw-border-collapse">
        <thead>
            <tr class="tw-bg-gray-200 tw-text-gray-800 tw-uppercase">
                <th class="tw-border tw-px-3 tw-py-2">Member</th>
                <th class="tw-border tw-px-3 tw-py-2">Day</th>
                <th class="tw-border tw-px-3 tw-py-2">Breakfast</th>
                <th class="tw-border tw-px-3 tw-py-2">Mid Morning Snacks</th>
                <th class="tw-border tw-px-3 tw-py-2">Lunch</th>
                <th class="tw-border tw-px-3 tw-py-2">Afternoon Snacks</th>
                <th class="tw-border tw-px-3 tw-py-2">Dinner</th>
                <th class="tw-border tw-px-3 tw-py-2">Remarks</th>
                <th class="tw-border tw-px-3 tw-py-2">From</th>
                <th class="tw-border tw-px-3 tw-py-2">To</th>
            </tr>
        </thead>
        <tbody>
            @forelse($nutritionRecords as $record)
                <tr>
                    <td class="tw-border tw-px-3 tw-py-2">{{ $record->member->name}}</td>
                    <td class="tw-border tw-px-3 tw-py-2">{{ $record->day }}</td>
                    <td class="tw-border tw-px-3 tw-py-2">{{ $record->breakfast }}</td>
                    <td class="tw-border tw-px-3 tw-py-2">{{ $record->mid_morning_snacks }}</td>
                    <td class="tw-border tw-px-3 tw-py-2">{{ $record->lunch }}</td>
                    <td class="tw-border tw-px-3 tw-py-2">{{ $record->afternoon_snacks }}</td>
                    <td class="tw-border tw-px-3 tw-py-2">{{ $record->dinner }}</td>
                    <td class="tw-border tw-px-3 tw-py-2">{{ $record->remarks }}</td>
                    <td class="tw-border tw-px-3 tw-py-2">{{ $record->from_date }}</td>
                    <td class="tw-border tw-px-3 tw-py-2">{{ $record->to_date }}</td>
                </tr>
            @empty
                <tr>
                    <td colspan="8" class="tw-border tw-px-3 tw-py-4 tw-text-center tw-text-gray-500">No nutrition records found.</td>
                </tr>
            @endforelse
        </tbody>
    </table>
    {{-- Pagination links --}}
    <div class="tw-mt-4">
        {{ $nutritionRecords->links() }}
    </div>
</section>
@endsection

<!-- Select2 Enhancement -->
@push('scripts')
<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>
@endpush