@extends('layouts.master')

@section('title', 'Dashboard')

@section('content')
        
    <div class="col-xs-12 main page-dashboard">

        <div class="row">
            <ol class="breadcrumb">
                <li><a href="{{ route('dashboard') }}"><svg class="glyph stroked home"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stroked-home"></use></svg></a></li>
            </ol>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <h3 class="page-header">Dashboard</h3>
            </div>
        </div>

        <div class="row">
            <div class="col-xs-12 col-sm-6 col-lg-3">
                <div class="panel panel-blue panel-widget ">
                    <div class="row no-padding">
                        <div class="col-sm-2 col-lg-3 widget-left">
                            <svg class="glyph stroked bag"><use xlink:href="#stroked-bag"></use></svg>
                        </div>
                        <div class="col-sm-10 col-lg-9 widget-right">
                            <div class="large">{{ $jobs->count() }} jobs</div>
                            <div class="text-muted">{{ $completed_jobs->count() }} completed ({{ number_format((($completed_jobs->count()/$jobs->count()) * 100), 2) }}%)</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-lg-3">
                <div class="panel panel-orange panel-widget">
                    <div class="row no-padding">
                        <div class="col-sm-2 col-lg-3 widget-left">
                            <svg class="glyph stroked clipboard with paper"><use xlink:href="#stroked-clipboard-with-paper"/></svg>
                        </div>
                        <div class="col-sm-10 col-lg-9 widget-right">
                            <div class="large">{{ $tasks->count() }} tasks</div>
                            <div class="text-muted">{{ $completed_tasks->count() }} completed ({{ number_format((($completed_tasks->count()/$tasks->count()) * 100), 2) }}%)</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-lg-3">
                <div class="panel panel-teal panel-widget">
                    <div class="row no-padding">
                        <div class="col-sm-2 col-lg-3 widget-left">
                            <svg class="glyph stroked lock"><use xlink:href="#stroked-lock"></use></svg>
                        </div>
                        <div class="col-sm-10 col-lg-9 widget-right">
                            <div class="large">{{ $users->count() }} users</div>
                            <div class="text-muted">{{ $outdoor_users->count() }} outdoor users</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-lg-3">
                <div class="panel panel-red panel-widget">
                    <div class="row no-padding">
                        <div class="col-sm-2 col-lg-3 widget-left">
                            <svg class="glyph stroked star"><use xlink:href="#stroked-star"></use></svg>
                        </div>
                        <div class="col-sm-10 col-lg-9 widget-right">
                            <div class="large">{{ $clients->count() }} clients</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-sm-6">
                                <svg class="glyph stroked bag"><use xlink:href="#stroked-bag"/></svg> Jobs List (with outdoor task)
                                | <a href="dashboard">All jobs</a>
                            </div>
                            <div class="col-sm-6 text-right">
                                @can('create_job')
                                    <a class="btn btn-primary js-addnewjob"><svg class="glyph stroked plus sign"><use xlink:href="#stroked-plus-sign"/></svg> Add new job</a>
                                @endcan
                            </div>
                        </div>
                    </div>
                    <div class="panel-body">
                        @if (Session::has('message'))
                            <div class="alert bg-{{ Session::get('class') }}">{{ Session::get('message') }}</div>
                        @endif
                        <div class="js-status"></div>
                        <table class="js-table-jobs" data-toggle="table" data-url="{{ route('apiJobsOutdoor')}}"  data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-pagination="true" {{--Additional:data-show-export="true"--}}>
                            <thead>
                            <tr>
                                <th data-cell-style="cellStyle" data-formatter="runningFormatter">#</th>
                                <th data-cell-style="cellStyle" data-field="id" data-sortable="true">Job No.</th>
                                <th data-cell-style="cellStyle" data-field="created_at" data-sortable="true">Date, Time</th>
                                <th data-cell-style="cellStyle" data-field="company">Company</th>
                                <th data-cell-style="cellStyle" data-field="title">Title</th>
                                <th data-cell-style="cellStyle" data-field="client">Client</th>
                                <th data-cell-style="cellStyle" data-field="pic">PIC</th>
                                <th data-cell-style="cellStyle" data-field="piv">PIV</th>
                                <th data-cell-style="cellStyle" data-align="center" data-field="tasks">Tasks</th>
                                <th data-cell-style="cellStyle" data-align="center" data-field="operate" data-events="operateEvents">Actions</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>

@stop



@section('script')
<script>
    // Add table operation
    function runningFormatter(value, row, index) {
        return 1+index;
    }

    function cellStyle(value, row, index, field) {
        if(row.status=='Completed'){
            return {
                css: {"background-color": "#F3FFEB"}
            };
        }

        if(row.status=='Canceled'){
            return {
                css: {"background-color": "#f9f5f5"}
            };
        }

        if(row.status=='KIV'){
            return {
                css: {"background-color": "#f1f9fd"}
            };
        }

        return {
            css: {"background-color": ""}
        };
    }

    window.operateEvents = {
        'click .view': function (e, value, row, index) {
            window.location = '{{ URL::to("/") }}/jobs/' + row.id;
        },
        @can('create_job')
        'click .task': function (e, value, row, index) {
            $.ajax({
                url: "{{ action('TaskController@create') }}",
                dataType: 'html',
                type: 'GET',
            }).success(function(response) {
                bootbox
                    .dialog({
                        title: '...',
                        message: response,
                        onEscape: true,
                        backdrop: true
                    }).on('shown.bs.modal', function() {
                        var title = $('.js-form-title').data('title');
                        var firstfield = $('input[name=description]');
                        var job_id = $('input[name=job_id]');
                        $('.modal-title').html(title + ' for job no. ' + row.id);
                        firstfield.focus();
                        job_id.val(row.id);
                    });
            });
        },
        @endcan
        @can('manage_finance')
        'click .invoice': function (e, value, row, index) {
            $.ajax({
                url: "{{ action('InvoiceController@create') }}",
                dataType: 'html',
                type: 'GET',
            }).success(function(response) {
                bootbox
                    .dialog({
                        title: '...',
                        message: response,
                        onEscape: true,
                        backdrop: true
                    }).on('shown.bs.modal', function() {
                        var title = $('.js-form-title').data('title');
                        var firstfield = $('input[name=invoice_no]');
                        var job_id = $('input[name=job_id]');
                        $('.modal-title').html(title + ' for job no. ' + row.id);
                        firstfield.focus();
                        job_id.val(row.id);
                    });
            });
        },
        @endcan
        @can('create_job')
        'click .edit': function (e, value, row, index) {
            $.ajax({
                url: '{{ URL::to("/") }}/jobs/' + row.id + '/edit',
                dataType: 'html',
                type: 'GET',
            }).success(function(response) {
                bootbox
                    .dialog({
                        title: '...',
                        message: response,
                        onEscape: true,
                        backdrop: true
                    }).on('shown.bs.modal', function() {
                        var title = $('.js-form-title').data('title');
                        var firstfield = $('input[name=title]');
                        $('.modal-title').html(title + ' no. ' + row.id);
                        firstfield.focus();
                    });
            });
        }
        @endcan
    };

    @can('create_job')
    //Click add new job button
    $('.js-addnewjob').on('click', function() {
        $.ajax({
            url: "{{ action('JobController@create') }}",
            dataType: 'html',
            type: 'GET',
        }).success(function(response) {
            bootbox
                .dialog({
                    title: '...',
                    message: response,
                        onEscape: true,
                        backdrop: true
                }).on('shown.bs.modal', function() {
                    var title = $('.js-form-title').data('title');
                    var firstfield = $('input[name=title]');
                    $('.modal-title').html(title);
                    firstfield.focus();
                });
        });

        return false;
    });
    @endcan
</script>
@stop