@extends('layout.master')

@push('plugin-styles')
<link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/@mdi/css/materialdesignicons.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Master</a></li>
        <li class="breadcrumb-item active" aria-current="page">COA</li>
    </ol>
</nav>

<div class="row">
    <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-body">
                <h6 class="card-title">Data Master COA</h6>
                <table id="datatable-serverside" class="table table-sm" style="width: 100%;">
                    <thead>
                        <tr>
                            <th class="kolomNomor">No.</th>
                            <th>Kode</th>
                            <th>Nama Akun</th>
                            <th>Tipe 1</th>
                            <th>Tipe 2</th>
                            <th>Neraca</th>
                            <th>Laba Rugi</th>
                            <th>Status</th>
                            <th class="kolomAksi">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
            <div class="card-footer" style="text-align: right;">
                @can('master-data.create')
                <button class="btn btn-info btn-custom1" id="tambahMasterCoa">Tambah Data</button>
                @endcan
            </div>
        </div>
    </div>
</div>

{{-- Modal --}}
<div id="modalMasterCoa" class="modal fade bd-example-modal-lg" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Form Master COA</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form_master_coa" class="forms-sample">
                    <div class="row">
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Parent</label>
                                <select name="parent_id" class="form-control select2CustomModal">
                                    <option value="0">Silahkan Pilih</option>
                                                                    </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Kode</label>
                                <input type="text" class="form-control required" name="kode" autocomplete="off" placeholder="Kode">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Nama</label>
                                <input type="text" class="form-control required" name="nama" autocomplete="off" placeholder="Nama">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Tipe 1</label>
                                <select name="tipe_1" class="form-control required">
                                    <option value="">Silahkan Pilih</option>
                                    <option value="asset">Asset</option>
                                    <option value="liabilitas">Liabilitas</option>
                                    <option value="ekuiti">Ekuiti</option>
                                    <option value="revenue">Revenue</option>
                                    <option value="beban">Beban</option>
                                    <option value="other revenue">Pendapatan Lain</option>
                                    <option value="other expense">Beban Lain</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Tipe 2</label>
                                <select name="tipe_2" class="form-control required">
                                    <option value="">Silahkan Pilih</option>
                                    <option value="heading">Heading</option>
                                    <option value="begin-total">Begin Total</option>
                                    <option value="posting">Posting</option>
                                    <option value="end-total">End Total</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Tampilkan di Neraca</label>
                                <select name="tampilkan_di_neraca" class="form-control">
                                    <option value="">Silahkan Pilih</option>
                                    <option value="1">Ya</option>
                                    <option value="0">Tidak</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Tampilkan di Laba Rugi</label>
                                <select name="tampilkan_di_labarugi" class="form-control">
                                    <option value="">Silahkan Pilih</option>
                                    <option value="1">Ya</option>
                                    <option value="0">Tidak</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Status Aktif</label>
                                <select name="status" class="form-control">
                                    <option value="">Silahkan Pilih</option>
                                    <option value="active">Aktif</option>
                                    <option value="inactive">Tidak</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Saldo Awal Optional</label>
                                <input type="text" onchange="formatInputUang(this)" onkeyup="dottocomma(this)" class="form-control removeMinusSign" name="saldo_awal" placeholder="Saldo Awal Optional" value="{{ formatNumberComma(0) }}">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Tanggal</label>
                                <input type="date" name="date" class="form-control" value="{{ date('Y-m-d') }}">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Posisi Akun</label>
                                <div>
                                    <div class="form-check form-check-inline">
                                        <input type="radio" class="form-check-input" name="type_drcr" id="debit" value="debit">
                                        <label class="form-check-label" for="debit">
                                            Debit
                                        </label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input type="radio" class="form-check-input" name="type_drcr" id="credit" value="credit">
                                        <label class="form-check-label" for="credit">
                                            Kredit
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            <button type="button" id="btnSimpanMasterCoa" class="btn btn-primary btn-custom1">Simpan</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{{-- Akhiran Modal --}}
@endsection

@push('plugin-scripts')
<script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
<script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush

@push('custom-scripts')
{{-- <script src="{{ asset('assets/js/data-table.js') }}"></script> --}}
<script src="{{ asset('assets/js/sweet-alert.js') }}"></script>

<script>
    var URLs = "{{ url('master/coa') }}";

    let datatable = $('#datatable-serverside').DataTable({
        lengthMenu: lengthMenuDatatable(),
        processing: true,
        serverSide: true,
        ajax: {
            url: URLs,
            type: "GET",
        },
        columns: [{
                data: 'DT_RowIndex',
                name: 'id',
                searchable: false
            },
            {
                data: 'kode',
                name: 'kode'
            },
            {
                data: 'nama',
                name: 'nama'
            },
            {
                data: 'tipe_1',
                name: 'tipe_1'
            },
            {
                data: 'tipe_2',
                name: 'tipe_2'
            },
            {
                data: 'tampilkan_di_neraca',
                name: 'tampilkan_di_neraca',
                searchable: false,
                orderable: false,
                class: 'text-center'
            },
            {
                data: 'tampilkan_di_labarugi',
                name: 'tampilkan_di_labarugi',
                searchable: false,
                orderable: false,
                class: 'text-center'
            },
            {
                data: 'status',
                name: 'status',
                searchable: false,
                orderable: false,
                class: 'text-center'
            },
            {
                data: 'aksi',
                name: 'aksi',
                searchable: false,
                orderable: false
            },
        ],
        "columnDefs": [{
            "targets": '_all',
            "defaultContent": "-"
        }],
    })

    $('#tambahMasterCoa').on('click', function(e) {
        stat = "add";
        $('#modalMasterCoa').modal('show');
    });

    $('#btnSimpanMasterCoa').on('click', function(e) {
        if (cekForm('form_master_coa') == true) {
            var data = $('#form_master_coa').serialize();
            data += "&_token={{ csrf_token() }}";
            if (stat == "add") {
                sendJson(URLs + "/add", data, rSends);
            } else {
                data += "&id=" + IDs;
                sendJson(URLs + "/update", data, rSends);
            }
        }
    });

    function readData(id) {
        stat = "update";
        IDs = id;
        var data = {
            act: "read",
            id: id,
            _token: "{{ csrf_token() }}"
        };
        reads(URLs + "/read", data, rReads);
    }

    function rReads(data) {
        swal.close();
        $('#modalMasterCoa').modal("show");

        $('.optionParent' + IDs).prop('disabled', true);
        $.each(data.dataPemilih, function(i, v) {
            $('.optionParent' + v.id).prop('disabled', true);
        });

        $.each(data.data, function(idx, vals) {
            if (idx == 'parent_id') {
                $('[name="' + idx + '"]').val(vals).trigger('change');
            } else if(idx == 'type_drcr'){
                $(`input[name="type_drcr"][value="${vals}"]`).prop('checked', true);
            } else {
                $('[name="' + idx + '"]').val(vals);
            }
        })
    }

    function hapusData(id) {
        swal({
            title: "Konfirmasi",
            text: "Apakah anda ingin menghapus data ?",
            type: "warning",
            showCancelButton: true,
            cancelButtonText: "Batal",
            confirmButtonText: "Lanjutkan"
        }).then(function() {
            var data = {
                act: "delete",
                id: id,
                _token: '{{ csrf_token() }}'
            };
            sendJson(URLs + "/delete", data, rSends(datatable));
        })
    }

    function ubahStatus(e) {
        if ($(e).is(':checked')) {
            var data = {
                id: $(e).data('id'),
                kolom: $(e).data('kolom'),
                isian: 1,
                _token: "{{ csrf_token() }}"
            };
            sendJson(URLs + "/ubah-status-global", data, rSendsUbahStatus);
        } else {
            var data = {
                id: $(e).data('id'),
                kolom: $(e).data('kolom'),
                isian: 0,
                _token: "{{ csrf_token() }}"
            };
            sendJson(URLs + "/ubah-status-global", data, rSendsUbahStatus);
        }
        // if ($(e).val() == '' || $(e).val() == null) {
        //     swal('Perhatian', 'Pastikan Anda Ya atau Tidak', 'warning').then(function() {
        //         datatable.ajax.reload();
        //     });
        // } else {
        //     var data = {
        //         id: $(e).data('id'),
        //         kolom: $(e).data('kolom'),
        //         isian: $(e).val(),
        //         _token: "{{ csrf_token() }}"
        //     };
        //     sendJson(URLs + "/ubah-status-global", data, rSendsUbahStatus);
        // }
    }
    // $('.ubahStatusTampilNeraca, .ubahStatusTampilLabaRugi, .ubahStatus').on('change', function(e){
    //     if($(this).val() == '' || $(this).val() == null){
    //         swal('Perhatian', 'Pastikan Anda Ya atau Tidak', 'warning').then(function(){
    //             location.reload();
    //         });
    //     }else{
    //         var data = {
    //             id: $(this).data('id'),
    //             kolom: $(this).data('kolom'),
    //             isian: $(this).val(),
    //             _token: "{{ csrf_token() }}"
    //         };
    //         sendJson(URLs+"/ubah-status-global", data, rSendsUbahStatus);
    //     }
    // });

    function rSendsUbahStatus(data) {
        var titles = data.type == "success" ? "Sukses" : (data.type == "error" ? "Gagal" : "Info");
        swal({
            title: titles,
            text: data.response,
            type: data.type,
            confirmButtonText: "OK"
        }).then(function() {
            if (data.type != "success") {
                datatable.ajax.reload();
            }
        });
    }

    $('#modalMasterCoa').on('hidden.bs.modal', function(e) {
        $('#form_master_coa input').not('input[name="type_drcr"]').val('');
        $('#form_master_coa .select2CustomModal').val('0').trigger('change');
        $(`input[name="type_drcr"]`).prop('checked', false);
        $('.optionParentAll').prop('disabled', false);
        IDs = '';
        stat = '';
    });
</script>
@endpush