@extends('layouts.app')

@section('styles')
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<style>
    .c-app {
        background-color: #2d8c7d;
    }

    .btn-select {
        padding-left: 15px;
        padding-bottom: 15px;
    }

    .form-control {
        border-color: black !important;
        background-color: #fff9d2;
        color: black;
        font-weight: bold;
    }

    .nav-tabs .nav-item .nav-item.show .nav-link,
    .nav-tabs .nav-link.active {
        background-color: #ffff;
    }
</style>
@endsection

@section('content')
<div class="text-center text-white pt-4 pb-2">
    <h3><strong>{{ $product->title }}</strong></h3>
</div>
<div class="row">
    <div class="col-md-8">
        @if($product->featured_image)
        <img src="{{ $product->featured_image->url }}" width="100%" />
        @endif
        <div class="progress" style="height: 8px; background-color: orange">
            <div class="progress-bar bg-success" role="progressbar" style="width: {{ 100*$product->current_amount/$product->target_amount}}%" aria-valuenow="{{ 100*$product->current_amount/$product->target_amount}}" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <div class="pt-4">

            <div class="card">
                <div class="card-body">
                    <nav>
                        <div class="nav nav-tabs" id="nav-tab" role="tablist">
                            <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Deskripsi</a>
                            <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Donatur</a>
                        </div>
                    </nav>
                    <div class="tab-content" id="nav-tabContent">
                        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                            <p>{!! $product->description !!}</p>
                        </div>
                        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                            <table class="table table-sm table-striped table-dark mt-4">
                                <thead>
                                    <tr>
                                        <th scope="col">Donatur</th>
                                        <!-- <th scope="col">Channel</th> -->
                                        <th scope="col">Nominal</th>
                                        <th scope="col">Waktu Infak</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($donations as $donation)
                                    <tr style="font-size: 0.85em;">
                                        <th scope="row">
                                            @if($donation->is_anonym)
                                            Hamba Allah
                                            @else
                                            {{ $donation->donator->name }}
                                            @endif
                                        </th>
                                        <!-- <th scope="row">{{ $donation->donator->name }}</th> -->
                                        <th scope="row">Rp. {{ number_format($donation->amount,2,',','.') }}</th>
                                        <th scope="row">{{ $donation->created_at->diffForHumans() }}</th>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <div class="text-center">
                                <a href="/fundraising/{{ $product->shortcode }}/donasi">Lihat semua donasi</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
    <div class="col-md-4">

        <div class="card">
            <div class="card-body">
                <div class="flex items-center">
                    <div class="ml-2 leading-7">Infak Sekarang</div>
                </div>
                <!-- 25,50,100,250,1 jt,2,5 jt,5 jt -->
                <div class="ml-2">
                    <div class="mt-2 text-gray-800 dark:text-gray-600 text-sm">
                        <form>
                            <div class="form-group">
                                <input type="hidden" value="{{ $product->id }}" id="product_id">
                                <div class="row mb-3">
                                    <div class="btn-select">
                                        <button id="amount-1" type="button" class="btn btn-outline-success">Rp 25.000</button>
                                    </div>
                                    <div class="btn-select">
                                        <button id="amount-2" type="button" class="btn btn-outline-success">Rp 50.000</button>
                                    </div>
                                    <div class="btn-select">
                                        <button id="amount-3" type="button" class="btn btn-outline-success">Rp 100.000</button>
                                    </div>
                                    <div class="btn-select">
                                        <button id="amount-4" type="button" class="btn btn-outline-success">Rp 250.000</button>
                                    </div>
                                    <div class="btn-select">
                                        <button id="amount-5" type="button" class="btn btn-outline-success">Rp 500.000</button>
                                    </div>
                                </div>
                                <input type="number" class="form-control" id="amount" aria-describedby="emailHelp" placeholder="Nominal infak" required min="5000">
                                <small id="amountlHelp" class="form-text text-muted">Nominal dalam Rupiah (tuliskan angkanya
                                    saja)</small>
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" id="name" placeholder="Nama">
                            </div>
                            <div class="form-group">
                                <input type="tel" class="form-control" id="telp" placeholder="Nomor HP/WA" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required>
                                <small id="telpHelp" class="form-text text-muted">Nomor HP digunakan untuk memberikan
                                    notifikasi jika infak sudah diterima</small>
                            </div>
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="checkbox" value="" id="isanonim">
                                <label class="form-check-label" for="defaultCheck1">
                                    Infak Sebagai Anonim
                                </label>
                            </div>
                            <button type="button" onclick="getPaymentList()" class="btn btn-primary">Infak Sekarang</button>
                        </form>
                    </div>
                </div>
            </div>

        </div>

        <div class="card">
            <div class="card-body">
                <div class="text-lg leading-7 font-semibold mt-2">Infak Terkumpul</div>
                <div class="alert alert-primary" role="alert">
                    <div style="font-size: 2em;">{{ $donation_paid }}</div>
                    Infak terkonfirmasi: {{ $donation_confirm }}
                </div>
                <canvas id="bar-chart-horizontal" width="800" height="450"></canvas>
            </div>
        </div>

    </div>
</div>

<!-- Modal Method-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Metode Pembayaran</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div id="modal-body" class="modal-body">
                <div class=" row d-flex justify-content-center">
                    <div class="spinner-border" role="status">
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <!-- <button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button> -->
                <button type="button" onclick="createDonation()" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#payModal">Bayar</button>
            </div>
        </div>
    </div>
</div>
<!-- Pay Method-->
<div class="modal fade" id="payModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Data Pembayaran</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div id="pay-body" class="modal-body">
                <div class=" row d-flex justify-content-center">
                    <div class="spinner-border" role="status">
                    </div>
                </div>
            </div>
            <div class="modal-footer" id="modal-footer">
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<!-- <script src="/vendor/chartjs/chart.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js" integrity="sha512-Wt1bJGtlnMtGP0dqNFH1xlkLBNpEodaiQ8ZN5JLA5wpc1sUlk/O5uuOMNgvzddzkpvZ9GLyYNa8w2s7rqiTk5Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/3.0.3/main/clipboard-polyfill.js" integrity="sha512-0IaxYIj68pTzpOBGd7U3RFiF6sUPKefI5SRsYaZkGiJsM+U1/VuKnzT7dkDUxlIYcZ57gULzEk+PgtMfVAyFTA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    var product_id = $('#product_id').val()
    var paymentMethod = "";
    var amount = "";
    var isanonim = 0;
    const urlParams = new URLSearchParams(window.location.search);
    const source = urlParams.get('s');
    $('#isanonim').on('click', function() {
        if ($(this).is(':checked')) {
            $('#name').attr('disabled', true);
            isanonim = 1;
        } else {
            $('#name').attr('disabled', false);
            isanonim = 0;
        }
    });

    $('#amount-1').on('click', function() {
        $('#amount').val("25000");
        selectButton($('#amount-1'));
    });
    $('#amount-2').on('click', function() {
        $('#amount').val("50000");
        selectButton($('#amount-2'));
    });
    $('#amount-3').on('click', function() {
        $('#amount').val("100000");
        selectButton($('#amount-3'));
    });
    $('#amount-4').on('click', function() {
        $('#amount').val("250000");
        selectButton($('#amount-4'));
    });
    $('#amount-5').on('click', function() {
        $('#amount').val("500000");
        selectButton($('#amount-5'));
    });
    $('#amount-6').on('click', function() {
        $('#amount').val("1000000");
        selectButton($('#amount-6'));
    });
    $('#amount-7').on('click', function() {
        $('#amount').val("2500000");
        selectButton($('#amount-7'));
    });
    $('#amount-8').on('click', function() {
        $('#amount').val("5000000");
        selectButton($('#amount-8'));
    });
    $('#amount-9').on('click', function() {
        $('#amount').val("10000000");
        selectButton($('#amount-9'));
    });

    function resetAllButton() {
        $('#amount-1').removeClass('btn-success');
        $('#amount-2').removeClass('btn-success');
        $('#amount-3').removeClass('btn-success');
        $('#amount-4').removeClass('btn-success');
        $('#amount-5').removeClass('btn-success');
        $('#amount-6').removeClass('btn-success');
        $('#amount-7').removeClass('btn-success');
        $('#amount-8').removeClass('btn-success');
        $('#amount-9').removeClass('btn-success');

        $('#amount-1').addClass('btn-outline-success');
        $('#amount-2').addClass('btn-outline-success');
        $('#amount-3').addClass('btn-outline-success');
        $('#amount-4').addClass('btn-outline-success');
        $('#amount-5').addClass('btn-outline-success');
        $('#amount-6').addClass('btn-outline-success');
        $('#amount-7').addClass('btn-outline-success');
        $('#amount-8').addClass('btn-outline-success');
        $('#amount-9').addClass('btn-outline-success');
    }

    function selectButton(button) {
        resetAllButton();
        button.addClass('btn-success');
        button.removeClass('btn-outline-success');
    }

    function validation() {
        if ($("#amount").val() == "") {
            $("#amount").focus();
            return false;
        } else if ($("#telp").val() == "") {
            $("#telp").focus();
            return false;
        } else {
            return true;
        }
    }

    function finish() {
        amount = "";
        window.location.reload();
    }

    function createDonation() {
        let _url = `/donate`;
        let _token = $('meta[name="csrf-token"]').attr('content');
        validation();

        console.log()

        $.ajax({
            url: _url,
            type: "POST",
            data: {
                product_id: product_id,
                donator_id: 1,
                amount: amount,
                method: paymentMethod,
                isanonim: isanonim,
                name: $('#name').val(),
                telp: $('#telp').val(),
                source: source,
                _token: _token
            },
            success: function(response) {
                console.log(response);
                if (response.code === "200") {
                    setTimeout(function() {
                        $("#pay-body").empty();
                        if (response.data.url) {
                            $("#pay-body").append('<h3 align="center">' + response.method + '</h3><p align="center">' + formatRupiah(response.data.amount, "Rp ") + '</p>');
                            $("#modal-footer").append('<button type="button" onClick="redirect(\'' + response.data.url + '\')" class="btn btn-primary">Buka Link Pembayaran</button>');
                        } else if (response.data.qstring) {
                            $("#pay-body").append('<h3 align="center">' + response.method + '</h3><p align="center">Scan for payment<br><img class=" crop" src="https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=' + response.data.qstring + '&choe=UTF-8" title="' + response.data.qstring + '" /></p>');
                            $("#modal-footer").append('<button type="button" onClick="" class="btn btn-primary">Share QR</button><button type="button" data-dismiss="modal" onClick="finish();" class="btn btn-success">Selesai</button>');
                        } else {
                            if (response.method == "Bank BSI") {
                                $("#pay-body").append('<div align="center"><img src="https://payment.fusi.id/storage/17/611a33d33b100_logo_bsi.png" width=30% /></div>');
                                $("#pay-body").append('<p align="center">Transfer sebesar <strong>Rp. ' + formatRupiah(response.data.amount) + ',- </strong> dengan No Rekening:</p>');
                            } else {
                                $("#pay-body").append('<div align="center"><img src=' + response.data.image_url + ' width=30% /></div>');
                                $("#pay-body").append('<p align="center">Transfer sebesar <strong>Rp. ' + formatRupiah(response.data.amount) + ',- </strong> dengan No Virtual Account :</p>');
                            }
                            // $("#pay-body").append('<h4 align="center">' + response.method + '</h4>');
                            $("#pay-body").append('<h5 align="center">' + response.data.va_number + '</h5>');
                            $("#modal-footer").append('<button type="button" onClick="copy(\'' + response.data.va_number + '\')" class="btn btn-primary">Salin Nomor</button><button type="button" data-dismiss="modal" onClick="finish();" class="btn btn-success">Selesai</button>');
                        }
                    }, 3000);
                } else if (response.code === "219") {
                    $("#pay-body").empty();
                    $("#pay-body").append('<p>Mohon maaf, sesi telah berakhir, mohon refresh kembali halamannya.</p>');
                } else {
                    $("#pay-body").empty();
                    $("#pay-body").append('<p>Terjadi Kesalahan</p>');
                }
            },
            error: function(response) {
                $("#pay-body").empty();
                $("#pay-body").append('<p>Terjadi Kesalahan</p>');
            }
        });
    }

    function getPaymentList() {
        var valid = validation();
        if (valid) {
            $('#exampleModal').modal('toggle');
            $('#exampleModal').modal('show');
            amount = $('#amount').val();
            console.log(amount);
            var jsonBody = {
                "merchant_code": "kotakinfakid"
            };
            var html = '<div class="list-group" id="paylist"><div class="mb-2">Total Bayar : <strong>' + formatRupiah(amount, 'Rp. ') + ',-</strong></div></div>'
            $.ajax({
                url: 'https://payment.fusi.id/api/list',
                type: 'post',
                dataType: 'json',
                headers: {
                    "Authorization": 'Bearer 2|KNcyEHAIXO5xp3Nyr4wH9KlDm2FtJuUjSOfizw9f',
                    "Content-Type": "application/json"
                },
                contentType: 'application/json',
                success: function(data) {
                    setTimeout(function() {
                        $("#modal-body").empty();
                        $("#modal-body").append(html);
                        $("#paylist").append('<button type="button" onclick="setMethod(\'bsi\')" class="list-group-item list-group-item-action"><img src="https://payment.fusi.id/storage/17/611a33d33b100_logo_bsi.png" width=30%/>Bank BSI</button> ');
                        data.list.forEach(function(item) {
                            if (parseInt(amount) < 10000) {
                                if (item.type == "va") {
                                    $("#paylist").append('<button type="button" disabled onclick="setMethod(\'' + item.channel + '\')" class="list-group-item list-group-item-action"><img src="' + item.image_url + '" width=30%/><s>' + item.name + '</s>  Min. Rp 10.000</button> ');
                                } else {
                                    $("#paylist").append('<button type="button" onclick="setMethod(\'' + item.channel + '\')" class="list-group-item list-group-item-action"><img src="' + item.image_url + '" width=30%/>' + item.name + '</button> ');
                                }
                            } else {
                                $("#paylist").append('<button type="button" onclick="setMethod(\'' + item.channel + '\')" class="list-group-item list-group-item-action"><img src="' + item.image_url + '" width=30%/>' + item.name + '</button> ');
                            }
                        });
                        console.log(JSON.stringify(data));
                    }, 3000);
                },
                data: JSON.stringify(jsonBody)
            });
        } else {

        }

    }

    function setMethod(code) {
        console.log(code);
        paymentMethod = code;
    }

    function confirm() {
        var confirm_transfer_amount = $("#confirm_transfer_amount").val();
        // var confirm_phone_number = $("#confirm_phone_number").val();

        if (confirm_transfer_amount == '') {
            alert('Mohon lengkapi isian jumlah transfer');
        } else {
            alert('Lanjut konfirmasi ke WA');
            window.location.replace("https://wa.me/{{ env('CHAT_API_PHONE_NUMBER') }}?text=Konfirmasi transfer {{ $product->shortcode }} " + confirm_transfer_amount);
        }
    }

    /////// Chartjs
    Chart.register(ChartDataLabels);

    myChart = new Chart(document.getElementById("bar-chart-horizontal"), {
        type: 'bar',
        data: {
            labels: ["Sudah diterima", "Terkonfirmasi", "Target"],
            datasets: [{
                label: "Jumlah Infak Diterima",
                backgroundColor: ["#3cba9f", "#8e5ea2", "#8e5eff"],
                data: [0, 0, 0]
            }]
        },
        plugins: [ChartDataLabels],
        options: {
            indexAxis: 'y',
            animation: {
                duration: 0
            },
            legend: {
                display: true
            },
            title: {
                display: true,
                text: 'Predicted world population (millions) in 2050'
            },
            plugins: {
                datalabels: {
                    color: '#ffffff',
                    backgroundColor: '#ff5656',
                    fontWeight: 'bold',
                    font: {
                        size: 18
                    },
                    formatter: function(value, context) {
                        return formatRupiah(value.toString(), "Rp. ") + ',-'
                    }
                }
            }
        }
    });

    data1 = 0;
    data2 = 0;
    data3 = 0;
    setInterval(function() {
        // console.log('get data')
        $.ajax({
            url: `/summary/` + `{{ $product->id }}`,
            type: "GET",
            success: function(response) {
                // console.log(response.data);
                removeData(myChart)
                removeData(myChart)
                addData(myChart, "Sudah diterima", response.data.paid)
                addData(myChart, "Terkonfirmasi", response.data.confirmed)
            },
            error: function(response) {
                // console.log(response);
            }
        });
    }, 3000);

    function addData(chart, label, data) {
        chart.data.labels.push(label);
        chart.data.datasets.forEach((dataset) => {
            dataset.data.push(data);
        });
        chart.update();
    }

    function removeData(chart) {
        chart.data.labels.pop();
        chart.data.datasets.forEach((dataset) => {
            dataset.data.pop();
        });
        chart.update();
    }

    ////// UTILITY

    function formatRupiah(angka, prefix) {
        var number_string = angka.replace(/[^,\d]/g, '').toString(),
            split = number_string.split(','),
            sisa = split[0].length % 3,
            rupiah = split[0].substr(0, sisa),
            ribuan = split[0].substr(sisa).match(/\d{3}/gi);

        // tambahkan titik jika yang di input sudah menjadi angka ribuan
        if (ribuan) {
            separator = sisa ? '.' : '';
            rupiah += separator + ribuan.join('.');
        }

        rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
        return prefix == undefined ? rupiah : (rupiah ? 'Rp ' + rupiah : '');
    }

    function redirect(url) {
        window.open(url, "_blank");
    }
    // `clipboard` is defined on the global `window` object.
    function copy(content) {
        clipboard.writeText(content);
    }
</script>
@endsection