@extends('mall.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_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
</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("mall.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="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.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_working_times', $branch)
    <div class="tab-pane fade {{ current_tab('#working_times') }}" id="working_times" role="tabpanel">
        <x-dashboard.form.form :action='route("mall.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

    @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('mall.branches.buildings.create',['branch' => $branch->id]) }}">
                <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
</div>
@endsection