@extends('layouts.app')
@if($is_admin)
@section('title', __('lang_v1.ticket'))
@else
@section('title', __('lang_v1.help'))
@endif

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    @if($is_admin)
    <h1>@lang('lang_v1.ticket')</h1>
    @else
    <h1>@lang('lang_v1.help')</h1>
    @endif
</section>

<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-12">
            @component('components.filters', ['title' => __('report.filters')])
                <div class="col-md-3">
                    <div class="form-group">
                        {!! Form::label('ticket_date_range', __('report.date_range') . ':') !!}
                        {!! Form::text('ticket_date_range', null, ['placeholder' => __('lang_v1.select_a_date_range'), 'class' => 'form-control', 'id' => 'ticket_date_range', 'readonly']); !!}
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        {!! Form::label('ticket_status',  __('lang_v1.status') . ':') !!}
                        {!! Form::select('ticket_status', ['new' => __('lang_v1.status_new'), 'progress' => __('lang_v1.status_progress'), 'complete' => __('lang_v1.status_complete')], null, ['class' => 'form-control select2', 'style' => 'width:100%', 'placeholder' => __('lang_v1.all')]); !!}
                    </div>
                </div>
            @endcomponent
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            @component('components.widget', ['class' => 'box-primary', 'title' => ($is_admin) ? __('lang_v1.ticket') : __('lang_v1.help')])
                @can('ticket.create')
                    @slot('tool')
                        <div class="box-tools">
                            <a class="btn btn-block btn-primary" href="{{action([\App\Http\Controllers\TicketController::class, 'create'])}}">
                            <i class="fa fa-plus"></i> @lang('messages.add')</a>
                        </div>
                    @endslot
                @endcan
                    <table class="table table-bordered table-striped" id="ticket_table">
                        <thead>
                            <tr>
                                <th>@lang('lang_v1.action')</th> 
                                <th>@lang('lang_v1.subject')</th>
                                <th>@lang('lang_v1.added_by')</th>
                                <th>@lang('lang_v1.priority')</th>
                                <th>@lang('lang_v1.status')</th>
                                <th>@lang('lang_v1.date')</th>
                            </tr>
                        </thead>
                    </table>
            @endcomponent
        </div>
    </div>

</section>
<!-- /.content -->
<!-- /.content -->
<div class="modal fade payment_modal" tabindex="-1" role="dialog" 
    aria-labelledby="gridSystemModalLabel">
</div>

<div class="modal fade edit_payment_modal" tabindex="-1" role="dialog" 
    aria-labelledby="gridSystemModalLabel">
</div>
@stop
@section('javascript')
<script type="text/javascript">
$(document).ready( function(){
    //  $('#ticket_date_range').daterangepicker(
    //     dateRangeSettings,
    //     function (start, end) {
    //         $('#ticket_date_range').val(start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format));
    //         ticket_table.ajax.reload();
    //     }
    // );
    if ($('#ticket_date_range').length == 1) {
        $('#ticket_date_range').daterangepicker(
            dateRangeSettings,
            function (start, end) {
                $('#ticket_date_range').val(
                    start.format(moment_date_format) + ' ~ ' + end.format(moment_date_format)
                );
                ticket_table.ajax.reload();
            }
        );

        $('#ticket_date_range').on('cancel.daterangepicker', function (ev, picker) {
            // $('#product_sr_date_filter').val('');
            ticket_table.ajax.reload();
        });
    }
    
    ticket_table = $('#ticket_table').DataTable({
        processing: true,
        serverSide: true,
        aaSorting: [[1, 'desc']],
        "ajax": {
            "url": "/ticket",
            "data": function ( d ) {
                if($('#ticket_date_range').val()) {
                    var start = $('#ticket_date_range').data('daterangepicker').startDate.format('YYYY-MM-DD');
                    var end = $('#ticket_date_range').data('daterangepicker').endDate.format('YYYY-MM-DD');
                    d.start_date = start;
                    d.end_date = end;
                }

                console.log($('#ticket_date_range').data('daterangepicker').startDate.format('YYYY-MM-DD'));

                // d.status = $('#ticket_status').val();

                if($('#ticket_status').length) {
                    d.status = $('#ticket_status').val();
                }

                d = __datatable_ajax_callback(d);
            }
        },
        // scrollY:        "75vh",
        // scrollX:        true,
        // scrollCollapse: true,
        columns: [
            { data: 'action', orderable: false, searchable: false },
            // { data: 'id' },
            // { data: 'ticket_number' },
            { data: 'subject' },
            { data: 'added_by' },
            
            { data: 'priority' },
            { data: 'status' },
            { data: 'created_at' }
            // { data: 'added_by', name: 'usr.first_name' }
        ],
        scrollX: true,
        scrollCollapse: true,
    });

    $(document).on('change', '#ticket_status',  function() {
        ticket_table.ajax.reload();
    });

    // $('#only_subscriptions').on('ifChanged', function(event){
    //     ticket_table.ajax.reload();
    // });
});

$(document).on('click', '.delete-button', function() {
var delete_id = $(this).data('id');

console.log(delete_id);

    swal({
        title: LANG.sure,
        icon: 'warning',
        buttons: true,
        dangerMode: true,
    }).then(willDelete => {

    // console.log("/plan/delete/"+delete_id);
        
        if (willDelete) {
            console.log(delete_id);
            var delete_list = {
                "url": "/ticket/delete/"+delete_id,
                "method": "GET",
                "timeout": 0,
            };
    
            $.ajax(delete_list).done(function (response) 
            {
                console.log(response);
                window.location.href = '/ticket';
            });
        }
    });
});
$(document).on('click', '.closed-button', function() {
var close_id = $(this).data('id');

    swal({
        title: 'Are you sure to closed this ticket?',
        icon: 'warning',
        buttons: true,
        dangerMode: true,
    }).then(willAction => {

        if (willAction) {
            // console.log(close_id);
            var closed_list = {
                "url": "/ticket/closed/"+close_id,
                "method": "GET",
                "timeout": 0,
            };
    
            $.ajax(closed_list).done(function (response) 
            {
                console.log(response);
                window.location.href = '/ticket';
            });
        }
    });
});
</script>
 <script src="{{ asset('js/payment.js?v=' . $asset_v) }}"></script>
@endsection