@extends('restaurant.layouts.index', ['without_card' => true])

@section('content')
<ul class="nav nav-tabs">
    @foreach ($sections as $section)
    <li class="nav-item"><a class='nav-link {{ current_tab("#section-$section->id", ...$section->children->map(fn($child) => "#section-$child->id")) }}' data-toggle="tab" href="#section-{{ $section->id }}">{{ $section->title }}</a></li>
    @endforeach
</ul>

<x-dashboard.form.form :action="route('restaurant.availability.update')" method="PATCH" class="tab-content p-0" :with-row="false">
    @foreach ($sections as $section)
    <div class='tab-pane fade {{ current_tab("#section-$section->id", ...$section->children->map(fn($child) => "#section-$child->id")) }}' id="section-{{ $section->id }}" role="tabpanel">
        <div class="col-12 tab-content">
            <x-dashboard.form.select name="sections[{{ $section->id }}][is_available]" :boolean="true" :title="__('global.section_visibility')" container-classes='' :value="$section->is_available" />

            @if ($section->meals->isNotEmpty())
            <div class="table-responsive">
                <table class="table table-striped table-bordered dt">
                    <thead>
                        <tr>
                            <th>@lang('validation.attributes.meals') </th>
                            <th>@lang('validation.attributes.available')</th>
                            <th>@lang('validation.attributes.start_time')</th>
                            <th>@lang('validation.attributes.end_time')</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($section->meals as $meal)
                        <tr>
                            <td>{{ $meal->title }} </td>
                            <td>
                                <x-dashboard.form.select name="sections[{{ $section->id }}][meals][{{ $meal->id }}][is_available]" :boolean="true" :title="__('validation.attributes.available')" :with-label="false" container-classes='' :value="$meal->pivot?->is_available" />
                            </td>
                            <td>
                                <x-dashboard.form.input type='time' name="sections[{{ $section->id }}][meals][{{ $meal->id }}][start_time]" :title="__('validation.attributes.start_time')" :with-label="false" container-classes='' :required="false" :value="$meal->pivot->start_time?->format('H:i')" />
                            </td>
                            <td>
                                <x-dashboard.form.input type='time' name="sections[{{ $section->id }}][meals][{{ $meal->id }}][end_time]" :title="__('validation.attributes.end_time')" :with-label="false" container-classes='' :required="false" :value="$meal->pivot->end_time?->format('H:i')" />
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            @endif

            @if ($section->children->isNotEmpty())
            <ul class="nav nav-tabs">
                @foreach ($section->children as $section_child)
                <li class="nav-item"><a class='nav-link {{ current_tab("#section-$section_child->id") }}' data-toggle="tab" href="#section-{{ $section_child->id }}">{{ $section_child->title }}</a></li>
                @endforeach
            </ul>

            @foreach ($section->children as $section_child)
            <div class='tab-pane fade pt-3 {{ current_tab("#section-$section_child->id") }}' id="section-{{ $section_child->id }}" role="tabpanel">
                <x-dashboard.form.select name="sections[{{ $section_child->id }}][is_available]" :boolean="true" :title="__('global.section_visibility')" container-classes='' :value="$section_child->is_available" />
                <div class="table-responsive">
                    <table class="table table-striped table-bordered dt">
                        <thead>
                            <tr>
                                <th>@lang('validation.attributes.meals') </th>
                                <th>@lang('validation.attributes.available')</th>
                                <th>@lang('validation.attributes.start_time')</th>
                                <th>@lang('validation.attributes.end_time')</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($section_child->meals as $meal)
                            <tr>
                                <td>{{ $meal->title }} </td>
                                <td>
                                    <x-dashboard.form.select name="sections[{{ $section_child->id }}][meals][{{ $meal->id }}][is_available]" :boolean="true" :title="__('validation.attributes.available')" :with-label="false" container-classes='' :value="$meal->pivot?->is_available" />
                                </td>
                                <td>
                                    <x-dashboard.form.input type='time' name="sections[{{ $section_child->id }}][meals][{{ $meal->id }}][start_time]" :title="__('validation.attributes.start_time')" :with-label="false" container-classes='' :required="false" :value="$meal->pivot->start_time?->format('H:i')" />
                                </td>
                                <td>
                                    <x-dashboard.form.input type='time' name="sections[{{ $section_child->id }}][meals][{{ $meal->id }}][end_time]" :title="__('validation.attributes.end_time')" :with-label="false" container-classes='' :required="false" :value="$meal->pivot->end_time?->format('H:i')" />
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            @endforeach
            @endif
        </div>
        <x-dashboard.form.button container-classes='' />
    </div>
    @endforeach
</x-dashboard.form.form>
@endsection