@extends('layouts.template')

@section('top')
<style type="text/css">
    #createOrderForms{
        overflow-y: scroll;
    }
    table tr td.td2:last-child { word-break: break-word; }
    table td,
    table th{
        padding: 15px 7px !important;
        text-align: center !important;
        font-size: 14px !important;
    }
    table thead th{
        cursor: pointer;
    }
    table thead th.sort_asc:after,
    table thead th span.sort_asc:after{
        content:"▼";
    }
    table thead th.sort_desc:after,
    table thead th span.sort_desc:after{
        content:"▲";
    }
    .order-tr.excretad,
    .order-tr.excretad:hover{
        background: #2b383e !important;
    }
    .order-tr.excretad *{
        color: #fff !important;
    }
</style>
@endsection

@section('content')

@widget('Filter')

<div class="clearfix"></div>
<div id="table-result">
    <!-- TABLE -->
    <div class="card">
        <div v-if="orders.length == 0" class="card-body">
            <br><br><div class="pt-2 mt-2 loader-pendulums"></div>
        </div>
        <div v-else class="card-body">
            
            <!-- Выделение -->
            <div class="row">
                <div class="col-md-6">
                    <div class="text-left">
                        <button v-if="orders.length > 0 && orders.length != excreta_orders.length" class="btn btn-primary btn-xs" @click="allHighlightOrder()">Выделить всё</button>
                        <button v-if="excreta_orders.length > 0" class="btn btn-danger btn-xs" @click="resetHighlightOrder()">Снять выделение</button>
                        <button v-if="excreta_orders.length > 0" class="btn btn-success btn-xs" @click="exportHighlightOrder()">Экспорт Документа</button>

                        <a target="_blank" ref="nofollow" class="ml-2" href="https://yadi.sk/i/KNR4OXvFu_aqSg">Как создать документ?</a>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="text-right">
                        <span class="m-r-20">Колличество выводимых заявок: @{{ orders.length }}</span><input id="search" type="text" placeholder="Быстрый поиск" @input="fastSearch()" v-model="fastSearchInput">
                    </div>        
                </div>
                <div class="clearfix"></div>
            </div>
            <!-- -->

            <table id="datable_main" class="table table-hover w-100 display pb-30">
                <thead>
                    <tr>
                        <th class="text-center" @click="sortMounted('id')" v-bind:class="[sortParam == 'id_asc' ? 'sort_asc' : '',sortParam == 'id_desc' ? 'sort_desc' : '']">{{ trans('pages.orders.id') }}</th>
                        <th class="text-center" @click="sortMounted('user.last_name')" v-bind:class="[sortParam == 'user.last_name_asc' ? 'sort_asc' : '',sortParam == 'user.last_name_desc' ? 'sort_desc' : '']">{{ trans('pages.orders.author') }}</th>
                        <th class="text-center" @click="sortMounted('date_order')" v-bind:class="[sortParam == 'date_order_asc' ? 'sort_asc' : '',sortParam == 'date_order_desc' ? 'sort_desc' : '']">{{ trans('pages.orders.date') }}</th>
                        <th class="text-center" @click="sortMounted('is_output')" v-bind:class="[sortParam == 'is_output_asc' ? 'sort_asc' : '',sortParam == 'is_output_desc' ? 'sort_desc' : '']">{{ trans('pages.orders.type') }}</th>
                        <th class="text-center" @click="sortMounted('car_order')" v-bind:class="[sortParam == 'car_order_asc' ? 'sort_asc' : '',sortParam == 'car_order_desc' ? 'sort_desc' : '']">{{ trans('pages.orders.number_m') }}</th>
                        <th class="text-center" @click="sortMounted('driver_order')" v-bind:class="[sortParam == 'driver_order_asc' ? 'sort_asc' : '',sortParam == 'driver_order_desc' ? 'sort_desc' : '']">{{ trans('pages.orders.fio') }}</th>
                        <th class="text-center">{{ trans('pages.orders.country_and_city') }}</th>
                        <th 
                            class="text-center" 
                            >
                            <span 
                                v-bind:class="[sortParam == 'sostoyanie_asc' ? 'sort_asc' : '',sortParam == 'sostoyanie_desc' ? 'sort_desc' : '']" 
                                @click="sortMounted('sostoyanie')" >
                                {{ trans('pages.orders.sostoyanie') }}
                            </span> 
                            <span 
                                v-bind:class="[sortComment == 'asc' ? 'sort_asc' : '',sortComment == 'desc' ? 'sort_desc' : '']" 
                                @click="sortCommentMounted()"
                                v-if="sortParam == 'sostoyanie_asc' || sortParam == 'sostoyanie_desc'">
                                Коммент.
                            </span>
                        </th>
                        <th class="text-center" @click="sortMounted('sostoyanie')" v-bind:class="[sortParam == 'sostoyanie_asc' ? 'sort_asc' : '',sortParam == 'sostoyanie_desc' ? 'sort_desc' : '']">{{ trans('pages.orders.status') }}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(order,key) in sortedList" @click.prevent="highlightOrder(order)" class="order-tr" :class="[checkExcretaOrder(order) ? 'excretad' : '']">
                        <td class="text-center">@{{ order.id }}</td>
                        <td class="text-center">@{{ order.user.last_name }} @{{ order.user.name }}</td>
                        <td class="text-center">@{{ makeDate(order.date_order) }}</td>
                        <td class="text-center">
                            <span class="badge badge-danger" v-if="order.is_output == 0">Выгрузка</span>
                            <span class="badge badge-success" v-else-if="order.is_output == 1">Загрузка</span>
                        </td>
                        <td class="text-center">@{{ order.car_order }}</td>
                        <td class="text-center">@{{ order.driver_order }}</td>
                        <td class="text-center">
                            <span v-if="order.country != null">@{{ order.country.name }}</span><span v-if="order.city != null">/@{{ order.city.city }}</span>
                            <span v-if="order.country == null && order.city == null">Не задано</span>
                        </td>
                        <td class="text-center">
                            <div>@{{ order.status.status }}</div>
                            <div>@{{ order.comment_order }}</div>
                            <template v-for="log in order.logs">
                                <div v-if="log.fields != null && JSON.parse(log.fields).comment_order">
                                    @{{ JSON.parse(log.fields).comment_order }}
                                </div>    
                            </template>
                            <div>
                                <button @click.stop="seeOrder(order.id)" class="btn btn-primary btn-xs">Подробнее</button>
                            </div>
                        </td>
                        <td class="text-center">
                            <div v-if="order.is_confirmed == 1">
                                <div v-for="active in order.status.active">
                                    <div v-if="active.allowed_for_groups && JSON.parse(active.allowed_for_groups).indexOf(auth.group_id) != -1">
                                        <button class="btn btn-xs" v-bind:class="active.button_color" @click.stop="changeStatus(order.id,active.status_id)">@{{ active.button_text }}</button>    
                                    </div>
                                </div>
                                <div v-if="order.user_id == auth.id && order.status.status == 'Новая'">
                                    <button @click.stop="deleteOrder(order.id)" class="btn btn-xs btn-danger">Удалить</button>
                                </div>    
                            </div>
                            <div v-else>
                                <div v-if="premission.confirmed && premission.confirmed==true || premission.admin && premission.admin==true">
                                    <button class="btn btn-success btn-xs" @click.stop="confirmed(order.id)">Принять</button>
                                </div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Modal forms-->
    <div class="modal fade" id="modalSee" tabindex="-1" role="dialog" aria-labelledby="modalForms" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ trans('pages.orders.see_order') }} <span v-if="see_order.is_update == 1">({{ trans('pages.orders.is_edit') }})</span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div v-if="see_order != null" class="modal-body">
                    <!-- -->
                    <div class="col-4 float-left">
                        <h6>{{ trans('pages.orders.id') }}:</h6>
                    </div>
                    <div class="col-8 float-left">
                        @{{ see_order.id }}
                    </div>
                    <div class="clearfix"></div>
                    <div class="mt-5"></div>
                    <!-- -->
                    <div class="col-4 float-left">
                        <h6>{{ trans('pages.orders.type') }}:</h6>
                    </div>
                    <div class="col-8 float-left">
                        <span v-if="see_order.is_output == 1" class="badge badge-success">Загрузка</span>
                        <span v-else class="badge badge-danger">Выгрузка</span>
                    </div>
                    <div class="clearfix"></div>
                    <div class="mt-5"></div>
                    <!-- -->
                    <div class="col-4 float-left">
                        <h6>{{ trans('pages.orders.period') }}:</h6>
                    </div>
                    <div class="col-8 float-left">
                        @{{ see_order.date_order }}
                    </div>
                    <div class="clearfix"></div>
                    <div class="mt-5"></div>
                    <!-- -->
                    <div class="col-4 float-left">
                        <h6>{{ trans('pages.orders.auto') }}:</h6>
                    </div>
                    <div class="col-8 float-left">
                        @{{ see_order.auto }}
                    </div>
                    <div class="clearfix"></div>
                    <div class="mt-5"></div>
                    <!-- -->
                    <div class="col-4 float-left">
                        <h6>{{ trans('pages.orders.number_m') }}:</h6>
                    </div>
                    <div class="col-8 float-left">
                        @{{ see_order.car_order }}
                    </div>
                    <div class="clearfix"></div>
                    <div class="mt-5"></div>
                    <!-- -->
                    <div class="col-4 float-left">
                        <h6>{{ trans('pages.orders.fio') }}:</h6>
                    </div>
                    <div class="col-8 float-left">
                        @{{ see_order.driver_order }}
                    </div>
                    <div class="clearfix"></div>
                    <div class="mt-5"></div>
                    <!-- -->
                    <div v-if="see_order.is_output == 0">
                        <div class="col-4 float-left">
                            <h6>{{ trans('pages.orders.postavshik') }}:</h6>
                        </div>
                        <div class="col-8 float-left">
                            @{{ see_order.postavshik }}
                        </div>
                        <div class="clearfix"></div>
                        <div class="mt-5"></div> 
                        <div class="col-4 float-left">
                            <h6>{{ trans('pages.orders.input_gruz') }}:</h6>
                        </div>
                        <div class="col-8 float-left">
                            @{{ see_order.input }}
                        </div>
                        <div class="clearfix"></div>
                        <div class="mt-5"></div>   
                    </div>
                    <!-- -->
                    <div class="col-4 float-left">
                        <h6>{{ trans('pages.orders.country_and_city') }}:</h6>
                    </div>
                    <div class="col-8 float-left">
                        @{{ see_order.country_and_city }}
                    </div>
                    <div class="clearfix"></div>
                    <div class="mt-5"></div>
                    <!-- -->
                    <div class="col-4 float-left">
                        <h6>{{ trans('pages.orders.doverenost') }}:</h6>
                    </div>
                    <div class="col-8 float-left">
                        <div v-html="see_order.doverennost_order"></div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="mt-5"></div>
                    <!-- -->
                    <div class="col-4 float-left">
                        <h6>{{ trans('pages.orders.author') }}:</h6>
                    </div>
                    <div class="col-8 float-left">
                        @{{ see_order.author }}
                    </div>
                    <div class="clearfix"></div>
                    <div class="mt-5"></div>
                    <!-- -->
                    <div class="col-4 float-left">
                        <h6>{{ trans('pages.orders.created_at') }}:</h6>
                    </div>
                    <div class="col-8 float-left">
                        @{{ see_order.created_at }}
                    </div>
                    <div class="clearfix"></div>
                    <div class="mt-5"></div>
                    <div v-for="log in see_order.logs">
                        <div class="col-4 float-left">
                        <h6>@{{ log.value }}:</h6>
                        </div>
                        <div class="col-8 float-left">
                            @{{ log.created_at }}
                        </div>
                        <div class="clearfix"></div>
                        <div class="mt-5"></div>
                    </div>
                    <!-- -->
                    <div class="col-4 float-left">
                        <h6>{{ trans('pages.orders.comments') }}:</h6>
                    </div>
                    <div class="col-8 float-left" >
                        <div v-html="see_order.comment_order"></div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="mt-5"></div>
                    <!-- -->
                </div>
                <div class="modal-footer">
                    <div class="col-12">
                        <div class="text-center">
                            <a class="btn btn-success btn-xs" href="javascript:void(0)" @click="seeComment()">{{ trans('pages.orders.add_comment') }}</a>

                            <a class="ml-10 btn btn-success btn-xs" href="javascript:void(0)" @click="seeDocument()">{{ trans('pages.orders.add_document') }}</a>

                            @if(Crm::is_premission('add_order'))
                                <a class="ml-10 btn btn-success btn-xs" href="javascript:void(0)" @click="copyOrder(see_order.id)">{{ trans('pages.orders.copy') }}</a>
                            @endif

                            @if(Crm::is_premission('edit_order'))
                                <a class="ml-10 btn btn-success btn-xs" href="javascript:void(0)" @click="CreateOrderForms.editOrder(see_order.id)">{{ trans('pages.orders.edit') }}</a>
                            @endif

                            @if(Crm::is_premission('delete_order'))
                                <a class="ml-10 btn btn-success btn-xs" @click="deleteOrder(see_order.id)" href="javascript:void(0)">{{ trans('pages.orders.delete') }}</a>
                            @endif

                            <a class="ml-10 btn btn-success btn-xs" v-bind:href="'/logs/order/'+see_order.id" target="_blank">{{ trans('pages.orders.movement') }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal comment-->
    <div class="modal fade" id="modalComment" tabindex="-1" role="dialog" aria-labelledby="modalForms" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ trans('pages.orders.add_comment') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div>
                        <div class="form-group">
                            <label for="dropdownFormComment">{{ trans('pages.orders.add_comment') }}<span> *</span>:</label> 
                            <textarea autocomplete="off" rows="2" id="dropdownFormComment" class="form-control" v-model="modal_comment.comment_order"></textarea>
                        </div> 
                        <div v-if="modal_comment.error" class="form-group">
                            <p>@{{ modal_status_form_required.error_text }}</p>
                        </div>
                        <button class="btn btn-primary" @click="addComment()">{{ trans('pages.orders.save') }}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal document-->
    <div class="modal fade" id="modalDocument" tabindex="-1" role="dialog" aria-labelledby="modalForms" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ trans('pages.orders.add_document') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div>
                        <div class="form-group">
                            <label for="dropdownFormComment">{{ trans('pages.orders.add_document') }}<span> *</span>:</label> 
                            <div id="remove_link_1" class="dropzone"></div>
                        </div> 
                        <div v-if="modal_document.error" class="form-group">
                            <p>@{{ modal_status_form_required.error_text }}</p>
                        </div>
                        <button class="btn btn-primary" @click="addDocument()">{{ trans('pages.orders.save') }}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal status-->
    <div class="modal fade" id="modalStatus" tabindex="-1" role="dialog" aria-labelledby="modalForms" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">{{ trans('pages.orders.status_order') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div>
                        <div class="form-group" v-if="modal_status.race_id">
                            <label for="dropdownFormRaceId">{{ trans('pages.orders.race') }}<span v-if="modal_status_form_required.race_id"> *</span></label>
                            <select id="dropdownFormRaceId" v-model="modal_status_form.race_id" class="form-control" required>
                                <option disabled selected></option>
                                <option v-for="departure in departures" v-bind:value="departure.id">@{{ departure.name }}</option>
                            </select>
                        </div>

                        <div class="form-group" v-if="modal_status.departure_id">
                            <label for="dropdownFormRaceId">{{ trans('pages.orders.departure') }}<span v-if="modal_status_form_required.departure_id"> *</span></label>
                            <select id="dropdownFormRaceId" v-model="modal_status_form.departure_id" class="form-control" required>
                                <option disabled selected></option>
                                <option v-for="departure in departures" v-bind:value="departure.id">@{{ departure.name }}</option>
                            </select>
                        </div>

                        <div class="form-group" v-if="modal_status.attachments">
                            <label for="attachments">{{ trans('pages.orders.attachments') }}<span v-if="modal_status_form_required.attachments"> *</span>:</label> 
                            <div id="remove_link" class="dropzone"></div>
                        </div> 

                        <div class="form-group" v-if="modal_status.act_number">
                            <label for="dropdownFormActNumber">{{ trans('pages.orders.act_number') }}<span v-if="modal_status_form_required.act_number"> *</span>:</label> 
                            <input autocomplete="off" rows="2" id="dropdownFormActNumber" class="form-control" v-model="modal_status_form.act_number" required>
                        </div>

                        <div class="form-group" v-if="modal_status.send_to_zagr">
                            <label for="dropdownFormSendToZagr">{{ trans('pages.orders.send_to_zagr') }}<span v-if="modal_status_form_required.send_to_zagr"> *</span>:</label> 
                            <input type="checkbox" id="dropdownFormSendToZagr" class="form-control" v-model="modal_status_form.send_to_zagr" disabled>
                        </div>

                        <div class="form-group" v-if="modal_status.comment_order">
                            <label for="dropdownFormComment">{{ trans('pages.orders.add_comment') }}<span v-if="modal_status_form_required.comment_order"> *</span>:</label> 
                            <textarea autocomplete="off" rows="2" id="dropdownFormComment" class="form-control" v-model="modal_status_form.comment_order"></textarea>
                        </div> 

                        <div v-if="modal_status_form_required.error_status" class="form-group">
                            <p>@{{ modal_status_form_required.error_text }}</p>
                        </div>
                        <button class="btn btn-primary" @click="setStatus(modal_status_form.order_id,modal_status_form.status_id)" v-bind:disabled="is_load">{{ trans('pages.orders.save') }}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- make document -->
    <form id="create-form-document" method="post" action="{{ route('documents.orders') }}">
        @csrf
        <input type="hidden" name="orders" v-model="excreta_orders_json">
    </form>
    <!-- -->
</div>



@endsection

@section('footer')
<script type="text/javascript">
    Dropzone.autoDiscover = false;
    const Table = new Vue({
        el: "#table-result",
        data: function(){
            return {
                is_load: false,
                url: {
                    getOrder: "{{ route('api.order.index') }}",
                    addComment: "{{ route('api.order.add.comment') }}",
                    addDocument: "{{ route('api.order.add.document') }}",
                    copyOrder: "{{ route('api.orders.copy') }}",
                    setStatus: "{{ route('api.order.set_status') }}",
                    deleteOrder: "{{ route('api.order.delete') }}",
                    confirmedOrder: "{{ route('api.order.confirmed.new') }}",
                    getDepartunes: "{{ route('api.handbook.departure.index') }}",
                    getData: "{{ route('api.data.index') }}"
                },
                excreta_orders: [],
                orders: [],
                see_order: {},
                modal_comment:{
                    comment_order: "",
                    order_id: "",
                    error: false
                },
                modal_document:{
                    document_order: [],
                    order_id: "",
                    error: false
                },
                modal_status_form_required: {
                    error_text: "Заполните все обязательные поля *",
                    error_status: false,
                    order_id: false,
                    comment_order: false,
                    act_number: false,
                    attachments: false,
                    send_to_zagr: false,
                },
                modal_status_form:{
                    order_id: null,
                    status_id: null,
                    comment_order: "",
                    race_id: "",
                    departure_id: "",
                    act_number: "",
                    attachments: [],
                    send_to_zagr: true,
                },
                modal_status: {
                    comment_order: false,
                    race_id: false,
                    departure_id: false,
                    act_number: false,
                    attachments: false,
                    send_to_zagr: false,
                },
                departures: [],
                auth: null,
                premission: null,
                sortParam: 'id_desc',
                sortComment: '',
                autoUpdate: false,
                filter: JSON.parse('{!! $input !!}'),
                fastSearchInput: ""
            }
        },
        methods: {
            exportHighlightOrder(){
                var app = this;
                console.log('export');
                $('#create-form-document').submit();
                app.resetHighlightOrder();
            },
            allHighlightOrder(){
                var app = this;
                app.excreta_orders = app.orders;
                app.$forceUpdate();
            },
            resetHighlightOrder(){
                var app = this;
                app.excreta_orders = [];
                app.$forceUpdate();
            },
            highlightOrder(order){
                var app = this;
                for(var i=0;i<app.excreta_orders.length;i++){
                    if(app.excreta_orders[i].id == order.id){
                        app.excreta_orders.splice(i, 1);
                        return true;
                    }
                }
                app.excreta_orders.push(order);
                return true;
            },
            checkExcretaOrder(order){
                var app = this;
                for(var i=0;i<app.excreta_orders.length;i++){
                    if(order.id == app.excreta_orders[i].id){
                        return true;
                    }
                }
                return false;
            },
            setTopStatistics(orders){
                var count_all_orders = orders.length;
                var count_output_orders = 0;
                var count_input_orders = 0;
                var count_in_territory = 0;
                var count_out_territory = 0;
                var count_all_zagr = 0;

                for(var i=0;i<orders.length;i++){
                    if(orders[i].is_output == 1){
                        count_output_orders = count_output_orders + 1;
                    }
                    else{
                        count_input_orders = count_input_orders + 1;
                    }
                    //Если скопирована заявка
                    if(orders[i].copy_id_order != null){
                        count_all_zagr = count_all_zagr + 1;
                    }
                }

                $("#statistics-top-all-orders").html(count_all_orders);
                $("#statistics-top-output-orders").html(count_output_orders);
                $("#statistics-top-input-orders").html(count_input_orders);
                $("#statistics-top-zagr").html(count_all_zagr);

                $("#statistics-top-all-orders").removeClass('d-none');
                $("#statistics-top-output-orders").removeClass('d-none');
                $("#statistics-top-input-orders").removeClass('d-none');
                $("#statistics-top-zagr").removeClass('d-none');

                return true;
            },
            notification(last_orders, new_orders){
                var app = this;
                if(last_orders.length == 0 || new_orders.length == 0){
                    return false;
                }
                for(var i=0;i<last_orders.length;i++){
                    for(var k=0;k<new_orders.length;k++){
                        if(last_orders[i].id == new_orders[k].id && last_orders[i].status.status_id == new_orders[k].status.status_id){
                            new_orders.splice(k, 1);
                        }
                    }
                }
                for(var k=0;k<new_orders.length;k++){
                    AlertVue.openAlert('Заявка №'+new_orders[k].id+' изменена на '+new_orders[k].status.status);
                }
                return true;
            },
            getData(){
                app = this;
                axios
                .post(app.url.getData,{
                    filter: this.filter
                })
                 .then(function(result){
                    var last_orders = app.orders;
                    var new_orders = [];
                    for(var i=0;i<result.data.orders.length;i++){
                        new_orders.push(result.data.orders[i]);
                    }
                    app.notification(last_orders, new_orders);
                    
                    for(var key in result.data){
                        app.$data[key] = result.data[key];
                    }
                    // app.setTopStatistics(app.orders);
                });
            },
            updateModalForm(){
                this.modal_status.race_id = false;
                this.modal_status.comment_order = false;
                this.modal_status.departure_id = false;
                this.modal_status.act_number = false;
                this.modal_status.attachments = false;
                this.modal_status.send_to_zagr = false;
                this.modal_status_form.race_id = "";
                this.modal_status_form.comment_order = "";
                this.modal_status_form.departure_id = "";
                this.modal_status_form.act_number = "";
                this.modal_status_form.attachments = [];
                this.modal_status_form.send_to_zagr = true;
                this.is_load = false;
                this.modal_status_form_required.error_status = false;
            },
            changeStatus(order_id,status_id){
                app = this;
                app.updateModalForm();
                axios
                .post(app.url.getOrder,{
                    id: order_id,
                    status_id: status_id
                })
                .then(function(result){
                    order = result.data;
                    for(i=0;i<order.status.active.length;i++){
                        if(order.status.active[i].status_id == status_id){
                          fields = JSON.parse(order.status.active[i].fields);
                          if(fields.length > 0){
                              for(k=0;k<fields.length;k++){
                                app.modal_status[fields[k].name] = true;
                                app.modal_status_form.order_id = order.id; 
                                app.modal_status_form.status_id = status_id;
                                app.modal_status_form_required[fields[k].name] = fields[k].requerd;
                              }  
                              $('#modalStatus').modal('show');  
                          }
                          else{
                            console.log('change');
                          }
                        }
                    }
                });
            },
            setStatus(order_id,status_id){
                app = this;
                app.is_load = true;
                axios
                .post(this.url.setStatus,{
                    form: app.modal_status_form,
                    id: order_id,
                    status_id: status_id
                })
                .then(function(result){
                    if(result.data.status == 'ok'){
                        order = result.data.order;
                        for(i=0;i<app.orders.length;i++){
                            if(app.orders[i].id == order.id){
                                app.orders[i].status = order.status;
                                app.orders[i].logs = order.logs;
                            }
                        }
                        $('#modalStatus').modal('hide');
                        AlertVue.openAlert('Операция прошла успешно');
                    }
                    else{
                        app.is_load = false;
                        app.modal_status_form_required.error_status = true;
                    }
                });
            },
            makeDate(date){
                date = date.split('-');
                return date[2]+'.'+date[1]+'.'+date[0];
            },
            seeOrder(order_id){
                axios
                .post(this.url.getOrder,{
                    id: order_id
                })
                 .then(function(result){
                    Table.see_order = result.data;
                    $('#modalSee').modal('show');
                });
            },
            seeComment(){
                this.modal_comment.comment_order = "";
                this.modal_comment.order_id = this.see_order.id;
                $('#modalSee').modal('hide');
                $('#modalComment').modal('show');
            },
            seeDocument(){
                this.modal_document.document_order = [];
                myDropzone1.removeAllFiles();
                this.modal_document.order_id = this.see_order.id;
                $('#modalSee').modal('hide');
                $('#modalDocument').modal('show');
            },
            addComment(){
                if(this.modal_comment.comment_order == ""){
                    this.modal_comment.error = true;
                    return;
                }
                axios
                .post(this.url.addComment,{
                    id: this.modal_comment.order_id,
                    comment_order: this.modal_comment.comment_order
                })
                 .then(function(result){
                    console.log(result);
                    $('#modalComment').modal('hide');
                    AlertVue.openAlert('Операция прошла успешно');
                });

                console.log(this.modal_comment);
            },
            addDocument(){
                if(this.modal_document.comment_order == ""){
                    this.modal_document.error = true;
                    return;
                }
                axios
                .post(this.url.addDocument,{
                    id: this.modal_document.order_id,
                    document_order: this.modal_document.document_order
                })
                 .then(function(result){
                    console.log(result);
                    $('#modalDocument').modal('hide');
                    AlertVue.openAlert('Операция прошла успешно');
                });
            },
            copyOrder(order_id){
                app = this;
                axios
                .post(this.url.copyOrder,{
                    id: order_id
                })
                 .then(function(result){
                    console.log(result);
                    AlertVue.openAlert('Операция прошла успешно');
                    $('#modalSee').modal('hide');
                    app.getData();
                });
            },
            deleteOrder(order_id){
                app = this;
                axios
                .post(this.url.deleteOrder,{
                    id: order_id
                })
                .then(function(result){
                    for(i=0;i<app.orders.length;i++){
                        if(app.orders[i].id == result.data.id){
                            app.orders.splice(i,1);
                            AlertVue.openAlert('Операция прошла успешно');
                            $('#modalSee').modal('hide');
                        }
                    }
                });
            },
            confirmed(order_id){
                app = this;
                axios
                .post(this.url.confirmedOrder,{
                    id: order_id
                })
                 .then(function(result){
                    order = result.data;
                    for(i=0;i<app.orders.length;i++){
                        if(app.orders[i].id == order.id){
                            app.orders[i].status = order.status;
                            app.orders[i].is_confirmed = order.is_confirmed;
                            AlertVue.openAlert('Операция прошла успешно');
                        }
                    }
                });
            },
            getDepartures(){
                axios
                .post(this.url.getDepartunes,{
                    
                })
                 .then(function(result){
                    Table.departures = result.data;
                });
            },
            sortMounted(type){
                app = this;
                if(app.sortParam == type+'_asc'){
                    app.sortParam = type+'_desc';
                }
                else{
                    app.sortParam = type+'_asc';
                }
                console.log(app.sortParam);
            },
            sortCommentMounted(){
                var app = this;
                if(app.sortComment == ''){
                    app.sortComment = 'asc';
                }
                else if(app.sortComment == 'asc'){
                    app.sortComment = 'desc';
                }
                else if(app.sortComment == 'desc'){
                    app.sortComment = '';
                }
            },
            fastSearch(){
                app = this;
                $.each($("#datable_main tbody tr"), function() {
                    if($(this).text().toLowerCase().indexOf(app.fastSearchInput.toLowerCase()) === -1) {
                        $(this).hide();
                    } else {
                        $(this).show();
                    }
                });
                
            }
        },
        created: function(){
            this.getData();
            this.getDepartures();
        },
        updated: function(){
            $("#remove_link").dropzone({
                url: "{{ route('api.dropzone') }}",
                addRemoveLinks: false,
                dictRemoveFile: "Удалить",
                dictDefaultMessage: "Перетащите сюда файлы для загрузки",
                sending: function(file, xhr, formData) {
                    formData.append("_token", "{{ csrf_token() }}");
                },
                success: function (file, response) {
                    Table.modal_status_form.attachments.push(response);
                },
                error: function (file, response) {
                    console.log(response);
                }
            });

            $("#search").keyup(function(){
                _this = this;
                
                $.each($("#datable_main tbody tr"), function() {
                    if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1) {
                        $(this).hide();
                    } else {
                        $(this).show();
                    }
                });
            }); 
        },
        computed:{
            excreta_orders_json(){
                var app = this;
                var result = [];
                for(var key in app.excreta_orders){
                    result.push({
                        car_order: app.excreta_orders[key].car_order,
                        driver_order: app.excreta_orders[key].driver_order,
                        country_and_city: ''+(app.excreta_orders[key].city != null ? app.excreta_orders[key].city.city : '')+' / '+(app.excreta_orders[key].country != null ? app.excreta_orders[key].country.name : '')
                    });
                }
                return JSON.stringify(result);
            },
            sortedList () {
                var orders = this.orders;
                for(var i=0;i<orders.length;i++){
                    if(orders[i].comment_order == null){
                        orders[i].comment_order = "";
                    }
                }
                
                if(this.sortComment != ''){
                    if(this.sortComment == 'asc'){
                        orders.sort(function(a, b) {return a.comment_order.toLowerCase() > b.comment_order.toLowerCase() ? 1 : -1;});
                    }
                    else{
                        orders.sort(function(a, b) {return b.comment_order.toLowerCase() > a.comment_order.toLowerCase() ? 1 : -1;});
                    }   
                }
                switch(this.sortParam){
                    case 'id_asc': return orders.sort(( a, b ) => a.id - b.id);
                    case 'id_desc': return orders.sort(( a, b ) => b.id - a.id);
                    case 'is_output_asc': return orders.sort(( a, b ) => a.is_output - b.is_output);
                    case 'is_output_desc': return orders.sort(( a, b ) => b.is_output - a.is_output);
                    case 'user.last_name_asc': return orders.sort(function(a, b) {return a.user.last_name+a.user.name > b.user.last_name+b.user.name ? 1 : -1;})
                    case 'user.last_name_desc': return orders.sort(function(a, b) {return b.user.last_name+b.user.name > a.user.last_name+a.user.name ? 1 : -1;})

                    case 'car_order_asc': return orders.sort(function(a, b) {return a.car_order.toLowerCase() > b.car_order.toLowerCase() ? 1 : -1;})
                    case 'car_order_desc': return orders.sort(function(a, b) {return b.car_order.toLowerCase() > a.car_order.toLowerCase() ? 1 : -1;})

                    case 'date_order_asc': return orders.sort(function(a, b) {return a.date_order > b.date_order ? 1 : -1;})
                    case 'date_order_desc': return orders.sort(function(a, b) {return b.date_order > a.date_order ? 1 : -1;})

                    case 'driver_order_asc': return orders.sort(function(a, b) {return a.driver_order.toLowerCase() > b.driver_order.toLowerCase() ? 1 : -1;})
                    case 'driver_order_desc': return orders.sort(function(a, b) {return b.driver_order.toLowerCase() > a.driver_order.toLowerCase() ? 1 : -1;})
                    case 'sostoyanie_asc': return orders.sort(function(a, b) {return a.status.status.toLowerCase() > b.status.status.toLowerCase() ? 1 : -1;})
                    case 'sostoyanie_desc': return orders.sort(function(a, b) {return b.status.status.toLowerCase() > a.status.status.toLowerCase() ? 1 : -1;})
                    default: return orders;
                }
            }
        }
    });

    var myDropzone1 = new Dropzone("#remove_link_1", {
        url: "{{ route('api.dropzone') }}",
        addRemoveLinks: false,
        dictRemoveFile: "Удалить",
        dictDefaultMessage: "Перетащите сюда файлы для загрузки",
        sending: function(file, xhr, formData) {
            formData.append("_token", "{{ csrf_token() }}");
        },
        success: function (file, response) {
            Table.modal_document.document_order.push(response);
        },
        error: function (file, response) {
            console.log(response);
        }
   });

    

    var updateData = setInterval(function() {
      console.log('updated');  
      Table.getData();
    }, 20000);

</script>
@endsection