@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/styles/choices.min.css" />
    <style>
        .choices__inner {

            background-color: unset;

            border-radius: .25rem;
            border-width: 1px;
            --tw-border-opacity: 1;
            border-color: rgb(156 163 175 / var(--tw-border-opacity));

        }
    </style>
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/scripts/choices.min.js"></script>
    <script src="https://unpkg.com/currency.js@~2.0.0/dist/currency.min.js"></script>
    <script>
        const siswa_id = document.getElementById('siswa_id');
        const element = document.querySelector('#siswa_id');
        const choices = new Choices(element, {
            placeholder: true,
            placeholderValue: "Pilih Siswa...",
            searchPlaceholderValue: "Pilih Siswa...",
        });

        let total_tabungan = 0;

        choices.passedElement.element.addEventListener('change', function(e) {
            const selected = choices.getValue(true);
            const item = event.currentTarget.selectedOptions[0];
            const data = item.dataset.customProperties;
            total_tabungan = data;
            setMax();
        });



        function setMax() {
            const proses_tabungan = document.querySelector('input[name="proses_tabungan"]:checked').value;
            const jumlah_tabungan = document.getElementById('jumlah_tabungan');
            if (proses_tabungan == 'ambil') {
                jumlah_tabungan.max = total_tabungan;
            } else {
                jumlah_tabungan.max = '';
            }
        }

        const proses_tabungans = document.querySelectorAll('input[name="proses_tabungan"]');
        proses_tabungans.forEach((item) => {
            item.addEventListener('change', function() {
                setMax();
            });
        });

        //jumlah_tabungan
        const jumlah_tabungan = document.getElementById('jumlah_tabungan');
        jumlah_tabungan.addEventListener('input', function() {



            //if have attribute max
            if (jumlah_tabungan.max) {
                if (parseInt(jumlah_tabungan.value) > parseInt(jumlah_tabungan.max)) {
                    jumlah_tabungan.value = jumlah_tabungan.max;
                } else {
                    const value = currency(jumlah_tabungan.value, {
                        symbol: '',
                        decimal: '.',
                        separator: ',',
                        precision: 0,
                    }).format();
                    jumlah_tabungan.value = value;
                }
            }
        });
    </script>
@endpush
<div class="w-full flex gap-4">
    <div class="w-full md:w-1/2">
        <div class="field">
            <label class="label">Tanggal</label>
            <div class="field-body">
                <div class="control">
                    <input class="input" name="tanggal_tabungan" type="date" placeholder="Tanggal.."
                        id="tanggal_tabungan"
                        value="{{ old('tanggal_tabungan', @$data->tanggal_tabungan ?? date('Y-m-d')) }}">

                </div>
                @error('tanggal_tabungan')
                    <p class="help is-danger text-red-500">{{ $message }}</p>
                @enderror
            </div>
        </div>
        @if (!isset($data))
            <div class="field">
                <label class="label">Siswa</label>
                <div class="field-body">
                    <div class="control">
                        <div class="select">
                            <select name="siswa_id" id="siswa_id">
                                <option value="">Pilih Siswa</option>
                                @foreach ($siswas as $siswa)
                                    <option data-custom-properties="{{ $siswa->total_tabungan }}"
                                        value="{{ $siswa->id }}" @selected(old('siswa_id', @$data->siswa_id ?? request()->siswa_id) == $siswa->id)>
                                        {{ $siswa->nis }} / {{ $siswa->nama_siswa }} / {{ $siswa->kelas->nama_kelas }}
                                        {{ $siswa->kelas->jenjang->nama_jenjang }} / (Rp {{ $siswa->total_tabungan }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    @error('siswa_id')
                        <p class="help is-danger text-red-500">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="field">
                <label class="label">Proses</label>
                <div class="field-body">
                    <div class="field grouped multiline">
                        <div class="control">
                            <label class="radio">
                                <input type="radio" name="proses_tabungan" @checked(old('proses_tabungan', @$data->proses_tabungan) == 'simpan') value="simpan"
                                    checked>
                                <span class="check"></span>
                                <span class="control-label">Simpan</span>
                            </label>
                        </div>
                        <div class="control">
                            <label class="radio">
                                <input type="radio" name="proses_tabungan" @checked(old('proses_tabungan', @$data->proses_tabungan) == 'ambil')
                                    value="ambil">
                                <span class="check"></span>
                                <span class="control-label">Ambil</span>
                            </label>
                        </div>

                    </div>
                </div>
                @error('proses_tabungan')
                    <p class="help is-danger text-red-500">{{ $message }}</p>
                @enderror
            </div>
        @else
            <input type="hidden" name="siswa_id" value="{{ $data->latestSiswa[0]->id }}">
            <div class="field">
                <label class="label">Siswa</label>
                <div class="field-body">
                    <div class="control">
                        <input class="input" disabled readonly
                            value="{{ $data->nis }} / {{ $data->nama_siswa }} / {{ $data->latestSiswa[0]->kelas->nama_kelas }} {{ $data->latestSiswa[0]->kelas->jenjang->nama_jenjang }} / (Rp {{ number_format($data->latestSiswa[0]->total_tabungan) }})">

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

            <div class="field">
                <label class="label">Proses</label>
                <div class="field-body">
                    <b class="py-1 px-2 bg-blue-500 rounded-lg text-white">{{ $data->proses_tabungan }}</b>
                </div>
                @error('proses_tabungan')
                    <p class="help is-danger text-red-500">{{ $message }}</p>
                @enderror
            </div>
        @endif


        <div class="field">
            <label class="label">Jumlah</label>
            <div class="field-body">
                <div class="control">
                    <input class="input" name="jumlah_tabungan" type="text" placeholder="Jumlah.."
                        id="jumlah_tabungan" value="{{ old('jumlah_tabungan', @$data->jumlah_tabungan) }}">

                </div>
                @error('jumlah_tabungan')
                    <p class="help is-danger text-red-500">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div class="field">
            <label class="label">Keterangan</label>
            <div class="field-body">
                <div class="control">
                    <input class="input" name="keterangan_tabungan" type="text" placeholder="Keterangan..."
                        value="{{ old('keterangan_tabungan', @$data->keterangan_tabungan) }}">

                </div>
                @error('keterangan_tabungan')
                    <p class="help is-danger text-red-500">{{ $message }}</p>
                @enderror
            </div>
        </div>

    </div>



</div>