@extends('layouts.layout')
@section('body_class', 'nav-md')
@section('body_content')
<div class="container body">
    <div class="main_container">
        @include('includes.sidebar')
        <div class="right_col" role="main">
            <div class="page-title">
                <div class="title_left">
                    <h3><i class="fa fa-truck"></i> Report Move (Outgoing)</h3>
                </div>
                <div class="clearfix"></div>
            </div>
			
			<div class="row">
				<div class="col-xs-12 col-sm-6">
					<div class="x_panel">
						<div class="x_content">
							<form class="form-horizontal">
								<div class="form-group">
									<label class="col-xs-12 col-sm-3 control-label">Start :</label>
									<div class="col-xs-12 col-sm-9">
										<input type="date" class="form-control" name="start" id="startDate"
											value="{{ $request['start'] }}">
									</div>
								</div>
								<div class="form-group">
									<label class="col-xs-12 col-sm-3 control-label">End :</label>
									<div class="col-xs-12 col-sm-9">
										<input type="date" class="form-control" name="end" id="endDate"
											value="{{ $request['end'] }}">
									</div>
								</div>
								<div class="form-group">
									<label class="col-xs-12 col-sm-3 control-label">Filter :</label>
									<div class="col-xs-12 col-sm-9">
										<select name="filter" id="filterData" class="form-control">
											<option disabled selected>Pilih</option>
											<option {{ $request['filter'] == 'LOKASI_FROM' ? 'selected' : '' }}>LOKASI_FROM</option>
											<option {{ $request['filter'] == 'LOKASI_TO' ? 'selected' : '' }}>LOKASI_TO</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="col-xs-12 col-sm-3 control-label"></label>
									<div class="col-xs-12 col-sm-9">
										<button class="btn btn-info"><i class="fa fa-search"></i> Cari</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
			
			
            <div class="row" id="content-table"></div>
            <div class="row" id="content-table-detail"></div>
        </div>
        @include('includes.footer')
    </div>
</div>
@endsection

@section('scripts')
    <script type="text/javascript">
		@if($request['filter'])
			$.ajax({
				url: "{{ url('stock/report_outgoing/data') }}",
				method: "POST",
				headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
				data: {
					'start' : $('#startDate').val(),
					'end' : $('#endDate').val(),
					'filter' : $('#filterData').val(),
				},
				success: function(response) {
					$('#content-table').html(response);
				},
				error: function(response) {
					var response = response.responseJSON;
					alert(response.error);
					$(".btn-approve").removeAttr("disabled", "disabled").html('<i class="fa fa-check"></i> Approve');
				}
			});
		@endif
		
		function getDetail(code, filter_detail) {
			$('#content-table-detail').html('<div style="text-align: center; padding-top: 20px;"><i class="fa fa-2x fa-spinner fa-pulse"></i></div>');
			$.ajax({
				url: "{{ url('stock/report_outgoing/data-detail') }}",
				method: "POST",
				headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
				data: {
					'start' : $('#startDate').val(),
					'end' : $('#endDate').val(),
					'code': code,
					'filter' : $('#filterData').val(),
					'filter_detail' : filter_detail,
				},
				success: function(response) {
					$('#content-table-detail').html(response);
					$('html, body').animate({
						scrollTop: $('#content-table-detail').offset().top
					}, 1000);
				},
				error: function(response) {
					var response = response.responseJSON;
					alert(response.error);
					$(".btn-approve").removeAttr("disabled", "disabled").html('<i class="fa fa-check"></i> Approve');
				}
			});
		}
	</script>
@endsection