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

@section('content')
<ul class="nav nav-tabs">
    @foreach ($spa->sections as $section)
    <li class="nav-item"><a class='nav-link {{ $loop->first ? current_tab("#sitems","#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("spa.sitems.availability.update")' method="PATCH" class="tab-content" :with-row="false">
    @foreach ($spa->sections as $section)
    <div class='tab-pane fade {{ $loop->first ? current_tab("#sitems","#section-$section->id") : current_tab("#section-$section->id") }}' id="section-{{ $section->id }}" role="tabpanel">
        <div class="col-12">
            <x-dashboard.form.select name="sections[{{ $section->id }}][is_available]" :boolean="true" :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("validation.attributes.sitems") </th>
                            <th>@lang("validation.attributes.available")</th>
                            <th>@lang("global.manage_reservations_times")</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($section->sitems as $sitem)
                        <tr>
                            <td>{{ $sitem->title }} </td>
                            <td>
                                <x-dashboard.form.select name="sections[{{ $section->id }}][sitems][{{ $sitem->id }}][is_available]" :boolean="true" :title="__('validation.attributes.available')" :with-label="false" container-classes='' :value="$sitem->pivot?->is_available" />
                            </td>
                            <td>
                                <button class="btn btn-success" type="button" data-toggle="modal" data-target="#workingTimes-{{ $section->id }}-{{$sitem->id}}">
                                    @lang('global.manage_times')
                                </button>

                                <x-bootstrap.modal class="sitemWorkingTimesModal" id="workingTimes-{{ $section->id }}-{{$sitem->id}}" content-type='' width="xl" :title="__('global.manage_times')">

                                    <h4 class="card-title mb-3">
                                        <button class="btn btn-success addSitemWorkingTimesButton" data-working-times-max-index="{{ count($sitem->working_times_grouped_by_time) }}" data-section="{{ $section->id }}" data-sitem="{{$sitem->id}}">
                                            <i class="las la-plus-circle"></i> {{__("global.add")}}
                                        </button>
                                    </h4>

                                    <div class="table-responsive my-3">
                                        <table class="table table-striped table-bordered dt">
                                            <thead>
                                                <tr>
                                                    <th>@lang('global.days') </th>
                                                    <th>@lang("validation.attributes.start_time")</th>
                                                    <th>@lang("validation.attributes.end_time")</th>
                                                    <th>@lang("global.actions")</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($sitem->working_times_grouped_by_time as $key => $work_time)
                                                @include('spa.sitems.helpers.working_time',['working_time_index' => $key,'section' => $section->id,'sitem' => $sitem->id])
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </x-bootstrap.modal>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

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

@endsection