@extends('layouts.app')
@section('title', session('company_code') . ' Elite System')

@section('body')
<style type="text/css">
    .form-group {
        margin-left: 3px
    }
</style>

<section style="background:#FFF; padding:5px 20px 10px 20px;">
    <div class="row">
        <div class="col-xs-12 hidden-print">
            <div class="right-buttons">
                <div class="form-group pull-right">
                    <button class="btn btn-warning" id="print-report"><i class="fa fa-fw fa-print"></i>PRINT</button>
                </div>

                <div class="form-group pull-right">
                    <button class="btn btn-success" id="generate-report"><i class="fa fa-fw fa-recycle"></i> GENERATE</button>
                </div>                 
                
                <div class="form-group pull-right">
                    <input id="date-range" type="text" class="form-control pull-right">
                </div>

                <div class="form-group pull-right" style="width:140px">
                    <select id="jo-status" class="form-control select2 select2-hidden-accessible" data-placeholder="STATUS" style="width: 100%;" aria-hidden="true">
                        <option></option>
                        <option>ACCOMPLISHED</option>
                        <option>DISPATCHED</option>
                        <option>PENDING</option>
                        <option>CANCELLED</option>
                        <option>ALL</option>
                    </select>
                </div>

                <div class="form-group pull-right" style="width:220px">
                    <select id="jo-reason" class="form-control select2 select2-hidden-accessible" data-placeholder="REASON" style="width: 100%;" aria-hidden="true">
                        <option></option>
                    </select>
                </div> 

                <div class="form-group pull-right" style="width:300px">
                    <select id="jo-category" class="form-control select2 select2-hidden-accessible" data-placeholder="CATEGORY" style="width: 100%;" aria-hidden="true">
                  		<option></option>
                  		<option value="ALL" data-with-type="0">ALL JOB ORDER</option>
                        @foreach($jocats AS $jc)
                        <option value="{{ $jc->code }}" data-with-type="{{ $jc->with_type }}">{{ strtoupper($jc->description) }}</option>
                        @endforeach
                	</select>
                </div>               
            </div>

            <h2 class="page-header" style="margin-top:6px">JO SUMMARY</h2>            
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12" id="report-container">
            <p class="text-center" id="report-title" style="visibility:hidden">HWRI Paombong</p>
        </div>
    </div> 
</section>
@endsection


@section('scripts')
<script type="text/javascript">
	// initialize date range picker
	$('#date-range').daterangepicker();

	$(document).ready(function() {
        $('#jo-category').on('change', function() {
            $with_type = $('#jo-category option:selected').data('with-type');
            $('#jo-reason').val(null).trigger('change');

            if($with_type == '1') {
                $('#jo-reason').prop('disabled', false);
            } else {
                $('#jo-reason').prop('disabled', true);
            }
        });

        $('#jo-reason').select2({
            allowClear: true,
            ajax: {
                url: $app_url + '/jo-reasons',
                delay: 200,
                data: function (params) {
                    return query = {
                        search: params.term,
                        code: $('#jo-category option:selected').val()
                    }
                },
                processResults: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return {
                                id: item.id,
                                text: item.description.toUpperCase(),
                                cr: item.is_cr
                            }
                        })
                    };
                }
            }
        });

		$('#generate-report').click(function() {
            $jo_category = $('#jo-category').val();
            $jo_reason   = $('#jo-reason').val() ? $('#jo-reason').val() : null; 
            $jo_status   = $('#jo-status').val();
			$date_range  = $('#date-range').val();

			if($jo_category != "" && $jo_status != "" && $date_range != "") {
				$.ajax({
					url: $app_url + '/reports/jo-fetch-report',
					type: 'get',
					dataType: 'html',
					data: {
                        'jo_category' : $jo_category,
                        'jo_reason'   : $jo_reason,
                        'jo_status'   : $jo_status,
                        'date_range'  : $date_range 
                    },
					beforeSend: function() {
						showBoxLoadingState();
					},
					success: function(data) {
                        $('#report-container').html(data);
					},
					error: function() {
						removeBoxLoadingState()
					},
					complete: function() {
						removeBoxLoadingState();
					}
				});
			}
		});

        $('#print-report').click(function() {
            window.print();
        });
	});
</script>
@endsection