@extends('app.app')
@section('title')
    Finance - Dana
@endsection

@section('content')
    <div class="container-fluid">
        <div class="content">
            <div class="row">
				<div class="col-sm-12 col-md-6">
					<div class="card">
						<div class="card-body">
							<p class="text-dark text-bold mb-2">Konfigurasi Dana</p>
							<p class="mb-2 border-bottom"></p>
							<form id="formDanaUpdt">
								<div class="form-group mb-3 d-none">
									<label for="dana_id" class="form-label">Saldo Dana <span class="text-danger">*</span></label>
									<input type="number" id="dana_id" name="dana_id" class="form-control" value="{{ $dana->id }}" required />
								</div>
								<div class="form-group mb-3">
									<label for="amt" class="form-label">Saldo Dana <span class="text-danger">*</span></label>
									<input type="text" id="amt" name="amt" class="form-control" value="{{ $dana->amt }}" required />
								</div>
								<div class="form-group mb-3 text-end">
									<button type="button" id="btnUpdtDana" class="btn btn-sm btn-primary">Simpan</button>
									<div id="btnUpdtDanaSpinner" class="d-none">
										<div class="spinner-border" role="status">
											<span class="visually-hidden">Loading...</span>
										</div>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
            </div>
        </div>
    </div>
@endsection

@section('customjs')
<script>
	'use strict'

	const State = {
		delay_type_number: 1000,
		storage_lara: "{{ asset('storage') }}/",
		file_jimp_worker: "{{ asset('assets/js/worker/jimp.js') }}",
	};

	const Wrapper = {
		activate: function() {
			DanaUpdt.activate();
		},
	};

	const DanaUpdt = {
            activate: function() {
                DanaUpdt.event();
            },
            event: function() {
                $('#btnUpdtDana').on('click', async function(e) {
                    e.preventDefault();
                    const data = DanaUpdt.getData();
					if (!DanaUpdt.checkData(data, true)) return false;
					DanaUpdt.submitData(data);
                });
				// input
                $('#amt').on('keyup', function() {
                    let price = $('#amt').val().split('.').join('');
                    $('#amt').val((new Intl.NumberFormat('id-ID')).format(price));
                });
            },
            getData: function(props) {
                const data = Helper.objectifyForm($('#formDanaUpdt').serializeArray());
				data.amt = $('#amt').val().split('.').join('');

                return data;
            },
            checkData: function(data, isAlert = false) {
                if (data.amt.length < 4) {
                    if (isAlert) Helper.toast('Warning', 'just now', 'Saldo Dana wajib diisi');
                    return false;
                }
                return true;
            },
            submitData: async function(data) {
                return new Promise((resolve, reject) => {
                    if (typeof $('#btnUpdtDana').attr('disabed') != 'undefined') {
                        resolve({
                            type: 'fail'
                        });
                        return false;
                    }
                    $('#btnUpdtDana').attr('disabed', true);
					$('#btnUpdtDanaSpinner').removeClass('d-none');
                    $.ajax({
                        url: "{{ route('api_edit_dana', '') }}/" + data.dana_id,
                        method: 'PUT',
                        crossDomain: true,
                        processData: true,
                        headers: {
                            'x-api-key': Helper.getCookie('_trtk'),
                            'x-csrf-token': $('meta[name="csrf-token"]').attr('content'),
                        },
                        data,
                        success: (data, textStatus, jqXHR) => {
                            $('#btnUpdtDana').removeAttr('disabed');
							$('#btnUpdtDanaSpinner').addClass('d-none');
                            if (data.meta.type != 'success') {
                                resolve({
                                    type: 'fail'
                                });
                                Helper.toast('Warning', 'just now', data.meta.message);
                                return false;
                            }
                            resolve({
                                type: 'success'
                            });
							Helper.toast('Success', 'sukses update saldo', data.meta.message);
                        },
                        error: (jqXHR, textStatus, error) => {
                            $('#btnUpdtDana').removeAttr('disabed');
							$('#btnUpdtDanaSpinner').addClass('d-none');
                            if (jqXHR.status >= 500) {
                                Helper.toast('Error', 'just now', 'Please try again');
                            } else {
                                Helper.toast('Error', 'just now', jqXHR.responseJSON.meta
                                    .message);
                            }
                            resolve({
                                type: 'error'
                            });
                        }
                    })
                })
            },
        }

	Wrapper.activate();
</script>
@endsection