@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">Save</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