<div class="col-xs-12 no-padding">
    <div class="panel-group" id="accordion-settings">
        <div class="panel">
            <div class="panel-heading">
                <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion-settings"
                   href="#dashboardSettings">
                    Dashboard Settings
                </a>
            </div>
            <div id="dashboardSettings" class="panel-collapse collapse">
                <div class="panel-body">
                    <div id="criterialPanel">
                        <div class="row">
                            <div class="col-md-6 col-md-offset-3">
                                <div class="input-daterange input-group" id="dashboardDateRange">
                                    <input type="text" class="input-sm form-control" name="startDate" id="startDate"
                                           placeholder="Start date" value="<?php echo e(date('d/m/Y',strtotime($startDate))); ?>">
                                    <span class="input-group-addon">to</span>
                                    <input type="text" class="input-sm form-control" name="endDate" id="endDate"
                                           placeholder="End date"
                                           value="<?php echo e(date('d/m/Y',strtotime($endDate))); ?>">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-xs-12">
                                <br/>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-xs-12">
                                <div class="col-xs-6">
                                    <select id="clientSelect" class="form-control" multiple="multiple"
                                            data-placeholder="Select clients">
                                        <option></option>
                                        <?php foreach($clients as $client): ?>
                                            <option value="<?php echo e($client['id']); ?>"><?php echo e($client['id']); ?>

                                                : <?php echo e($client['name']); ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                                <div class="col-xs-6">
                                    <select id="engineerSelect" class="form-control" multiple="multiple"
                                            data-placeholder="Select engineers">
                                        <option></option>
                                        <?php foreach($engineers as $engineer): ?>
                                            <option value="<?php echo e($engineer['id']); ?>"><?php echo e($engineer['id']); ?>

                                                : <?php echo e($engineer['name']); ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xs-12">
                            <hr/>
                        </div>
                    </div>

                    <div class="form-group col-xs-4">
                        <label class="col-xs-8 control-label">Auto Refresh:</label>

                        <div class="col-xs-4">
                            <input type="checkbox" id="autoRefreshCheckbox" class="form-control">
                        </div>
                    </div>
                    <div class="form-group col-xs-4">
                        <label class="col-xs-8 control-label">Criteria:</label>

                        <div class="col-xs-4">
                            <input type="checkbox" id="criteriaPanelCheckbox" checked="checked"
                                   class="form-control">
                        </div>
                    </div>
                    <div class="form-group col-xs-4">
                        <label class="col-xs-8 control-label">Overall:</label>

                        <div class="col-xs-4">
                            <input type="checkbox" id="overallPanelCheckbox" checked="checked"
                                   class="form-control">
                        </div>
                    </div>
                    <div class="form-group col-xs-4">
                        <label class="col-xs-8 control-label">Job Status:</label>

                        <div class="col-xs-4">
                            <input type="checkbox" id="statusPanelCheckbox" checked="checked"
                                   class="form-control">
                        </div>
                    </div>
                    <div class="form-group col-xs-4">
                        <label class="col-xs-8 control-label">Job Type:</label>

                        <div class="col-xs-4">
                            <input type="checkbox" id="typePanelCheckbox" checked="checked"
                                   class="form-control">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-xs-12 no-padding">
    <div class="panel-body no-padding">
        <ul id="dashboard-tabs" class="nav nav-tabs">
            <li class="active">
                <a href="#tab-dashboard-job" data-toggle="tab">Job</a>
            </li>
            <li class="">
                <a href="#tab-dashboard-quotation" data-toggle="tab">Quotation</a>
            </li>
            <li class="">
                <a href="#tab-dashboard-finance" data-toggle="tab">Finance</a>
            </li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane fade active in" id="tab-dashboard-job">
                <div class="col-xs-12 no-padding" id="overallPanel">
                    <div id="operationJobStatistics">
                    </div>
                </div>

                <div class="col-xs-12 no-padding" id="statusPanel">
                    <div id="jobStatisticsByJobStatus">
                    </div>
                </div>

                <?php /*<div class="col-xs-6 no-padding" id="typePanel">*/ ?>
                <?php /*<div id="jobStatisticsByJobType">*/ ?>
                <?php /*</div>*/ ?>
                <?php /*</div>*/ ?>
                <?php /*<div class="col-xs-12 no-padding" id="jobCostPanel">*/ ?>
                <?php /*<div id="jobCostStatistics">*/ ?>
                <?php /*</div>*/ ?>
                <?php /*</div>*/ ?>

                <?php /*<div class="col-xs-12 no-padding" id="budgetPanel">*/ ?>
                <?php /*<div id="jobBudgetStatistics">*/ ?>
                <?php /*</div>*/ ?>
                <?php /*</div>*/ ?>
            </div>

            <div class="tab-pane fade" id="tab-dashboard-quotation">
                <div class="col-xs-12 no-padding" id="quotationPanel">
                    <div id="quotationStatistics">
                    </div>
                </div>

                <div class="col-xs-12 no-padding" id="quotedWorksStatusPanel">
                    <div id="quotedWorksStatusStatistics">
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="tab-dashboard-finance">
            </div>
        </div>
    </div>
</div>


<script type="text/javascript">

    function generateOperationJobStatistics() {
        $.post('<?php echo e(URL::action("DashboardController@generateStatisticsOperationJob")); ?>', {
            startDate: changeDateFormatToISO($('#startDate').val()),
            endDate: changeDateFormatToISO($('#endDate').val()),
            clients: $('#clientSelect').val(),
            engineers: $('#engineerSelect').val(),
            _token: '<?php echo e(csrf_token()); ?>'
        }).done(function (data) {
            $('#operationJobStatistics').html(data);
        }).fail(function(data){
            new PNotify({
                title: 'Reading operation job statistics failed!',
                text: '',
                type: 'error',
                icon: 'fa fa-times'
            });
        });
    }

    function generateStatisticsQuotation() {
        $.post('<?php echo e(URL::action("DashboardController@generateStatisticsQuotation")); ?>', {
            startDate: changeDateFormatToISO($('#startDate').val()),
            endDate: changeDateFormatToISO($('#endDate').val()),
            clients: $('#clientSelect').val(),
            engineers: $('#engineerSelect').val(),
            _token: '<?php echo e(csrf_token()); ?>'
        }).done(function (data) {
            $('#quotationStatistics').html(data);
        }).fail(function(data){
            new PNotify({
                title: 'Reading quotation statistics failed!',
                text: '',
                type: 'error',
                icon: 'fa fa-times'
            });
        });
    }

    function generateQuotedWorksByStatus() {
        $.post('<?php echo e(URL::action("DashboardController@generateQuotedWorksByStatus")); ?>', {
            startDate: changeDateFormatToISO($('#startDate').val()),
            endDate: changeDateFormatToISO($('#endDate').val()),
            clients: $('#clientSelect').val(),
            engineers: $('#engineerSelect').val(),
            _token: '<?php echo e(csrf_token()); ?>'
        }).done(function (data) {
            $('#quotedWorksStatusStatistics').html(data);
        }).fail(function(data){
            new PNotify({
                title: 'Reading quotation statistics failed!',
                text: '',
                type: 'error',
                icon: 'fa fa-times'
            });
        });
    }

    generateOperationJobStatistics();
    generateJobStatisticsByStatus('<?php echo e(URL::action("DashboardController@generateJobStatisticsByStatus")); ?>', '<?php echo e(csrf_token()); ?>');
    generateStatisticsQuotation();
    generateQuotedWorksByStatus();
    <?php /*generateJobStatisticsByType('<?php echo e(URL::action("DashboardController@generateJobStatisticsByType")); ?>', '<?php echo e(csrf_token()); ?>');*/ ?>

    $('#startDate').datepicker({
        format: 'dd/mm/yyyy'
    }).on('changeDate', function (e) {
        generateOperationJobStatistics();
        generateJobStatisticsByStatus('<?php echo e(URL::action("DashboardController@generateJobStatisticsByStatus")); ?>', '<?php echo e(csrf_token()); ?>');
        generateStatisticsQuotation();
        generateQuotedWorksByStatus();
        <?php /*generateJobStatisticsByType('<?php echo e(URL::action("DashboardController@generateJobStatisticsByType")); ?>', '<?php echo e(csrf_token()); ?>');*/ ?>
    });

    $('#endDate').datepicker({
        format: 'dd/mm/yyyy'
    }).on('changeDate', function (e) {
        generateOperationJobStatistics();
        generateJobStatisticsByStatus('<?php echo e(URL::action("DashboardController@generateJobStatisticsByStatus")); ?>', '<?php echo e(csrf_token()); ?>');
        generateStatisticsQuotation();
        generateQuotedWorksByStatus();
        <?php /*generateJobStatisticsByType('<?php echo e(URL::action("DashboardController@generateJobStatisticsByType")); ?>', '<?php echo e(csrf_token()); ?>');*/ ?>
    });

    $('#clientSelect').selectize();
    $('#clientSelect').change(function () {
        generateOperationJobStatistics();
        generateJobStatisticsByStatus('<?php echo e(URL::action("DashboardController@generateJobStatisticsByStatus")); ?>', '<?php echo e(csrf_token()); ?>');
        generateStatisticsQuotation();
        generateQuotedWorksByStatus();
        <?php /*generateJobStatisticsByType('<?php echo e(URL::action("DashboardController@generateJobStatisticsByType")); ?>', '<?php echo e(csrf_token()); ?>');*/ ?>
    });

    $('#engineerSelect').selectize();
    $('#engineerSelect').change(function () {
        generateOperationJobStatistics();
        generateJobStatisticsByStatus('<?php echo e(URL::action("DashboardController@generateJobStatisticsByStatus")); ?>', '<?php echo e(csrf_token()); ?>');
        generateStatisticsQuotation();
        generateQuotedWorksByStatus();
        <?php /*generateJobStatisticsByType('<?php echo e(URL::action("DashboardController@generateJobStatisticsByType")); ?>', '<?php echo e(csrf_token()); ?>');*/ ?>
    });

    $('#criteriaPanelCheckbox').switcher({
        theme: 'square',
        on_state_content: '<span class="fa fa-check"></span>',
        off_state_content: '<span class="fa fa-times"></span>'
    });
    $('#criteriaPanelCheckbox').change(function () {
        if ($('#criteriaPanelCheckbox').is(':checked')) {
            $('#criterialPanel').delay(1000).fadeIn();
        } else {
            $('#criterialPanel').slideUp(382).delay(1000).fadeOut();
        }
    });

    $('#overallPanelCheckbox').switcher({
        theme: 'square',
        on_state_content: '<span class="fa fa-check"></span>',
        off_state_content: '<span class="fa fa-times"></span>'
    });

    $('#overallPanelCheckbox').change(function () {
        if ($('#overallPanelCheckbox').is(':checked')) {
            $('#overallPanel').delay(1000).fadeIn();
        } else {
            $('#overallPanel').slideUp(382).delay(1000).fadeOut();
        }
    });

    $('#statusPanelCheckbox').switcher({
        theme: 'square',
        on_state_content: '<span class="fa fa-check"></span>',
        off_state_content: '<span class="fa fa-times"></span>'
    });

    $('#statusPanelCheckbox').change(function () {
        if ($('#statusPanelCheckbox').is(':checked')) {
            $('#statusPanel').delay(1000).fadeIn();
        } else {
            $('#statusPanel').slideUp(382).delay(1000).fadeOut();
        }
    });

    $('#typePanelCheckbox').switcher({
        theme: 'square',
        on_state_content: '<span class="fa fa-check"></span>',
        off_state_content: '<span class="fa fa-times"></span>'
    });

    $('#typePanelCheckbox').change(function () {
        if ($('#typePanelCheckbox').is(':checked')) {
            $('#typePanel').delay(1000).fadeIn();
        } else {
            $('#typePanel').slideUp(382).delay(1000).fadeOut();
        }
    });

    var autoRefresh;

    $('#autoRefreshCheckbox').switcher({
        theme: 'square',
        on_state_content: '<span class="fa fa-check"></span>',
        off_state_content: '<span class="fa fa-times"></span>'
    });

    $('#autoRefreshCheckbox').change(function () {
        if ($('#autoRefreshCheckbox').is(':checked')) {
            autoRefresh = setInterval(function () {
                generateOperationJobStatistics();
                generateJobStatisticsByStatus('<?php echo e(URL::action("DashboardController@generateJobStatisticsByStatus")); ?>', '<?php echo e(csrf_token()); ?>');
                generateStatisticsQuotation();
                generateQuotedWorksByStatus();
                <?php /*generateJobStatisticsByType('<?php echo e(URL::action("DashboardController@generateJobStatisticsByType")); ?>', '<?php echo e(csrf_token()); ?>');*/ ?>
            }, 38200);
        } else {
            clearInterval(autoRefresh);
        }
    });
</script>