@extends('restaurant.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

    <li class="nav-item"><a class="nav-link {{ current_tab('#qr') }}" data-toggle="tab" href="#qr">@lang("global.manage_qr")</a></li>

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

    @if ($latest_package?->code === 'silver')
    <li class="nav-item"><a class="nav-link pro-feature" data-toggle="tab" href="#tables">{{ $branch->restaurant->activity == 'hotel' ? __('global.rooms') : __('global.tables')}} <span class="text-danger">(PRO)</span></a></li>
    @else
    @can('viewAny', 'App\Models\Table')
    <li class="nav-item"><a class="nav-link {{ current_tab('#tables') }}" data-toggle="tab" href="#tables">{{ $branch->restaurant->activity == 'hotel' ? __('global.rooms') : __('global.tables')}}</a></li>
    @endcan
    @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

    @if ($latest_package?->code === 'silver')
    <li class="nav-item"><a class="nav-link pro-feature" data-toggle="tab" href="#settings">@lang('global.settings') <span class="text-danger">(PRO)</span></a></li>
    @else
    @can('update_settings', $branch)
    <li class="nav-item"><a class="nav-link {{ current_tab('#settings') }}" data-toggle="tab" href="#settings">@lang('global.settings')</a></li>
    @endcan
    @endif

    @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("restaurant.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.input name="code" :required="false" :value="$branch->code" />
            <x-dashboard.form.input name="email" type='email' :required="false" :value="$branch->email" />
            <x-dashboard.form.input name="phone" :required="false" class="intl-tel-input" :value="$branch->phone" />
            <x-dashboard.form.file name="logo" :required="false" :value="$branch->logo" />

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

            <x-dashboard.form.select name="country" id="ajaxSelectCountries" :value="$branch->city->country" />
            <x-dashboard.form.select name="city" id="ajaxSelectCitiesInCountry" :value="$branch->city" />
            <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('website.branches.show',['branch' => $branch->id]) }}">
                <img src="{{ uploads($branch->qr->path) }}?time={{ time() }}" />
            </a>
        </div>

        <x-dashboard.form.form :action="route('restaurant.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

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

            <x-dashboard.form.select id="ajaxSelectMenusInRestaurant" name="menu" class="updateBranchMenuSelect" :value="$branch->menu" container-classes='col-12' data-branch="{{ $branch->id }}" />

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

                <div class="mealsTabs">
                    @include('restaurant.branches.helpers.meals',['branch' => $branch,'menu' =>$branch->menu])
                </div>
            </div>

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

    @if ($latest_package?->code !== 'silver')
    @can('viewAny', 'App\Models\Table')
    <div class="tab-pane fade {{ current_tab('#tables') }}" id="tables" role="tabpanel">
        @can('create', 'App\Models\Table')
        <h4 class="card-title mb-3">
            <a href="{{ route('restaurant.branches.tables.create',['branch' => $branch->id]) }}">
                <button class="btn btn-success">
                    <i class="las la-plus-circle"></i> {{__("global.add")}}
                </button>
            </a>
        </h4>
        @endcan

        <div class="table-responsive">
            <table id="tablesTable" class="table table-striped table-bordered dt">
                <thead>
                    <tr>
                        <th>@lang("validation.attributes.title") </th>
                        <th>@lang("global.options")</th>
                    </tr>
                </thead>
            </table>
        </div>

        <x-bootstrap.modal id="tableQrModal" :with-header="false" content-type='' width="lg" />
    </div>
    @endcan
    @endif

    @can('update_portfolio', $branch)
    <div class="tab-pane fade {{ current_tab('#portfolio') }}" id="portfolio" role="tabpanel">
        <x-dashboard.form.form :action='route("restaurant.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" :required="false" :boolean="true" container-classes='col-12' :value="$branch->settings->show_portfolio" />
            <x-dashboard.form.input name="facebook" :required="false" :value="$branch->portfolio?->facebook" />
            <x-dashboard.form.input name="instagram" :required="false" :value="$branch->portfolio?->instagram" />
            <x-dashboard.form.input name="twitter" :required="false" :value="$branch->portfolio?->twitter" />
            <x-dashboard.form.input name="linkedin" :required="false" :value="$branch->portfolio?->linkedin" />
            <x-dashboard.form.input name="youtube" :required="false" :value="$branch->portfolio?->youtube" />
            <x-dashboard.form.input name="snapchat" :required="false" :value="$branch->portfolio?->snapchat" />
            <x-dashboard.form.input name="tiktok" :required="false" :value="$branch->portfolio?->tiktok" />
            <x-dashboard.form.input name="phone" :required="false" :value="$branch->portfolio?->phone" class="intl-tel-input" />
            <x-dashboard.form.input name="email" type='email' :required="false" :value="$branch->portfolio?->email" />
            <x-dashboard.form.textarea name="about[ar]" :title="__('validation.attributes.about') . ' ( ' . __('global.arabic') . ' )'" :required="false" :value="$branch->portfolio?->about->ar" />
            <x-dashboard.form.textarea name="about[en]" :title="__('validation.attributes.about') . ' ( ' . __('global.english') . ' )'" :required="false" :value="$branch->portfolio?->about->en" />

            <div id="menu" class="col-12">
                <h4 class="mt-3">
                    @lang('global.menu') {{ $branch->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->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->portfolio?->menu_title->en ?? __('global.menu',locale:'en')" />
            <x-dashboard.form.file name="menu_image" :value="$branch->portfolio?->menu_image ?? url(mix('website/branches/portfolio/images/menu.png','assets'))" />
            <x-dashboard.form.select name="menu_is_active" :boolean="true" :value="$branch->portfolio?->menu_is_active ?? true" />

            <div id="services" class="col-12">
                <h4 class="mt-3">
                    {{ $branch->portfolio?->services_title->{$locale} ?? __('global.services') }}
                    <button id="addBranchPortfolioServiceButton" data-services-max-index="{{ count($branch->portfolio?->services ?? []) }}" class="btn btn-success tooltips" title="@lang('global.add')" type="button">
                        <i class="las la-plus-circle"></i>
                    </button>
                </h4>

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

                <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.options")</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($branch->portfolio?->services ?? [] as $index => $service)
                            @include('restaurant.branches.helpers.service',['service' => $service,'service_index' => $index,])
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <div id="advertisments" class="col-12">
                <h4 class="mt-3">
                    @lang('global.advertisments')
                    <button id="addBranchPortfolioAdvertismentButton" data-advertisments-max-index="{{ count($branch->portfolio?->advertisments ?? []) }}" class="btn btn-success tooltips" title="@lang('global.add')" type="button">
                        <i class="las la-plus-circle"></i>
                    </button>
                </h4>

                <div class="table-responsive mt-3">
                    <table class="table table-striped table-bordered dt">
                        <thead>
                            <tr>
                                <th class="w-400px">@lang("validation.attributes.image") <span class="text-danger">*</span></th>
                                <th>@lang("validation.attributes.link")</th>
                                <th>@lang("validation.attributes.start_date")</th>
                                <th>@lang("validation.attributes.end_date")</th>
                                <th>@lang("global.options")</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($branch->portfolio?->advertisments ?? [] as $index => $advertisment)
                            @include('restaurant.branches.helpers.advertisment',['advertisment' => $advertisment,'advertisment_index' => $index,])
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <x-dashboard.form.button />
        </x-dashboard.form.form>
    </div>
    @endcan

    @if ($latest_package?->code !== 'silver')
    @can('update_settings', $branch)
    <div class="tab-pane fade {{ current_tab('#settings') }}" id="settings" role="tabpanel">
        <x-dashboard.form.form :action='route("restaurant.branches.settings.update",["branch" => $branch->id])' method="PATCH">
            <div class="col-12">
                <h4 class="mb-3">@lang('global.general_settings')</h4>
            </div>
            <x-dashboard.form.input name="orders_serial_number" type='number' min='1' :value="$branch->settings->orders_serial_number" />
            <x-dashboard.form.select name="is_interactive_menu" :boolean="true" :value="$branch->settings->is_interactive_menu" />
            <x-dashboard.form.select name="allowed_order_types" :multiple="true" :data-array="['takeaway','inside','delivery']" :name-fn='fn($order_type) => __("global.orders_type.$order_type")' :value="$branch->settings->allowed_order_types" :ajax="false" />
            <x-dashboard.form.select name="show_order_types_input" :boolean="true" :value="$branch->settings->show_order_types_input" />
            <x-dashboard.form.select name="default_order_type" :data-array="['takeaway','inside','delivery']" :name-fn='fn($order_type) => __("global.orders_type.$order_type")' :value="$branch->settings->default_order_type" :ajax="false" />
            <x-dashboard.form.select name="allowed_payment_methods" :help="__('messages.tooltips.branches.e_payment_fees')" :multiple="true" :data-array="$payment_methods" :name-fn='fn($payment_method) => __("global.payment_methods.$payment_method")' :value="$branch->settings->allowed_payment_methods" :ajax="false" />
            <x-dashboard.form.select name="show_payment_methods_input" :boolean="true" :value="$branch->settings->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->default_payment_method" :ajax="false" />
            <x-dashboard.form.select name="show_user_name_input" :boolean="true" :value="$branch->settings->show_user_name_input" />
            <x-dashboard.form.select name="show_user_email_input" :boolean="true" :value="$branch->settings->show_user_email_input" />
            <x-dashboard.form.select name="show_user_phone_input" :boolean="true" :value="$branch->settings->show_user_phone_input" />
            <x-dashboard.form.select name="show_table_input" :boolean="true" :value="$branch->settings->show_table_input" />
            <x-dashboard.form.select name="show_address_input" :boolean="true" :value="$branch->settings->show_address_input" />
            @if (restaurant_admin()->restaurant->activity == 'hotel')
            <x-dashboard.form.select name="show_persons_input" :boolean="true" :value="$branch->settings->show_persons_input" />
            @endif
            <x-dashboard.form.select name="show_rating" :boolean="true" :value="$branch->settings->show_rating" />
            <x-dashboard.form.select name="enable_order_cancellation_on_status" :data-array="['pending']" :name-fn='fn($order_status) => __("global.$order_status")' :multiple="true" :required="false" :value="$branch->settings->enable_order_cancellation_on_status" :ajax="false" />
            <x-dashboard.form.select name="enable_adding_meal_to_order_on_status" :data-array="['pending']" :name-fn='fn($order_status) => __("global.$order_status")' :multiple="true" :required="false" :value="$branch->settings->enable_adding_meal_to_order_on_status" :ajax="false" />
            <x-dashboard.form.select name="enable_call_waiter" :boolean="true" :value="$branch->settings->enable_call_waiter" />
            <x-dashboard.form.select name="send_otp" :boolean="true" :value="$branch->settings->send_otp" />
            <x-dashboard.form.textarea name="alert_message[ar]" :required="false" :title="__('validation.attributes.alert_message') . ' ( ' . __('global.arabic') . ' )'" :value="$branch->settings->alert_message?->ar" />
            <x-dashboard.form.textarea name="alert_message[en]" :required="false" :title="__('validation.attributes.alert_message') . ' ( ' . __('global.english') . ' )'" :value="$branch->settings->alert_message?->en" />

            <div id="tips" class="col-12">
                <h4 class="mt-3">
                    @lang('global.tips')
                    <button id="addBranchSettingsTipsButton" data-tips-max-index="{{ count($branch->settings->tips ?? []) }}" class="btn btn-success tooltips" title="@lang('global.add')" type="button">
                        <i class="las la-plus-circle"></i>
                    </button>
                </h4>

                <div class="row">
                    <x-dashboard.form.select name="show_tips" :boolean="true" :value="$branch->settings->show_tips" />
                    <x-dashboard.form.select name="show_other_amount_tips_input" :boolean="true" :value="$branch->settings->show_other_amount_tips_input" />
                </div>

                <div class="table-responsive mt-3">
                    <table class="table table-striped table-bordered dt">
                        <thead>
                            <tr>
                                <th>@lang("validation.attributes.amount")</th>
                                <th>@lang("global.options")</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($branch->settings->tips ?? [] as $index => $tip)
                            @include('restaurant.branches.helpers.tip',['tip' => $tip,'tip_index' => $index])
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <x-dashboard.form.button />
        </x-dashboard.form.form>
    </div>
    @endcan
    @endif

    @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("restaurant.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]" @if ($branch->settings->working_times->{$day}->open_24_hours) checked @endif 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]" @if ($branch->settings->working_times->{$day}->holiday) checked @endif 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>
@endsection