@extends('layouts.main', ['title' => 'Detail Tagihan Siswa'])

@push('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@endpush

@push('scripts')
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    {{-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script> --}}
    <script type="text/javascript" src="{{ url('js/daterangepicker.min.js') }}"></script>
    <script src="https://unpkg.com/currency.js@~2.0.0/dist/currency.min.js"></script>
    <script>
        var tahunAjarans = '{{ auth()->user()->filter_tahun_ajaran }}'.split('/');
        var totalTagihanSebelumnya = @json($totalTagihanSebelumnya);
        //calculate total-bayar
        const bayars = document.querySelectorAll('.bayar');
        const nominals = document.querySelectorAll('.nominal');
        const totalBayar = document.getElementById('total-bayar');

        bayars.forEach(item => {
            item.addEventListener('input', function(e) {
                let total = 0;
                bayars.forEach(item => {
                    total += parseInt(currency(item.value, {
                        symbol: '',
                        decimal: '.',
                        separator: ',',
                        precision: 0,
                    }).intValue);
                });

                totalBayar.innerText = currency(total, {
                    symbol: '',
                    decimal: '.',
                    separator: ',',
                    precision: 0,
                }).format();

                if (e.value != '0') {
                    item.value = currency(e.target.value, {
                        symbol: '',
                        decimal: '.',
                        separator: ',',
                        precision: 0,
                    }).format();
                }

            });
        });

        nominals.forEach(item => {
            item.addEventListener('input', function(e) {
                let total = 0;
                bayars.forEach((item, index) => {
                    total += parseInt(currency(item.value, {
                        symbol: '',
                        decimal: '.',
                        separator: ',',
                        precision: 0,
                    }).intValue);
                });
                totalBayar.innerText = currency(total, {
                    symbol: '',
                    decimal: '.',
                    separator: ',',
                    precision: 0,
                }).format();
                if (e.value != '0') {
                    item.value = currency(e.target.value, {
                        symbol: '',
                        decimal: '.',
                        separator: ',',
                        precision: 0,
                    }).format();
                }
            });
        });

        // $("input[name='periode[]']").daterangepicker({
        //     locale: {
        //         format: 'MM/YYYY'
        //     }
        // })

        //.select-periode
        const selectPeriode = document.querySelectorAll('.select-periode');
        selectPeriode.forEach(item => {
            item.addEventListener('change', function() {
                const td = item.parentElement;
                const tr = td.parentElement;
                const terbayar = JSON.parse(td.getAttribute('data-terbayar'));
                const tahun = tr.querySelector('.tahun').value;
                let periode = `${tahun}`;
                let bulan = {{ date('m') }};

                if (tr.querySelector('.bulan')) {
                    bulan = tr.querySelector('.bulan').value;
                    //add zero
                    if (bulan.length == 1) {
                        bulan = `0${bulan}`;
                    }
                    periode = `${bulan}_${tahun}`;
                }



                const nominalElement = tr.querySelector('td:nth-child(4)').querySelector('.nominal');
                const terbayarElement = tr.querySelector('td:nth-child(5)');
                const sisaElement = tr.querySelector('td:nth-child(6)');
                const bayarElement = tr.querySelector('.bayar');
                const sisaBayarElement = document.getElementById('sisa-bayar');
                // console.log(totalTagihanSebelumnya[tr.querySelector('td:nth-child(1)')
                // .querySelector('input[name="jenis_pembayaran_siswa_id[]"]').value], tahun, bulan);
                nominalElement.value = totalTagihanSebelumnya[tr.querySelector('td:nth-child(1)')
                    .querySelector('input[name="jenis_pembayaran_siswa_id[]"]').value][parseInt(tahun)][
                    parseInt(bulan)
                ] ?? 0;
                // console.log(terbayar["05_2024"]);
                // console.log(periode == "05_2024");
                // for (const key in terbayar) {

                //     console.log(typeof key, typeof `${periode}`);
                //     console.log(key, periode);
                //     console.log(key == periode);

                // }
                //const terbayarPeriode = terbayar[`${periode}`];

                var terbayarTahunAjaran = 0;
                for (let dd = 0; dd < terbayar.length; dd++) {
                    const tb = terbayar[dd];
                    if (tb.thn_ajrn_id == {{ auth()->user()->tahun_ajaran_id }} && tb.ttg == `${periode}`) {
                        terbayarTahunAjaran += parseInt(tb.sum ?? 0);
                    }

                }






                // console.log(terbayarPeriode);
                if (terbayarTahunAjaran) {
                    terbayarElement.innerText = terbayarTahunAjaran;
                    sisaElement.innerText = parseInt(nominalElement.value.replace(/\,/g, '')) -
                        terbayarTahunAjaran;
                    bayarElement.value = parseInt(nominalElement.value.replace(/\,/g, '')) -
                        terbayarTahunAjaran;
                } else {
                    terbayarElement.innerText = 0;
                    sisaElement.innerText = parseInt(nominalElement.value.replace(/\,/g, ''));
                    bayarElement.value = parseInt(nominalElement.value.replace(/\,/g, ''));
                }
                let totalSisa = 0;
                document.querySelectorAll('.sisa').forEach(item => {
                    totalSisa += parseInt(item.innerText.replace(/\,/g, ''));
                });
                sisaBayarElement.innerText = totalSisa;
            });
        });

        //metode pembayaran and input-bukti-pembayaran
        const metodePembayaran = document.querySelector('select[name="metode_pembayaran"]');
        const inputBuktiPembayaran = document.getElementById('input-bukti-pembayaran');
        metodePembayaran.addEventListener('change', function() {
            if (metodePembayaran.value == 'transfer') {
                inputBuktiPembayaran.classList.remove('hidden');
            } else {
                inputBuktiPembayaran.classList.add('hidden');
            }
        });

        function warningModal(e) {
            var dataWarning = e.getAttribute('data-warning');
            if (dataWarning == 'false') {
                var modalTarget = e.getAttribute('data-target');
                document.getElementById(modalTarget).classList.add('active');

                document.getElementById('confirm-warning').addEventListener('click', function() {
                    //focus to input
                    e.focus();
                    e.setAttribute('data-warning', 'true');
                });
            }


        }
    </script>
@endpush

@section('content')
    <div id="modal-warning" class="modal" data-form="">
        <div class="modal-background --modal-warning-close"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <p class="modal-card-title">Ingin mengubah nilai tagihan?</p>
            </header>
            <section class="modal-card-body">
                <p>Anda akan mengubah nilai tagihan ini, apakah anda yakin?</p>
            </section>
            <footer class="modal-card-foot">
                <button class="button --modal-close">Cancel</button>
                <button class="button red --modal-close" id="confirm-warning">Confirm</button>
            </footer>
        </div>
    </div>

    <section class="section main-section">
        <div class="card mb-6">
            <header class="card-header">
                <p class="card-header-title">
                    <span class="icon"><i class="mdi mdi-ballot"></i></span>
                    Detail Tagihan Siswa
                </p>
            </header>
            <div class="card-content">
                <ul>
                    <li>
                        NIS : {{ $data->nis }}
                    </li>
                    <li>
                        Nama : {{ $data->nama_siswa }}
                    </li>
                    <li>
                        Kelas : {{ $data->kelas->nama_kelas }}
                    </li>
                    <li>
                        Kelas Pararel : {{ $data->kelas_pararel->nama_kelas_pararel }}
                    </li>
                    <li>
                        Mulai Pembayaran : {{ $data->mulai_pembayaran }}
                    </li>
                    <li>
                        Whatsapp : <a class="text-green-500" href="https://wa.me/{{ $data->no_hp }}"
                            target="_blank">{{ $data->no_hp }}</a>
                    </li>
                </ul>
                <hr>
                <form action="{{ route('tagihan.bayar', $data->id) }}" class="my-2" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    <table class="w-full">
                        <thead>
                            <tr>
                                <th>
                                    No
                                </th>
                                <th>
                                    Tagihan
                                </th>
                                <th>
                                    Periode
                                </th>
                                <th>
                                    Nominal
                                </th>
                                <th>
                                    Terbayar
                                </th>
                                <th>
                                    Sisa
                                </th>
                                <th>
                                    Bayar
                                </th>
                                <th>
                                    Keterangan
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $totalNominal = 0;
                            @endphp
                            @foreach ($jenisPembayarans as $index => $jenisPembayaran)
                                @php
                                    $item = $data->jenis_pembayaran_siswas
                                        ->where('jenis_pembayaran_id', $jenisPembayaran->id)
                                        ->first();
                                    $nominal =
                                        @$totalTagihanSebelumnya[$item->id][date('Y')][(int) date('m')] ??
                                        @$item->nominal;
                                    $totalNominal += $nominal;
                                @endphp
                                <tr>
                                    <td>
                                        {{ $index + 1 }}
                                        <input type="hidden" name="jenis_pembayaran_siswa_id[]"
                                            value="{{ @$item->id }}">
                                    </td>
                                    <td>
                                        <input type="hidden" name="tanggal_tagihan[]"
                                            value="{{ @$item->tanggal_tagihan }}">
                                        {{ $jenisPembayaran->nama_jenis_pembayaran }}
                                    </td>
                                    <td data-terbayar="{{ json_encode(@$item->terbayars) }}">
                                        @if ($jenisPembayaran->sifat_pembayaran == 'bulanan')
                                            <select name="bulan[{{ $index }}]" class="select-periode bulan">
                                                @for ($i = 1; $i <= 12; $i++)
                                                    <option value="{{ $i }}" @selected(old('bulan.' . $index, date('m')) == $i)>
                                                        {{ $i }} - {{ Helper::bulanIndo($i) }}</option>
                                                @endfor
                                            </select>
                                        @endif
                                        <select name="tahun[{{ $index }}]" class="select-periode tahun">
                                            @for ($i = date('Y') + 1; $i >= date('Y') - 4; $i--)
                                                <option value="{{ $i }}" @selected(old('tahun.' . $index, date('Y')) == $i)>
                                                    {{ $i }} @if (str_contains(auth()->user()->filter_tahun_ajaran, $i))
                                                        (Tahun Ajaran)
                                                    @endif
                                                </option>
                                            @endfor
                                        </select>


                                    </td>
                                    <td class="total-tagihan">
                                        <div class="field-body">
                                            <div class="control">
                                                <input class="input nominal" value="{{ @$nominal }}"
                                                    data-warning="false" onclick="warningModal(this)"
                                                    data-form="warning-data-{{ $jenisPembayaran->id }}"
                                                    data-target="modal-warning" name="nominal[]" type="text"
                                                    placeholder="Nominal"
                                                    value="{{ old('nominal.' . $loop->iteration, 0) }}">


                                            </div>

                                        </div>
                                        {{-- {{ number_format(@$nominal) }} --}}
                                    </td>
                                    <td class="terbayar">
                                        {{ number_format(@$item->terbayar_today) }}
                                    </td>
                                    <td class="sisa">
                                        {{ number_format(@$nominal - @$item->terbayar_today) }}
                                    </td>
                                    <td>
                                        <div class="field-body">
                                            <div class="control">
                                                <input class="input bayar" name="nominal_pembayaran[]" type="text"
                                                    placeholder="Nominal"
                                                    value="{{ old('nominal_pembayaran.' . $loop->iteration, 0) }}">


                                            </div>

                                        </div>

                                    </td>
                                    <td>
                                        <input class="input" name="keterangan[]" type="text" placeholder="Keterangan"
                                            value="{{ old('keterangan.' . $loop->iteration) }}">
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="3">
                                    <strong>Total</strong>
                                </td>
                                <td>
                                    <strong>{{ number_format($totalNominal) }}</strong>
                                </td>
                                <td>
                                    <strong>{{ number_format($data->jenis_pembayaran_siswas->sum('terbayar_today')) }}</strong>
                                </td>
                                <td id="sisa-bayar" class="font-bold">
                                    {{ number_format($totalNominal - $data->jenis_pembayaran_siswas->sum('terbayar_today')) }}
                                </td>
                                <td id="total-bayar" class="font-bold"></td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                    <div class="my-2 grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="field">
                            <label class="label">Metode Pembayaran</label>
                            <div class="field-body">
                                <div class="control">
                                    <div class="select">
                                        <select name="metode_pembayaran" required>
                                            <option value="">Pilih Metode</option>
                                            @foreach (['tunai', 'transfer', 'tabungan'] as $metode)
                                                <option value="{{ $metode }}" @selected(old('metode_pembayaran') == $metode)>
                                                    {{ strtoupper($metode) }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                @error('metode_pembayaran')
                                    <p class="help is-danger text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div class="field hidden" id="input-bukti-pembayaran">
                            <label class="label">Bukti Pembayaran</label>
                            <div class="field-body">
                                <div class="control">
                                    <input class="input" name="bukti_pembayaran" type="file"
                                        placeholder="Tanggal Pembayaran" accept="image/*,application/pdf">

                                </div>
                                @error('bukti_pembayaran')
                                    <p class="help is-danger text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div class="field">
                            <label class="label">Tanggal Pembayaran</label>
                            <div class="field-body">
                                <div class="control">
                                    <input class="input" name="tanggal_pembayaran" type="date"
                                        placeholder="Tanggal Pembayaran"
                                        value="{{ old('tanggal_pembayaran', date('Y-m-d')) }}">

                                </div>
                                @error('tanggal_pembayaran')
                                    <p class="help is-danger text-red-500">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                        <div>
                            <div class="control mt-7">
                                <button type="submit" class="button green">
                                    Submit
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
                <hr>
                <table class="my-2">
                    <thead>
                        <tr>
                            <th>
                                No
                            </th>
                            <th>
                                Tanggal Pembayaran
                            </th>
                            <th>
                                Tagihan
                            </th>
                            <th>
                                Nominal
                            </th>
                            <th>
                                Keterangan
                            </th>
                            <th>
                                Status
                            </th>
                            <th>
                                Cetak
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($details as $detail)
                            <tr>
                                <td>
                                    {{ $loop->iteration }}
                                </td>
                                <td>
                                    {{ $detail->pembayaran->tanggal_pembayaran }}
                                </td>
                                <td>
                                    {{ $detail->tagihan->jenis_pembayaran_siswa->jenis_pembayaran->nama_jenis_pembayaran }}
                                    / {{ $detail->periode }} ({{ $detail->tagihan->total_tagihan }})
                                </td>
                                <td>
                                    {{ number_format($detail->nominal_pembayaran) }}
                                </td>
                                <td>
                                    {{ $detail->keterangan }}
                                </td>
                                <td>
                                    @switch($detail->pembayaran->status_pembayaran)
                                        @case('pending')
                                            <span
                                                class="bg-yellow-500 py-1 px-2 text-white rounded-lg ">{{ strtoupper($detail->pembayaran->status_pembayaran) }}</span>
                                        @break

                                        @case('reject')
                                            <span
                                                class="bg-red-500 py-1 px-2 rounded-lg text-white">{{ strtoupper($detail->pembayaran->status_pembayaran) }}</span>
                                        @break

                                        @default
                                            <span
                                                class="bg-green-500 py-1 px-2  text-white rounded-lg ">{{ strtoupper($detail->pembayaran->status_pembayaran) }}</span>
                                    @endswitch
                                </td>
                                <td>
                                    <a target="_blank"
                                        href="{{ route('cetak-preview.index', base64_encode(route('detail-pembayaran.pdf', $detail->id))) }}"
                                        class="button small bg-blue-500" type="button">
                                        <span class="icon"><i class="mdi mdi-printer text-white"></i></span>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="4">
                                <strong>Total</strong>
                            </td>
                            <td>
                                <strong>{{ number_format($details->sum('nominal_pembayaran')) }}</strong>
                            </td>
                            <td colspan="2"></td>
                        </tr>
                    </tfoot>
                </table>
                <a href="{{ route('tagihan.cetak', $data->id) }}" class="text-white mt-4 button bg-blue-500"
                    type="button">
                    <span class="icon"><i class="mdi mdi-printer text-white"></i></span> Cetak Semua
                </a>
            </div>
        </div>


    </section>
@endsection