<div class="wrapper wrapper-content animated fadeInRight">
	<div class="row">
		<div class="col-lg-12">
			<div class="ibox float-e-margins">
				<div class="ibox-content">
					<div class="tabs-container">
						<ul class="nav nav-tabs">
							<li class="active"><a data-toggle="tab" href="#tab-process"> Process</a></li>
							<li class=""><a data-toggle="tab" href="#tab-report"> Report</a></li>
						</ul>
						<div class="tab-content">
							<div id="tab-process" class="tab-pane active">
								<div class="panel-body">

                                    <div class="row">
                                        <div class="filter-content" style="">
                                            <form autocomplete="off" method="post" id="form_filter_process" class="form-horizontal">
                                                <div class="row">
                                                    <div class="col-sm-12">
                                                        <div class="col-sm-8">
                                                            <br>
                                                            <div class="form-group" id="daterange">
                                                                <label class="col-sm-2">Tanggal</label>
                                                                <div class="input-daterange input-group col-sm-4" id="datepicker">
                                                                    <input id="filter_date_start_process" type="text" class="input-sm form-control" name="t_filter_date_start_process" value="01<?= date('-m-Y') ?>" />
                                                                    <span class="input-group-addon">to</span>
                                                                    <input id="filter_date_end_process" type="text" class="input-sm form-control" name="t_filter_date_end_process" value="<?= date('d-m-Y') ?>" />
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-sm-2">Vendor</label>
                                                                <div class=" input-group col-sm-4">
                                                                    <input type="text" class="form-control" id="filter_vendor_process" name="t_filter_vendor_process" value="">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-4">
                                                            
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <div class="col-sm-2 col-sm-offset-3">
                                                                <button class="btn btn-success btn-sm browseBtn pull-left" type="submit"><i class="fa fa-eye"></i> View</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div id="resultMiningProcess"></div>
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="row">
                                                <div class="col-sm-8"></div>
                                                <div class="col-sm-2">
                                                    <button class="btn btn-danger btn-sm btn-block backBtn pull-left" type="submit" style="display:none;"><i class="fa fa-arrow-circle-left"></i> Close</button>
                                                </div>
                                                <div class="col-sm-2">
                                                    <button class="btn btn-primary btn-sm btn-block saveBtn pull-right" type="submit"><i class="fa fa-send"></i> Process Recap</button>
                                                </div>
                                                
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <div id="resultMiningProcess"></div> -->
								</div>
							</div>
							<div id="tab-report" class="tab-pane">
								<div class="panel-body">

                                    <div class="row">
                                        <div class="filter-content" style="">
                                            <form autocomplete="off" method="post" id="form_filter_report" class="form-horizontal">
                                                <div class="row">
                                                    <div class="col-sm-12">
                                                        <div class="col-sm-8">
                                                            <br>
                                                            <div class="form-group" id="daterange">
                                                                <label class="col-sm-2">Tanggal</label>
                                                                <div class="input-daterange input-group col-sm-4" id="datepicker">
                                                                    <input id="filter_date_start_report" type="text" class="input-sm form-control" name="t_filter_date_start_report" value="01<?= date('-m-Y') ?>" />
                                                                    <span class="input-group-addon">to</span>
                                                                    <input id="filter_date_end_report" type="text" class="input-sm form-control" name="t_filter_date_end_report" value="<?= date('d-m-Y') ?>" />
                                                                </div>
                                                            </div>
                                                            <div class="form-group">
                                                                <label class="col-sm-2">Vendor</label>
                                                                <div class=" input-group col-sm-4">
                                                                    <input type="text" class="form-control" id="filter_vendor_report" name="t_filter_vendor_report" value="">
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <div class="col-sm-2 col-sm-offset-3">
                                                                <button class="btn btn-success btn-sm browseBtn pull-left" type="submit"><i class="fa fa-eye"></i> View</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div id="resultMiningReport"></div> 
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="row">
                                                <div class="col-sm-10"></div>
                                                <div class="col-sm-2">
                                                    <button class="btn btn-danger btn-sm btn-block backBtn pull-left" type="submit" style="display:none;"><i class="fa fa-arrow-circle-left"></i> Close</button>
                                                </div>
                                                
                                            </div>
                                        </div>
                                    </div>
                                    <!-- <div id="resultMiningReport"></div> -->
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
</div>
<script>
    $(document).ready(function(){
        loadMiningProcess();
        loadMiningReport();

        // simpan
		saveBtn.click(function() {
			let btn = $(this);
			startLoadingButton(btn);
			swal.fire({
				title: "Apakah data sudah benar ?",
				text: "Data akan di proses ",
				icon: "info",
				showCancelButton: true,
				confirmButtonText: 'Simpan',
                cancelButtonText:'Tidak',
			}).then(isConfirm => {
				if (isConfirm.value) {
				    var form_data = $('#form_filter_process').serialize(); 				
					$.ajax({
						type: "POST",
						url: site_url + "hauling/mining_recap/recap_data",
						data: form_data, 
						dataType: 'json',
						success: function(response) {
							swal.fire(response['header'] || 'success', response['message'] || '', "success").then(() => {
								// window.location = site_url + "coalgetting_outbound/" + response['id'];
								stopLoadingButton(btn);
                                loadMiningProcess();
                                loadMiningReport();
							});
						},
						error: function(jqXhr, textStatus, errorThrown) {
							var error_message = 'internal error';
							if (jqXhr.responseJSON !== undefined) {
								error_message = jqXhr['responseJSON']['message'];
								document.getElementById("printBtn").disabled = true;
							}
							swal.fire('error', error_message, "error");
							stopLoadingButton(btn);
						}
					});
				} else {
					stopLoadingButton(btn);
					return false;
				}
			});
		});

    });

    function loadMiningProcess(){
        $.ajax({
            url: site_url + "hauling/mining_recap/load_mining_process",
            dataType: "html",
            type: "POST",
            data: {
                // ...params
            },
            success: function(result) {
                $('#resultMiningProcess').html(result);                
            }
        })
    };

    function loadMiningReport(){
        $.ajax({
            url: site_url + "hauling/mining_recap/load_mining_report",
            dataType: "html",
            type: "POST",
            data: {
                // ...params
            },
            success: function(result) {
                $('#resultMiningReport').html(result);                
            }
        })
    };
</script>