@extends('layouts.main', ['title' => 'Incidents Reports | LOGISTICS'])
@section('title', 'Incidents Reports')
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a><span class="divider">/</span></li>
        <li><a >Health and Safety</a><span class="divider">/</span></li>
        <li class="active">Incidents Reports</li>
    </ul>
@stop
@section('msghead_menu')
    <div class="row-fluid">

        <center style="margin-bottom: 8px">
            <form class=" form-inline" id="report_form" target="_blank" action="{{ route('health_and_safety.incident_reports.regenerate') }}">
                <label class="control-label" for="Incident Status"> Status </label>
                <select name="incident_status" id="incident_status" style="width: 100px" class="searchable">
                    <option value="ALL">All</option>
                    <option value="CLOSED">Closed</option>
                    <option value="ACTIVE">Active</option>
                </select>
                <div id="date_range">
                <label class="control-label" for="Category"> Date from </label>
                <input type="text" name="start_date" id="start_date"
                       class="form-control date_picker" value="{{$data_between[0]}}"  style="width: 100px" autocomplete="off">
                <label class="control-label" for="Category"> Date To </label>
                <input type="text" name="end_date" id="end_date" class="form-control date_picker" value="{{$data_between[1]}}"  style="width: 100px" autocomplete="off">
                </div>
                <label class="control-label" for="Category"> Type </label>
                <select name="incident_type" id="incident_type" style="width: 100px" class="searchable">
                    <option value="All">All</option>
                    <option value="Incident/Nearmiss">Nearmiss</option>
                    <option value="Incident/Accident">Accident</option>
                    <option value="Incident/Breakdown">Breakdown</option>
                </select>
                <label class="control-label" for="Category"> Truck </label>
                <select name="truck" id="truck_id" style="width: 100px" class="searchable" >
                    <option value="ALL">ALL</option>
                    @foreach($trucks as $truck)
                        <option value="{{$truck->id}}">{{$truck->registration_number}}</option>
                    @endforeach
                </select>

                <button type="submit" class="btn" id="re_generate_report">RE-GENERATE</button>
                 <button name="pdf" value="true" class="btn btn-default btn-xs">
                        <i class="fa fa-file-pdf-o"></i> PRINT
                 </button>
                {{--<a class="btn" style="margin-right: 20px;" data-href="" id="export_generate_report">--}}
                {{--<span class="iconsweets-excel"></span>EXPORT</a>--}}
            </form>
        </center>
    </div>
    <br>
    <div id="report_holder" class="row-fluid">

    </div>

@endsection
@section('contentinner')
    <div class="row-fluid">

    </div>
    <script>
        jQuery('.searchable').select2();
        jQuery('.date_picker').datepicker({format: 'yyyy-mm-dd'});

        jQuery('#incident_status').on('change', function (e) {
            e.preventDefault();
            let incident_status = jQuery(this).val();
            if (incident_status == 'ACTIVE'){
                jQuery('#date_range').addClass('hide');
            }else{
                jQuery('#date_range').removeClass('hide');
            }
        });

        jQuery('#re_generate_report').on('click', function (e) {
            e.preventDefault();
            var url = "{{route('health_and_safety.incident_reports.regenerate')}}";
            var formData = jQuery('#report_form').serialize();
            jQuery.ajax({
                url: url,
                type: 'get',
                data: formData,
                cache: false,
                beforeSend: function () {
                    startSpinner();
                },
                success: function (data) {
                    jQuery('#report_holder').html(data).trigger('change');
                },
                complete: function () {
                    stopSpinner();
                }
            });

        });
        

    </script>
@endsection