@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.main_qr_information')</a></li>
        @endcan

        @can('viewAny', 'App\Models\Qr')
            <li class="nav-item"><a class="nav-link {{ current_tab('#qrs') }}" data-toggle="tab" href="#qrs">@lang('global.sub_qrs')</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

        @can('viewAny', 'App\Models\Building')
            <li class="nav-item"><a class="nav-link {{ current_tab('#buildings') }}" data-toggle="tab" href="#buildings">@lang('global.buildings')</a></li>
        @endcan

        @can('viewAny', 'App\Models\BranchTag')
            <li class="nav-item"><a class="nav-link {{ current_tab('#tags') }}" data-toggle="tab" href="#tags">@lang('global.tags')</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="!$branch->logo" :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 :required="false" :hidden="true" data-required="1" :value="$branch->latitude" />
                    <x-dashboard.form.input name="longitude" readonly :required="false" :hidden="true" data-required="1" :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('viewAny', 'App\Models\Qr')
            <div class="tab-pane fade {{ current_tab('#qrs') }}" id="qrs" role="tabpanel">
                @can('create', 'App\Models\Qr')
                    <h4 class="card-title mb-3">
                        <a href="{{ route('branch.settings.qrs.create') }}">
                            <button class="btn btn-success">
                                <i class="las la-plus-circle"></i> @lang('global.add')
                            </button>
                        </a>
                    </h4>
                @endcan

                <div class="table-responsive">
                    <table id="qrsTable" class="table table-striped table-bordered dt">
                        <thead>
                            <tr>
                                <th>@lang('validation.attributes.title') </th>
                                <th>@lang('global.actions')</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </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('branch.settings.working_times.update')" 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

        @can('viewAny', 'App\Models\Building')
            <div class="tab-pane fade {{ current_tab('#buildings') }}" id="buildings" role="tabpanel">
                @can('create', 'App\Models\Building')
                    <h4 class="card-title mb-3">
                        <a href="{{ route('branch.settings.buildings.create') }}">
                            <button class="btn btn-success">
                                <i class="i-Add"></i> @lang('global.add')
                            </button>
                        </a>
                    </h4>
                @endcan

                <div class="table-responsive">
                    <table id="buildingsTable" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>@lang('validation.attributes.title') </th>
                                <th>@lang('global.actions')</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        @endcan

        @can('viewAny', 'App\Models\BranchTag')
            <div class="tab-pane fade {{ current_tab('#tags') }}" id="tags" role="tabpanel">
                @can('create', 'App\Models\BranchTag')
                    <h4 class="card-title mb-3">
                        <a href="{{ route('branch.settings.tags.create') }}">
                            <button class="btn btn-success">
                                <i class="i-Add"></i> @lang('global.add')
                            </button>
                        </a>
                    </h4>
                @endcan

                <div class="table-responsive">
                    <table id="tagsTable" class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>@lang('validation.attributes.title') </th>
                                <th>@lang('global.actions')</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        @endcan
    </div>

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