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

@section('content')
<ul class="nav nav-tabs">
    @foreach ($service->sections as $section)
    <li class="nav-item"><a class='nav-link {{ $loop->first ? current_tab("#items","#section-$section->id") : current_tab("#section-$section->id") }}' data-toggle="tab" href="#section-{{ $section->id }}">{{ $section->title }}</a></li>
    @endforeach
</ul>

<x-dashboard.form.form :action='route("service.availability.update")' method="PATCH" class="tab-content" :with-row="false">
    @foreach ($service->sections as $section)
    <div class='tab-pane fade {{ $loop->first ? current_tab("#items","#section-$section->id") : current_tab("#section-$section->id") }}' id="section-{{ $section->id }}" role="tabpanel">
        <div class="col-12">
            <x-dashboard.form.select :boolean="true" name="sections[{{ $section->id }}][is_available]" :title="__('global.section_visibility')" container-classes='' :value="$section->is_available" />
            <div class="table-responsive">
                <table class="table table-striped table-bordered dt">
                    <thead>
                        <tr>
                            <th>@lang("global.services") </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->items as $item)
                        <tr>
                            <td>{{ $item->title }} </td>
                            <td>
                                <x-dashboard.form.select :boolean="true" name="sections[{{ $section->id }}][items][{{ $item->id }}][is_available]" :title="__('validation.attributes.available')" :with-label="false" container-classes='' :value="$item->pivot?->is_available" />
                            </td>
                            <td>
                                <x-dashboard.form.input type='time' name="sections[{{ $section->id }}][items][{{ $item->id }}][start_time]" :title="__('validation.attributes.start_time')" :with-label="false" container-classes='' :required="false" :value="$item->pivot->start_time?->format('H:i')" />
                            </td>
                            <td>
                                <x-dashboard.form.input type='time' name="sections[{{ $section->id }}][items][{{ $item->id }}][end_time]" :title="__('validation.attributes.end_time')" :with-label="false" container-classes='' :required="false" :value="$item->pivot->end_time?->format('H:i')" />
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

        <x-dashboard.form.button container-classes='' />
    </div>
    @endforeach
</x-dashboard.form.form>

@endsection