@extends('layouts.main_without_top_button')
@section('title')
    Accidents Report Dashboard
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li class="active">Accident Report</li>
    </ul>
@stop
@section('contentinner')

    <div class="tabbable">
        <style>
            .td_left_border {
                border-top: 1px solid #dddddd;
                border-left: 1px solid #dddddd;
                border-bottom: 0;
            }

            .td_border_right {
                border-right: 1px solid #dddddd;
            }

            .widgettitle {
                color: #000000;
            }
        </style>
        <div class="tab-content">
            <div class="tab-pane active" style="margin-top: 12px">
                <center>
                    <center style="margin-bottom: 8px">
                        <form class=" form-inline" target="_blank" action="{{ route('reports.hseAccidentReport') }}">
                            <table style="padding: 2px">
                                <tr>
                                    <td style="text-align: right;padding-right: 4px;"><label class="control-label" for="Category"> DATE FROM </label></td>
                                    <td style="text-align: left"><input type="text" name="from" id="" class="form-control span3 date_picker" value=""></td>
                                    <input name="print" value="true" type="hidden">
                                    <input name="generate" value="true" type="hidden">
                                    <input name="triggered" value="true" type="hidden">
                                </tr>
                                <tr>
                                    <td style="text-align: right;padding-right: 4px;margin-top: 2px"><label class="control-label" for="Category"> DATE TO </label></td>
                                    <td style="text-align: left"><input type="text" name="to" required id="" class="form-control span3 date_picker" value=""></td>
                                </tr>
                                <tr>
                                    <td style="text-align: center;padding-top: 2px" colspan="2">
                                        <button type="button" id="accident_general_reports" class="btn btn-default btn-xs">
                                            Generate
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="text-align: center;padding-top: 2px" colspan="2">
                                        <button name="pdf" value="true" class="btn btn-default btn-xs">
                                            <i class="fa fa-file-pdf-o"></i> PRINT
                                        </button>
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </center>
                        <div class="row">
                            <div id="accident_report_container" class="col-xs-12 table-responsive">

                            </div>
                        </div>
                </center>
            </div><!--tab-pane-->
        </div><!--tabcontent-->
    </div><!--tabbable-->

    <script>

        jQuery('.date_picker').datepicker();

        jQuery('#accident_general_reports').on('click', function (e) {
            e.preventDefault();
            jQuery.ajax({
                url: '{{route('reports.hseAccidentReport')}}',
                type: 'get',
                data: jQuery('form').serialize(),
                beforeSend: function () {
                    startSpinner();
                },
                success: function (data) {
                    jQuery('#accident_report_container').empty().append(data);

                },
                complete: function () {
                    stopSpinner();
                },
                error: function (xhr, textStatus, error) {
                    console.log(error);
                    console.log(textStatus);
                    stopSpinner();
                }
            });
        });

    </script>
@stop