@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">Pajak</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 Pajak</h6>
        <table id="datatable-serverside" class="table table-sm" style="width: 100%;">
            <thead>
                <tr>
                    <th class="kolomNomor">No.</th>
                    <th>Nama</th>
                    <th>Rate</th>
                    <th>COA</th>
                    <th>PPN Masukan Default</th>
                    <th>PPN Keluaran Default</th>
                    <th>Pajak Ekspedisi Default</th>
                    <th>Include</th>
                    <th class="kolomAksi">Aksi</th>
                </tr>
            </thead>
        </table>
      </div>
      <div class="card-footer" style="text-align: right;">
        @can('master-data.create')
        <button class="btn btn-info btn-custom1" id="tambahMasterPajak">Tambah Data</button>
        @endcan
      </div>
    </div>
  </div>
</div>

{{-- Modal --}}
<div id="modalMasterPajak" 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 Pajak</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_pajak" class="forms-sample">
                    <div class="row">
                        <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">Rate</label>
                                <input type="text" class="form-control required formatInputUang" name="rate" autocomplete="off" placeholder="Rate">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">COA</label>
                                <select name="coa_id" id="coa_id" class="form-control select2CustomModal">
                                    <option value="">Silahkan Pilih</option>
                                                                    </select>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" name="ppn_default" id="ppn_default">
                                <label class="form-label" for="ppn_default" style="cursor: pointer">Jadikan PPN Masukan Default</label>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" name="ppn_keluaran_default" id="ppn_keluaran_default">
                                <label class="form-label" for="ppn_keluaran_default" style="cursor: pointer">Jadikan PPN Keluaran Default</label>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" name="pajak_ekspedisi_default" id="pajak_ekspedisi_default">
                                <label class="form-label" for="pajak_ekspedisi_default" style="cursor: pointer">Jadikan Pajak Ekspedisi Default</label>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" name="is_include" id="is_include">
                                <label class="form-label" for="is_include" style="cursor: pointer">Include</label>
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            <button type="submit" id="btnSimpanMasterPajak" 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/pajak') }}";

    let datatable = $('#datatable-serverside').DataTable({
      lengthMenu: lengthMenuDatatable(),
      processing: true,
      serverSide: true,
      ajax: URLs+'/get-data',
      columns: [
        {data: 'DT_RowIndex', name: 'id', searchable: false},
        {data: 'nama', name: 'nama'},
        {data: 'rate', name: 'rate'},
        {data: 'coa', name: 'coa'},
        {data: 'ppn_default', name: 'ppn_default', class: 'text-center', orderable: false, searchable: false},
        {data: 'ppn_keluaran_default', name: 'ppn_keluaran_default', class: 'text-center', orderable: false, searchable: false},
        {data: 'pajak_ekspedisi_default', name: 'pajak_ekspedisi_default', class: 'text-center', orderable: false, searchable: false},
        {data: 'is_include', name: 'is_include', class: 'text-center', searchable: false},
        {data: 'aksi', name: 'aksi', searchable: false, orderable: false, class: 'text-center'},
      ],
    });

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

    $('#form_master_pajak').on('submit', function(e){
        e.preventDefault();
        if (cekForm('form_master_pajak') == true) {
            let data = $('#form_master_pajak').serializeArray();
            let dataObj = {};
            $.map(data, function(val, i){
                return dataObj[val['name']] = val['value'];
            });
            dataObj['_token'] = "{{ csrf_token() }}";
            dataObj['rate'] = formatInputUangToFloat(dataObj['rate']);
            if (stat == "add") {
                sendJson(URLs+"/add", dataObj, rSends);
            }else{
                dataObj['id'] = IDs;
                sendJson(URLs+"/update", dataObj, 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();
        $('#modalMasterPajak').modal("show");
        $.each(data, function (idx, vals) {
            if(idx == 'coa_id'){
                $('[name='+idx+']').val(vals).trigger('change');
            }else if(['ppn_default', 'ppn_keluaran_default', 'pajak_ekspedisi_default', 'is_include'].includes(idx)){
                $('[name='+idx+']').prop('checked', vals);
            }
            else{
                // check if vals is number
                if(!isNaN(vals)){
                    vals = formatNumberComma(vals);
                }
                $('[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);
        })
    }

    $('#modalMasterPajak').on('hidden.bs.modal', function(e){
        $('#form_master_pajak input').val('');
        $('#form_master_pajak .select2CustomModal').val('').trigger('change');
        IDs = '';
        stat = '';
        $('#form_master_pajak .form-check-input').prop('disabled', false).prop('checked', false);
    });

    function rSends(data) {
        let 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") {
                $('#modalMasterPajak').modal('hide');
                datatable.ajax.reload();
            }
        })
    }

    const setPpnDefault = (e, id) => {
        $.ajax({
            url: URLs+'/set-ppn-default',
            type: 'POST',
            data: {
                id: id,
                _token: "{{ csrf_token() }}"
            },
            success: function(data){
                if($(e).is(':checked')){
                    $('.form-check-input.ppn-masukan')
                        .not(e)
                        .prop('checked', false)
                }
            },
            error: function(xhr){
                swal({
                    title: 'Gagal',
                    text: xhr.responseJSON.response,
                    type: 'error',
                    confirmButtonText: 'OK'
                })
                $(e).prop('checked', !$(e).prop('checked'));
            }
        })
    }

    const setPpnKeluaranDefault = (e, id) => {
        $.ajax({
            url: URLs+'/set-ppn-keluaran-default',
            type: 'POST',
            data: {
                id: id,
                _token: "{{ csrf_token() }}"
            },
            success: function(data){
                if($(e).is(':checked')){
                    $('.form-check-input.ppn-keluaran')
                        .not(e)
                        .prop('checked', false)
                }
            },
            error: function(xhr){
                swal({
                    title: 'Gagal',
                    text: xhr.responseJSON.response,
                    type: 'error',
                    confirmButtonText: 'OK'
                })
                $(e).prop('checked', !$(e).prop('checked'));
            }
        })
    }
    
    const setPajakEkspedisiDefault = (e, id) => {
        $.ajax({
            url: URLs+'/set-pajak-ekspedisi-default',
            type: 'POST',
            data: {
                id: id,
                _token: "{{ csrf_token() }}"
            },
            success: function(data){
                if($(e).is(':checked')){
                    $('.form-check-input.pajak-ekspedisi')
                        .not(e)
                        .prop('checked', false)
                }
            },
            error: function(xhr){
                swal({
                    title: 'Gagal',
                    text: xhr.responseJSON.response,
                    type: 'error',
                    confirmButtonText: 'OK'
                })
                $(e).prop('checked', !$(e).prop('checked'));
            }
        })
    }

    const setInclude = (e, id) => {
        $.ajax({
            url: URLs+'/set-include',
            type: 'POST',
            data: {
                id: id,
                _token: "{{ csrf_token() }}"
            },
            success: function(data){
                if($(e).is(':checked')){
                    $('.form-check-input.ppn-masukan')
                        .not(e)
                        .prop('checked', false)
                }
            },
            error: function(xhr){
                swal({
                    title: 'Gagal',
                    text: xhr.responseJSON.response,
                    type: 'error',
                    confirmButtonText: 'OK'
                })
                $(e).prop('checked', !$(e).prop('checked'));
            }
        })
    }
  </script>
@endpush