@extends('layouts.app')

@section('breadcrumb')
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-primary">@lang('Tickets')</h3>
        </div>
    </div>
@endsection

@section('content')
    @if ($message = Session::get('success'))
        <div class="alert alert-success alert-dismissible fade show">
            <p>{{ $message }}</p>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                            @can('ticket-create')
                                <a class="btn btn-success btn-sm" href="{{ route('tickets.create') }}">
                                    <i class="fa fa-plus-square"></i>
                                    @lang('Create')
                                </a>
                            @endcan
                            <!-- Button trigger modal -->
                            {{--
                            <button type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#filterTicketsModal">
                                <i class="fa fa-filter"></i>
                                @lang('Filter')
                            </button>
                            --}}
                        </div>
                    </div>

                    <form id="filters-form" action="{{ route('tickets.index') }}" method="get">
                        <div class="row mt-3">
                            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
                                <div class="form-group">
                                    <label>Начало (дата создания)</label>
                                    {!! Form::text('created_start', session('created_start'), ['class' => 'form-control datetimepicker']) !!}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
                                <div class="form-group">
                                    <label>Конец (дата создания)</label>
                                    {!! Form::text('created_end', session('created_end'), ['class' => 'form-control datetimepicker']) !!}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
                                <div class="form-group">
                                    <label>@lang('Ticket ID')</label>
                                    {!! Form::input('number', 'id', session('id'), ['class' => 'form-control']) !!}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                                <div class="form-group">
                                    <label>@lang('ticket_type')</label>
                                    {!! Form::select('ticket_type', $ticket_types->pluck('label', 'id'), session('ticket_type'), ['class' => 'form-control', 'placeholder' => '']) !!}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                                <div class="form-group">
                                    <label>@lang('Status')</label>
                                    {!! Form::select('status', $statuses, session('status'), ['class' => 'form-control']) !!}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                                <div class="form-group">
                                    <label class="control-label">Услуга: </label>
                                    {!! Form::select('service', $services->pluck('label', 'id'), session('service'), ['class' => 'form-control', 'placeholder' => '']) !!}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                                <div class="form-group">
                                    <label>Филиал</label>
                                    {!! Form::select('filial', $filials->pluck('label', 'id'), session('filial'), ['class' => 'form-control', 'placeholder' => '']) !!}
                                </div>
                            </div>
                            {{--<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                                <div class="form-group">
                                    <label>Принадлежность клиента к филиалу</label>
                                    {!! Form::select('client_filials[]', $clientFilials->pluck('name', 'gid'), session('client_filials'), ['multiple' => 'multiple', 'class' => 'form-control select2', 'style' => 'width: 100%']) !!}
                                </div>
                            </div>--}}
                            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                                <div class="form-group">
                                    <label>Клиент</label>
                                    <select name="clients[]" class="form-control" multiple style="width: 100%;">
                                        @foreach($clients as $client)
                                            <option value="{{ $client->id }}" selected>{{ $client->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                                <div class="form-group">
                                    <label>@lang('Responsible')</label>
                                    {!! Form::select('agents[]', $agents->pluck('name', 'id'), session('agents'), ['multiple' => 'multiple', 'class' => 'form-control select2', 'style' => 'width: 100%']) !!}
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                                <div class="form-group">
                                    <label>@lang('Responsible groups')</label>
                                    {!! Form::select('groups[]', $groups->pluck('name', 'id'), session('groups'), ['multiple' => 'multiple', 'class' => 'form-control select2', 'style' => 'width: 100%']) !!}
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-lg-12 col-xs-12">
                                <button type="submit" class="btn btn-xs btn-success">Фильтровать</button>
                                <button type="button" id="clear-filter" class="btn btn-xs btn-warning">Сбросить</button>
                            </div>
                        </div>
                    </form>

                    <div id="filtered-tickets-container"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('head')
    <link href="{{ asset('vendor/select2/css/select2.min.css') }}" rel="stylesheet" />
@endsection

{{--
Модалка фильтра
@push('modals')
    @include('tickets.modals.filter')
@endpush
--}}

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

@push('scripts')
    <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 () {
            // Init select2
            $('select.select2').select2({
                width:"style"
            });

            $('.datetimepicker').datetimepicker({
                format: 'DD.MM.YYYY',
                useCurrent: false
            });

            let createDateStart = $('.datetimepicker[name=created_start]');
            let createDateEnd = $('.datetimepicker[name=created_end]');

            createDateStart.on("dp.change", function (e) {
                createDateEnd.data("DateTimePicker").minDate(e.date);
            });
            createDateEnd.on("dp.change", function (e) {
                createDateStart.data("DateTimePicker").maxDate(e.date);
            });

            $('[data-toggle="tooltip"]').tooltip();

            $('select[name="clients[]"]').select2({
                width: 'style',
                allowClear: false,
                ajax: {
                    cache: true,
                    url: '{{ route('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;
                }
                return result.name;
            }
        });
    </script>
@endpush