@extends('student.layouts.app')

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

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/scripts/choices.min.js"></script>
    <script>
        const element = document.querySelector('#jenis_pembayaran_siswa_id');
        const choices = new Choices(element, {
            placeholder: true,
            placeholderValue: "Pilih Rincian Tanggungan...",
            searchPlaceholderValue: "Pilih Rincian Tanggungan...",
        });

        //         choicesTest.passedElement.element.addEventListener('change', (event) => {
        //   console.log(event.currentTarget.selectedOptions[0].dataset.customProperties);
        // });

        const total = document.querySelector('#total');
        let totalBayar = 0;
        choices.passedElement.element.addEventListener('change', function(e) {
            totalBayar = 0;
            const totalTagihanElement = document.querySelector('#total-tagihan');
            let totalTagihan = 0;
            const list = document.querySelector('#list');
            list.innerHTML = '';
            const selected = choices.getValue(true);
            // console.log(event.currentTarget.selectedOptions);
            for (let i = 0; i < event.currentTarget.selectedOptions.length; i++) {
                const item = event.currentTarget.selectedOptions[i];
                const data = JSON.parse(item.dataset.customProperties);
                const nama = data.nama;
                const nominal = data.nominal;
                const terbayar = data.terbayar;
                totalTagihan += nominal - parseInt(terbayar);
                const div = document.createElement('div');
                div.classList.add('rounded-lg', 'border', 'bg-card', 'text-card-foreground', 'shadow-sm', 'p-6');
                div.innerHTML = `
                <div class="flex flex-col mb-6" data-id="22">
            <div class="w-full flex gap-2 justify-between">
                <h3 class="whitespace-nowrap text-2xl font-semibold leading-none tracking-tight" data-id="23">
                ${nama}
            </h3>
            <p>
                ${(nominal - parseInt(terbayar)).toLocaleString('id-ID')}</p>
                </div>
        </div>
        <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
      <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="nominal_pembayaran_${item.value}">
        Jumlah Bayar
      </label>
      <input required name="nominal_pembayaran[${item.value}]" max="${(nominal - parseInt(terbayar))}" class="appearance-none block w-full bg-gray-200 text-gray-700 border border-grey-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white nominal_pembayaran" id="nominal_pembayaran_${item.value}" type="number" placeholder="0">

    </div>`;
                list.appendChild(div);
            }

            totalTagihanElement.innerHTML = totalTagihan.toLocaleString('id-ID');
            
            const nominal_pembayarans = document.querySelectorAll('.nominal_pembayaran');
            for (let i = 0; i < nominal_pembayarans.length; i++) {
                nominal_pembayarans[i].addEventListener('change', function(e) {
                    totalBayar = 0;
                    for (let x = 0; x < nominal_pembayarans.length; x++) {
                        if(nominal_pembayarans[x].value){
                            totalBayar += parseInt(nominal_pembayarans[x].value);
                        }
                       
                    }
                    
                    total.innerHTML = totalBayar.toLocaleString('id-ID');
                });
            }


        });
    </script>
@endpush

@section('content')
    <form action="{{ route('student.bayar.bayar') }}" method="POST"
        class="flex flex-col items-center w-full md:w-1/2 m-auto p-6" enctype="multipart/form-data">
        @csrf
        <div class="w-full rounded-lg border bg-card text-card-foreground shadow-sm p-6 mb-2" data-id="21" data-v0-t="card">
            <div class="flex flex-col mb-6" data-id="22">
                <h3 class="whitespace-nowrap text-2xl font-semibold leading-none tracking-tight" data-id="23">
                    Pembayaran
                </h3>
            </div>
            <div class="" data-id="24">
                <select name="jenis_pembayaran_siswa_id[]" id="jenis_pembayaran_siswa_id" multiple
                    aria-placholder="Pilih Rincian Tanggungan">
                    <option value="">Pilih Rincian Tanggungan</option>
                    @foreach ($jenisPembayaranSiswas as $item)
                        <option
                            data-custom-properties="{{ json_encode(['nama' => $item->jenis_pembayaran->nama_jenis_pembayaran, 'nominal' => $item->nominal, 'terbayar' => $item->terbayar_today]) }}"
                            value="{{ $item->id }}">{{ $item->jenis_pembayaran->nama_jenis_pembayaran }} (Rp
                            {{ number_format($item->nominal) }} / Sisa : Rp
                            {{ number_format($item->nominal - $item->terbayar_today) }})</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="w-full flex flex-col gap-2 mb-2" id="list">

        </div>
        <div class="w-full rounded-lg border bg-card text-card-foreground shadow-sm p-6" data-id="21" data-v0-t="card">
            <div class="flex justify-between mb-6" data-id="22">
                <h3 class="whitespace-nowrap text-2xl font-semibold leading-none tracking-tight" data-id="23">
                    Total
                </h3>
                <p class="text-xl font-bold" id="total-tagihan">
                    0
                </p>
            </div>
            <div class="mb-6" data-id="24">
                <div class="text-4xl font-bold" data-id="25" id="total">{{ number_format(0) }}</div>

            </div>
            <hr>
            <div class="w-full  mb-6 md:mb-0">
                <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="bukti_pembayaran">
                    Bukti Transfer
                </label>
                <input required accept=".pdf,.png,.jpg" name="bukti_pembayaran" id="bukti_pembayaran"
                    class="appearance-none block w-full bg-gray-200 text-gray-700 border border-grey-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
                    type="file">
                @error('bukti_pembayaran')
                    <p class="help is-danger text-red-500">{{ $message }}</p>
                @enderror

            </div>
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full">
                Kirim
            </button>
        </div>
    </form>
@endsection