@push('css')
    <link href="{{ asset('assets/libs/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css">
    <link href="{{ asset('assets/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css') }}" rel="stylesheet">
@endpush
<div class="row">
    {{-- <div class="col-md-12">
        <div class="mb-3">
            <label for="perusahaan_id">Perusahaan</label>
            <select name="perusahaan_id" id="perusahaan_id" class="form-control">
                @foreach ($perusahaans as $perusahaan)
                    <option value="{{ $perusahaan->id }}" @if (old('perusahaan_id', @$budget->perusahaan_id) == $perusahaan->id) selected @endif>
                        {{ $perusahaan->name }}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="col-lg-12">
        <div class="mb-3">
            <label>Budget Untuk Departemen</label>
            {!! Form::select('divisi_id', $divisi, null, ['class' => 'form-control', 'placeholder' => 'pilih departemen','id'=>'divisi_id']) !!}
        </div>
    </div> --}}

    <div class="col-lg-12">
        {{-- <div class="mb-3">
			<label>Kode Budget</label>
			{!! Form::text('kode_budget',null,['class'=>'form-control','placeholder'=>'input kode']) !!}
		</div> --}}
        <div class="mb-3">
            <label for="format_kode_budget_id">Format Kode Budget</label>
            <select name="format_kode_budget_id" id="format_kode_budget_id" class="form-control">
                <option value="">-- Pilih Format Kode Budget --</option>
                @foreach ($formatKodes as $kode_budget)
                    <option value="{{ $kode_budget->id }}" @if (old('format_kode_budget_id', @$budget->format_kode_budget_id) == $kode_budget->id) selected @endif>
                        {{ $kode_budget->format_kode }} / {{ $kode_budget->divisi->name }} /
                        {{ @$kode_budget->perusahaans()->first()->name }}</option>
                @endforeach
            </select>
        </div>
        {{-- <div class="mb-3">
            <label id="kode_budget">Kode Budget</label>

        </div> --}}
    </div>
    <div class="col-md-12">
        <div class="mb-3">
            <label>Nama Anggaran</label>
            {!! Form::text('nama_anggaran', old('nama_anggaran'), [
                'class' => 'form-control',
                'placeholder' => 'input nama anggaran',
            ]) !!}
        </div>
    </div>
    <div class="col-md-12">
        <div class="mb-3">
            <label>Jumlah Aggaran 
                {{-- @isset($budget)
                    <span style="color:orange;">*jika budget ini sudah memiliki transaksi maka pengubahan nominal anggaran
                        sudah tidak dapat dilakukan</span>
                @endisset --}}
            </label>
            {!! Form::text('jumlah_anggaran', old('jumlah_anggaran'), [
                'class' => 'form-control input-mask text-start',
                'placeholder' => 'input jumlah',
                'data-inputmask' =>
                    "'alias': 'numeric', 'groupSeparator': ',', 'digits': 0, 'digitsOptional': false, 'prefix': '', 'placeholder': '0'",
            ]) !!}
        </div>
    </div>
    <div class="col-md-12">
        <div class="mb-3">
            <label>Anggaran Bulan</label>
            {!! Form::select('budget_bulan', $month, null, ['class' => 'form-control', 'placeholder' => 'pilih bulan']) !!}
        </div>
    </div>
    <div class="col-md-12">
        <div class="mb-3">
            <label>Anggaran Tahun</label>
            {!! Form::selectRange('budget_tahun', \Carbon\Carbon::now()->format('Y'), 2020, null, [
                'class' => 'form-control',
                'placeholder' => 'pilih tahun',
            ]) !!}
        </div>
    </div>
    <div class="col-md-12">
        <div class="mb-3">
            <label>Keterangan Realisasi <span style="color:orange;">*bagian ini dapat dikosongkan</span></label>
            {!! Form::text('keterangan_realisasi', null, ['class' => 'form-control']) !!}
        </div>
    </div>
    <div class="col-md-12">
        <div class="mb-3">
            <label>Tanggal Realisasi <span style="color:orange;">*bagian ini dapat dikosongkan</span></label>
            {!! Form::text('tanggal_realisasi', null, [
                'class' => 'form-control',
                'data-provide' => 'datepicker',
                'data-date-format' => 'yyyy-mm-dd',
                'data-date-autoclose' => 'true',
                'placeholder' => 'yyyy-mm-dd',
            ]) !!}
        </div>
    </div>
</div>
@push('js')
    <script src="{{ asset('assets/libs/inputmask/jquery.inputmask.min.js') }}"></script>
    <script src="{{ asset('assets/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}"></script>
    <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 type="text/javascript">
        $(document).ready(function() {
            $(".input-mask").inputmask();

            const divisiEl = $('#divisi_id');
            const perusahaanEl = $('#perusahaan_id');

            $("#format_kode_budget_id").select2({
                width: '100%',
            });


            //event listener change
            divisiEl.on('change', function() {
                getKode();
            });

            perusahaanEl.on('change', function() {
                getKode();
            });

            const kodeBugetEl = $('#kode_budget');

            function getKode(params) {
                if (perusahaanEl.val() == '' || divisiEl.val() == '') {
                    return;
                }
                //send ajax to route('manage-budget.get-kode') and make option select for kodeBudgetEl
                $.ajax({
                    url: "{{ route('manage-budget.get-kode') }}",
                    type: "POST",
                    //crsf token
                    data: {
                        _token: "{{ csrf_token() }}",
                        perusahaan_id: perusahaanEl.val(),
                        divisi_id: divisiEl.val(),
                    },
                    success: function(response) {
                        let option = '<option value="">-- Pilih Kode Budget --</option>';
                        if (response.length == 0) {
                            kodeBugetEl.html(option);
                            alert('kode budget tidak ditemukan');
                            return;
                        }
                        //make option
                        const currentKode = '{{ @$data->kode_budget }}';

                        response.forEach((item) => {
                            var perusahaan_ids = "";
                            item.perusahaans.forEach((perusahaan) => {
                                perusahaan_ids += perusahaan.id + ",";
                            });
                            if (item.format_kode == currentKode) {
                                option +=
                                    `<option selected value="${perusahaan_ids}">${item.format_kode}</option>`;
                            } else {
                                option +=
                                    `<option value="${perusahaan_ids}">${item.format_kode}</option>`;
                            }
                        });
                        kodeBugetEl.html(option);
                    },
                    error: function(xhr) {
                        console.log(xhr);
                    }
                });
            }

            //getKode();
        });
    </script>
@endpush