@extends('admin.layout')

@section('content')

    <div class="wrapper-md">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-md-10">
                        <p class="m-n font-thin h3">Customer Support Tickets</p>
                    </div>
                    <div class="col-md-2 text-right">
                        @can('create-ticket')
                        <a href="{{ url('/ticket/create') }}" class="btn btn-primary btn-sm" title="Add New sub_service_item">
                            <i class="fa fa-plus" aria-hidden="true"></i> Add New Ticket
                        </a>
                        @endcan
                    </div>
                </div>
            </div>


            <div class="panel-body">
                <div class="card">
                    <div class="card-body">

                        <form method="GET" action="{{ url('/ticket') }}" accept-charset="UTF-8"
                              class="form-inline my-2 my-lg-0 float-right" role="search">

                            <div class="form-group {{ $errors->has('status') ? 'has-error' : ''}}">
                                <label for="status" class="control-label">{{ 'Status' }}</label><br>

                                <select class="form-control" name="status"   id="status"    >
                                    <option value="">--Select Status--</option>
                                    @foreach($status as $key=>$item)
                                        <option value="{{$item}}"  {{( ( Request()->status == $item) )? 'selected': ''}} >{{$item}}</option>
                                    @endforeach
                                </select>
                                {!! $errors->first('status', '<p class="help-block">:message</p>') !!}
                            </div>
                            <div class="form-group {{ $errors->has('user_id') ? 'has-error' : ''}}">
                                <label for="user_id" class="control-label">{{ 'Technicians' }}</label><br>
                                <select name="user_id" class="form-control" id="user_id">
                                    <option value="">--Select Technicians--</option>
                                    @foreach($users as $item)
                                        <option value="{{$item->id ?? ''}}"  {{ (isset($site_support_permission->user_id) && $site_support_permission->user_id ==  $item->id) ? 'selected': ''}}>{{$item->name ?? ''}}</option>
                                    @endforeach
                                </select>

                                {!! $errors->first('user_id', '<p class="help-block">:message</p>') !!}
                            </div>

                            <div class="form-group {{ $errors->has('department_id') ? 'has-error' : ''}}">
                                <label for="department_id" class="control-label">{{ 'Site/Account Name' }}</label>

                                <select class="form-control selectpicker" name="site_id"  data-size="10"  data-live-search="true" id="site_id"    >
                                    <option value="">--Select Site--</option>
                                    @foreach($sites as $key=>$item)
                                        <option value="{{$item->id}}" data-services="{{$item->services ?? ''}}" {{(isset( $site_support_permission->site_id)&& ( $site_support_permission->site_id == $item->id) )? 'selected': ''}} >{{$item->project_name}}</option>
                                    @endforeach
                                </select>
                                {!! $errors->first('department_id', '<p class="help-block">:message</p>') !!}
                            </div>

                            <div class="form-group ">

                                <label  class="control-label">{{ 'Service/Category' }}</label><br>
                                <select name="category_id"  class="form-control selectpicker" data-size="10" id="category_id">
                                    <option value="">--Select Categories--</option>

                                </select>

                                {!! $errors->first('user_id', '<p class="help-block">:message</p>') !!}
                            </div>

                            <div class="form-group ">
                            <label  class="control-label">{{ 'Ticket ID/Subject' }}</label><br>
                            <div class="input-group">

                                <input type="text" class="form-control" name="search" placeholder="Search..."
                                       value="{{ request('search') }}">
                                <span class="input-group-btn">
                                    <button class="btn  btn-primary" type="submit">
                                        <i class="fa fa-search"></i> Search
                                    </button>
                                </span>
                            </div>
                            </div>
                        </form>


                        <script type="text/javascript">

                            $(document).ready(function () {
                                $(document).on('change', '#site_id', function () {

                                    var services = $('#site_id option:selected').data('services');

                                    $('#category_id').empty();
                                    //  $('#category_id').distroy
                                    html = '';
                                    $.each(services, function (key, obj) {
                                        html +=  '<option value="' + obj.id +'">' + obj.title +'</option>' ;
                                    })

                                    $('#category_id').append(html);
                                    $('#category_id').selectpicker('refresh');
                                });
                            })
                        </script>
                        <br/>
                        <div class="table-responsive">
                            <table class="table table-bordered table-primary   dataTable table-hover">

                            <thead>
                                <tr>
                                    <th>ID#</th>
                                    <th nowrap>Site/Account name</th>
                                    <th nowrap>Subject</th>
                                    <th nowrap>Requester name</th>
                                    <th nowrap>Department</th>
                                    <th nowrap>Category</th>
                                    <th nowrap>Sub Category</th>
                                    <th nowrap>Sub Category Item</th>
                                    <th nowrap>Last Response</th>
                                    <th nowrap>Priority</th>
                                    <th nowrap>Create Date</th>
                                    <th nowrap>Assigned</th>
                                    <th nowrap>Status</th>

                                    <th>Actions</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($ticket as $item)
                                    @php
                                    if($item->status == 'Closed')
                                        $status = 'bg-light';
                                       elseif($item->status == 'Open')
                                          $status = 'bg-primary';
                                           elseif($item->status == 'Answered')
                                          $status = 'bg-success';
                                    @endphp
                                    <tr>
                                        <td>{{ $item->id }}</td>
                                        <td nowrap>{{ $item->site_name ?? '' }}</td>
                                        <td nowrap><a href="javascript:;" data-title="Ticket Details# {{ $item->id ?? '' }}" data-token="{{ $item->token }}" class="text-primary viewBtn"><i class="fad fa-binoculars"></i> {{ $item->subject }}</a></td>
                                        <td nowrap>{{ $item->first_name }} {{ $item->last_name }}
                                            @if(!empty($item->email))
                                            <i class="fa fa-envelope tooltip-alt"
                                         data-toggle="tooltip"
                                               data-original-title="{!! $item->email  !!}"></i>
                                            @endif
                                        @if(!empty($item->phone))
                                            <i class="fa fa-phone-alt tooltip-alt"
                                               data-toggle="tooltip"
                                               data-original-title="{!! $item->phone   !!}"></i>
                                            @endif
                                        </td>
                                        <td nowrap>{{ $item->department_info->title ?? '' }}</td>
                                        <td nowrap>{{ $item->service->title ?? '' }}</td>
                                        <td nowrap>{{ $item->sub_catategory->title ?? '' }}</td>
                                        <td nowrap>{{ $item->sub_cat_item->item_name ?? '' }}</td>
                                        <td nowrap>
                                            {!! date($date_format, strtotime($item->updated_at.' '.$timezone))   !!} </td>
                                        <td nowrap>{{ $item->priority }}</td>
                                        <td nowrap>{!! date($date_format, strtotime($item->created_at.' '.$timezone))   !!}
                                             </td>
                                        <td   nowrap>
                                            @can('assign-ticket')
                                            <div class="btn-group dropdown  nowrap" style="width: 150px;"  >
                                                <button class="btn btn-primary btn-xs assigned_name" >{{ $item->assigned->name ?? 'Not Assigned' }}</button>
                                                <button class="btn btn-primary  btn-xs" data-toggle="dropdown" aria-expanded="true"><span class="caret"></span></button>
                                                <ul class="dropdown-menu drop">
                                                    <li><a class="assigned_to" href="javascript:;" data-id="{{$item->id ?? ''}}"  data-user="" ><i class="fal fa-user-circle"></i> Not Assigned</a></li>
                                                @foreach($item->technician as $user)
                                                        <li><a class="assigned_to" href="javascript:;" data-id="{{$item->id ?? ''}}"  data-user="{{$user->user_id ?? ''}}"  ><i class="fal fa-user-circle"></i> {{$user->userInfo->name ?? ''}} </a></li>
                                                    @endforeach
                                                 </ul>
                                            </div>
                                            @else
                                                {{ $item->assigned->name ?? 'Not Assigned' }}
                                            @endcan

                                        </td>
                                        <td><div class="badge btn-primary btn-block"> {{ $item->status }} </div></td>
                                        <td>
                                            @can('view-ticket')
                                            <a href="{{ url('/ticket/' . $item->token) }}" title="View ticket">
                                                <button class="btn btn-info btn-sm"><i class="fa fa-eye"
                                                                                       aria-hidden="true"></i> View Details
                                                </button>
                                            </a>
                                            @endcan
                                         {{--   <a href="{{ url('/ticket/' . $item->id . '/edit') }}" title="Edit ticket">
                                                <button class="btn btn-primary btn-sm"><i class="fa fa-pencil-square-o"
                                                                                          aria-hidden="true"></i> Edit
                                                </button>
                                            </a>--}}

                                           {{-- <form method="POST" action="{{ url('/ticket' . '/' . $item->id) }}"
                                                  accept-charset="UTF-8" style="display:inline">
                                                {{ method_field('DELETE') }}
                                                {{ csrf_field() }}
                                                <button type="submit" class="btn btn-danger btn-sm"
                                                        title="Delete ticket"
                                                        onclick="return confirm(&quot;Confirm delete?&quot;)"><i
                                                            class="fa fa-trash-o" aria-hidden="true"></i> Delete
                                                </button>
                                            </form>--}}
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                            <div class="pagination-wrapper"> {!! $ticket->appends(['search' => Request::get('search')])->render() !!} </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">

        $(document).ready(function () {
            $(document).on('click', '.assigned_to', function () {
                var assigned_to = $(this).data('user');
                var id = $(this).data('id');
               // alert( $(this).parent().parent().parent().html())
                $(this).parent().parent().parent().find('.assigned_name').html($(this).text())
                $.ajax({
                    url: '{{url('ticket_assigned')}}' ,
                    dataType: "html",
                    type: 'POST',
                    data: {'_token': $('meta[name=csrf-token]').attr('content'), 'id': id,'assigned_to': assigned_to},
                    success: function( responce ) {
                        $.snackbar({content: "Save Successfully", timeout: 3000});

                    }
                })
            })
            // tooltip demo
            $('[data-toggle="tooltip"]').tooltip();
        })
    </script>

    <!-- Modal -->
    <div class="modal right fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
        <div class="modal-dialog" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel2">Ticket Details</h4>
                </div>

                <div class="modal-body" id="loadccontent">

                </div>

            </div><!-- modal-content -->
        </div><!-- modal-dialog -->
    </div><!-- modal -->


    <script>
        $(document).ready(function()
        {

            $(document).on('click', ' .viewBtn ', function () {

                //$('#myModal2').data('id', id).modal('show');
                var token =  $(this).data('token');
                var title =  $(this).data('title');
                $('#myModalLabel2').html(title);


                $('#loadccontent').html('');
                $.ajax({
                    url: "{{URL::to('/loadSlideTicketDetails')}}",
                    dataType: "html",
                    type: 'POST',
                    data: {'_token': $('meta[name=csrf-token]').attr('content'), 'token': token},
                    success: function (responce) {
                        $('#loadccontent').html(responce);
                        $('#myModal2').data('id', token).modal('show');
                    }
                })


            })


        });
    </script>

    <style>
        .modal.left .modal-dialog,
        .modal.right .modal-dialog {
            position: fixed;
            margin: auto;
            width: 50%;
            height: 100%;
            -webkit-transform: translate3d(0%, 0, 0);
            -ms-transform: translate3d(0%, 0, 0);
            -o-transform: translate3d(0%, 0, 0);
            transform: translate3d(0%, 0, 0);
        }

        .modal.left .modal-content,
        .modal.right .modal-content {
            height: 100%;
            overflow-y: auto;
        }

        .modal.left .modal-body,
        .modal.right .modal-body {
            padding: 15px 15px 80px;
        }

        /*Left*/
        .modal.left.fade .modal-dialog{
            left: -320px;
            -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
            -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
            -o-transition: opacity 0.3s linear, left 0.3s ease-out;
            transition: opacity 0.3s linear, left 0.3s ease-out;
        }

        .modal.left.fade.in .modal-dialog{
            left: 0;
        }

        /*Right*/
        .modal.right.fade .modal-dialog {
            right: -320px;
            -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
            -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
            -o-transition: opacity 0.3s linear, right 0.3s ease-out;
            transition: opacity 0.3s linear, right 0.3s ease-out;
        }

        .modal.right.fade.in .modal-dialog {
            right: 0;
        }

        /* ----- MODAL STYLE ----- */
        .modal-content {
            border-radius: 0;
            border: none;
        }

        .modal-header {
            border-bottom-color: #EEEEEE;
            background-color: #FAFAFA;
        }


        .btn-demo {
            margin: 15px;
            padding: 10px 15px;
            border-radius: 0;
            font-size: 16px;
            background-color: #FFFFFF;
        }

        .btn-demo:focus {
            outline: 0;
        }

    </style>
@endsection