@extends('layout.main')

@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card card-info p-3 mb-4">
                    <h5>Informasi Pasien</h5>
                    <div class="row">
                        <div class="col-md-4"><b>Tgl Registrasi:</b> {{ $dataRegistrasi->tgl_registrasi }}</div>
                        <div class="col-md-4"><b>Kode Registrasi:</b> {{ $dataRegistrasi->code }}</div>
                        <div class="col-md-4"><b>Nama:</b> {{ $dataRegistrasi->pasien->nama }}</div>
                    </div>
                    <div class="row">
                        <div class="col-md-4"><b>Tgl Lahir:</b> {{ $dataRegistrasi->pasien->tgl_lahir }}</div>
                        <div class="col-md-4"><b>Jenis Kelamin:</b>
                            {{ $dataRegistrasi->pasien->jenis_kelamin === "male" ? "Laki-laki" : "Perempuan" }}
                        </div>
                        <div class="col-md-4"><b>Asuransi:</b> {{ $dataRegistrasi->asuransi->nama ?? '-' }}</div>
                    </div>
                </div>

                <form action="{{ route('transaksi.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="card card-primary p-3 mb-4">
                        <h5>Pilih Tindakan Pasien</h5>
                        <div class="row mb-3">
                            <div class="col-md-8">
                                <input name="id_registrasi" type="hidden" value="{{ $dataRegistrasi->id }}">

                                <select name="tindakan[]" id="pilihTindakan" class="form-control select2bs4" style="width: 100%;">
                                    <option value="">-- Pilih Tindakan --</option>
                                    @foreach ($tindakan as $td)
                                        <option value="{{ $td->id }}" data-tarif="{{ $td->tarif }}">{{ $td->nama }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4">
                                <button type="button" id="tambahTindakan" class="btn btn-success w-100">Tambah Tindakan</button>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-bordered" id="tabelTindakan">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Nama Tindakan</th>
                                        <th>Tarif</th>
                                        <th>Jumlah</th>
                                        <th>Subtotal</th>
                                        <th>Potongan Asuransi</th>
                                        <th>Jumlah Potongan</th>
                                        <th>Total Akhir</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Data rows will be added dynamically -->
                                </tbody>
                            </table>
                        </div>

                        <div class="row mt-3">
                            <div class="col-md-6 offset-md-6">
                                <table class="table">
                                    <tr>
                                        <th>Subtotal:</th>
                                        <td id="subtotal">Rp 0</td>
                                    </tr>
                                    <tr>
                                        <th>Total Potongan:</th>
                                        <td id="total_potongan">Rp 0</td>
                                    </tr>
                                    <tr>
                                        <th>Jumlah yang Harus Dibayar:</th>
                                        <td id="total">Rp 0</td>
                                    </tr>
                                </table>
                            </div>
                        </div>

                        <div class="text-right">
                            <button type="submit" class="btn btn-primary">Simpan</button>
                        </div>
                    </div>
                </form>

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

@push('script')
<script>
    $(function () {
        $('.select2bs4').select2({ theme: 'bootstrap4' });

        let tindakanList = [];
        let no = 1;

        const asuransiCover = @json($asuransiTindakan);

        $('#tambahTindakan').on('click', function () {
            const selected = $('#pilihTindakan option:selected');
            const idTindakan = selected.val();
            const nama = selected.text();
            const tarif = selected.data('tarif');

            if (!idTindakan) return;

            const selectedAsuransi = asuransiCover.find(item => parseInt(item.id_tindakan) === parseInt(idTindakan));
            const coverPercentage = selectedAsuransi ? selectedAsuransi.cover_percentage : 0;

            tindakanList.push({
                idTindakan,
                nama,
                tarif,
                coverPercentage,
                jumlah: 1
            });

            renderTabel();
        });

        function renderTabel() {
            const tbody = $('#tabelTindakan tbody');
            tbody.empty();

            let subtotal = 0;

            tindakanList.forEach((item, index) => {
                const sub = item.tarif * item.jumlah;
                const asuransiDiscount = (sub * item.coverPercentage) / 100;
                const lastTotal = sub - asuransiDiscount;
                subtotal += sub;

                tbody.append(`
                    <tr>
                        <td>${index + 1}</td>
                        <td>${item.nama}</td>
                        <td>${formatRupiah(item.tarif)}</td>
                        <td><input type="number" name="jumlah_tindakan[]" class="form-control jumlahTindakan" value="${item.jumlah}" data-index="${index}" style="width: 60px;" min="1"></td>
                        <td>${formatRupiah(sub)}</td>
                        <td>${item.coverPercentage}%</td>
                        <td>${formatRupiah(asuransiDiscount)}</td>
                        <td>${formatRupiah(lastTotal)}</td>
                        <td><button class="btn btn-danger btn-sm" onclick="hapusTindakan(${index})">Hapus</button></td>
                    </tr>
                    <input type="hidden" name="id_tindakan[]" value="${item.idTindakan}">
                    <input type="hidden" name="tarif[]" value="${item.tarif}">
                    <input type="hidden" name="cover_percentage[]" value="${item.coverPercentage}">
                    <input type="hidden" name="subtotal[]" value="${sub}">
                    <input type="hidden" name="asuransi_discount[]" value="${asuransiDiscount}">
                    <input type="hidden" name="total_akhir[]" value="${lastTotal}">
                `);
            });

            const totalAsuransiDiscount = tindakanList.reduce((total, item) => {
                const sub = item.tarif * item.jumlah;
                return total + (sub * item.coverPercentage) / 100;
            }, 0);

            const total = subtotal - totalAsuransiDiscount;

            $('#subtotal').text(`Rp ${formatRupiah(subtotal)}`);
            $('#total_potongan').text(`Rp ${formatRupiah(totalAsuransiDiscount)}`);
            $('#total').text(`Rp ${formatRupiah(total)}`);
        }

        $(document).on('input', '.jumlahTindakan', function () {
            const index = $(this).data('index');
            const jumlah = $(this).val();
            if (jumlah < 1) return;

            tindakanList[index].jumlah = parseInt(jumlah);
            renderTabel();
        });

        window.hapusTindakan = function (index) {
            tindakanList.splice(index, 1);
            renderTabel();
        }

        function formatRupiah(angka) {
            return angka.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
        }
    });

</script>
@endpush
@endsection