@extends('layouts.main')

@section('title','App Config')
@section('header','App Config')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item active">App Config</li>
@endsection

@section('content')

<section>
    @csrf
    <div class="card card-info card-outline card-tabs">
        <div class="card-header p-0 pt-1 border-bottom-0">
            <ul class="nav nav-tabs" id="custom-tabs-three-tab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="app-tab" data-toggle="pill" href="#app" role="tab" aria-controls="app" aria-selected="false">APP</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="images-tab" data-toggle="pill" href="#images" role="tab" aria-controls="images" aria-selected="false">Images</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="contact-tab" data-toggle="pill" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="map-tab" data-toggle="pill" href="#map" role="tab" aria-controls="map" aria-selected="false">Map</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="laporan_tagihan-tab" data-toggle="pill" href="#laporan_tagihan" role="tab" aria-controls="laporan_tagihan" aria-selected="false">laporan</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="other-tab" data-toggle="pill" href="#other" role="tab" aria-controls="other" aria-selected="false">Others</a>
                </li>
            </ul>
        </div>
        <div class="card-body" style="min-height:30vh">
            <div class="tab-content" id="custom-tabs-three-tabContent">
                <div class="tab-pane fade active show p-4" id="app" role="tabpanel" aria-labelledby="app-tab">
                    <div class="app-wrapper">
                        <div class="form-group">
                            <label class="form-control-label">Nama Yayasan</label> <small class="text-danger">*</small>
                            <input type="text" name="company_name" class="form-control form-control-sm" required autofocus placeholder="Nama Yayasan" value="{{$app['company_name']}}">
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Name</label> <small class="text-danger">*</small>
                            <input type="text" name="name" class="form-control form-control-sm" required autofocus placeholder="Name" value="{{$app['name']}}">
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Title</label> <small class="text-danger">*</small>
                            <input type="text" name="title" class="form-control form-control-sm" required autofocus placeholder="Title"  value="{{$app['title']}}">
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Site Name</label> <small class="text-danger">*</small>
                            <input type="text" name="site_name" class="form-control form-control-sm" required autofocus placeholder="Site Name"  value="{{$app['site_name']}}">
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">App Email</label> <small class="text-danger">*</small>
                            <input type="text" name="app_email" class="form-control form-control-sm" required autofocus placeholder="App Email"  value="{{$app['app_email']}}">
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">App Phone</label> <small class="text-danger">*</small>
                            <input type="text" name="app_phone" class="form-control form-control-sm" required autofocus placeholder="App Phone"  value="{{$app['app_phone']}}">
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">URL</label> <small class="text-danger">*</small>
                            <input type="text" name="url" class="form-control form-control-sm" required autofocus placeholder="URL"  value="{{$app['url']}}">
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Description</label> <small class="text-danger">*</small>
                            <textarea type="text" name="description" class="form-control form-control-sm" required autofocus placeholder="Description">{{$app['description']}}</textarea>
                        </div>
                        <a href="#" class="btn btn-md btn-info float-right btn-update-app">Update</a>
                    </div>
                </div>
                <div class="tab-pane fade p-4" id="images" role="tabpanel" aria-labelledby="images-tab">
                    <div class="images-wrapper">
                        <form action="#" class="form-update-image" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group"><label class="mt-2">Logo</label></div>
                                <div class="form-group">
                                    <img src="{{$app['logo']}}" width="40%" id="logo_view" onclick="document.getElementById('logo').click()" class="pointer">
                                    <input type="file" id="logo" name="logo" class="d-none" accept="image/*">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group"><label class="mt-2">Logo Round</label></div>
                                <div class="form-group">
                                    <img src="{{$app['logo_round']}}" width="40%" id="logo_round_view" onclick="document.getElementById('logo_round').click()" class="pointer">
                                    <input type="file" id="logo_round" name="logo_round" class="d-none" accept="image/*">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group"><label class="mt-2">Icon 32x32</label></div>
                                <div class="form-group">
                                    <img src="{{$app['icon_32x32']}}" width="40%" id="icon_32x32_view" onclick="document.getElementById('icon_32x32').click()" class="pointer" style="width: 32px;height: 32px;">
                                    <input type="file" id="icon_32x32" name="icon_32x32" class="d-none" accept="image/*">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group"><label class="mt-2">Icon 192x192</label></div>
                                <div class="form-group">
                                    <img src="{{$app['icon_192x192']}}" width="40%" id="icon_192x192_view" onclick="document.getElementById('icon_192x192').click()" class="pointer" style="width: 192px;height: 192px;">
                                    <input type="file" id="icon_192x192" name="icon_192x192" class="d-none" accept="image/*">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group"><label class="mt-2">Icon 180x180</label></div>
                                <div class="form-group">
                                    <img src="{{$app['icon_180x180']}}" width="40%" id="icon_180x180_view" onclick="document.getElementById('icon_180x180').click()" class="pointer" style="width: 180px;height: 180px;">
                                    <input type="file" id="icon_180x180" name="icon_180x180" class="d-none" accept="image/*">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group"><label class="mt-2">Icon 270x270</label></div>
                                <div class="form-group">
                                    <img src="{{$app['icon_270x270']}}" width="40%" id="icon_270x270_view" onclick="document.getElementById('icon_270x270').click()" class="pointer" style="width: 270px;height: 270px;">
                                    <input type="file" id="icon_270x270" name="icon_270x270" class="d-none" accept="image/*">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group"><label class="mt-2">Image</label></div>
                                <div class="form-group">
                                    <img src="{{$app['image']}}" width="40%" id="image_view" onclick="document.getElementById('image').click()" class="pointer">
                                    <input type="file" id="image" name="image" class="d-none" accept="image/*">
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-md btn-info float-right btn-update-images">Update</button>
                        </form>
                    </div>
                </div>
                <div class="tab-pane fade p-4" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                    <div class="contact-wrapper">
                        <div class="form-group">
                            <label class="form-control-label">Contact Email</label> <small class="text-danger">*</small>
                            <textarea type="text" name="contact_email" class="form-control form-control-sm" required autofocus placeholder="Contact Email">{{$app['contact_email']}}</textarea>
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Contact Phone</label> <small class="text-danger">*</small>
                            <textarea type="text" name="contact_phone" class="form-control form-control-sm" required autofocus placeholder="Contact Phone">{{$app['contact_phone']}}</textarea>
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Wa.me URL</label> <small class="text-danger">*</small>
                            <input type="text" name="wa_me" class="form-control form-control-sm" required autofocus placeholder="WA.me URL" value="{{$app['wa_me']}}">
                        </div>
                        <a href="#" class="btn btn-md btn-info float-right btn-update-contact">Update</a>
                    </div>
                </div>
                <div class="tab-pane fade p-4" id="map" role="tabpanel" aria-labelledby="map-tab">
                    <div class="map-wrapper">
                        <div class="form-group">
                            <label class="form-control-label">Location</label> <small class="text-danger">*</small>
                            <textarea type="text" name="location" class="form-control form-control-sm" required autofocus placeholder="Location">{{$app['location']}}</textarea>
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Map URL</label> <small class="text-danger">*</small>
                            <textarea type="text" name="map_url" class="form-control form-control-sm" required autofocus placeholder="Map URL">{{$app['map_url']}}</textarea>
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Map Label</label> <small class="text-danger">*</small>
                            <input type="text" name="map_label" class="form-control form-control-sm" required autofocus placeholder="Map Label" value="{{$app['map_label']}}">
                        </div>
                        <a href="#" class="btn btn-md btn-info float-right btn-update-map">Update</a>
                    </div>
                </div>
                <div class="tab-pane fade p-4" id="laporan_tagihan" role="tabpanel" aria-labelledby="laporan_tagihan-tab">
                    <div class="map-wrapper">
                        <div class="form-group">
                            <label class="form-control-label">Judul Laporan</label> <small class="text-danger">*</small>
                            <input type="text" name="judul_laporan" class="form-control form-control-sm" required autofocus placeholder="Judul Laporan" value="{{$app['judul_laporan']}}">
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Judul Cetak Bukti Lunas</label> <small class="text-danger">*</small>
                            <input type="text" name="judul_bukti_lunas" class="form-control form-control-sm" required autofocus placeholder="Judul Cetak Bukti Lunas" value="{{$app['judul_bukti_lunas']}}">
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Jabatan</label> <small class="text-danger">*</small>
                            <input type="text" name="jabatan" class="form-control form-control-sm" required autofocus placeholder="Jabatan" value="{{$app['jabatan']}}">
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Pemegang Jabatan</label> <small class="text-danger">*</small>
                            <input type="text" name="pemegang_jabatan" class="form-control form-control-sm" required autofocus placeholder="Pemegang Jabatan" value="{{$app['pemegang_jabatan']}}">
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Note Laporan</label> <small class="text-danger">*</small>
                            <textarea name="note_laporan" id="note_laporan" class="form-control form-control-sm" required autofocus placeholder="Note Laporan">{!! $app['note_laporan'] !!}</textarea>
                        </div>
                        
                        <div class="form-group"><label class="mt-2">TTD Jabatan</label></div>
                        <div class="form-group">
                            <img src="{{$app['ttd_jabatan']}}" width="40%" id="ttd_jabatan_view" onclick="document.getElementById('ttd_jabatan').click()" class="pointer">
                            <input type="file" id="ttd_jabatan" name="ttd_jabatan" class="d-none" accept="image/*">
                        </div>
                        <a href="#" class="btn btn-md btn-info float-right btn-update-laporan-tagihan">Update</a>
                    </div>
                </div>
                <div class="tab-pane fade p-4" id="other" role="tabpanel" aria-labelledby="other-tab">
                    <div class="map-wrapper">
                        <div class="form-group">
                            <label class="form-control-label">Batas Pembayaran VA (Hari)</label> <small class="text-danger">*</small>
                            <input type="number" name="batas_pembayaran_va" class="form-control form-control-sm" required autofocus placeholder="Batas Pembayaran VA (Hari)" value="{{$app['batas_pembayaran_va']}}">
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Batas Pembayaran Ulang (Hari)</label> <small class="text-danger">*</small>
                            <input type="number" name="batas_pembayaran_ulang_hari" class="form-control form-control-sm" required autofocus placeholder="Batas Pembayaran Ulang (Hari)" value="{{$app['batas_pembayaran_daftar_ulang']}}">
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Batas Bayar Pendaftaran (Hari)</label> <small class="text-danger">*</small>
                            <input type="number" name="batas_bayar_pendaftaran" class="form-control form-control-sm" required autofocus placeholder="Batas Bayar Pendaftaran (Hari)" value="{{$app['batas_bayar_pendaftaran']}}">
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Default Message status ujian</label> <small class="text-danger">*</small>
                            <textarea type="text" name="default_wa_status_ujian" class="form-control form-control-sm" required autofocus placeholder="Default Message status ujian">{{$app['default_wa_status_ujian']}}</textarea>
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Prefix No. Ujian</label> <small class="text-danger">*</small>
                            <input type="text" name="prefix_no_ujian" class="form-control form-control-sm" required autofocus placeholder="Prefix No. Ujian" value="{{$app['prefix_no_ujian']}}">
                        </div>
                        <div class="form-group">
                            <label class="form-control-label">Institution Code</label> <small class="text-danger">*</small>
                            <input type="text" name="trx_institution_code" class="form-control form-control-sm" required autofocus placeholder="Institution Code" value="{{$app['trx_institution_code']}}">
                        </div>
                        <a href="#" class="btn btn-md btn-info float-right btn-update-other">Update</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection
@push('custom-scripts')

<script>
    $(document).on('change', '#ttd_jabatan', function(e){
        var target = $('#ttd_jabatan_view'),
            src = $('#ttd_jabatan');
            
        var fr = new FileReader();
        fr.onloadend = function (e) {
            var pp = e.target.result;
            target.attr('src', e.target.result);
        }
        fr.readAsDataURL(src[0].files[0]); 
    });
    $(document).on('change', '#logo', function(e){
        var target = $('#logo_view'),
            src = $('#logo');
            
        var fr = new FileReader();
        fr.onloadend = function (e) {
            var pp = e.target.result;
            target.attr('src', e.target.result);
        }
        fr.readAsDataURL(src[0].files[0]); 
    });
    $(document).on('change', '#logo_round', function(e){
        var target = $('#logo_round_view'),
            src = $('#logo_round');
            
        var fr = new FileReader();
        fr.onloadend = function (e) {
            var pp = e.target.result;
            target.attr('src', e.target.result);
        }
        fr.readAsDataURL(src[0].files[0]); 
    });
    $(document).on('change', '#icon_32x32', function(e){
        var target = $('#icon_32x32_view'),
            src = $('#icon_32x32');
            
        var fr = new FileReader();
        fr.onloadend = function (e) {
            var pp = e.target.result;
            target.attr('src', e.target.result);
        }
        fr.readAsDataURL(src[0].files[0]); 
    });
    $(document).on('change', '#icon_192x192', function(e){
        var target = $('#icon_192x192_view'),
            src = $('#icon_192x192');
            
        var fr = new FileReader();
        fr.onloadend = function (e) {
            var pp = e.target.result;
            target.attr('src', e.target.result);
        }
        fr.readAsDataURL(src[0].files[0]); 
    });
    $(document).on('change', '#icon_180x180', function(e){
        var target = $('#icon_180x180_view'),
            src = $('#icon_180x180');
            
        var fr = new FileReader();
        fr.onloadend = function (e) {
            var pp = e.target.result;
            target.attr('src', e.target.result);
        }
        fr.readAsDataURL(src[0].files[0]); 
    });
    $(document).on('change', '#icon_270x270', function(e){
        var target = $('#icon_270x270_view'),
            src = $('#icon_270x270');
            
        var fr = new FileReader();
        fr.onloadend = function (e) {
            var pp = e.target.result;
            target.attr('src', e.target.result);
        }
        fr.readAsDataURL(src[0].files[0]); 
    });
    $(document).on('change', '#image', function(e){
        var target = $('#image_view'),
            src = $('#image');
            
        var fr = new FileReader();
        fr.onloadend = function (e) {
            var pp = e.target.result;
            target.attr('src', e.target.result);
        }
        fr.readAsDataURL(src[0].files[0]); 
    });
</script>
<script>
    $('#note_laporan').summernote({
        toolbar: [
            [ 'style', [ 'style' ] ],
            [ 'font', [ 'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear'] ],
            [ 'fontname', [ 'fontname' ] ],
            [ 'fontsize', [ 'fontsize' ] ],
            [ 'color', [ 'color' ] ],
            [ 'para', [ 'ol', 'ul', 'paragraph', 'height' ] ],
            // [ 'table', [ 'table' ] ],
            // [ 'insert', [ 'link', 'picture'] ],
            [ 'view', [ 'undo', 'redo', 'fullscreen', 'codeview', 'help' ] ]
        ],
        callbacks: {
            onImageUpload: function(files, editor, welEditable) {
                for(var i = files.length - 1; i >= 0; i--) {
                    summerNoteSendFile(files[i], this, '/web_api/summernote/upload');
                }
            }
        }
    });
    $(document).on('click', '.btn-update-app', function(e){
        var ini = $('.app-wrapper'), input_token = $('input[name=_token]');
        
        var post_data = {
            is_ajax: true,
            _token: input_token.val(),
            company_name: ini.find('input[name=company_name]').val(),
            name: ini.find('input[name=name]').val(),
            title: ini.find('input[name=title]').val(),
            site_name: ini.find('input[name=site_name]').val(),
            app_email: ini.find('input[name=app_email]').val(),
            app_phone: ini.find('input[name=app_phone]').val(),
            url: ini.find('input[name=url]').val(),
            description: ini.find('textarea[name=description]').val(),
        };
        
        var messages = [];
        if(!post_data.company_name) messages.push("Nama Yayasan Tidak boleh kosong!");
        if(!post_data.name) messages.push("App Name Tidak boleh kosong!");
        if(!post_data.title) messages.push("App Title Tidak boleh kosong!");
        if(!post_data.site_name) messages.push("Site Name Tidak boleh kosong!");
        if(!post_data.app_email){
            messages.push("App Email Tidak boleh kosong!");
        }else{
            if(!isEmail(post_data.app_email)) messages.push("App Email Tidak valid!");
        }
        if(!post_data.app_phone) messages.push("App Phone Tidak boleh kosong!");
        if(!post_data.url) messages.push("Url Tidak boleh kosong!");
        if(!post_data.description) messages.push("Description Tidak boleh kosong!");
        
        $.each(messages, function(index, value){
            toast('bg-danger', 'Required', '', value);
        });
    
        if(!messages.length){
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            $.ajax({
                url: '/web_api/app_config/app',
                type: "post",
                data: post_data
            })
            .done(function (result) {
                var message = result.message;
                hideLoading(e_modal_wait);
                if (result.status) {
                    successAlert(message);
                    location.reload()
                } else {
                    failedAlert(message);
                }
                input_token.val(result.newtoken);
            })
            .fail(ajax_fail);
        }
        
        
    });
    $(document).on('click', '.btn-update-contact', function(e){
        var ini = $('.contact-wrapper'), input_token = $('input[name=_token]');
        
        var post_data = {
            is_ajax: true,
            _token: input_token.val(),
            contact_email: ini.find('textarea[name=contact_email]').val(),
            contact_phone: ini.find('textarea[name=contact_phone]').val(),
            wa_me: ini.find('input[name=wa_me]').val(),
        };
        
        var messages = [];
        
        if(!post_data.contact_email) messages.push("Contact Email Tidak boleh kosong!");
        if(!post_data.contact_phone) messages.push("Contact Phone Tidak boleh kosong!");
        if(!post_data.wa_me) messages.push("Wa.me URL Tidak boleh kosong!");
        
        $.each(messages, function(index, value){
            toast('bg-danger', 'Required', '', value);
        });
    
        if(!messages.length){
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            $.ajax({
                url: '/web_api/app_config/contact',
                type: "post",
                data: post_data
            })
            .done(function (result) {
                var message = result.message;
                hideLoading(e_modal_wait);
                if (result.status) {
                    successAlert(message);
                    location.reload()
                } else {
                    failedAlert(message);
                }
                input_token.val(result.newtoken);
            })
            .fail(ajax_fail);
        }
        
        
    });
    $(document).on('click', '.btn-update-map', function(e){
        var ini = $('.map-wrapper'), input_token = $('input[name=_token]');
        
        var post_data = {
            is_ajax: true,
            _token: input_token.val(),
            location: ini.find('textarea[name=location]').val(),
            map_url: ini.find('textarea[name=map_url]').val(),
            map_label: ini.find('input[name=map_label]').val(),
        };
        
        var messages = [];
        
        if(!post_data.location) messages.push("Location Tidak boleh kosong!");
        if(!post_data.map_url) messages.push("Map URL Tidak boleh kosong!");
        if(!post_data.map_label) messages.push("Map Label Tidak boleh kosong!");
        
        $.each(messages, function(index, value){
            toast('bg-danger', 'Required', '', value);
        });
    
        if(!messages.length){
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            $.ajax({
                url: '/web_api/app_config/map',
                type: "post",
                data: post_data
            })
            .done(function (result) {
                var message = result.message;
                hideLoading(e_modal_wait);
                if (result.status) {
                    successAlert(message);
                    location.reload()
                } else {
                    failedAlert(message);
                }
                input_token.val(result.newtoken);
            })
            .fail(ajax_fail);
        }
        
        
    });
    $(document).on('click', '.btn-update-other', function(e){
        var ini = $('.map-wrapper'), input_token = $('input[name=_token]');
        
        var post_data = {
            is_ajax: true,
            _token: input_token.val(),
            batas_pembayaran_ulang_hari: ini.find('input[name=batas_pembayaran_ulang_hari]').val(),
            batas_bayar_pendaftaran: ini.find('input[name=batas_bayar_pendaftaran]').val(),
            batas_pembayaran_va: ini.find('input[name=batas_pembayaran_va]').val(),
            default_wa_status_ujian: ini.find('textarea[name=default_wa_status_ujian]').val(),
            prefix_no_ujian: ini.find('input[name=prefix_no_ujian]').val(),
            trx_institution_code: ini.find('input[name=trx_institution_code]').val(),
        };
        
        var messages = [];
        
        if(!post_data.batas_pembayaran_va) messages.push("Batas Pembayaran VA (Hari) Tidak boleh kosong!");
        if(!post_data.batas_pembayaran_ulang_hari) messages.push("Batas Pembayaran Ulang (Hari) Tidak boleh kosong!");
        if(!post_data.batas_bayar_pendaftaran) messages.push("Batas Bayar Pendaftaran (Hari) Tidak boleh kosong!");
        if(!post_data.default_wa_status_ujian) messages.push("Default Message status ujian Tidak boleh kosong!");
        if(!post_data.prefix_no_ujian) messages.push("Prefix No. Ujian Tidak boleh kosong!");
        if(!post_data.trx_institution_code) messages.push("Institution Code Tidak boleh kosong!");
        
        $.each(messages, function(index, value){
            toast('bg-danger', 'Required', '', value);
        });
    
        if(!messages.length){
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            $.ajax({
                url: '/web_api/app_config/other',
                type: "post",
                data: post_data
            })
            .done(function (result) {
                var message = result.message;
                hideLoading(e_modal_wait);
                if (result.status) {
                    successAlert(message);
                    location.reload()
                } else {
                    failedAlert(message);
                }
                input_token.val(result.newtoken);
            })
            .fail(ajax_fail);
        }
        
        
    });
    $(document).on('submit', '.form-update-image', function(e){
        e.preventDefault();
        var ini = $(this),  input_token = $('input[name=_token]'),
            url = '/web_api/app_config/images',
            formData = new FormData($(this)[0]);
        
        var e_modal_wait = $("#modalWait");
        showLoading(e_modal_wait);
        
        $.ajax({
            url: url,
            type: "post",
            processData: false,
            contentType: false,
            data: formData
        })
        .done(function (result) {
            var message = result.message;
            hideLoading(e_modal_wait);
            if (result.status) {
                successAlert(message);
                // location.reload()
            } else {
                failedAlert(message);
            }
            input_token.val(result.newtoken);
        })
        .fail(ajax_fail);
        
        
        
    });
    $(document).on('click', '.btn-update-laporan-tagihan', function(e){
        var ini = $('.map-wrapper'), input_token = $('input[name=_token]');
        
        var post_data = {
            is_ajax: true,
            _token: input_token.val(),
            judul_laporan: ini.find('input[name=judul_laporan]').val(),
            judul_bukti_lunas: ini.find('input[name=judul_bukti_lunas]').val(),
            note_laporan: ini.find('textarea[name=note_laporan]').val(),
            jabatan: ini.find('input[name=jabatan]').val(),
            pemegang_jabatan: ini.find('input[name=pemegang_jabatan]').val(),
        };
        
        var messages = [];
        
        if(!post_data.judul_laporan) messages.push("Judul Laporan Tidak boleh kosong!");
        if(!post_data.judul_bukti_lunas) messages.push("Judul Cetak Bukti Lunas Tidak boleh kosong!");
        if(!post_data.note_laporan) messages.push("Note Laporan Tidak boleh kosong!");
        if(!post_data.jabatan) messages.push("Jabatan Tidak boleh kosong!");
        if(!post_data.pemegang_jabatan) messages.push("Pemegang Jabatan Tidak boleh kosong!");
        
        $.each(messages, function(index, value){
            toast('bg-danger', 'Required', '', value);
        });
    
        if(!messages.length){
            var el_image = $('#ttd_jabatan'), image = el_image[0].files[0];
            if(image){
                var rP = new FileReader();
                rP.readAsDataURL(image);
                rP.onloadend = function (e) {
                    post_data.ttd_jabatan = e.target.result;
                    var size = getBase64Size(e.target.result)
                    if(size > 1){
                        hideLoading(e_modal_wait);
                        failedAlert('Ukuran TTD tidak boleh lebih dari 1 MB!');
                    }else{
                        postDataLaporan(post_data);
                    }
                };
            }else{
                postDataLaporan(post_data);
            }
            
            function postDataLaporan(post_data){
                var e_modal_wait = $("#modalWait");
                showLoading(e_modal_wait);
                
                $.ajax({
                    url: '/web_api/app_config/laporan_tagihan',
                    type: "post",
                    data: post_data
                })
                .done(function (result) {
                    var message = result.message;
                    hideLoading(e_modal_wait);
                    if (result.status) {
                        successAlert(message);
                        location.reload()
                    } else {
                        failedAlert(message);
                    }
                    input_token.val(result.newtoken);
                })
                .fail(ajax_fail);
            }
        }
        
        
    });
</script>

@endpush