@extends('branch.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_channels', $branch)
    <li class="nav-item"><a class="nav-link {{ current_tab('#channels') }}" data-toggle="tab" href="#channels">@lang('global.channels_settings')</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("branch.settings.general.update")' method="PATCH">
            <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="color" type='color' :value="$branch->color" />
            <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.settings')</h4>
            </div>

            <x-dashboard.form.select name="is_login_active" :boolean="true" :value="$branch->settings->orders->is_login_active" />
            <x-dashboard.form.select name="is_otp_active" :boolean="true" :value="$branch->settings->orders->is_otp_active" :disabled="true" :help='!$branch->settings->orders->is_otp_active ? __("messages.info.branches.active_otp") : ""' />

            <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 name="latitude" readonly :requried="false" :hidden="true" :value="$branch->latitude" />
            <x-dashboard.form.input name="longitude" readonly :requried="false" :hidden="true" :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">
        <x-dashboard.form.form :action='route("branch.settings.qr.update")' method="PATCH">
            <div class="text-center my-4 col-12">
                <a href="{{ route('branches.show',['branch' => $branch->id]) }}">
                    <img src="{{ uploads($branch->qr->main->path) }}?time={{ time() }}" />
                </a>
            </div>

            <x-dashboard.form.input name="qr_size" :title="__('validation.attributes.size')" type='number' :value="$branch->qr->main->size" />
            <x-dashboard.form.select name="qr_style" :title="__('validation.attributes.style')" :data-array="['square','dot','round']" :name-fn="fn($style) => __('global.qr_styles.' . $style )" :value="$branch->qr->main->style" :ajax="false" />
            <x-dashboard.form.select name="qr_eye" :title="__('validation.attributes.eye')" :data-array="['square','circle']" :name-fn="fn($eye) => __('global.qr_eyes.' . $eye )" :value="$branch->qr->main->eye" :ajax="false" />
            <x-dashboard.form.file name="qr_logo" :title="__('validation.attributes.logo')" :required="false" :value="$branch->qr->main->logo" />

            <div class="col-12 mt-3">
                <div class="form-group">
                    <div class="col-12">
                        <button class="btn btn-primary" type="submit"><i class="i-Data-Save mr-1"></i> @lang("global.refresh") </button>

                        <a href="{{ uploads($branch->qr->main->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_channels', $branch)
    <div class="tab-pane fade {{ current_tab('#channels') }}" id="channels" role="tabpanel">
        <x-dashboard.form.form :action='route("branch.settings.channels.update")' method="PATCH">
            <x-dashboard.form.select name="is_active" :boolean="true" :title="__('global.activate_service')" container-classes='col-12' :value="$branch->settings->channels->is_active" />
            <x-dashboard.form.input name="title[ar]" :title="__('validation.attributes.title') . ' ( ' . __('global.arabic') . ' )'" :value="$branch->settings->channels->title->ar" />
            <x-dashboard.form.input name="title[en]" :title="__('validation.attributes.title') . ' ( ' . __('global.english') . ' )'" :value="$branch->settings->channels->title->en" />
            <x-dashboard.form.file name="logo" :title="__('validation.attributes.logo')" :required="false" :value="$branch->settings->channels->logo" />
            <x-dashboard.form.input name="color" type='color' :value="$branch->settings->channels->color" />
            <x-dashboard.form.button />
        </x-dashboard.form.form>
    </div>
    @endcan
</div>
@endsection