@extends('layouts.main_without_top_button', ['title' => 'LOGISTICS | Loading Orders'])
@section('title')
    OFFENSES
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li class="active">OFFENSES</li>
    </ul>
@stop




@section('contentinner')
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
    <style>
        .table {
            font-size: 10px;
            overflow: scroll;
            border-top: 1px solid #000000;
            margin-left: 5px;
        }

        .table thead tr th, .table tbody tr td {
            border: 1px solid #000000;
            padding: 2px;
        }

        .table thead tr th {
            text-align: center;
        }

        .table thead tr:first-child th,
        .table thead tr:nth-child(2) th:first-child,
        .table tbody tr td:first-child,
        .table tbody tr td:nth-child(2),
        .table tbody tr td:nth-child(3),
        .table tbody tr td:nth-child(4),
        .table tbody tr td:last-child,
        .table thead tr th, .table thead tr:nth-child(2) th,
        .table thead tr:nth-child(2) th:last-child,
        .table tfoot th {
            background-color: #e8e8e8;
            color: #000000;
            border: 1px solid #000000;
        }




        #right-panel {
            font-family: 'Roboto', 'sans-serif';
            line-height: 30px;
            padding-left: 10px;
        }

        #right-panel select, #right-panel input {
            font-size: 15px;
        }

        #right-panel select {
            width: 100%;
        }

        #right-panel i {
            font-size: 12px;
        }

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
            float: left;
            width: 70%;
            height: 100%;
        }

        #right-panel {
            margin: 20px;
            border-width: 2px;
            width: 20%;
            height: 400px;
            float: left;
            text-align: left;
            padding-top: 0;
        }

        #directions-panel {
            margin-top: 10px;
            background-color: #FFEE77;
            padding: 10px;
            overflow: scroll;
            height: 174px;
        }

        #map_canvas {
            z-index: 99999;
        }
    </style>

    <div class="tabbable" onload="loadScript()">
        @include('operations.employee_offense.master.auto_generated.profile')
        <div class="tab-content">
            <div id="glyphs" class="tab-pane active">
                <div class="row-fluid" style="margin-top: 15px">
                    <div class="span12  profile-left">
                        <div class="tabbable">
                            <div class="tab-pane active" style="margin-top: 12px">
                                <center>
                                    <center style="margin-bottom: 8px">
                                        <form class=" form-inline">
                                            <label class="control-label" for="Category"> Date from </label>
                                            <input type="text" name="start_date" id="start_date"
                                                   class="form-control date_picker"
                                                   value="{{\Carbon\Carbon::parse($date[0])->format('Y-m-d')}}"  style="width: 70px">
                                            <label class="control-label" for="Category"> Date To </label>
                                            <input type="text" name="end_date" id="end_date" class="form-control date_picker"
                                                   value="{{\Carbon\Carbon::parse($date[1])->format('Y-m-d')}}"  style="width: 70px">

                                            <label class="control-label" for="Category"> Offense </label>
                                            <select name="offense_id" id="offense_id" style="width: 200px"  class="searchable_select">
                                                <option value="">Select Offense</option>
                                                @foreach($offenses as $offense)
                                                    <option value="{{  $offense->id }}">{{  $offense->name }}</option>
                                                @endforeach
                                            </select>
                                            <label class="control-label" for="Category"> Driver </label>
                                            <select name="driver_id" id="driver_id" style="width: 200px"  class="searchable_select">
                                                <option value="ALL">ALL</option>
                                                @foreach($drivers as $driver)
                                                    <option value="{{$driver->employee_id}}">{{ $driver->employee_name." ".$driver->middle_name." ".$driver->last_name }}</option>
                                                @endforeach
                                            </select>

                                            <button type="submit" class="btn" id="re_generate_report">RE-GENERATE</button>
                                            <a id="print_generate_report" class="btn" style="" data-href="">PRINT</a>
                                        </form>
                                    </center>



                                    <div id="income_statement"></div>
                                </center>
                            </div><!--tab-pane-->
                        </div><!--tabbable-->
                    </div><!--span12-->
                </div>
            </div><!--tab-pane-->
        </div>
    </div>


    <script>
        $('.searchable_select').select2();
        $('.date_picker').datepicker({dateFormat: 'dd-mm-yy'}).val();


        jQuery('#re_generate_report').on('click', function (e) {
            e.preventDefault();

            jQuery.ajax({
                url: '{{route('offenses-master.summary.regenerated')}}',
                type: 'get',
                data: jQuery('form').serialize(),
                beforeSend: function () {
                    startSpinner()
                },
                success: function (data) {
                    jQuery('#income_statement').empty().append(data);
                    calculateWidth();
                },
                error: function (xhr, textStatus, error) {
                    onAjaxError(xhr, textStatus, error)
                },
                complete: function () {
                    stopSpinner();
                }
            });

        });

        $('#print_generate_report').on('click', function (e) {
            e.preventDefault();
            var start_date = $('#start_date').val();
            var end_date = $('#end_date').val();
            var offense_id = $('#offense_id').val();
            var driver = $('#driver_id').val();

            // Construct the URL with query parameters
            var url = '{{ route('offenses-master.summary.print') }}';
            url += '?start_date=' + start_date + '&end_date=' + end_date + '&offense_id=' + offense_id + '&driver=' + driver;
            window.open(url, '_blank');
        });


        jQuery('#export_generate_report').on('click', function (e) {
            e.preventDefault();
            var url = jQuery('#income_statement_date').attr("data-href");
            window.open(url, '_blank');
        });

        jQuery(document).ready(function () {
            calculateWidth();
        });
        jQuery(window).resize(function () {
            var viewportWidth = jQuery(window).width();
            var leftpanel = jQuery('#leftpanel').width();

            jQuery('#income_statement').css({
                "width": viewportWidth-leftpanel
            });

        });
        function calculateWidth(){
            var viewportWidth = jQuery(window).width();
            var leftpanel = jQuery('#leftpanel').width();

            jQuery('#income_statement').css({
                "width": viewportWidth-leftpanel,
                "overflow": "scroll",
            });
        }
    </script>

@stop