@extends('adminlte::page')

@section('title', 'Редактировать клиента')

@section('plugins.tempusdominusBootstrap4', true)
@section('plugins.Summernote', true)
@section('plugins.BSCustomFileInput', true)
@section('plugins.Select2', true)
@section('plugins.Select2Bs4', true)
@section('plugins.moment', true)
@section('plugins.daterangepicker', true)
@section('plugins.jquery-ui', true)

@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="reservation" value="reservation"> Бронирование
                            </label>
                            <label class="btn btn-outline-primary">
                                <input type="radio" name="tab-select" id="option_a3" autocomplete="off" data-type="log" value="log"> Лог
                            </label>
                            <label class="btn btn-outline-primary">
                                <input type="radio" name="tab-select" id="option_a4" autocomplete="off" data-type="history" value="history"> История
                            </label>
                        </div>
                    </div>
                </div>


                <div class="tab-list tab-form">
                    <form id="frm-item" method="POST" action="/clients/{!! $item->id !!}">
                        {{ csrf_field() }}
                        {{ method_field('PUT') }}
                        {{ csrf_field() }}
                        <div class="row">

                            <div class="col-6">
                                <div class="row">
                                    <div class="col-12">
                                        <x-adminlte-input name="email" id="email" label="E-mail Аккаунта" placeholder="user@example.com" value="{!! !is_null($item->account) ? $item->account->email : '' !!}" autocomplete="none" required />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <x-adminlte-select name="agent_id" label="Агентство" required autocomplete="none">
                                            <x-adminlte-options :options="$agents" :selected="$item->agent_id" />
                                        </x-adminlte-select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <x-adminlte-input name="total_price" type="number" label="Стоимость" placeholder="5000" value="{!! $item->total_price !!}" autocomplete="none" required />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <x-adminlte-input name="ais_ivr_id" type="number" label="IVR" placeholder="12345678" value="{!! $item->ais_ivr_id !!}" autocomplete="none" required />
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <x-adminlte-select name="status" label="Статус" required>
                                            <x-adminlte-options :options="config('parser.client_statuses')" :selected="$item->status" autocomplete="none" empty-option="Выберите статус"/>
                                        </x-adminlte-select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" name="is_priority" {{ ($item->is_priority == 1 ? ' checked' : '') }} /> Приоритетный
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="row my-2">
                                    <div class="col-12">
                                        <label>Период посещения</label>
                                        <div id="div-date-ranges">
                                            <input type="hidden" value="{!! htmlspecialchars(json_encode($clientDatesStrings)) !!}" name="date_range" id="date_range">
                                            @foreach($clientDatesStrings as $clientDatesString)
                                                <div class="date-range-block">
                                                    <div class="form-group">
                                                        <div class="input-group">
                                                            <input name="date_range[]" value="{!! $clientDatesString !!}" class="form-control" disabled="disabled">
                                                            <div class="input-group-append"><button type="button" class="btn btn-default btn-delete-daterange"><i class="fas fa-lg fa-trash text-danger"></i> Удалить </button></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                        @php
                                            $config = [
                                                "startDate" => "js:moment()",
                                                "endDate" => "js:moment().add(30, 'days')",
                                                "locale" => ["format" => "DD/MM/YYYY"],
                                            ];
                                        @endphp
                                        <x-adminlte-date-range name="date_range_select" :config="$config">
                                            <x-slot name="prependSlot">
                                                <div class="input-group-text bg-success">
                                                    <i class="fas fa-lg fa-calendar-alt"></i>
                                                </div>
                                            </x-slot>
                                            <x-slot name="appendSlot">
                                                <x-adminlte-button type="button" id="btn-date-add" class="fa-pull-right" label="Добавить" icon="fas fa-plus" theme="primary" />
                                            </x-slot>
                                        </x-adminlte-date-range>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <x-adminlte-input name="days_from_today" type="number" label="Дней на дорогу" value="{!! $item->days_from_today !!}" placeholder="10" required />
                                    </div>
                                </div>
                            </div>



                            <div class="col-6">
                                <div class="row">
                                    <div class="col-12">
                                        <x-adminlte-select name="visa_type_id" label="Тип визы" autocomplete="none" required>
                                            <x-adminlte-options :options="$visaTypes" :selected="$item->visa_type_id" empty-option="Выберите тип визы"/>
                                        </x-adminlte-select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <x-adminlte-select name="region" label="Регион" id="slct-region" autocomplete="none" required>
                                            <x-adminlte-options :options="$regions" :selected="$item->country->region" empty-option="Выберите регион"/>
                                        </x-adminlte-select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <x-adminlte-select name="country_id" label="Страна" id="slct-country" autocomplete="none" required>
                                            <x-adminlte-options :options="$countries" :selected="$item->country->id" empty-option="Выберите страну"/>
                                        </x-adminlte-select>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        @php
                                            $config = [
                                                "placeholder" => "Выберите город(а)...",
                                                "allowClear" => true,
                                            ];
                                        @endphp
                                        <x-adminlte-select2 name="city_id[]" label="Город(а)" id="slct-city" autocomplete="none" :config="$config" required multiple>
                                            <x-slot name="prependSlot">
                                                <div class="input-group-text bg-success">
                                                    <i class="fas fa-tag"></i>
                                                </div>
                                            </x-slot>
                                            <x-adminlte-options :options="$cities" :selected="array_keys($clientCities)" />
                                            <x-slot name="appendSlot">
                                                <x-adminlte-button theme="default" label="Очистить" icon="fas fa-lg fa-trash text-danger"/>
                                            </x-slot>
                                        </x-adminlte-select2>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <x-adminlte-textarea name="comments" rows=5 label="Заметки">{!! $item->comments !!}</x-adminlte-textarea>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" name="is_paid" {{ ($item->is_paid == 1 ? ' checked' : '') }} /> Оплачен
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" name="is_resident" {{ ($item->is_resident == 1 ? ' checked' : '') }} /> Резидент
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-12">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" name="is_hidden" {{ ($item->is_hidden == 1 ? ' checked' : '') }} /> Скрытый
                                            </label>
                                        </div>
                                        <i>Важно:
                                            <ol>
                                                <li>Скрытые клиенты игнорируют любой статус кроме - Приостановлен.</li>
                                                <li>Скрытые клиенты только просматривают даты, они не бронируются.</li>
                                                <li>Для скрытых клиентов рекомендуется проставлять все города в оплаченной стране.</li>
                                                <li>Для скрытых клиентов рекомендуется проставлять дней на дорогу - 0.</li>
                                            </ol>
                                        </i>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <x-adminlte-button type="submit" label="Сохранить" theme="primary" icon="fas fa-key"/>
                    </form>
                </div>

                <div class="tab-list tab-reservation collapse">
                    <div class="row">
                        <div class="col-12">
                            <table class="table table-bordered table-striped">
                                <tr>
                                    <td style="width: 300px;">Id Адреса</td>
                                    <td>{!! $item->ais_office_id !!}</td>
                                </tr>
                                <tr>
                                    <td>Id Клиента</td>
                                    <td>{!! $item->ais_client_id !!}</td>
                                </tr>
                                <tr>
                                    <td>Дата</td>
                                    <td>{!! $item->reservation_date !!}</td>
                                </tr>
                                <!--
                                <tr>
                                    <td>Скриншот</td>
                                    <td><a href="/docs/{!! $item->appointment_img !!}" target="blank">{!! $item->appointment_img !!}</a></td>
                                </tr>
                                <tr>
                                    <td>PDF</td>
                                    <td><a href="/docs/{!! $item->appointment_pdf !!}" target="blank">{!! $item->appointment_pdf !!}</a></td>
                                </tr>
                                -->
                                <tr>
                                    <td>Время успешной записи</td>
                                    <td>{!! !empty($item->time_reservation) ? date('d/m/Y H:i:s', $item->time_reservation) : '-' !!}</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="tab-list tab-log collapse">
                    <div class="row">
                        <div class="col-12">
                            <x-adminlte-input name="country" label="Последний парсинг" value="{!! !empty($item->last_parsing) ? date('Y-m-d H:i:s', $item->last_parsing) : 'Не происходил'; !!}" disabled />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <x-adminlte-textarea name="last_log" rows=20 disabled>{!! $item->last_log !!}</x-adminlte-textarea>
                        </div>
                    </div>
                </div>

                <div class="tab-list tab-history collapse">
                    <div class="row">
                        <div class="col-12 my-1">
                            @foreach ($historyService->getHistoryItems() as $historyItem)
                                <x-adminlte-card title="{!! config('parser.history_sources')[$historyItem['source']] . ': ' . $historyItem['created_at'] . ' - ' . config('parser.client_statuses')[$historyItem['status']] !!}" theme="{!! $historyItem['status'] == 'completed' ? 'success' : ($historyItem['status'] == 'failed' ? 'warning' : '') !!}" collapsible="collapsed" class="history-card">
                                    <table class="table no-footer table-bordered">
                                        <thead>
                                        <tr>
                                            <th>Пользовательские данные</th>
                                            <th>Системные данные</th>
                                        </tr>
                                        </thead>
                                        <tr>
                                            <td>
                                                <table class="table no-footer table-bordered table-hover">
                                                    <thead>
                                                    <tr>
                                                        <th>Параметр</th>
                                                        <th>Значение</th>
                                                    </tr>
                                                    </thead>
                                                    @foreach ($historyItem['public_params'] as $param => $value)
                                                        <tr>
                                                            <td>{!! $param !!}</td>
                                                            <td>{!! $value !!}</td>
                                                        </tr>
                                                    @endforeach
                                                    @foreach ($historyItem['cities'] as $param => $value)
                                                        <tr>
                                                            <td>Город ID: {!! $param !!}</td>
                                                            <td>{!! $value !!}</td>
                                                        </tr>
                                                    @endforeach
                                                    @foreach ($historyItem['dates'] as $param => $value)
                                                        <tr>
                                                            <td>Интервал дат #{!! $param + 1 !!}:</td>
                                                            <td>{!! $value !!}</td>
                                                        </tr>
                                                    @endforeach
                                                </table>
                                            </td>
                                            <td>
                                                <table class="table no-footer table-bordered table-hover">
                                                    <thead>
                                                    <tr>
                                                        <th>Параметр</th>
                                                        <th>Значение</th>
                                                    </tr>
                                                    </thead>
                                                    @foreach ($historyItem['private_params'] as $param => $value)
                                                        <tr>
                                                            <td>{!! $param !!}</td>
                                                            <td>{!! $value !!}</td>
                                                        </tr>
                                                    @endforeach
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </x-adminlte-card>
                            @endforeach
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div id="template-date-range" class="collapse">
        <div class="date-range-block">
            <div class="form-group">
                <div class="input-group">
                    <input name="date_range[]" value="" class="form-control" disabled="disabled">
                    <div class="input-group-append"><button type="button" class="btn btn-default btn-delete-daterange"><i class="fas fa-lg fa-trash text-danger"></i> Удалить </button></div>
                </div>
            </div>
        </div>
    </div>
    <style>
        .history-card .card-header h3 { cursor: pointer; }
    </style>
@endsection

@push('js')
    <script>
        $(function() {
            $( "#email" ).autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: '/autocomplete/email',
                        type: 'POST',
                        dataType: "json",
                        data: {
                            _token: '{{ csrf_token() }}',
                            email: request.term
                        },
                        success: function( data ) {
                            console.log(data);
                            response(data);
                        }
                    });
                },
                select: function (event, ui) {
                    $('#email').val(ui.item.label);
                    console.log(ui.item);
                    return false;
                }
            });
            $(document).on('change', '#slct-region', function () {
                $('#slct-country').html('');
                $('#slct-country').attr('disabled', true);
                if ($(this).val() != '') {
                    $.post(
                        '/region/' + $(this).val() + '/countries',
                        {
                            _token: '{{ csrf_token() }}',
                            status: $(this).val()
                        }
                    ).done(function (response) {
                        $('#slct-country').append(new Option('Выберите страну', ''));
                        $.each(response, function(key, value) {
                            $('#slct-country').append(new Option(value, key));
                        });
                        $('#slct-country').attr('disabled', false);
                    });
                }
                return false;
            });
            $(document).on('change', '#slct-country', function () {
                $('#slct-city').html('');
                $('#slct-city').attr('disabled', true);
                if ($(this).val() != '') {
                    $.post(
                        '/country/' + $(this).val() + '/cities',
                        {
                            _token: '{{ csrf_token() }}',
                            status: $(this).val()
                        }
                    ).done(function (response) {
                        $.each(response, function(key, value) {
                            $('#slct-city').append(new Option(value, key));
                        });
                        $('#slct-city').attr('disabled', false);
                    });
                }
                return false;
            });
            $(document).on('click', '#btn-date-add', function () {
                $('#template-date-range').find('input').val($('#date_range_select').val());
                $('#div-date-ranges').append($('#template-date-range > div').clone());
                updateDatesJson();
            });
            $(document).on('click', '.btn-delete-daterange', function () {
                $(this).closest('.date-range-block').remove();
                updateDatesJson();
            });
            function updateDatesJson() {
                var datesRange = [];
                $('#div-date-ranges').find('input.form-control').each(function () {
                    datesRange.push($(this).val());
                });
                $('#date_range').val(JSON.stringify(datesRange));
            }
            $(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();
                    }
                });
            });
            $(document).on('click', '.history-card .card-header h3', function () {
                $(this).closest('.history-card').find('.btn-tool').click();
            });
            $(document).on('submit', '#frm-item', function(e) {
                if ($('#date_range').val() == '' || $('#date_range').val() == '[]') {
                    alert('Период посещения не выбран');
                    e.preventDefault();
                    return  false;
                }
            });

            $(document).on('focus', ':input', function() {
                $(this).attr('autocomplete', 'new-password' );
            });
            $('input.select2-input').attr('autocomplete', 'new-password');
        });
    </script>
@endpush