@extends('admin.layouts.app')
@php
    $ticket_status = config('common.ticket_status');
@endphp
@section('content')
<script src="{{ asset($plugin_path.'moment/min/moment.min.js') }}"></script>
<script src="{{ asset($plugin_path.'bootstrap-daterangepicker/daterangepicker.min.js') }}"></script>
<link href="{{ asset($plugin_path.'bootstrap-daterangepicker/daterangepicker.min.css') }}" rel="stylesheet" type="text/css" />
<div class="container-fluid">
    <div class="row bg-title">
        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
            <h4 class="page-title">Users</h4> </div>
        <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
            <ol class="breadcrumb">
                <li><a href="{{ route('dashboard') }}">Dashboard</a></li>
                <li class="active">Tickets</li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="white-box">
                <div class="row">
                    <div class="col-md-6 col-xs-12">
                        <h3 class="box-title m-b-0">Ticket Management</h3>
                        <p class="text-muted m-b-30">List of Tickets</p>
                    </div>
                </div>
                <div class="white-box well">
                    <form id="document_filter" method="post" action="{{ route('user.ticket.search') }}">
                        {{ csrf_field() }}
                        <div class="row">
                            <div class="form-group col-md-4 col-xs-12">
                                <label>EV Name</label>
                                <input type="text" name="ev_name" id="ev_name" placeholder="Enter EV Name" value="{{request()->get('ev_name')}}" class="form-control">
                            </div>
                            <div class="form-group col-md-4 col-xs-12">
                                <label>Email</label>
                                <input type="text" name="email" id="email" placeholder="Enter Email" value="{{request()->get('email')}}" class="form-control">
                            </div>
                            <div class="form-group col-md-4 col-xs-12">
                                <label>Status</label>
                                <select name="ticket_status" id="ticket_status" class="form-control">
                                    <option value="any">Any Status</option>
                                        @foreach($ticket_status as $key => $value)
                                            <option value="{{$key}}" @if(request()->get('ticket_status') == $key && !empty(request()->get('ticket_status'))) selected="selected" @elseif($key == "pending" && empty(request()->get('ticket_status'))) selected="selected" @endif >{{$value}}</option>
                                         @endforeach
                                </select>
                            </div>
                            <div class="form-group col-md-4 col-xs-12">
                                <label>Ticket Date Range</label>
                                <input type="text" name="date_range" id="date_range" placeholder="Select dates" value="{{request()->get('date_range')}}" class="form-control" autocomplete="off">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                  <button type="submit" class="btn btn-info">Search</button>
                                  <a type="button" class="btn btn-danger" href="{{ route('user.ticket') }}">Reset</a>
                            </div>
                        </div>
                    </form>
                </div>
                @include('admin.includes.status')
                <div class="table-responsive">
                    <table id="ticket_list" class="table table-bordered m-t-10">
                        <thead>
                            <tr>
                                @if($admin_role == 'root')
                                <th>Ticket ID</th>
                                @endif
                                <th>Portfolio Number</th>
                                <th>EV Details</th>
                                <th>Ticket date</th>
                                <th>Subject</th>
                                {{-- <th>Question</th>
                                <th>Answer</th>--}}
                                <th width="20%">Stage Detail</th>
                                <th>Status</th>
                                <th width="10%">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(!empty($tickets))
                                @foreach($tickets as $ticket)
                                    @php
                                        $answer = ($ticket->answer != "") ? "$ticket->answer" : "-";
                                        if($ticket->status == 'pending'){
                                            $status_class = "label-info";
                                        }elseif($ticket->status == 'completed'){
                                            $status_class = "label-success";
                                        }
                                        if($ticket->stage_id == 1){
                                            $stage_name = "Registration Stage";
                                        }elseif($ticket->stage_id == 2){
                                            $stage_name = "Hiring Stage";
                                        }elseif($ticket->stage_id == 3){
                                            $stage_name = "Visa Stage";
                                        }elseif($ticket->stage_id == 4){
                                            $stage_name = "After Arrival in USA Stage";
                                        }
                                    @endphp
                                    <tr class=" {{in_array($ticket->id, $ticketPendingReply) ? 'table-row-highlight' : ''}}">
                                        @if($admin_role=='root')
                                        <td>{{ $ticket->id }}</td>
                                        @endif
                                        <td>{{ $ticket->portfolio_number }}</td>
                                        <td>
                                            {{ $ticket->first_name." ".$ticket->last_name }}<br/>
                                            <a href="mailto:{{ $ticket->email }}">{{ $ticket->email }}</a>
                                        </td>
                                        <td>{{ dateformat($ticket->created_at,DISPLAY_DATE)}}</td>
                                        <td>{{ $ticket->subject }}</td>
                                        {{-- <td>{{ $ticket->question }}</td>
                                        <td>{{ $answer }}</td>--}}
                                        <td>
                                            @if(!empty($ticket->stage_id))
                                            <div class="col-md-4" style="padding:0;">
                                                Stage {{$ticket->stage_id}}  >><br/>
                                                <p style="font-size: 10px;">({{$stage_name}})</p>
                                            </div>
                                            <div class="col-md-6" style="padding:0;">
                                                {{$ticket->as_title}}
                                            </div>
                                            @else
                                                N/A
                                            @endif
                                        </td>
                                        <td><span class="label {{ $status_class }}">{{ucfirst($ticket->status)}}</span></td>
                                        <td>
                                            @if($ticket->ticketDetails()->isEmpty())
                                                <a data-target=".bs-example-modal-lg" data-toggle="modal"  class="popup-with-form btn btn-success btn-sm" onclick="return show_ticket_reply_popup({{ $ticket->id }},'loadtickets')">@if($ticket->status == "completed") <i class="fa fa-pencil"></i> @else <i class="mdi mdi-reply" data-icon="v"></i> @endif</a>
                                            @endif
                                            @if($ticket->status == "pending")
                                                <a class="btn btn-primary mark_completed btn-sm" data-id='{{$ticket->id}}' title="Manually complete ticket">
                                                    <i class="mdi mdi-check-circle"></i>
                                                </a>
                                            @endif
                                            @if(!$ticket->ticketDetails()->isEmpty())
                                                 <a href="{{route('admin.ticket.details', ['ticket_id' => \Crypt::encryptString($ticket->id)])}}" class="btn btn-info btn-sm" data-id='{{$ticket->id}}' title="Ticket conversation">
                                                     <i class="mdi mdi-wechat"></i>
                                                 </a>
                                            @endif
                                           
                                           
                                        </td>
                                    </tr>
                                @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div> 
@endsection
<div class="modal fade bs-example-modal-lg" tabindex="-1"  role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" >
            <div class="modal-header bg-info">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4> 
            </div>
            <div class="modal-body" id="modal_content">

            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
@section('scripts')
<script type="text/javascript">
    function show_ticket_reply_popup(tid,action){
        $("#myLargeModalLabel").html("Please wait...");
        $("#modal_content").html('Please wait...');
        var url = "{{ route('load.ticket.data') }}";
        $.ajax({
            url: url,
            type: 'post',
            data: { tid: tid,action:action },
            dataType: 'json',
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            success: function(response){
                $("#myLargeModalLabel").html("Contact Support Answer");
                $("#modal_content").html(response.data);
            },
        });
    }
    function submitTicketAnswer(){
        //show_inner_loader('.modal-content');
        var form_selector = "#frm_update_int_con";

        ajaxFormValidator(form_selector,function(ele,event){
            event.preventDefault();
            showLoader("#full-overlay");

            var form_data = new FormData(ele);
            var url = "{{ route('user.ticket.submit') }}";

            $.ajax({
                type: 'post',
                url: url, 
                data: form_data,
                dataType: 'json',
                processData: false,
                contentType: false,
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success: function(response) {
                    hideLoader("#full-overlay");
                    if(response.type == "success")
                    {
                        $(".bs-example-modal-lg").hide();
                        var Html = '<div class="alert swl-alert-success"><p>'+response.message+'</p></div>'; 
                        notifyResponseTimerAlert(Html,"success","Success");
                        setTimeout(function() {
                            location.reload(true);
                            $(".bs-example-modal-lg").hide();
                        }, 3000);
                    }
                    else
                    {
                        var Html = '<div class="alert swl-alert-danger"><p>'+response.message+'</p></div>'; 
                        notifyResponseTimerAlert(Html,"error","Error");
                        return false;
                    }
                }
            });
        }); 
    }
    
    $(document).ready(function() {
        $("#date_range").daterangepicker({
            showDropdowns: true,
            autoUpdateInput: false,
            autoApply: true,
            locale: {
                format: 'MMM DD,YYYY',
                cancelLabel: 'Clear'
            }
        });
        $('#date_range').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('MMM DD,YYYY') + ' - ' + picker.endDate.format('MMM DD,YYYY'));
        });

        $('#ticket_list').dataTable({
             "bSort" : false 
        });
        $(document).on("click", ".mark_completed", function(){
            var ticket_id = $(this).data('id');
            swal({
                title: "Are you sure you want to mark ticket as completed?",
                text: "",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes",
                closeOnConfirm: false
              },
              function() {
                var url = "{{ route('mark.ticket.completed') }}";
                $.ajax({
                    type: "post",
                    url: url,
                    data: {'id' : ticket_id},
                    dataType: 'json',
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    beforeSend: function(data) {
                        $(".confirm").attr('disabled', 'disabled');
                        showLoader("#full-overlay");
                    },
                    success: function(data) {
                        hideLoader("#full-overlay");
                    }
                  })
                  .done(function(data) {
                      swal({
                            title: data.title,
                            text: data.message,
                            type: data.type
                        },
                        function() {
                            location.reload();
                        }
                    );
                  })
                  .error(function(data) {
                    swal(data.title, data.message, data.type);
                  });
              }
            );
        });
           
    });
</script>
@endsection