@extends('admin.layouts.index')

@section('content')
<ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link {{ current_tab('#branches') }}" data-toggle="tab" href="#branches">@lang('global.branches')</a></li>
</ul>

<div class="tab-content pb-0">
    <div class="tab-pane fade {{ current_tab('#branches') }}" id="branches" role="tabpanel">
        <x-dashboard.form.form :action='route("admin.clinics.branches_services",["clinic" => $clinic->id])' method="PATCH" class="tab-content">
            <div class="table-responsive">
                <table class="table table-striped table-bordered dt">
                    <thead>
                        <tr>
                            <th class="w-200px">@lang("validation.attributes.title") </th>
                            <th class="w-500px">@lang("validation.attributes.services") </th>
                            <th class="w-200px">@lang("validation.attributes.is_otp_active") </th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($clinic->branches as $branch)
                        <tr>
                            <td>{{ $branch->title }}</td>
                            <td>
                                <x-dashboard.form.select name="branches[{{$branch->id}}][services]" :multiple="true" :required='false' :data-array="['restaurants','laundries','services','spas','channels','rooms','survey'/* ,'pre_checkin' */]" :name-fn="fn($service) => __('global.'.$service)" container-classes='col-11' :with-label="false" :value="$branch->settings->services" :ajax="false" />
                            </td>
                            <td>
                                <x-dashboard.form.select name="branches[{{$branch->id}}][is_otp_active]" :boolean="true" :value="$branch->settings->orders->is_otp_active" container-classes='col-11' :with-label="false" />
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

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

        </x-dashboard.form.form>
    </div>
</div>
@endsection