@push('css')
    <link href="{{ asset('assets/libs/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet">
@endpush

<div class="card">
    <div class="card-body">
        @if (Session::has('message'))
            <div class="alert alert-{{ Session::get('message.type') }}">{!! Session::get('message.text') !!}</div>
        @endif
        <div class="row">
            <div class="col-md-6">
                <div class="mb-3">
                    <label>Perihal</label>
                    {!! Form::text('perihal', old('perihal', @$surat->perihal ?? 'PERMINTAAN DANA'), [
                        'class' => 'form-control',
                        'placeholder' => 'input perihal',
                    ]) !!}
                </div>
            </div>
            <div class="col-md-6">
                <div class="mb-3">
                    <label>Ajukan sebagai</label>
                    @if (isset($surat))
                        <input type="hidden" name="divisi_id" id="divisi_id"
                            value="{{ $surat->role_id }}|{{ $surat->divisi_id }}">
                        <p><b>{{ $surat->role->name }}</b></p>
                    @else
                        {{-- <input type="hidden" name="divisi_id" id="divisi_id"
                            value="{{ $myRole[0]['role'] }}|{{ $myRole[0]['divisi_id'] }}">
                        <p><b>{{ $myRole[0]['jabatan'] }}</b></p> --}}
                        <select name="divisi_id" id="divisi_id" class="form-control" required>
                            @foreach ($divisis as $divisi)
                                <option value="{{ $myRole[0]['role'] }}|{{ $divisi->divisi_id }}"
                                    @if (old('divisi_id', @$surat->divisi_id) == $divisi->id) selected @endif>
                                    {{ $divisi->divisi->name }}
                                </option>
                            @endforeach
                        </select>
                    @endif

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="mb-3">
                    <label>Invoice pengajuan</label>
                    {!! Form::file('file_dokumen', [
                        'class' => 'filestyle',
                        'data-buttonname' => 'btn-primary',
                        'accept' => 'application/pdf',
                    ]) !!}
                    <span style="color:orange;"> *gunakan file dalam bentuk pdf</span>
                    @if (@$surat->file_dokumen)
                        <br>
                        <a rel="stylesheet" href="{{ url('/dokumen/upload/' . $surat->file_dokumen) }}" target="_blank"
                            class="btn btn-success btn-sm my-1"><i class="fa fa-image"> File Invoice</i></a>
                    @endif
                </div>
            </div>
            <div class="col-md-6">
                <div class="mb-3">
                    <label>No Invoice</label>
                    {!! Form::text('no_invoice', old('no_invoice', @$surat->no_invoice), [
                        'class' => 'form-control',
                        'required' => 'required',
                        'placeholder' => 'input no invoice',
                    ]) !!}
                </div>
            </div>
            <div class="col-md-6">
                <div class="mb-3">
                    <label for="perusahaan_id">Perusahaan</label>
                    @if (isset($surat))
                        <input type="hidden" name="perusahaan_id" id="perusahaan_id"
                            value="{{ $surat->perusahaan_id }}">
                        <p><b>{{ $surat->perusahaan->name }}</b></p>
                    @else
                        <select name="perusahaan_id" id="perusahaan_id" required class="form-control">
                            @foreach ($perusahaans as $perusahaan)
                                <option value="{{ $perusahaan->perusahaan_id }}"
                                    @if (old('perusahaan_id', @$surat->perusahaan_id) == $perusahaan->id) selected @endif>
                                    {{ $perusahaan->perusahaan->name }}
                                </option>
                            @endforeach
                        </select>
                    @endif
                </div>
                
            </div>
            <div class="col-md-6">
                <div class="mb-3">
                    <label for="atasan_id">Atasan</label>
                    @if (isset($surat))
                        {{-- <p><b>{{ $spt_accounting->name }}</b></p> --}}
                        <ul>
                            @foreach ($surat->suratSignature()->where('label', 'Penanggung Jawab SPD')->get() as $item)
                                <li>
                                    <input type="hidden" name="atasan_id[]" value="{{ $item->user_id }}">
                                    <b>{{ $item->user->name }}</b>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <select required name="atasan_id[]" multiple id="atasan_id">

                        </select>
                    @endif
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="mb-3">
                    <label>Note</label>
                    {!! Form::text('note', @$surat->note, ['class' => 'form-control', 'placeholder' => 'input note']) !!}
                </div>
            </div>
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="tahun">Tahun</label>
                            <select name="tahun" id="tahun" class="form-control">
                                @for ($i = date('Y'); $i >= 2019; $i--)
                                    <option value="{{ $i }}"
                                        @if (old('tahun', isset($surat) ? $surat->tanggal->format('Y') : date('Y')) == $i) selected @endif>
                                        {{ $i }}</option>
                                @endfor
                            </select>
                        </div>
                    </div>
                    <div class="col-md-8">
                        <div class="form-group">
                            <label for="bulan">Bulan <small class="text-info">*jika bulan sebelumnya akan mengikuti
                                    tanggal akhir bulan</small></label>
                            <select name="bulan" id="bulan" class="form-control">
                                @for ($i = 1; $i <= 12; $i++)
                                    <option value="{{ $i }}"
                                        @if (old('bulan', isset($surat) ? $surat->tanggal->format('m') : date('m')) == $i) selected @endif>
                                        {{ $i }} - {{ \App\Helper\Generator::bulanIndo($i - 1) }}</option>
                                @endfor
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
@if (isset($surat))
    @foreach ($surat->groupItem as $group)
        <div class="card card-index" rowindex="0">
            <div class="card-body">
                <div class="row">
                    <h3>#Group Item</h3>
                    @foreach ($group->item as $item)
                        <div class="col-md-12">
                            <hr style="border-top: 2px gray dashed;">
                            <div class="row">
                                <div class="col-md-12">
                                    <div style="float:left">
                                        <h5>[Item]</h5>
                                    </div>
                                    @if ($loop->iteration != 1)
                                        <div style="float:right">
                                            <a class="btn btn-danger btn-sm btn-remove-item"><i class="fa fa-times"></i>
                                                Batalkan
                                                Item</a>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="mb-3">
                                        <label>Kode Budgeting</label>
                                        @if (isset(request()->template_surat_id))
                                            {!! Form::select('item[' . $group->row_index . '][budget_id][]', [], null, [
                                                'class' => 'form-control form-budget budget',
                                                'required' => 'required',
                                                'placeholder' => 'pilih kode',
                                            ]) !!}
                                        @else
                                            {!! Form::select('item[' . $group->row_index . '][budget_id][]', $budget, $item->budget_id, [
                                                'class' => 'form-control form-budget budget',
                                                'required' => 'required',
                                                'data-default' => $item->budget_id,
                                                'placeholder' => 'pilih kode',
                                            ]) !!}
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-5">
                                    <div class="mb-3">
                                        <label>Penggunaan dana</label>
                                        {!! Form::text('item[' . $group->row_index . '][label][]', $item->label, [
                                            'class' => 'form-control form-label',
                                            'placeholder' => 'input penggunaan dana',
                                            'required' => 'required',
                                        ]) !!}
                                    </div>
                                </div>
                                <div class="col-md-5">
                                    <div class="mb-3">
                                        <label>Nominal (Rp)</label>
                                        {!! Form::text('item[' . $group->row_index . '][nominal][]', $item->nominal, [
                                            'class' => 'form-control form-nominal input-mask text-start',
                                            'data-inputmask' =>
                                                "'alias': 'numeric', 'groupSeparator':',', 'digits': 0, 'digitsOptional': false, 'prefix': '', 'placeholder':'0'",
                                            'required' => 'required',
                                        ]) !!}
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-check form-switch form-switch-md mt-4 mb-3">
                                        <input class="form-check-input tunai"
                                            name="item[{{ $group->row_index }}][tunai][]"
                                            @if (isset($surat) && $surat->groupItem[0]->item[0]->tunai == 1) checked @endif type="checkbox"
                                            id="tunai-{{ $group->row_index }}">
                                        <label class="form-check-label"
                                            for="tunai-{{ $group->row_index }}">Tunai</label>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-2">
                                        <div class="form-check form-switch form-switch-md ">
                                            <input class="form-check-input pakai-vendor" name="item[0][vendor][]" type="checkbox"
                                                id="vendor-0">
                                            <label class="form-check-label" for="vendor-0">Vendor</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="row pilihan-vendor" style="display: none;">
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label>Pilih Vendor</label>
                                            <select name="vendor_id[]" id="vendor_id-0" class="form-control pilih-vendor">
                                                <option value="">Pilih Vendor</option>
                                                @foreach ($vendors as $vendor)
                                                    <option value="{{ $vendor->id }}" data-json='{!! json_encode($vendor) !!}'>
                                                        {{ $vendor->vendor_bank_name }} / {{ $vendor->vendor_bank }} /
                                                        {{ $vendor->vendor_bank_no }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row inputan-bank">
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label>Bank Tujuan</label>
                                            {!! Form::select('item[' . $group->row_index . '][bank_id][]', $bank, $item->bank_id, [
                                                'class' => 'form-control bank-tujuan',
                                                'required' => 'required',
                                                'placeholder' => 'pilih bank',
                                            ]) !!}
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label>No. Rek Tujuan</label>
                                            {!! Form::number('item[' . $group->row_index . '][rek_tujuan][]', $item->rek_tujuan, [
                                                'class' => 'form-control
                                                                                                                                                                                                                                                                                                            form-rek_tujuan',
                                                'required' => 'required',
                                            ]) !!}
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="mb-3">
                                            <label>Nama Rekening</label>
                                            {!! Form::text('item[' . $group->row_index . '][nama_rek][]', $item->nama_rek, [
                                                'class' => 'form-control form-nama_rek',
                                                'placeholder' => 'Nama Rekening...',
                                                'required' => 'required',
                                            ]) !!}
                                        </div>
                                    </div>
                                </div>


                            </div>
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="mb-3">
                                        <label>Keterangan</label>
                                        {!! Form::textarea('item[' . $group->row_index . '][keterangan][]', $item->keterangan, [
                                            'class' => 'form-control
                                                                                                                                                                                                                                                                            form-keterangan',
                                            'placeholder' => 'input keterangan',
                                            'rows' => '2',
                                        ]) !!}
                                    </div>
                                </div>
                            </div>
                            <div class="append-item">

                            </div>
                        </div>
                    @endforeach

                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label>PPN (%)</label>
                                {!! Form::number('item[' . $group->row_index . '][ppn]', $group->persenan_ppn, [
                                    'class' => 'form-control form-ppn',
                                    'placeholder' => 'input ppn',
                                    'step' => '0.01',
                                    'min' => 0,
                                    'required' => 'required',
                                ]) !!}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <div class="input-pph">
                                    <span><label class="label-pph">PPH (%) </label> <label
                                            for="pakai_persen_pph"><input id="pakai_persen_pph" type="checkbox"
                                                @if ($group->pakai_persen_pph) checked @endif
                                                name="item[0][pakai_persen_pph]" class="pakai-persen-pph">
                                            Persen</label></span>
                                    @if ($group->pakai_persen_pph)
                                        {!! Form::number('item[' . $group->row_index . '][pph]', $group->persenan_pph, [
                                            'class' => 'form-control form-pph text-start',
                                            'placeholder' => 'input pph',
                                            'step' => '0.01',
                                            'min' => 0,
                                            'required' => 'required',
                                        ]) !!}
                                    @else
                                        {!! Form::text('item[' . $group->row_index . '][pph]', $group->nominal_pph, [
                                            'class' => 'form-control form-pph  text-start  input-mask',
                                            'placeholder' => 'input pph',
                                            'data-inputmask' =>
                                                "'alias': 'numeric', 'groupSeparator':',', 'digits': 0, 'digitsOptional': false, 'prefix': '', 'placeholder':'0'",
                                            'required' => 'required',
                                        ]) !!}
                                    @endif

                                </div>


                            </div>
                        </div>

                        {{-- <div class="col-md-4 ">
                            <div class="mb-3">
                                <label>Biaya Materai (Rp)</label>
                                {!! Form::text('item[' . $group->row_index . '][biaya_materai]', $group->biaya_materai, [
                                    'class' => 'form-control form-biaya-materai input-mask text-start',
                                    'data-inputmask' =>
                                        "'alias': 'numeric', 'groupSeparator': ',', 'digits': 0,'digitsOptional': false, 'prefix': '', 'placeholder': '0'",
                                    'placeholder' => 'Biaya Materai...',
                                ]) !!}
                            </div>
                        </div> --}}
                    </div>
                </div>
    @endforeach
    </div>
    </div>
@else
    <div class="card card-index" rowindex="0">
        <div class="card-body">
            <div class="row">
                <h3>#Group Item</h3>
                <div class="col-md-12">
                    <hr style="border-top: 2px gray dashed;">
                    <h5>[Item]</h5>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label>Kode Budgeting</label>
                                {{-- {!! Form::select('item[0][budget_id][]',[],null,['class'=>'form-control form-budget
                            budget','placeholder'=>'pilih kode']) !!} --}}
                                <select name="item[0][budget_id][]" required class="form-control form-budget budget">
                                    @foreach ($budgets as $b)
                                        @php
                                            // $dipakai = (int)$item->jumlah_anggaran - (int)$item->item()->sum('nominal_terajukan');
                                            $dipakai = 0;
                                            foreach ($b->item()->has('groupItem.surat')->get() as $item) {
                                                $sumGroup = $item->groupItem()->has('surat')->sum('nominal_pph');
                                                if (
                                                    $item->nominal_disetujui != '' &&
                                                    $item->nominal_disetujui != null
                                                ) {
                                                    $dipakai += $item->nominal_disetujui + $sumGroup;
                                                } else {
                                                    $dipakai += $item->nominal_terajukan + $sumGroup;
                                                }
                                            }
                                        @endphp
                                        <option value="{{ $b->id }}"
                                            data-anggaran="{{ $b->jumlah_anggaran - $dipakai }}">
                                            [{{ $b->kode_budget }}] Rp. {{ number_format($b->jumlah_anggaran) }}
                                            |
                                            {{ $b->nama_anggaran }} (Sisa : Rp.
                                            {{ number_format($b->jumlah_anggaran - $dipakai) }})</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-5">
                            <div class="mb-3">
                                <label>Penggunaan dana</label>
                                {!! Form::text('item[0][label][]', null, [
                                    'class' => 'form-control form-label',
                                    'placeholder' => 'input penggunaan dana',
                                    'required' => 'required',
                                ]) !!}
                            </div>
                        </div>
                        <div class="col-md-5 ">
                            <div class="mb-3">
                                <label>Nominal (Rp)</label>
                                {!! Form::text('item[0][nominal][]', null, [
                                    'class' => 'form-control form-nominal input-mask text-start',
                                    'data-inputmask' =>
                                        "'alias': 'numeric', 'groupSeparator': ',', 'digits': 0,'digitsOptional': false, 'prefix': '', 'placeholder': '0'",
                                    'placeholder' => 'Jumlah Nominal...',
                                    'required' => 'required',
                                ]) !!}
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-check form-switch form-switch-md mt-4 mb-3">
                                <input class="form-check-input tunai" name="item[0][tunai][]" type="checkbox"
                                    id="tunai-0">
                                <label class="form-check-label" for="tunai-0">Tunai</label>
                            </div>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-md-2">
                            <div class="form-check form-switch form-switch-md ">
                                <input class="form-check-input pakai-vendor" name="item[0][vendor][]" type="checkbox"
                                    id="vendor-0">
                                <label class="form-check-label" for="vendor-0">Vendor</label>
                            </div>
                        </div>
                    </div>
                    <div class="row pilihan-vendor" style="display: none;">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label>Pilih Vendor</label>
                                <select name="vendor_id[]" id="vendor_id-0" class="form-control pilih-vendor">
                                    <option value="">Pilih Vendor</option>
                                    @foreach ($vendors as $vendor)
                                        <option value="{{ $vendor->id }}" data-json='{!! json_encode($vendor) !!}'>
                                            {{ $vendor->vendor_bank_name }} / {{ $vendor->vendor_bank }} /
                                            {{ $vendor->vendor_bank_no }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row inputan-bank">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label>Bank Tujuan</label>
                                {!! Form::select('item[0][bank_id][]', $bank, null, [
                                    'class' => 'form-control bank-tujuan',
                                    'required' => 'required',
                                    'placeholder' => 'pilih bank',
                                ]) !!}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label>No. Rek Tujuan</label>
                                {!! Form::number('item[0][rek_tujuan][]', null, [
                                    'class' => 'form-control form-rek_tujuan',
                                    'placeholder' => 'Nomor Rekening...',
                                    'required' => 'required',
                                ]) !!}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label>Nama Rekening</label>
                                {!! Form::text('item[0][nama_rek][]', null, [
                                    'class' => 'form-control form-nama_rek',
                                    'placeholder' => 'Nama Rekening...',
                                    'required' => 'required',
                                ]) !!}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="mb-3">
                                <label>Keterangan</label>
                                {!! Form::textarea('item[0][keterangan][]', null, [
                                    'class' => 'form-control form-keterangan',
                                    'placeholder' => 'input keterangan',
                                    'rows' => '2',
                                    'required',
                                ]) !!}
                            </div>
                        </div>
                    </div>
                    <div class="append-item">

                    </div>
                    {{-- <div class="row">
                        <div class="col-md-12">
                            <a class="btn btn-warning btn-add-item btn-sm"><i class="fa fa-plus"></i> tambah item</a>
                        </div>
                    </div> --}}
                    <br>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label>PPN (%)</label>
                                {!! Form::number('item[0][ppn]', null, [
                                    'class' => 'form-control form-ppn',
                                    'placeholder' => 'input ppn',
                                    'step' => '0.01',
                                    'min' => 0,
                                    'required' => 'required',
                                ]) !!}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <div class="input-pph">
                                    <span><label class="label-pph">PPH (%) </label> <label
                                            for="pakai_persen_pph"><input id="pakai_persen_pph" type="checkbox"
                                                checked name="item[0][pakai_persen_pph]" class="pakai-persen-pph">
                                            Persen</label></span>
                                    {!! Form::number('item[0][pph]', null, [
                                        'class' => 'form-control form-pph text-start',
                                        'placeholder' => 'Input PPh',
                                        'step' => '0.01',
                                        'min' => 0,
                                        'required' => 'required',
                                    ]) !!}
                                </div>
                            </div>
                        </div>
                        {{-- <div class="col-md-4 ">
                            <div class="mb-3">
                                <label>Biaya Materai (Rp)</label>
                                {!! Form::text('item[0][biaya_materai]', null, [
                                    'class' => 'form-control form-biaya-materai input-mask text-start',
                                    'data-inputmask' =>
                                        "'alias': 'numeric', 'groupSeparator': ',', 'digits': 0,'digitsOptional': false, 'prefix': '', 'placeholder': '0'",
                                    'placeholder' => 'Biaya Materai...',
                                ]) !!}
                            </div>
                        </div> --}}

                    </div>
                </div>
            </div>
        </div>
    </div>

@endif

<div class="card">
    <div class="card-body">
        <h3>#Biaya Lainnya</h3>
        <table class="table">
            <thead>
                <tr>
                    <th>
                        Deskripsi
                    </th>
                    <th>
                        Jumlah (Rp)
                    </th>
                    <th>
                        *
                    </th>
                </tr>
            </thead>
            <tbody id="list-biaya-lainnya">

            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3">
                        <button type="button" class="btn btn-warning btn-add-biaya-lainnya btn-sm"
                            id="tambah-biaya"><i class="fa fa-plus"></i> tambah
                            biaya lainnya</button>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

<div class="group-append">

</div>
{{-- <div class="card">
    <div class="card-body">
        <div class="col-md-12">
            <a class="btn btn-primary add-group"><i class="fa fa-plus"></i> Tambah Group</a>
        </div>
    </div>
</div> --}}
@push('js')
    <script src="{{ asset('assets/libs/admin-resources/bootstrap-filestyle/bootstrap-filestyle.min.js') }}"></script>
    <script src="{{ asset('assets/libs/select2/js/select2.min.js') }}"></script>
    <script src="{{ asset('assets/libs/inputmask/jquery.inputmask.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
    <script type="text/template" id="biaya-lainnya-template">
        <tr>
            <td>
                <input type="text" name="biaya_lainnya_deskripsi[]" class="form-control" placeholder="Deskripsi" required value="%biaya_lainnya_deskripsi%">
            </td>
            <td>
                <input type="text" name="biaya_lainnya_jumlah[]" class="form-control input-mask text-start" value="%biaya_lainnya_jumlah%" required placeholder="Jumlah" data-inputmask="'alias': 'numeric', 'groupSeparator': ',', 'digits': 0, 'digitsOptional': false, 'prefix': '', 'placeholder': '0'">
            </td>
            <td>
                <button type="button" class="btn btn-danger btn-sm btn-remove-biaya-lainnya"><i class="fa fa-times"></i></button>
            </td>
        </tr>
    </script>
    <script type="text/javascript">
        $(document).on('change', '.tunai', function() {
            console.log("tunai", $(this).is(':checked'));
            const rowParent = $(this).closest('.card-body');
            const inputanBank = rowParent.find('.inputan-bank');
            if ($(this).is(':checked')) {
                //find input and select and disabled all
                inputanBank.find('input').attr('disabled', true);
                inputanBank.find('select').attr('disabled', true);
                //remove required
                inputanBank.find('input').removeAttr('required');
            } else {
                //find input and undisabled all
                inputanBank.find('input').attr('disabled', false);
                inputanBank.find('select').attr('disabled', false);
                //add required
                inputanBank.find('input').attr('required', true);
            }
        })

        const rowParent = $('.tunai').closest('.card-body');
        const inputanBank = rowParent.find('.inputan-bank');
        if ($('.tunai').is(':checked')) {
            //find input and select and disabled all
            inputanBank.find('input').attr('disabled', true);
            inputanBank.find('select').attr('disabled', true);
            //remove required
            inputanBank.find('input').removeAttr('required');
        } else {
            //find input and undisabled all
            inputanBank.find('input').attr('disabled', false);
            inputanBank.find('select').attr('disabled', false);
            //add required
            inputanBank.find('input').attr('required', true);
        }

        $('.form-budget').select2({
            width: '100%',
            placeholder: 'pilih budget',
        });

        // $('#atasan_id').select2({
        //     width: '100%',
        //     placeholder: 'pilih atasan',
        //     multiple: true
        // });

        const atasanTomSelect = new TomSelect("#atasan_id");

        // $('#atasan_id').change(function() {
        //     console.log($(this).val());
        // });

        $('.as').select2({
            width: '100%',
            placeholder: 'pilih',
        });
        $('.bank-tujuan').select2({
            width: '100%',
            placeholder: 'pilih bank',
        });

        $('.pilih-vendor').select2({
            width: '100%',
            placeholder: 'pilih vendor',
        });

        $.extend($.expr[':'], {
          'containsi': function(elem, i, match, array)
          {
            return (elem.textContent || elem.innerText || '').toLowerCase()
            .indexOf((match[3] || "").toLowerCase()) >= 0;
          }
        });

        //on change pilih-vendor
        $('body').on('change', '.pilih-vendor', function() {
            const json = $(this).find(':selected').data('json');
            const rowParent = $(this).closest('.card-body');
            const inputanBank = rowParent.find('.inputan-bank');
            inputanBank.find('.form-rek_tujuan').val(json.vendor_bank_no);
            inputanBank.find('.form-nama_rek').val(json.vendor_bank_name);

            let long_name = json.vendor_bank;
            let $element = $('.bank-tujuan')
            let val = $element.find("option:containsi('" + long_name + "')").val()
            $element.val(val).trigger('change.select2');
        });

        $(document).ready(function() {
            $(".input-mask").inputmask();
            $('.group-span-filestyle').find('label').removeClass('btn-secondary').addClass('btn-primary');

            $(document).on('change', '.form-budget', function() {
                var cardBody = $(this).closest('.card-body');
                var anggaran = $(this).find(":selected").data("anggaran");
                $(cardBody).find('.form-nominal').attr('max', anggaran);
                $(cardBody).find('.form-nominal').attr('data-inputmask',
                    "'alias': 'numeric', 'groupSeparator':',', 'digits': 0, 'digitsOptional': false, 'prefix': '', 'placeholder':'0', 'max':" +
                    anggaran);
                $(".input-mask").inputmask();
            });

        });


        //request list dana
        var dana = [];
        const pilihPerusahaan = $('#perusahaan_id');
        getDana(pilihPerusahaan.val());
        getAtasan(pilihPerusahaan.val());
        pilihPerusahaan.change(function() {
            var ini = $(this);
            dana = [];
            getDana(ini.val());
            getAtasan(ini.val());
        });

        $('#tahun').change(function() {
            var ini = $('#perusahaan_id');
            dana = [];
            getDana(ini.val());
            getAtasan(ini.val());
        });

        $('#bulan').change(function() {
            var ini = $('#perusahaan_id');
            dana = [];
            getDana(ini.val());
            getAtasan(ini.val());
        });

        $("#divisi_id").change(function() {
            dana = [];
            getDana(pilihPerusahaan.val());
            getAtasan(pilihPerusahaan.val());
        });

        function getDana(perusahaan_id) {
            $.ajax({
                url: '{{ route('get.dana') }}',
                method: 'POST',
                dataType: 'JSON',
                data: {
                    perusahaan_id: perusahaan_id,
                    _token: '{{ csrf_token() }}',
                    divisi_id: $("#divisi_id").val(),
                    template_surat_id: '{{ request()->template_surat_id }}',
                    edit_surat_id: '{{ @$surat->id }}'
                },
                success: function(response) {
                    // console.log(response);
                    dana.push(response);

                    if (dana.length > 0 && dana[0].length <= 0) {
                        alert(
                            "Budget tidak ada pada perusahaan/departemen ini, silahkan pilih perusahaan/departemen lainnya");
                    }

                    var pilihanBudgets = $('.form-budget');
                    for (let i = 0; i < pilihanBudgets.length; i++) {
                        const element = pilihanBudgets[i];
                        $(element).empty();
                        uang = '';
                        var defaultData = $(element).data('default');
                        $.each(dana[0], function(key, item) {
                            uang += '<option ' + ((defaultData == item.id || (defaultData == null &&
                                    key == 0)) ? 'selected="true"' : '') +
                                ' value=' + item.id + ' data-anggaran="' + item
                                .sisa_anggaran_raw + '">' + item.kode_budget + ' | ' + item.nominal +
                                ' | ' + item.nama_anggaran + ' (Sisa : ' + item.sisa_anggaran +
                                ')</option>'
                        })
                        $(element).html(uang);
                        if (defaultData) {
                            $(element).val(defaultData).trigger('change');
                        } else if(dana[0][0] != undefined) {
                            $(element).data('default', dana[0][0].id);
                            $(element).val(dana[0][0].id);


                        }
                        console.log($(element).val());


                    }
                    $.each($('.card-index'), function(index, item) {
                        var anggaran = $(this).find('.form-budget').find(":selected").data(
                            "anggaran") == undefined ? 0 : $(this).find('.form-budget').find(
                            ":selected").data("anggaran");
                        $(this).find('.form-nominal').attr('max', anggaran);
                        $(this).find('.form-nominal').attr('data-inputmask',
                            "'alias': 'numeric', 'groupSeparator':',', 'digits': 0, 'digitsOptional': false, 'prefix': '', 'placeholder':'0', 'max':" +
                            anggaran);
                    });
                    $(".input-mask").inputmask();
                },
            }).fail(function(error) {
                alert('gagal mendapatkan dana');
            });

        }

        function getAtasan(perusahaan_id) {
            $.ajax({
                url: '{{ route('get.atasan') }}',
                method: 'POST',
                dataType: 'JSON',
                data: {
                    perusahaan_id: perusahaan_id,
                    _token: '{{ csrf_token() }}',
                    divisi_id: $("#divisi_id").val()
                },
                success: function(response) {
                    // console.log(response);
                    // const select = $("#atasan_id");
                    // option = '';
                    // if (response.length <= 0) {
                    //     alert("Atasan Tidak Ditemukan");
                    // }
                    // $.each(response, function(key, item) {
                    //     option += '<option value=' + item.id + '>' + item.name + ' / ' + item.jabatan +
                    //         '</option>'
                    // });
                    // select.html(option);
                    atasanTomSelect.clear();
                    atasanTomSelect.clearOptions();
                    atasanTomSelect.clearCache();
                    let newOptions = [];
                     $.each(response, function(key, item) {
                        // newOptions.push({
                        //     value: item.id,
                        //     text: item.name + ' / ' + item.jabatan
                        // });
                        atasanTomSelect.addOption({
                            value: item.id,
                            text: item.name + ' / ' + item.jabatan
                        });
                    });

                    // atasanTomSelect.settings.options = newOptions;
                },
            }).fail(function(error) {
                alert('gagal mendapatkan atasan');
            });
        }



        //add item
        $('body').on('click', '.btn-add-item', function() {
            $(this).closest('.card').find('.append-item').append($('#item-template').html());
            // var item_index = $(this).closest('.card').find('.form-item').length;
            number_index = $(this).closest('.card').attr('rowindex');
            $(this).closest('.card').find('.form-budget').attr('name', 'item[' + number_index + '][budget_id][]');
            $(this).closest('.card').find('.form-label').attr('name', 'item[' + number_index + '][label][]');
            $(this).closest('.card').find('.form-nominal').attr('name', 'item[' + number_index + '][nominal][]');
            $(this).closest('.card').find('.bank-tujuan').attr('name', 'item[' + number_index + '][bank_id][]');
            $(this).closest('.card').find('.form-rek_tujuan').attr('name', 'item[' + number_index +
                '][rek_tujuan][]');
            $(this).closest('.card').find('.form-keterangan').attr('name', 'item[' + number_index +
                '][keterangan][]');

            var anggaran = $(this).closest('.card').find('.form-budget').find(":selected").data("anggaran") ==
                undefined ? 0 : $(this).closest('.card').find('.form-budget').find(":selected").data("anggaran");
            $(this).closest('.card').find('.form-nominal').attr('max', anggaran);
            $(this).closest('.card').find('.form-nominal').attr('data-inputmask',
                "'alias': 'numeric', 'groupSeparator':',', 'digits': 0, 'digitsOptional': false, 'prefix': '', 'placeholder':'0', 'max':" +
                anggaran);

            const tunaiChecks = $(this).closest('.card').find('.tunai');
            for (let item_index = 0; item_index < tunaiChecks.length; item_index++) {
                const element = $(tunaiChecks[item_index]);
                element.attr('name', 'item[' + number_index + '][tunai][]');
                element.attr('id', 'tunai-' + number_index + '-' + item_index);
                element.closest('.form-check').find('label').attr('for', 'tunai-' + number_index + '-' +
                    item_index);
            }



            $(".input-mask").inputmask();
            $('.form-budget').select2({
                width: '100%',
                placeholder: 'pilih budget',
            });
            $('.bank-tujuan').select2({
                width: '100%',
                placeholder: 'pilih bank',
            });

            uang = '';
            $.each(dana[0], function(key, item) {
                uang += '<option value=' + item.id + '>' + item.kode_budget + ' | ' + item.nominal + ' | ' +
                    item.nama_anggaran + '</option>'
            })
            $('.form-budget').each(function(key, item) {
                // if ($(this).val().length == 0) {
                //     $(this).html(uang);
                // }
            });
        });

        //add group
        $('.add-group').click(function() {
            $('.group-append').append($('#group-template').html());

            $('.form-budget').select2({
                width: '100%',
                placeholder: 'pilih budget',
            });

            $('.bank-tujuan').select2({
                width: '100%',
                placeholder: 'pilih bank',
                tags: true
            });

            $(".input-mask").inputmask();
            $.each($('.card-index'), function(index, item) {
                $(this).attr('rowindex', index);
                $(this).find('.form-budget').attr('name', 'item[' + index + '][budget_id][]')
                $(this).find('.form-label').attr('name', 'item[' + index + '][label][]')
                $(this).find('.form-nominal').attr('name', 'item[' + index + '][nominal][]')
                $(this).find('.bank-tujuan').attr('name', 'item[' + index + '][bank_id][]')
                $(this).find('.form-rek_tujuan').attr('name', 'item[' + index + '][rek_tujuan][]')
                $(this).find('.form-keterangan').attr('name', 'item[' + index + '][keterangan][]')
                $(this).find('.form-ppn').attr('name', 'item[' + index + '][ppn]')
                $(this).find('.form-pph').attr('name', 'item[' + index + '][pph]')
                var anggaran = $(this).find('.form-budget').find(":selected").data("anggaran") ==
                    undefined ? 0 : $(this).find('.form-budget').find(":selected").data("anggaran");
                $(this).find('.form-nominal').attr('max', anggaran);
                $(this).find('.form-nominal').attr('data-inputmask',
                    "'alias': 'numeric', 'groupSeparator':',', 'digits': 0, 'digitsOptional': false, 'prefix': '', 'placeholder':'0', 'max':" +
                    anggaran);

                const tunaiCheck = $(this).find('.tunai');
                tunaiCheck.attr('name', 'item[' + index + '][tunai][]');
                tunaiCheck.attr('id', 'tunai-' + index);
                tunaiCheck.closest('.form-group').find('label').attr('for', 'tunai-' + index);

            });

            uang = '';
            $.each(dana[0], function(key, item) {
                uang += '<option value=' + item.id + '>' + item.kode_budget + ' | ' + item.nominal + ' | ' +
                    item.nama_anggaran + '</option>'
            })
            $('.form-budget').each(function(key, item) {
                // if ($(this).val().length == 0) {
                //     $(this).html(uang);
                // }
            });

        });

        $('body').on('click', '.btn-remove-item', function() {
            $(this).closest('.form-item').remove();
        });
        $('body').on('click', '.btn-remove-group', function() {
            $(this).closest('.card').remove();
        });
        //change percent to currency
        $(".pakai-persen-pph").change(function() {
            const parent = $(this).closest('.input-pph');
            const input = parent.find('.form-pph');
            const label = parent.find('.label-pph');
            $(".input-mask").inputmask("remove");
            if ($(this).is(':checked')) {
                //remove input-mask and class
                input.removeAttr('data-inputmask');
                input.removeAttr('inputmode');
                input.removeClass('input-mask');
                input.attr('type', 'number');
                //change step
                input.attr('step', '0.01');
                //change label
                label.text('PPH (%)');

            } else {
                //change input type
                input.attr('type', 'text');
                //change step
                input.attr('step', '1');
                //change label
                label.text('PPH (Rp)');
                //add input-mask
                input.attr('data-inputmask',
                    "'alias': 'numeric', 'groupSeparator':',', 'digits': 0, 'digitsOptional': false, 'prefix': '', 'placeholder':'0'"
                );
                //add class input-mask
                input.addClass('input-mask');
            }
            //re-init input-mask
            $(".input-mask").inputmask();
        });

        const tambahBiayaTombol = $('#tambah-biaya');
        const listBiaya = $("#list-biaya-lainnya");
        let biayaLainnyaData = {!! json_encode(@$surat->groupItem[0]->biayaLainnyas ?? []) !!};

        //add #biaya-lainnya-template
        if (biayaLainnyaData.length > 0) {
            $.each(biayaLainnyaData, function(key, item) {
                var html = $('#biaya-lainnya-template').html();
                //add value to html
                html = html.replace('%biaya_lainnya_deskripsi%', item.deskripsi_biaya);
                html = html.replace('%biaya_lainnya_jumlah%', item.jumlah_biaya);
                listBiaya.append(html);
            });
        }



        $(document).on('click', '#tambah-biaya', function() {
            $(".input-mask").inputmask("remove");
            var html = $('#biaya-lainnya-template').html();
            //remove %biaya_lainnya_jumlah%
            html = html.replace('%biaya_lainnya_jumlah%', '');
            html = html.replace('%biaya_lainnya_deskripsi%', '');
            listBiaya.append(html);
            $(".input-mask").inputmask();

            //hide tambahBiayaTombol if item is 2
            if (listBiaya.find('tr').length == 2) {
                tambahBiayaTombol.hide();
            }
        });

        $(document).on('click', '.btn-remove-biaya-lainnya', function() {
            $(this).closest('tr').remove();
            //show tambahBiayaTombol if item is 1
            if (listBiaya.find('tr').length < 2) {
                tambahBiayaTombol.show();
            }
        });

        //if pakai-vendor is checked, show pilihan-vendor
        $(document).on('change', '.pakai-vendor', function() {
            const parent = $(this).closest('.row');
            const pilihanVendor = parent.next('.pilihan-vendor');
            if ($(this).is(':checked')) {
                pilihanVendor.show();
            } else {
                pilihanVendor.hide();
            }
        });
    </script>

    <script type="text/template" id="item-template">
        <div class="col-md-12 form-item">
            <hr style="border-top: 2px #009688 dashed;">
            <div class="row">
                <div class="col-md-12">
                    <div style="float:left">
                        <h5>[Item]</h5>
                    </div>
                    <div style="float:right">
                        <a class="btn btn-danger btn-sm btn-remove-item"><i class="fa fa-times"></i>	Batalkan Item</a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3">
                        <label>Kode Budgeting</label>
                        {{-- {!! Form::select('item[0][budget_id][]',$budget,null,['class'=>'form-control form-budget budget','placeholder'=>'pilih kode']) !!} --}}
                        <select name="item[0][budget_id][]" required class="form-control form-budget budget">
                            @foreach ($budgets as $item)
                                <option value="{{ $item->id }}" data-anggaran="{{ $item->jumlah_anggaran }}">[{{ $item->kode_budget }}] Rp. {{ number_format($item->jumlah_anggaran) }} | {{ $item->nama_anggaran }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <div class="mb-3">
                        <label>Penggunaan dana</label>
                        {!! Form::text('label[]',null,['class'=>'form-control form-label','placeholder'=>'input penggunaan dana','required'=>'required']) !!}
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-3">
                        <label>Nominal (Rp)</label>
                        {!! Form::text('nominal[]',null,['class'=>'form-control form-nominal input-mask text-start','data-inputmask'=>"'alias': 'numeric', 'groupSeparator': ',', 'digits': 0, 'digitsOptional': false, 'prefix': '', 'placeholder': '0'",'required'=>'required']) !!}
                    </div>
                </div>
                <div class="col-md-6 row">
                    <div class="col-md-2">
                        <div class="form-check form-switch form-switch-md mt-4">
                            <input class="form-check-input tunai" name="item[0][tunai][]" type="checkbox" id="tunai-0">
                            <label class="form-check-label" for="tunai-0">Tunai</label>
                        </div>
                    </div>
                    <div class="col-md-10 row pilih-bank">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label>Bank Tujuan</label>
                                {!! Form::select('item[0][bank_id][]', $bank, null, [
                                    'class' => 'form-control
                                                            bank-tujuan',
                                    'required' => 'required',
                                    'placeholder' => 'pilih bank',
                                ]) !!}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label>No. Rek Tujuan</label>
                                {!! Form::number('item[0][rek_tujuan][]', null, [
                                    'class' => 'form-control
                                                            form-rek_tujuan',
                                    'required' => 'required',
                                ]) !!}
                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="mb-3">
                        <label>Keterangan</label>
                        {!! Form::textarea('keterangan[]',null,['class'=>'form-control form-keterangan','placeholder'=>'input keterangan','rows'=>'2']) !!}
                    </div>
                </div>
            </div>
        </div>
    </script>
    <script type="text/template" id="group-template">
        <div class="card card-index" rowindex="">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        <div style="float:left;">
                            <h3>#Group Item</h3>
                        </div>
                        <div style="float:right;">
                            <a class="btn btn-dark btn-remove-group"><i class="fa fa-times"></i>	Batalkan Group</a>
                        </div>
                    </div>
                    <div class="col-md-12 form-item">
                        <hr style="border-top: 2px gray dashed;">
                        <h5>[Item]</h5>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label>Kode Budgeting</label>
                                    {!! Form::select('budget_id[0][]',$budget,null,['class'=>'form-control form-budget budget','placeholder'=>'pilih kode']) !!}
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label>Penggunaan dana</label>
                                    {!! Form::text('label[0][]',null,['class'=>'form-control form-label','placeholder'=>'input penggunaan dana','required'=>'required']) !!}
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label>Nominal (Rp)</label>
                                    {!! Form::text('nominal[0][]',null,['class'=>'form-control form-nominal input-mask text-start','data-inputmask'=>"'alias': 'numeric', 'groupSeparator': ',', 'digits': 0, 'digitsOptional': false, 'prefix': '', 'placeholder': '0'",'required'=>'required']) !!}
                                </div>
                            </div>
                            <div class="col-md-6 row">
                                <div class="col-md-2">
                                    <div class="form-check form-switch form-switch-md mt-4">
                                        <input class="form-check-input tunai" name="item[0][tunai][]" type="checkbox" id="tunai-0">
                                        <label class="form-check-label" for="tunai-0">Tunai</label>
                                    </div>
                                </div>
                                <div class="col-md-10 row pilih-bank">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label>Bank Tujuan</label>
                                            {!! Form::select('item[0][bank_id][]', $bank, null, [
                                                'class' => 'form-control
                                                                        bank-tujuan',
                                                'required' => 'required',
                                                'placeholder' => 'pilih bank',
                                            ]) !!}
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label>No. Rek Tujuan</label>
                                            {!! Form::number('item[0][rek_tujuan][]', null, [
                                                'class' => 'form-control
                                                                        form-rek_tujuan',
                                                'required' => 'required',
                                            ]) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="mb-3">
                                    <label>Keterangan</label>
                                    {!! Form::textarea('keterangan[0][]',null,['class'=>'form-control form-keterangan','placeholder'=>'input keterangan','rows'=>'2']) !!}
                                </div>
                            </div>
                        </div>
                        <div class="append-item">
                            
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <a class="btn btn-warning btn-add-item btn-sm"><i class="fa fa-plus"></i>	tambah item</a>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label>PPN (%)</label>
                                    {!! Form::number('ppn[0][]',null,['class'=>'form-control form-ppn','placeholder'=>'input ppn','step'=>'0.01','min'=>0,'required'=>'required']) !!}
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label>PPH (%)</label>
                                    {!! Form::number('pph[0][]',null,['class'=>'form-control form-pph','placeholder'=>'input pph','step'=>'0.01','min'=>0,'required'=>'required']) !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </script>
@endpush