@push('css')
    <link href="{{ asset('assets/libs/select2/css/select2.min.css') }}" rel="stylesheet" type="text/css">
@endpush
<div class="row">
    <div class="col-lg-12">
        @if (!isset($pembayaran))
            {{-- <div class="mb-3">
                <label>Surat Permintaan</label>
                <select name="surat_permintaan_id" id="surat_permintaan_id" required>
                    @foreach ($surat_permintaans as $surat_permintaan)
                        <option data-total="{{ $surat_permintaan->total }}" data-sisa="{{ $surat_permintaan->total_sisa }}" @if (old('surat_permintaan_id', @$pembayaran->surat_permintaan_id ?? request()->surat_permintaan_id) == $surat_permintaan->id) selected @endif value="{{ $surat_permintaan->id }}">{{ $surat_permintaan->nomor_surat_format }} - {{ $surat_permintaan->divisi->name }} - {{ $surat_permintaan->perusahaan->name }} - (Total : Rp.{{ number_format($surat_permintaan->total) }}/Sisa : Rp.{{ number_format($surat_permintaan->total_sisa) }})</option>
                    @endforeach
                </select>
            </div> --}}
            <div class="mb-3">
                <label>Surat Permintaan</label>
                <select name="surat_permintaan_id" id="surat_permintaan_id" required>

                </select>
            </div>
        @else
            <input type="hidden" id="surat_permintaan_id" name="surat_permintaan_id"
                value="{{ $pembayaran->surat_permintaan_id }}">
            <input type="text" readonly disabled class="form-control"
                value="{{ $pembayaran->suratPermintaan->nomor_surat_format }} - {{ $pembayaran->suratPermintaan->divisi->name }} - {{ $pembayaran->suratPermintaan->perusahaan->name }} - (Total : Rp.{{ number_format($pembayaran->suratPermintaan->total) }}/Sisa : Rp.{{ number_format($pembayaran->suratPermintaan->total_sisa) }})">
        @endif
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="mb-3">
            <label>Tanggal Pembayaran</label>
            {!! Form::date('tanggal_pembayaran', @$pembayaran->tanggal_pembayaran ?? date('Y-m-d'), [
                'class' => 'form-control',
                'placeholder' => 'Tanggal Pembayaran...',
                'required' => 'required',
            ]) !!}
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="mb-3">
            <label>Total Pembayaran (Sisa : <span id="sisa">
                    @if (isset($pembayaran))
                        Rp. {{ number_format($pembayaran->suratPermintaan->total_sisa) }}
                    @endif
                </span>)</label>
            {!! Form::text('total_pembayaran', @$pembayaran->total_pembayaran ?? 0, [
                'class' => 'form-control
                                                                form-nominal input-mask text-start',
                'data-inputmask' => "'alias': 'numeric', 'groupSeparator':
                                                                ',', 'digits': 0, 'digitsOptional': false, 'prefix': '', 'placeholder':
                                                                '0'",
                'required' => 'required',
                'id' => 'total_pembayaran',
            ]) !!}
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="mb-3">
            <label>Bukti Pembayaran (PDF/GAMBAR)</label>
            {!! Form::file('bukti_pembayaran', [
                'class' => 'form-control',
                'placeholder' => 'Bukti Pembayaran...',
                'accept' => 'image/*,.pdf',
            ]) !!}
            @if (@$pembayaran->bukti_pembayaran)
                <a rel="stylesheet" href="{{ asset('storage-file/' . $pembayaran->bukti_pembayaran) }}" target="_blank"
                    class="btn btn-success btn-sm my-1"><i class="fa fa-image"> Bukti Pembayaran</i></a>
            @endif
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="mb-3">
            <label>Keterangan Pembayaran</label>
            {!! Form::text('keterangan_pembayaran', @$pembayaran->keterangan_pembayaran ?? null, [
                'class' => 'form-control',
                'placeholder' => 'Keterangan Pembayaran...',
            ]) !!}
        </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>

    @if (!isset($pembayaran))
        <script>
            $(document).ready(function() {
                $('#surat_permintaan_id').select2({
                    width: '100%',
                    placeholder: 'pilih permintaan',
                    ajax: {
                        delay: 250,
                        url: '{{ route('pembayaran.ajax.select-surat') }}',
                        dataType: 'json',
                        data: function(params) {
                            return {
                                q: params.term,
                                page: params.page || 1
                            }
                        },
                        processResults: function(data, params) {
                            params.page = params.page || 1;
                            return {
                                results: data.results,
                                pagination: {
                                    more: data.pagination.more
                                },
                                total: data.total,
                                total_sisa: data.total_sisa
                            };
                        }
                    },
                    templateSelection: function(data, container) {
                        // Add custom attributes to the <option> tag for the selected option
                        $(data.element).attr('data-sisa', data.total_sisa);
                        $(data.element).attr('data-total', data.total);
                        return data.text;
                    }
                });



                //set maximum value total_pembayaran from data-total surat_permintaan
                $('#surat_permintaan_id').on('change', function() {
                    var total = $(this).find(':selected').data('sisa');
                    if (total) {
                        $('#total_pembayaran').attr('max', total);
                        $("#total_pembayaran").attr('data-inputmask',
                            "'alias': 'numeric', 'groupSeparator':',', 'digits': 0, 'digitsOptional': false, 'prefix': '', 'placeholder':'0', 'max':" +
                            total + "")
                        $(".input-mask").inputmask()
                        $("#sisa").html('Rp.' + total.toLocaleString('id-ID'))
                    }
                });
                var total = $("#surat_permintaan_id").find(':selected').data('sisa');
                if (total) {
                    $('#total_pembayaran').attr('max', total);
                    $("#total_pembayaran").attr('data-inputmask',
                        "'alias': 'numeric', 'groupSeparator':',', 'digits': 0, 'digitsOptional': false, 'prefix': '', 'placeholder':'0', 'max':" +
                        total + "")
                    $(".input-mask").inputmask()
                    $("#sisa").html('Rp.' + total.toLocaleString('id-ID'))
                }
            });
        </script>
    @else
    @endif

    <script type="text/javascript">
        //disable button inside myForm after submit
        $('#myForm').submit(function() {
            $(this).find(':submit').prop('disabled', true);
            $(this).find(':submit').html('Loading...');
        });
    </script>
@endpush