@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">
                <form id="frm-item" method="POST" action="/clients">
                    {{ 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" 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" />
                                    </x-adminlte-select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <x-adminlte-input name="total_price" type="number" label="Стоимость" placeholder="5000" 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" 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_create')" 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" /> Приоритетный
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="row my-2">
                                <div class="col-12">
                                    <label>Период посещения</label>
                                    <div id="div-date-ranges">
                                        <input type="hidden" name="date_range" id="date_range">
                                    </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="Дней на дорогу" 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" 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" 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 disabled />
                                </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 disabled multiple>
                                        <x-slot name="prependSlot">
                                            <div class="input-group-text bg-success">
                                                <i class="fas fa-tag"></i>
                                            </div>
                                        </x-slot>
                                        <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="Заметки"></x-adminlte-textarea>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" name="is_paid" /> Оплачен
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" name="is_resident" /> Резидент
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" name="is_hidden" /> Скрытый
                                        </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>
    </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>
@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('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