@extends('layouts.authenticated')

@section('additionalstylesheets')
    <style type="text/css">
        /*th .sortorder {
            float: right;
        }
        th a {
            float: left;
        }*/
        .sortorder:after {
            content: '\25b2';   // BLACK UP-POINTING TRIANGLE
        }
        .sortorder.reverse:after {
            content: '\25bc';   // BLACK DOWN-POINTING TRIANGLE
        }
    </style>
@endsection

@section('content')
    <div ng-app="ticket" ng-controller="ticketCtrl">
        <form method="POST" class="form-inline well" action="{{ url('ticket/search') }}">
            @csrf
            <div class="container-fluid">
                <div class="row">
                    @if(isset($ticketMngrs))
                        <div class="form-group col-sm-3">
                            <label for="ticketMngr">Ticket Manager:</label>
                            <select name="ticketMngr" id="ticketMngr" class="form-control">
                                <option value="">Select Ticket Manager</option>
                                @foreach($ticketMngrs as $ticketMngr)
                                    <option value="{{ $ticketMngr->projMngrId }}" @if($defaultTicketMngr == $ticketMngr->projMngrId) selected="selected" @endif>
                                        {{$ticketMngr->firstname}} {{$ticketMngr->lastname  }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    @endif
                    @if(isset($resources))
                        <div class="form-group col-sm-3">
                            <label for="resource">Resource:</label>
                            <select name="resource" id="resource" class="form-control">
                                <option value="">Select Resource</option>
                                @foreach($resources as $resource)
                                    <option value="{{ $resource->id }}" @if($defaultResource == $resource->id) selected="selected" @endif>
                                        {{$resource->firstname}} {{$resource->lastname  }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    @endif
                    @if(isset($resources))
                        <div class="form-group col-sm-3">
                            <label for="status">Status:</label>
                            <select name="status" id="status" class="form-control">
                                <option value="">Select Status</option>
                                @foreach($statuses as $status)
                                    <option value="{{ $status->id }}" @if($defaultStatus == $status->id) selected="selected" @endif>
                                        {{$status->description}}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    @endif
                    @if(isset($ticketMngrs) || isset($resources))
                        <div class="col-xs-6 col-sm-3 buttons">
                            <label>&nbsp;</label>
                            <button type="submit" name="search" class="btn btn-primary">
                                <i class="fa fa-search-plus"></i> Search
                            </button>
                        </div>
                    @endif
                </div>
                <br />
            </div>
        </form>
        <div id="ticketModal" class="modal fade" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            x
                        </button>
                        <h4 class="modal-title">Confirmation</h4>
                    </div>
                    <div class="modal-body">
                        <p>
                            Are you sure you want to delete the selected ticket and its activities?
                        </p>
                    </div>
                    <div class="modal-footer">
                        <a href="" type="button" class="btn btn-danger" data-dismiss="modal" id="delete">
                            Delete
                        </a>
                        <button type="button" class="btn btn-default" data-dismiss="modal">
                            Cancel
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel panel-info">
            <div class="panel-heading">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-sm-3" style="margin-left: -10px">
                            <h5><strong>List of Tickets</strong></h5>
                        </div>
                        <div class="col-sm-3 col-sm-offset-6 right-align">
                            <a href="{{ url('ticket/add') }}" class="btn btn-primary">
                                <i class="fa fa-list-alt"></i> Add Ticket
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <div class="employerecords dataTable_wrapper table-responsive" id="tablelist">
                    <table class="table table-striped table-bordered table-hover" id="dataTable">
                        <tr>
                            <th>#</th>
                            <th>
                                <a href="javascript:void(0);" ng-click="sortBy('project_ref')">
                                    Ticket Ref#
                                </a>
                                <span class="sortorder" ng-show="propertyName === 'project_ref'" ng-class="{reverse: reverse}"></span>
                            </th>
                            <th>
                                <a href="javascript:void(0);" ng-click="sortBy('description')">
                                    Ticket
                                </a>
                                <span class="sortorder" ng-show="propertyName === 'description'" ng-class="{reverse: reverse}"></span>
                            </th>
                            <th>
                                <a href="javascript:void(0);" ng-click="sortBy('ticket')">
                                    Type
                                </a>
                                <span class="sortorder" ng-show="propertyName === 'ticket'" ng-class="{reverse: reverse}"></span>
                            </th>
                            <th>
                                <a href="javascript:void(0);" ng-click="sortBy('status')">
                                    Status
                                </a>
                                <span class="sortorder" ng-show="propertyName === 'status'" ng-class="{reverse: reverse}"></span>
                            </th>
                            <th>
                                <a href="javascript:void(0);" ng-click="sortBy('start_date')">
                                    Start
                                </a>
                                <span class="sortorder" ng-show="propertyName === 'start_date'" ng-class="{reverse: reverse}"></span>
                            </th>
                            <th>
                                <a href="javascript:void(0);" ng-click="sortBy('end_date')">
                                    End
                                </a>
                                <span class="sortorder" ng-show="propertyName === 'end_date'" ng-class="{reverse: reverse}"></span>
                            </th>
                            <th>
                                <a href="javascript:void(0);" ng-click="sortBy('remarks')">
                                    Remarks
                                </a>
                                <span class="sortorder" ng-show="propertyName === 'remarks'" ng-class="{reverse: reverse}"></span>
                            </th>
                            <th>
                                <a href="javascript:void(0);" ng-click="sortBy('total_hours')">
                                    Actual Hours
                                </a>
                                <span class="sortorder" ng-show="propertyName === 'total_hours'" ng-class="{reverse: reverse}"></span>
                            </th>
                            <th>Action</th>
                        </tr>
                                                <tr ng-repeat="x in tickets | orderBy:propertyName:reverse | filter:{project_manager_id: ticketMngr, status_id: status} ">
                            <td><% $index + 1 %>.</td>
                            <td><% x.project_ref %></td>
                            <td><% x.description %></td>
                            <td><% x.ticket %></td>
                            <td><% x.status %></td>
                            <td><% x.start_date %></td>
                            <td><% x.end_date %></td>
                            <td><% x.remarks %></td>
                            <td class="right-align"><% x.total_hours %></td>
                            <td nowrap="">
                                <a href="{{ url('activity/add') }}/<% x.id %>" class="btn btn-success" title="Log Activity">
                                    <i class="fa fa-clock-o"></i>
                                </a>
                                <a href="{{ url('ticket/details') }}/<% x.id %>" class="btn btn-success" title="View Details">
                                    <i class="fa fa-search"></i>
                                </a>
                                <a ng-if="isAdmin == 1 || username == x.added_by" href="{{ url('ticket/edit') }}/<% x.id %>" class="btn btn-success" title="Edit">
                                    <i class="fa fa-edit"></i>
                                </a>
                                <button ng-click="copyUrlToModal($event)" ng-if="isAdmin == 1 || username == x.added_by" class="btn btn-danger " title="Delete" data-toggle="modal" data-target="#ticketModal" data-to-pass="{{ url('ticket/del') }}/<% x.id %>">
                                    <i class="fa fa-remove" ></i>
                                </button>
                            </td>
                        </tr>
                    </table>
                </div>
                <div
                    id="progress_orders"
                    class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar"
                    aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
                    style="width: 100%;">
                    Loading...
                </div>
            </div>
        </div>
    </div>
@endsection
@section('customjs')
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script type="text/javascript">
        $("#delete").click(function() {
            var url = $(this).attr('href');
            window.location = url;
        });
        var app = angular.module('ticket', [], function($interpolateProvider) {
            $interpolateProvider.startSymbol('<%');
            $interpolateProvider.endSymbol('%>');
        });
        app.controller('ticketCtrl', function($scope, $http) {
            $scope.getData = function () {
                document.getElementById("progress_orders").style.display = "block";
                var filter = $.param({
                    ticketMngr: $("#ticketMngr").val(),
                    resource: $("#resource").val(),
                    status: $("#status").val(),
                    _token: "{{ csrf_token() }}"
                });
                $http({
                    method : "POST",
                    url : "{{ url('ticket/filter') }}",
                    data: filter,
                    headers : {
                        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
                    }
                }).then(function mySuccess(response) {
                    $scope.tickets = response.data;
                    document.getElementById("progress_orders").style.display = "none";
                    console.log(response);
                });
            }
            $scope.getData();
            $scope.copyUrlToModal = function(item) {
                var url = item.currentTarget.getAttribute("data-to-pass");
                document.getElementById('delete').setAttribute("href", url);
            };
            $scope.propertyName = 'project_ref';
            $scope.reverse = true;
            $scope.isAdmin = {{ Auth::user()->is_admin }};
            $scope.username = '{{ Auth::user()->username }}';

            $scope.sortBy = function(propertyName) {
                $scope.reverse = ($scope.propertyName === propertyName) ? !$scope.reverse : false;
                $scope.propertyName = propertyName;
            };
        });
    </script>
@endsection