@extends('adminlte::page')

@section('title', 'Изменить город')

@section('content')
    <div class="container-fluid">
        <div class="card">
            <div class="card-header">
                <a href="javascript:history.back()" class="btn btn-primary fa-pull-right">Назад</a>
                <h3>{{ __('Изменить город') }}</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <div class="btn-group btn-group-toggle py-2 tab-select" data-toggle="buttons">
                            <label class="btn btn-outline-primary active">
                                <input type="radio" name="tab-select" id="option_a1" autocomplete="off" data-type="form" value="form" checked> Редактировать
                            </label>
                            <label class="btn btn-outline-primary">
                                <input type="radio" name="tab-select" id="option_a2" autocomplete="off" data-type="address" value="address"> Адрес
                            </label>
                        </div>
                    </div>
                </div>

                <div class="tab-list tab-form">
                    <form id="frm-edit-message" method="POST" action="/cities/{!! $item->id !!}">
                        {{ csrf_field() }}
                        {{ method_field('PUT') }}
                        <div class="row">
                            <div class="col-12">
                                <x-adminlte-input name="name" label="Название города" value="{!! $item->name !!}" placeholder="Border Town" required />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <x-adminlte-input name="name_ru" label="Название города(русский)" value="{!! $item->name_ru !!}" placeholder="Border Town" required />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <x-adminlte-select name="country_id" label="Страна" required>
                                    <x-adminlte-options :options="$countries" empty-option="Выберите страну" :selected="$item->country_id"/>
                                </x-adminlte-select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" name="is_notify" {{ ($item->is_notify == 1 ? ' checked' : '') }} /> Добавить в оповещения
                                    </label>
                                </div>
                            </div>
                        </div>
                        <x-adminlte-button type="submit" label="Сохранить" theme="primary" icon="fas fa-key"/>
                    </form>
                </div>

                <div class="tab-list tab-address collapse">
                    @foreach($item->offices as $office)
                        <div class="card">
                            <div class="card-body">
                                {!! (nl2br($office->office_name)) !!}
                            </div>
                            <div class="card-footer">
                                ID: <a href="https://ais.usvisa-info.com/en-it/niv/schedule/0/appointment/address/{!! $office->ais_office_id !!}" target="blank">{!! $office->ais_office_id !!}</a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection

@push('js')
    <script>
        $(function() {
            $(document).on('click', '.tab-select input', function () {
                var typeId = $(this).data('type');
                $('.tab-list').each(function() {
                    if ($(this).hasClass('tab-' + typeId)) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            });
        });
    </script>
@endpush