@extends('spa.layouts.index')

@section('content')
    <ul class="nav nav-tabs">
        @can('update_general', $branch)
            <li class="nav-item"><a class="nav-link {{ current_tab('#general') }}" data-toggle="tab" href="#general">@lang('global.general_information')</a></li>
        @endcan

        @can('update_qr', $branch)
            <li class="nav-item"><a class="nav-link {{ current_tab('#qr') }}" data-toggle="tab" href="#qr">@lang('global.qr_information')</a></li>
        @endcan

        @can('update_orders_settings', $branch)
            <li class="nav-item"><a class="nav-link {{ current_tab('#orders') }}" data-toggle="tab" href="#orders">@lang('global.reservations_settings')</a></li>
        @endcan

        @if (spa_admin()->can('updateAny', 'App\Models\Sitem') || spa_admin()->can('updateAny', 'App\Models\SpaSection'))
            <li class="nav-item"><a class="nav-link {{ current_tab('#sitems', '#section-*') }}" data-toggle="tab" href="#sitems">@lang('global.manage_reservations_times')</a></li>
        @endif

        @can('update_portfolio', $branch)
            <li class="nav-item"><a class="nav-link {{ current_tab('#portfolio') }}" data-toggle="tab" href="#portfolio">@lang('global.portfolio')</a></li>
        @endcan

        @can('update_working_times', $branch)
            <li class="nav-item"><a class="nav-link {{ current_tab('#working_times') }}" data-toggle="tab" href="#working_times">@lang('global.working_times')</a></li>
        @endcan
    </ul>

    <div class="tab-content">
        @can('update_general', $branch)
            <div class="tab-pane fade {{ current_tab('#general') }}" id="general" role="tabpanel">
                <x-dashboard.form.form :action="route('spa.branches.general.update', ['branch' => $branch->id])" method="PATCH">
                    <div class="col-12">
                        <h4 class="mb-3">@lang('global.general_information')</h4>
                    </div>

                    <x-dashboard.form.input name="title[ar]" :title="__('validation.attributes.title') . ' ( ' . __('global.arabic') . ' )'" :value="$branch->getTranslation('title', 'ar')" />
                    <x-dashboard.form.input name="title[en]" :title="__('validation.attributes.title') . ' ( ' . __('global.english') . ' )'" :value="$branch->getTranslation('title', 'en')" />
                    <x-dashboard.form.textarea name="description[ar]" :required="false" :title="__('validation.attributes.description') . ' ( ' . __('global.arabic') . ' )'" :value="$branch->getTranslation('description', 'ar')" />
                    <x-dashboard.form.textarea name="description[en]" :required="false" :title="__('validation.attributes.description') . ' ( ' . __('global.english') . ' )'" :value="$branch->getTranslation('description', 'en')" />
                    <x-dashboard.form.select name="menu_is_active" :boolean='true' :value="$branch->settings->portfolio->menu->is_active ?? true" />
                    <x-dashboard.form.input name="responsible_name" :required="false" :value="$branch->responsible_name" />
                    <x-dashboard.form.input name="phone" :required="false" class="intl-tel-input" :value="$branch->phone" />
                    <x-dashboard.form.input name="email" type='email' :value="$branch->email" />
                    <x-dashboard.form.select id="ajaxSelectBuildings" name="building" :required="false" :value="$branch->floor?->building" />
                    <x-dashboard.form.select id="ajaxSelectFloors" name="floor" :required="false" :value="$branch->floor" />
                    <x-dashboard.form.input name="color" type="color" :value="$branch->color" />
                    <x-dashboard.form.file name="logo" :required="!$branch->logo" :value="$branch->logo()" />
                    <x-dashboard.form.input name="link" type='url' :required="false" :value="$branch->link" />

                    <div class="col-12">
                        <h4 class="my-3">@lang('global.location')</h4>
                    </div>

                    <x-dashboard.form.input class="ltr" name="latitude" readonly :requried="false" :hidden="true" :tooltip="__('messages.tooltips.click_on_map_to_fill')" :value="$branch->latitude" />
                    <x-dashboard.form.input class="ltr" name="longitude" readonly :requried="false" :hidden="true" :tooltip="__('messages.tooltips.click_on_map_to_fill')" :value="$branch->longitude" />

                    <div class="col-12">
                        <div class="form-group">
                            <div class="col-12">
                                <div id="map" style="height: 400px;" data-latitude="{{ $branch->latitude }}" data-longitude="{{ $branch->longitude }}" data-with-marker="1"></div>
                            </div>
                        </div>
                    </div>
                    <x-dashboard.form.button />
                </x-dashboard.form.form>

            </div>
        @endcan

        @can('update_qr', $branch)
            <div class="tab-pane fade {{ current_tab('#qr') }}" id="qr" role="tabpanel">
                <div class="text-center my-4">
                    <a href="{{ route('spas.branches.show', ['branch' => $branch->id]) }}">
                        <img src="{{ uploads($branch->qr->path) }}?time={{ time() }}" />
                    </a>
                </div>

                <x-dashboard.form.form :action="route('spa.branches.QR.update', ['branch' => $branch->id])" method="PATCH">
                    @can('update_qr', $branch)
                        <x-dashboard.form.input name="size" type='number' :value="$branch->qr->size" />
                        <x-dashboard.form.select name="style" :data-array="['square', 'dot', 'round']" :name-fn="fn($style) => __('global.qr_styles.' . $style)" :value="$branch->qr->style" :ajax="false" />
                        <x-dashboard.form.select name="eye" :data-array="['square', 'circle']" :name-fn="fn($eye) => __('global.qr_eyes.' . $eye)" :value="$branch->qr->eye" :ajax="false" />
                        <x-dashboard.form.file name="logo" :required="false" :value="$branch->qr->logo" />
                    @endcan

                    <div class="col-12">
                        <div class="form-group">
                            <div class="col-12">
                                @can('update_qr', $branch)
                                    <button class="btn btn-primary" type="submit"><i class="i-Refresh mr-1"></i> @lang('global.refresh') </button>
                                @endcan

                                <a href="{{ uploads($branch->qr->path) }}" download="{{ $branch->title }}-QR.png">
                                    <button class="btn btn-dark" type="button"><i class="i-Download-2 mr-1"></i> @lang('global.download_qr') </button>
                                </a>
                            </div>
                        </div>
                    </div>
                </x-dashboard.form.form>
            </div>
        @endcan

        @if (spa_admin()->can('updateAny', 'App\Models\Sitem') || spa_admin()->can('updateAny', 'App\Models\SpaSection'))
            <div class="tab-pane fade pt-2 {{ current_tab('#sitems', '#section-*') }}" id="sitems" role="tabpanel">
                <ul class="nav nav-tabs">
                    @foreach ($branch->spa->sections()->onlyParents()->get() as $section)
                        <li class="nav-item"><a class='nav-link {{ current_tab('#sitems', "#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('spa.branches.sitems.update', ['branch' => $branch->id])" method="PATCH" class="tab-content" :with-row="false">
                    @foreach ($branch->spa->sections()->onlyParents()->get() as $section)
                        <div class='tab-pane fade {{ current_tab('#sitems', "#section-$section->id", ...$section->children->map(fn($child) => "#section-$child->id")) }}' id="section-{{ $section->id }}" role="tabpanel">
                            @can('updateAny', 'App\Models\SpaSection')
                                <x-dashboard.form.select name="sections[{{ $section->id }}][is_available]" :boolean="true" :title="__('global.section_visibility')" container-classes='' :value="$available_sections->contains($section->id)" />
                                @if ($section->sitems->isNotEmpty())
                                    <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="$sitems_sections[$section->id][$sitem->id]['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="workingTimesModal" 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 addWorkingTimesButton" data-working-times-max-index="{{ count($sitems_sections[$section->id][$sitem->id]['working_times_grouped_by_time']) }}" data-section="{{ $section->id }}" data-sitem="{{ $sitem->id }}" data-branch="{{ $branch->id }}">
                                                                        <i class="las la-plus-circle"></i> @lang('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 ($sitems_sections[$section->id][$sitem->id]['working_times_grouped_by_time'] as $key => $work_time)
                                                                                @include('spa.branches.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>
                                @endif
                            @endcan

                            @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-2 {{ 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="$available_sections->contains($section_child->id)" />
                                        @if ($section_child->sitems->isNotEmpty())
                                            <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_child->sitems as $sitem)
                                                            <tr>
                                                                <td>{{ $sitem->title }} </td>
                                                                <td>
                                                                    <x-dashboard.form.select name="sections[{{ $section_child->id }}][sitems][{{ $sitem->id }}][is_available]" :boolean="true" :title="__('validation.attributes.available')" :with-label="false" container-classes='' :value="$sitems_sections[$section_child->id][$sitem->id]['is_available']" />
                                                                </td>
                                                                <td>
                                                                    <button class="btn btn-success" type="button" data-toggle="modal" data-target="#workingTimes-{{ $section_child->id }}-{{ $sitem->id }}">
                                                                        @lang('global.manage_times')
                                                                    </button>

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

                                                                        <h4 class="card-title mb-3">
                                                                            <button class="btn btn-success addWorkingTimesButton" data-working-times-max-index="{{ count($sitems_sections[$section_child->id][$sitem->id]['working_times_grouped_by_time']) }}" data-section="{{ $section_child->id }}" data-sitem="{{ $sitem->id }}" data-branch="{{ $branch->id }}">
                                                                                <i class="las la-plus-circle"></i> @lang('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 ($sitems_sections[$section_child->id][$sitem->id]['working_times_grouped_by_time'] as $key => $work_time)
                                                                                        @include('spa.branches.helpers.working_time', ['working_time_index' => $key, 'section' => $section_child->id, 'sitem' => $sitem->id])
                                                                                    @endforeach
                                                                                </tbody>
                                                                            </table>
                                                                        </div>
                                                                    </x-bootstrap.modal>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        @endif
                                    </div>
                                @endforeach
                            @endif

                        </div>
                    @endforeach

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

        @can('update_portfolio', $branch)
            <div class="tab-pane fade {{ current_tab('#portfolio') }}" id="portfolio" role="tabpanel">
                <x-dashboard.form.form :action="route('spa.branches.portfolio.update', ['branch' => $branch->id])" method="PATCH">
                    <div class="col-12">
                        <h4 class="mb-3">@lang('global.general_information')</h4>
                    </div>
                    <x-dashboard.form.select name="show_portfolio" :boolean="true" container-classes='col-12' :value="$branch->settings->portfolio->is_active" />
                    <x-dashboard.form.input name="facebook" :required="false" :value="$branch->settings->portfolio->facebook" />
                    <x-dashboard.form.input name="instagram" :required="false" :value="$branch->settings->portfolio->instagram" />
                    <x-dashboard.form.input name="twitter" :required="false" :value="$branch->settings->portfolio->twitter" />
                    <x-dashboard.form.input name="linkedin" :required="false" :value="$branch->settings->portfolio->linkedin" />
                    <x-dashboard.form.input name="youtube" :required="false" :value="$branch->settings->portfolio->youtube" />
                    <x-dashboard.form.input name="snapchat" :required="false" :value="$branch->settings->portfolio->snapchat" />
                    <x-dashboard.form.input name="tiktok" :required="false" :value="$branch->settings->portfolio->tiktok" />
                    <x-dashboard.form.input name="phone" :required="false" :value="$branch->settings->portfolio->phone" class="intl-tel-input" />
                    <x-dashboard.form.input name="email" type='email' :required="false" :value="$branch->settings->portfolio->email" />
                    <x-dashboard.form.textarea name="about[ar]" :title="__('validation.attributes.about') . ' ( ' . __('global.arabic') . ' )'" :required="false" :value="$branch->settings->portfolio->about->ar" />
                    <x-dashboard.form.textarea name="about[en]" :title="__('validation.attributes.about') . ' ( ' . __('global.english') . ' )'" :required="false" :value="$branch->settings->portfolio->about->en" />

                    <div class="col-12">
                        <h4 class="mb-3">{{ $branch->settings->portfolio->menu->title->{$locale} ?? __('global.menu') }}</h4>
                    </div>

                    <x-dashboard.form.input name="menu_title[ar]" :title="__('validation.attributes.menu_title') . ' ( ' . __('global.arabic') . ' )'" :value="$branch->settings->portfolio->menu->title->ar ?? __('global.menu', locale: 'ar')" />
                    <x-dashboard.form.input name="menu_title[en]" :title="__('validation.attributes.menu_title') . ' ( ' . __('global.english') . ' )'" :value="$branch->settings->portfolio->menu->title->en ?? __('global.menu', locale: 'en')" />
                    <x-dashboard.form.file name="menu_image" :value="$branch->settings->portfolio->menu->image ?? url(mix('website/spa/portfolio/images/menu.png', 'assets'))" />
                    <x-dashboard.form.select name="menu_is_active" :boolean='true' :value="$branch->settings->portfolio->menu->is_active ?? true" />

                    <div class="col-12">
                        <h4 class="mb-3">{{ $branch->settings->portfolio->services_title->{$locale} }}</h4>
                    </div>

                    <div id="services" class="col-12">
                        <div class="row">
                            <x-dashboard.form.input name="services_title[ar]" :title="__('validation.attributes.services_title') . ' ( ' . __('global.arabic') . ' )'" :value="$branch->settings->portfolio->services_title->ar" />
                            <x-dashboard.form.input name="services_title[en]" :title="__('validation.attributes.services_title') . ' ( ' . __('global.english') . ' )'" :value="$branch->settings->portfolio->services_title->en" />
                        </div>

                        <h4 class="mt-3">
                            <button id="addPortfolioServiceButton" data-services-max-index="{{ count($branch->settings->portfolio->services) }}" class="btn btn-success" type="button" data-url="{{ route('spa.branches.service') }}">
                                <i class="las la-plus-circle"></i> @lang('global.add')
                            </button>
                        </h4>

                        <div class="table-responsive mt-3">
                            <table class="table table-striped table-bordered dt">
                                <thead>
                                    <tr>
                                        <th>@lang('validation.attributes.title') (@lang('global.arabic')) <span class="text-danger">*</span> </th>
                                        <th>@lang('validation.attributes.title') (@lang('global.english')) <span class="text-danger">*</span> </th>
                                        <th>@lang('validation.attributes.link') <span class="text-danger">*</span></th>
                                        <th class="w-400px">@lang('validation.attributes.image') <span class="text-danger">*</span></th>
                                        <th>@lang('global.actions')</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($branch->settings->portfolio->services as $index => $service)
                                        @include('spa.branches.helpers.service', ['service' => $service, 'service_index' => $index])
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <x-dashboard.form.button />
                </x-dashboard.form.form>
            </div>
        @endcan

        @can('update_orders_settings', $branch)
            <div class="tab-pane fade {{ current_tab('#orders') }}" id="orders" role="tabpanel">
                <x-dashboard.form.form :action="route('spa.branches.orders.update', ['branch' => $branch->id])" method="PATCH">
                    <x-dashboard.form.select name="is_interactive_menu" :boolean="true" :value="$branch->settings->orders->is_active" />
                    <x-dashboard.form.input name="orders_serial_number" type='number' min='1' :value="$branch->settings->orders->serial_number" />
                    <x-dashboard.form.select name="allowed_payment_methods" :help="__('messages.tooltips.spas.e_payment_fees')" :multiple="true" :data-array="$payment_methods" :name-fn='fn($payment_method) => __("global.payment_methods.$payment_method")' :value="$branch->settings->orders->allowed_payment_methods" :ajax="false" />
                    <x-dashboard.form.select name="show_payment_methods_input" :boolean="true" :value="$branch->settings->orders->show_payment_methods_input" />
                    <x-dashboard.form.select name="default_payment_method" :data-array="$payment_methods" :name-fn='fn($payment_method) => __("global.payment_methods.$payment_method")' :value="$branch->settings->orders->default_payment_method" :ajax="false" />
                    <x-dashboard.form.select name="show_user_name_input" :boolean="true" :value="$branch->settings->orders->show_name_input" />
                    <x-dashboard.form.select name="show_user_phone_input" :boolean="true" :value="$branch->settings->orders->show_phone_input" />
                    <x-dashboard.form.select name="show_rating" :boolean="true" :value="$branch->settings->orders->show_rating" />

                    <x-dashboard.form.textarea name="alert_message[ar]" :required="false" :title="__('validation.attributes.alert_message') . ' ( ' . __('global.arabic') . ' )'" :value="$branch->settings->orders->alert_message?->ar" />
                    <x-dashboard.form.textarea name="alert_message[en]" :required="false" :title="__('validation.attributes.alert_message') . ' ( ' . __('global.english') . ' )'" :value="$branch->settings->orders->alert_message?->en" />
                    <x-dashboard.form.button />
                </x-dashboard.form.form>
            </div>
        @endcan

        @can('update_working_times', $branch)
            <div class="tab-pane fade {{ current_tab('#working_times') }}" id="working_times" role="tabpanel">
                <x-dashboard.form.form :action="route('spa.branches.working_times.update', ['branch' => $branch->id])" method="PATCH">
                    @foreach ($days as $day)
                        <x-dashboard.form.input :required="false" data-day="{{ $day }}" name="working_times[{{ $day }}][shifts][0][opening_time]" type='time' :title="__('validation.attributes.opening_time') . ' (' . __('global.' . $day) . ')'" container-classes="col-lg-3 col-12" :value="$branch->settings->working_times->{$day}->shifts[0]->opening_time" />
                        <x-dashboard.form.input :required="false" data-day="{{ $day }}" name="working_times[{{ $day }}][shifts][0][closing_time]" type='time' :title="__('validation.attributes.closing_time') . ' (' . __('global.' . $day) . ')'" container-classes="col-lg-3 col-12" :value="$branch->settings->working_times->{$day}->shifts[0]->closing_time" />
                        <x-dashboard.form.input :required="false" data-day="{{ $day }}" name="working_times[{{ $day }}][shifts][1][opening_time]" type='time' :title="__('validation.attributes.opening_time') . ' (' . __('global.' . $day) . ')'" container-classes="col-lg-3 col-12" :value="$branch->settings->working_times->{$day}->shifts[1]->opening_time" />
                        <x-dashboard.form.input :required="false" data-day="{{ $day }}" name="working_times[{{ $day }}][shifts][1][closing_time]" type='time' :title="__('validation.attributes.closing_time') . ' (' . __('global.' . $day) . ')'" container-classes="col-lg-3 col-12" :value="$branch->settings->working_times->{$day}->shifts[1]->closing_time" />

                        <div class="col-12 d-flex justify-content-center gap-2">
                            <label class="checkbox checkbox-success offset-1 mb-0 mt-3">
                                <input type="checkbox" data-day="{{ $day }}" name="working_times[{{ $day }}][open_24_hours]" @checked($branch->settings->working_times->{$day}->open_24_hours) class='open-24-hours-input'>
                                <span>@lang('validation.attributes.open_24_hours')</span>
                                <span class="checkmark"></span>
                            </label>

                            <label class="checkbox checkbox-success mb-0 mt-3">
                                <input type="checkbox" data-day="{{ $day }}" name="working_times[{{ $day }}][holiday]" @checked($branch->settings->working_times->{$day}->holiday) class='holiday-input'>
                                <span>@lang('validation.attributes.holiday')</span>
                                <span class="checkmark"></span>
                            </label>
                        </div>

                        <div class="col-12">
                            <hr class="my-4">
                        </div>
                    @endforeach

                    <x-dashboard.form.button />
                </x-dashboard.form.form>
            </div>
        @endcan
    </div>

    <x-bootstrap.modal id="QrModal" :with-header="false" content-type='' width="lg" />
@endsection