@extends('layouts.app')

@section('head')
{{--    <link href="{{ asset('css/lib/dropzone/dropzone.css') }}" rel="stylesheet"> --}}
    <link href="{{ asset('vendor/select2/css/select2.min.css') }}" rel="stylesheet" />
<!-- include summernote css/js -->
    {{--<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">--}}
@endsection

@section('breadcrumb')
<div class="row page-titles">
    <div class="col-md-5 align-self-center">
        <h3 class="text-primary">@lang('Create Ticket')</h3>
    </div>
    <div class="col-md-7 align-self-center">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('tickets.index') }}">@lang('Tickets')</a></li>
            <li class="breadcrumb-item active">@lang('Create')</li>
        </ol>
    </div>
</div>
@endsection

@section('content')
    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show">
            <strong>@lang('Whoops!')</strong> @lang('There were some problems with your input.')<br><br>
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <div class="card">
        <div class="card-body">
            <form action="{{ route('tickets.store') }}" method="POST" id="create_ticket_form">
                @csrf

                <div class="card sub-card">
                    <div class="card-body">
                        <div class="form-row">
                            <div class="form-group col-12 required">
                                <label class="control-label font-weight-bold">Тема: </label>
                                <input type="text" name="subject" class="form-control" placeholder="Тема" required value="{{ old('subject') }}">
                            </div>
                            <div class="form-group col-12 required">
                                <label class="control-label font-weight-bold">Описание: </label>
                                <textarea rows="6" class="form-control" style="height:initial; resize: vertical;" name="description" placeholder="Описание" required>{{ old('description') }}</textarea>
                            </div>
                            @can('ticket-see-damage_character')
                                <div class="form-group col-12">
                                    <label class="control-label font-weight-bold">Характер повреждения: </label>
                                    <textarea rows="6" class="form-control" name="damage_character" placeholder="Характер повреждения" style="height:initial; resize: vertical;">{{ old('damage_character') }}</textarea>
                                </div>
                            @endcan
                        </div>
                    </div>
                </div>

                <div class="card sub-card">
                    <div class="card-body">
                        <div class="form-row">
                            <div class="form-group required col-xs-12 col-sm-12 col-md-12">
                                <div>
                                    <label class="control-label font-weight-bold">
                                        Клиент:
                                        <button type="button" class="btn btn-sm btn-warning btn-create-client">Не могу найти клиента</button>
                                        <button type="button" class="btn btn-sm btn-primary btn-cancel-create-client" style="display: none;">Поиск клиента</button>
                                    </label>
                                    <div id="search_client">
                                        <select name="client" class="form-control"></select>
                                    </div>
                                    <div class="client_info" style="display: none;">клиент не выбран</div>
                                </div>
                                <fieldset id="create-client" class="ml-2 pl-3 pt-2" style="display: none;">
                                    <label class="control-label">Временное поле для клиента:</label>
                                    {!! Form::text("client_name", old('client_name'), [
                                        'placeholder' => 'Наименование клиента',
                                        'class' => 'form-control'
                                    ]) !!}
                                </fieldset>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-xs-12 col-sm-12 col-md-6">
                                <label class="control-label font-weight-bold">@lang('Responsible'):</label>
                                <select multiple name="agents[]" class="select2 form-control">
                                    @foreach ($agents as $agent)
                                        <option value="{{ $agent->id }}" {{ in_array($agent->id, old('agents',[])) ? 'selected' : '' }}>
                                            {{ $agent->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-xs-12 col-sm-12 col-md-6">
                                <label class="control-label font-weight-bold">Ответственный департамент: </label>
                                <select multiple name="groups[]" class="select2 form-control">
                                    @foreach ($groups as $group)
                                        <option value="{{ $group->id }}" {{ in_array($group->id, old('groups',[3])) ? 'selected':'' }}>
                                            {{ $group->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card sub-card">
                    <div class="card-body">
                        <div class="form-row">
                            <div class="form-group required col-xs-12 col-sm-12 col-md-3">
                                <label class="control-label font-weight-bold">@lang('ticket_type'): </label>
                                {!! Form::select('ticket_type', $ticket_types->pluck('label', 'id'), null, ['class' => 'form-control', 'placeholder' => '', 'required']) !!}
                            </div>
                            <div class="form-group col-xs-12 col-sm-12 col-md-3">
                                <label class="control-label font-weight-bold">Тип сети: </label>
                                {!! Form::select('network_type', $network_types->pluck('label', 'id'), null, ['class' => 'form-control', 'placeholder' => '']) !!}
                            </div>
                            <div class="form-group col-xs-12 col-sm-12 col-md-3">
                                <label class="control-label font-weight-bold">Вид повреждения: </label>
                                {!! Form::select('damage_type', $damage_types->pluck('label', 'id'), null, ['class' => 'form-control', 'placeholder' => '']) !!}
                            </div>
                            <div class="form-group col-xs-12 col-sm-12 col-md-3">
                                <label class="control-label font-weight-bold">Происхождение: </label>
                                {!! Form::select('source', $sources->pluck('label', 'id'), null, ['class' => 'form-control', 'placeholder' => '']) !!}
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group required col-xs-12 col-sm-12 col-md-3">
                                <label class="control-label font-weight-bold">Филиал: </label>
                                {!! Form::select('filial', $filials->pluck('label', 'id'), null, ['class' => 'form-control', 'required', 'placeholder' => '']) !!}
                            </div>
                            <div class="form-group col-xs-12 col-sm-12 col-md-3">
                                <label class="control-label font-weight-bold">Узел связи/Участок: </label>
                                {!! Form::text('communication_center', null, ['class' => 'form-control']) !!}
                            </div>
                            <div class="form-group col-xs-12 col-sm-12 col-md-3">
                                <label class="control-label font-weight-bold">Тип сети (для ССОп): </label>
                                {!! Form::select('network_type_ssop', $network_types_ssop->pluck('label', 'id'), null, ['class' => 'form-control', 'placeholder' => '']) !!}
                            </div>
                            <div class="form-group required col-xs-12 col-sm-12 col-md-3">
                                <label class="control-label font-weight-bold">Услуга: </label>
                                {!! Form::select('service', $services->pluck('label', 'id'), null, ['class' => 'form-control', 'required', 'placeholder' => '']) !!}
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-xs-12 col-sm-12 col-md-6">
                                <label class="control-label font-weight-bold">Заявил: </label>
                                <select name="requester" class="select2 form-control">
                                    <option selected value="">не выбрано</option>
                                    @foreach ($users as $user)
                                        <option value="{{ $user->id }}" {{ old('requester') == $user->id ? 'selected' : '' }}>{{ $user->name }} ({{ $user->email }})</option>
                                    @endforeach
                                </select>
                                {{--
                            <div class="">
                                <fieldset id="create-user" class="ml-4 pl-4 border-left" style="display: none;">
                                    <div class="form-group">
                                        <label class="control-label font-weight-bold">@lang('Name Surname'):</label>
                                        {!! Form::text("user[name]", old('user[name]'), array('placeholder' => __('Name Surname'),'class' => 'form-control')) !!}
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label font-weight-bold">@lang('Email'):</label>
                                        {!! Form::text("user[email]", old('user[email]'), array('placeholder' => __('Email'),'class' => 'form-control')) !!}
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label font-weight-bold">@lang('Work phone'):</label>
                                        {!! Form::text("user[phone]", old('user[phone]'), array('placeholder' => __('Work phone'),'class' => 'form-control')) !!}
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label font-weight-bold">@lang('Mobile phone'):</label>
                                        {!! Form::text("user[mobile]", old('user[mobile]'), array('placeholder' => __('Mobile phone'),'class' => 'form-control')) !!}
                                    </div>
                                </fieldset>
                            </div>
                            --}}
                            </div>
                            <div class="form-group col-xs-12 col-sm-12 col-md-6">
                                <label class="control-label font-weight-bold">Конфигурационная единица: </label>
                                {!! Form::text('configuration_unit', null, ['class' => 'form-control']) !!}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card sub-card">
                    <div class="card-body">
                        <h5 class="card-title">Классификация</h5>
                        <div class="form-row">
                            <div class="form-group required col-xs-12 col-sm-12 col-md-3">
                                <label class="control-label font-weight-bold">Влияние:</label>
                                <select name="influence" class="form-control" required="required">
                                    <option value="1" {{ old('influence', 1) == 1 ? 'selected':'' }}>низкое</option>
                                    <option value="2" {{ old('influence') == 2 ? 'selected':'' }}>среднее</option>
                                    <option value="3" {{ old('influence') == 3 ? 'selected':'' }}>высокое</option>
                                </select>
                            </div>
                            <div class="form-group required col-xs-12 col-sm-12 col-md-3">
                                <label class="control-label font-weight-bold">Срочность:</label>
                                <select name="urgency" class="form-control" required="required">
                                    <option value="1" {{ old('urgency', 1) == 1 ? 'selected':'' }}>низкое</option>
                                    <option value="2" {{ old('urgency') == 2 ? 'selected':'' }}>среднее</option>
                                    <option value="3" {{ old('urgency') == 3 ? 'selected':'' }}>высокое</option>
                                </select>
                            </div>
                            <div class="form-group required col-xs-12 col-sm-12 col-md-3">
                                <label class="control-label font-weight-bold">Приоритет:</label>
                                <select name="priority" class="form-control" required="required">
                                    @foreach ($priorities as $priority)
                                        <option value="{{ $priority->id }}" {{ old('priority', 4) == $priority->id ? 'selected':'' }}>
                                            @lang($priority->name)
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-xs-12 col-sm-12 col-md-3">
                                <label class="control-label font-weight-bold">Номер тракта/канала: </label>
                                {!! Form::text('number_tract_chanel', null, ['class' => 'form-control']) !!}
                            </div>
                            <div class="form-group col-xs-12 col-sm-12 col-md-3">
                                <label class="control-label font-weight-bold">Подтверждающий документ: </label>
                                {!! Form::select('confirmation_document', $confirmation_documents->pluck('label', 'id'), null, ['class' => 'form-control', 'placeholder' => '']) !!}
                            </div>
                            <div class="form-group col-xs-12 col-sm-12 col-md-3">
                                <label class="control-label font-weight-bold">Причина: </label>
                                {!! Form::select('cause', $causes->pluck('label', 'id'), null, ['class' => 'form-control', 'placeholder' => '']) !!}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card sub-card">
                    <div class="card-body">
                        <h5 class="card-title">Простой</h5>
                        <div class="form-row">
                            <div class="form-group col-xs-12 col-sm-12 col-md-3">
                                <label class="control-label font-weight-bold">Начало простоя: </label>
                                {!! Form::text('start_idle', null, ['class' => 'form-control datetimepicker', 'autocomplete' => 'off']) !!}
                            </div>
                            <div class="form-group col-xs-12 col-sm-12 col-md-3">
                                <label class="control-label font-weight-bold">Конец простоя: </label>
                                {!! Form::text('end_of_downtime', null, ['class' => 'form-control datetimepicker', 'autocomplete' => 'off']) !!}
                            </div>
                            <div class="form-group col-xs-12 col-sm-12 col-md-3">
                                <label class="control-label font-weight-bold">Длительность простоя в минутах: </label>
                                {!! Form::text('duration', null, ['class' => 'form-control', 'readonly']) !!}
                            </div>
                            <div class="form-group col-xs-12 col-sm-12 col-md-3">
                                <label class="control-label font-weight-bold">Контрольный срок (чч:мм): </label>
                                {!! Form::text('deadline', null, ['class' => 'form-control', 'placeholder' => 'чч:мм']) !!}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card sub-card">
                    <div class="card-body">
                        <h5 class="card-title">Текущее состояние</h5>
                        <div class="form-row">
                            <div class="form-group col-xs-12 col-sm-12 col-md-4">
                                <label class="control-label font-weight-bold">Уровень поддержки: </label>
                                {!! Form::select('support_level', $support_levels->pluck('label', 'id'), null, ['class' => 'form-control', 'placeholder' => '']) !!}
                            </div>
                            <div class="form-group required col-xs-12 col-sm-12 col-md-4">
                                <label class="control-label font-weight-bold">Статус:</label>
                                <select name="status" class="form-control" required="required">
                                    @foreach ($statuses as $status)
                                        <option value="{{ $status->id }}" {{ old('status') == $status->id ? 'selected':'' }}>{{ $status->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group col-xs-12 col-sm-12 col-md-4">
                                <label class="control-label font-weight-bold">Код закрытия: </label>
                                {!! Form::select('closing_code', $closing_codes->pluck('label', 'id'), null, ['class' => 'form-control', 'placeholder' => '']) !!}
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group col-xs-12 col-sm-12 col-md-4">
                                <label class="control-label font-weight-bold">Начало инцидента: </label>
                                {!! Form::text('actual_reaction', null, ['class' => 'form-control datetimepicker', 'autocomplete' => 'off']) !!}
                            </div>
                            <div class="form-group col-xs-12 col-sm-12 col-md-4">
                                <label class="control-label font-weight-bold">Конец инцидента: </label>
                                {!! Form::text('actual_resolved', null, ['class' => 'form-control datetimepicker', 'autocomplete' => 'off']) !!}
                            </div>
                            <div class="form-group col-xs-12 col-sm-12 col-md-4">
                                <label class="control-label font-weight-bold">Длительность реакции в минутах: </label>
                                {!! Form::text('reaction_time', null, ['class' => 'form-control', 'readonly']) !!}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card sub-card">
                    <div class="card-body">
                        <div class="form-row">
                            <div class="form-group col-12">
                                <label class="control-label font-weight-bold">Что сделано: </label>
                                {!! Form::textarea('what_is_done', null, ['class' => 'form-control']) !!}
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card sub-card">
                    <div class="card-body">
                        <div class="form-row">
                            <div class="form-group col-xs-12 col-sm-12 col-md-4">
                                <label class="font-weight-bold">
                                    {!! Form::checkbox('ktc_responsibility', 1, null) !!} Ответственность KTC
                                </label>
                            </div>
                            <div class="form-group col-xs-12 col-sm-12 col-md-4">
                                <label class="font-weight-bold">
                                    {!! Form::checkbox('in_note', 1, null) !!} В примечание
                                </label>
                            </div>
                            <div class="form-group col-xs-12 col-sm-12 col-md-4">
                                <label class="font-weight-bold">
                                    {!! Form::checkbox('checked_cus', 1, null) !!} Проверено ЦУС
                                </label>
                            </div>
                            {{--
                            <div class="form-group col-xs-12 col-sm-12 col-md-4">
                                <label class="control-label">Теги: </label>
                                <input type="text" name="tags" class="form-control input-sm" placeholder="@lang('Tags')">
                            </div>
                            --}}
                        </div>
                        <div class="form-row">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">Создать</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ mix('js/tickets/priority.js') }}"></script>

    <script src="{{ asset('vendor/select2/js/select2.full.js') }}"></script>
    <script src="{{ asset('vendor/select2/js/i18n/ru.js') }}"></script>

    <script type="text/javascript">
        $(function () {
            $('.datetimepicker').datetimepicker({
                format: 'DD.MM.YYYY HH:mm',
                useCurrent: false
            });

            let computeDuration = function(startDate, endDate, durationField) {
                let start = startDate.data("DateTimePicker").date();
                let end = endDate.data("DateTimePicker").date();

                let value = '';
                if (end !== null && start !== null) {
                    value = end.diff(start, 'minutes');
                }
                durationField.val(value);
            };
            let datePeriodWithDuration = function(startDate, endDate, durationField) {
                startDate.on("dp.change", function (e) {
                    endDate.data("DateTimePicker").minDate(e.date);
                    computeDuration(startDate, endDate, durationField);
                });
                endDate.on("dp.change", function (e) {
                    startDate.data("DateTimePicker").maxDate(e.date);
                    computeDuration(startDate, endDate, durationField);
                });
            };

            let actual_reaction = $('.datetimepicker[name=actual_reaction]');
            let actual_resolved = $('.datetimepicker[name=actual_resolved]');
            let reaction_time = $('[name=reaction_time]');
            datePeriodWithDuration(actual_reaction, actual_resolved, reaction_time);

            let startIdle = $('.datetimepicker[name=start_idle]');
            let endOfDowntime = $('.datetimepicker[name=end_of_downtime]');
            let duration = $('[name=duration]');
            datePeriodWithDuration(startIdle, endOfDowntime, duration);

            /* Toggle new user form */
            $('select[name="requester"]').change(function() {
                if ($(this).val() == '-1') {
                    $('#create-user').show(100);
                } else {
                    $('#create-user').hide(100);
                }
            });

            let toggleClientCreation = function (showNewClientForm) {
                if (showNewClientForm) {
                    $('#create-client').show(100);
                    $('#search_client').hide();
                    $('.btn-create-client').hide();
                    $('.btn-cancel-create-client').show();
                } else {
                    $('#create-client').hide(100);
                    $('#search_client').show();
                    $('.btn-create-client').show();
                    $('.btn-cancel-create-client').hide();
                }
            };

            $('.btn-create-client').click(function () { toggleClientCreation(true); });
            $('.btn-cancel-create-client').click(function () { toggleClientCreation(false); });

            $('select.select2').select2();

            $('select[name="client"]').select2({
                allowClear: false,
                ajax: {
                    cache: true,
                    url: '{{ route('onyma_clients.search_by_name') }}',
                    delay: 400,
                    dataType: 'json',
                    data: function (params) {
                        return { name: params.term };
                    },
                    processResults: function (data) {
                        return {
                            results: data.clients
                        };
                    }
                },
                placeholder: 'Поиск клиента',
                escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
                minimumInputLength: 3,
                dropdownAutoWidth: true,
                language: "ru",
                templateResult: formatState,
                templateSelection: formatRepoSelection,
                createTag: function (params) {
                    let term = $.trim(params.term);
                    if (term === '') {
                        return null;
                    }
                    return {
                        id: 'create_' + term,
                        text: term,
                        newTag: true // add additional parameters
                    }
                }
            });
            function formatState (result) {
                if (result.text) {
                    return result.text;
                }
                let html =
                    "<div class='select2-option-client__cont'>"+
                    "<div class='select2-option-client__name'>" + result.name + "</div>"+
                    "<div class='select2-option-client__attr'><span>Тип клиента:</span> " + result.client_type + "</div>";
                if (result.bin !== null || result.iin !== null) {
                    html+=
                        "<div class='select2-option-client__attr'><span>"+
                        (result.bin !== null ? 'БИН' : 'ИИН')+
                        ":</span> " +
                        (result.bin !== null ? result.bin : result.iin) +
                        "</div>";
                }
                if (result.contracts.length > 0) {
                    html +=
                        "<div class='select2-option-client__attr'>"+
                        "<table class='table table-bordered table-striped'>"+
                        "<thead>"+
                        "<tr>"+
                        "<th scope='col'>Лицевой счёт</th>"+
                        "<th scope='col'>Номер договора</th>"+
                        "<th scope='col'>Филиал/Группа</th>"+
                        "<th scope='col'>Адрес</th>"+
                        "<th scope='col'>Контактная информация</th>"+
                        "</tr>"+
                        "</thead>"+
                        "<tbody>";
                    let contract;
                    for (let i = 0; i < result.contracts.length; i++) {
                        contract = result.contracts[i];
                        html+=
                            "<tr>"+
                            "<td>" + contract.dognum + "</td>"+
                            "<td>" + contract.dogcode + "</td>"+
                            "<td>" + contract.filial + "</td>"+
                            "<td>" + contract.address + "</td>"+
                            "<td>" + contract.contacts + "</td>"+
                            "</tr>";
                    }
                    html+=
                        "</tbody>"+
                        "</table>"+
                        "</div>";
                }
                html +=
                    "</div>";
                return html;
            }
            function formatRepoSelection (result)
            {
                if (result.text) {
                    return result.text;
                }
                selectedClient(result);
                return result.name;
            }
            function selectedClient(result)
            {
                let html =
                    "<div><span>Тип клиента:</span> " + result.client_type + "</div>";

                if (result.bin !== null || result.iin !== null) {
                    html+=
                        "<div class='select2-option-client__attr'><span>"+
                        (result.bin !== null ? 'БИН' : 'ИИН')+
                        ":</span> " +
                        (result.bin !== null ? result.bin : result.iin) +
                        "</div>";
                }
                if (result.contracts.length > 0) {
                    html +=
                        "<div>"+
                            "<table class='table table-bordered table-striped'>"+
                                "<thead>"+
                                    "<tr>"+
                                        "<th scope='col'>Лицевой счёт</th>"+
                                        "<th scope='col'>Номер договора</th>"+
                                        "<th scope='col'>Филиал/Группа</th>"+
                                        "<th scope='col'>Адрес</th>"+
                                        "<th scope='col'>Контактная информация</th>"+
                                    "</tr>"+
                                "</thead>"+
                                "<tbody>";
                    let contract;
                    for (let i = 0; i < result.contracts.length; i++) {
                        contract = result.contracts[i];
                        html+=
                                    "<tr>"+
                                        "<td>" + contract.dognum + "</td>"+
                                        "<td>" + contract.dogcode + "</td>"+
                                        "<td>" + contract.filial + "</td>"+
                                        "<td>" + contract.address + "</td>"+
                                        "<td>" + contract.contacts + "</td>"+
                                    "</tr>";
                    }
                    html+=
                                "</tbody>"+
                            "</table>"+
                        "</div>";
                }
                html +=
                    "</div>";


                $('.client_info').html(html).show();
            }
        });
    </script>
@endpush