@extends('layouts.app')

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

    .c-app {
        background-color: #338b94 !important;
    }

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

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

    .bg-image {
        /* image specified in seperate class  */
        height: 200px;
        width: 100%;
    }

    .bg-image-news {
        /* lt ie8 */
        -ms-background-position-x: center;
        -ms-background-position-y: bottom;
        /* default - may override with classes or media query */
        background-position: center bottom;
        /* scale bg image proportionately */
        background-size: cover;
        /* ie8 polyfill */
        -ms-behavior: url(backgroundsize.min.htc);
        /* prevent scaling past src width (or not) */
        /* max-width: 1200px; */
    }

    .bg-center-center {
        -ms-background-position-x: center;
        -ms-background-position-y: center;
        background-position: center center;
    }

    .btn-outline-success {
        background-color: #fff9d2 !important;
        color: #3c4b64;
        border-color: #3c4b64;
    }    
    
    .btn-outline-success:hover, .btn-primary:active, .btn-primary:visited {
        background-color: #2eb85c !important;
        color: #ffff
    }  

    .bg-green {
        background-color: #2eb85c;
        color: white;
    }

</style>
@endsection

@section('content')
<div class="text-center" style="font-size: 1.4em; color: white">
    <img src="/img/mwp/MASJID.png" width="300px" alt="logo" loading="lazy">
    <p></p>
    <h2><i><strong>"Siap Bahagiakan<br>
    Jutaan Hamba"</strong></i></h2>
    <p>Ahlan wa sahlan mukmin sejati yang Dermawan...</p>
    <p>Salah satu pintu yang dibuka Oleh Allah untuk meraih keuntungan besar di bulan Ramadhan adalah melalui SEDEKAH. Rasulullah shalallahu 'alahi wasallam adalah orang yang paling dermawan. Dan beliau lebih dermawan lagi di bulan Ramadhan ......</p>
    <p>Muslimah Wahdah Islamiyah mengajak anda meraih keberkahan ramadhan dalam berbagai product amaliah.</p>
</div>

<div id="donation_form" class="pb-2">
    <p></p>
</div>

<div class="row mt-8 overflow-hidden shadow sm:rounded-lg ml-1 mr-1" style="background-color: #ffbc49!important">
    <div class="grid grid-cols-1 md:grid-cols-2">
        <div class="p-6">
            <div class="ml-2">
                <div class="mt-2 text-gray-800 dark:text-gray-800 text-sm">
                   <!-- <p>Infak Terkumpul selama 2021: </p>
                            <p><span style="font-size: 3em"><strong>Rp2.154.347.409</strong></strong></p> -->
                    <div class="text-lg leading-7 font-semibold">Infak Terkumpul tahun 2022</div>
                    <div class="alert" role="alert" style="background-color: #fff9d2;">
                        <span style="font-size: 2em;">{{ $total_donation }}</span>
                    </div>
                    <table class="table table-sm table-striped table-dark">
                        <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="/donasi">Lihat semua donasi</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="p-6 border-t border-white-200 dark:border-white-700 md:border-t-0 md:border-l">
            <div class="flex items-center">
                <div class="ml-2 text-lg leading-7 font-semibold">Infak Sekarang</div>
            </div>

            <div class="ml-2">
                <div class="mt-2 text-gray-800 dark:text-gray-600 text-sm">
                    <form>

                        <div class="form-group">
                            <label for="exampleFormControlSelect1">PROGRAM DONASI</label>
                            <select class="form-control" name="product_id" id="product_id">
                            <option value="1">Transaksi Umum</option>
                            @foreach($allproducts as $product)
                                <option value="{{ $product->id }}"><span style="color: red">{{ $product->title }}</span></option>
                            @endforeach
                            </select>
                        </div>                    

                        <div class="form-group">
                            <!-- <input type="hidden" value="1" id="product_id"> -->

                            <!-- <div class="btn-group" data-toggle="buttons">
                                <label id='Radio 1' class="btn btn-primary">
                                    <input type="radio" name="options" id="option1" autocomplete="off"> Radio 1
                                </label>
                                <label class="btn btn-primary">
                                    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
                                </label>
                                <label class="btn btn-primary">
                                    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
                                </label>
                                <div class="btn-group">
                                    <label class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <input type="radio" class="" name="options" id="option4" autocomplete="off"> Radio 4 <span class="caret"></span>
                                    </label>
                                    <ul class="dropdown-menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                    </ul>
                                </div>
                            </div> -->

                            <div class="row mb-3">
                                <div class="btn-select">
                                    <button id="10k" type="button" class="btn btn-outline-success">Rp 10.000</button>
                                </div>
                                <div class="btn-select">
                                    <button id="25k" type="button" class="btn btn-outline-success">Rp 25.000</button>
                                </div>
                                <div class="btn-select">
                                    <button id="50k" type="button" class="btn btn-outline-success">Rp 50.000</button>
                                </div>
                                <div class="btn-select">
                                    <button id="100k" type="button" class="btn btn-outline-success">Rp 100.000</button>
                                </div>
                                <div class="btn-select">
                                    <button id="200k" type="button" class="btn btn-outline-success">Rp 200.000</button>
                                </div>
                                <div class="btn-select">
                                    <button id="350k" type="button" class="btn btn-outline-success">Rp 350.000</button>
                                </div>
                                <div class="btn-select">
                                    <button id="500k" 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" step="1">
                            <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-group">
                            <textarea type="text" class="form-control" id="notes" rows="3" style="color: grey" placeholder="Keterangan (opsional)"></textarea>
                        </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>

<div class="text-center text-white mt-5">
    <h3>PROGRAM DONASI</h3>
</div>

<div class="row mt-3">
    @foreach ($allproducts as $key => $product)
    @if($product->id != 1)
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="card m-2">
            <a href="/fundraising/{{ $product->shortcode }}">
            @if($product->featured_image)
            <!-- <a href="/fundraising/{{ $product->shortcode }}" style="background: url({{$product->featured_image->url}}) center center"> -->
                <div class="bg-image bg-image-news bg-center-bottom" style="background-image: url({{$product->featured_image->url}})"></div>
            <!-- </a> -->
            @else
            <!-- <a href="/fundraising/{{ $product->shortcode }}" style="background: url('/img/default.jpeg') center center"> -->
                <div class="bg-image bg-image-news bg-center-bottom" style="background-image: url('/img/default.jpeg')"></div>
            <!-- </a> -->
            @endif
            </a>
            <!-- <button crlass="btn btn-warning" onclick="selectProduct('{{ $product->id }}')"> -->
            <a class="btn btn-warning" href="/fundraising/{{ $product->shortcode }}">
                <span style="font-size: 1.2em"><strong>DONASI SEKARANG</strong></span>
            </a>
            <!-- </button> -->
        </div>
    </div>
    @endif
    @endforeach
</div>

<div class="text-center text-white mt-5">
    <h3>BERITA</h3>
</div>

<div class="row d-flex mt-3">
    @foreach ($allnews as $news)
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
        <div class="card m-2">
            <input type="hidden" value="{{$news->id}}" id="news_id">
            @if($news->featured_image)
            <a href="/berita/{{ $news->slug }}" style="background: url({{$news->featured_image->url}}) center center">
                <div class="bg-image bg-image-news bg-center-bottom" style="background-image: url({{$news->featured_image->url}})"></div>
            </a>
            @else
            <a href="/berita/{{ $news->slug }}" style="background: url('/img/default.jpeg') center center">
                <div class="bg-image bg-image-news bg-center-bottom" style="background-image: url('/img/default.jpeg')"></div>
            </a>
            @endif
            <div class="card-body">
                <h4 class="card-title"><a href="/berita/{{ $news->slug }}">{{$news->title}}</a></h4>
                <p class="card-text">{!! substr($news->content, 0, 100); !!}..</p>
                <p><strong><a href="/berita/{{ $news->slug }}">Lihat selengkapnya</a></strong></p>
            </div>
        </div>
    </div>
    @endforeach
</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 Infak</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="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></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 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;
            // $('#telp').attr('disabled', true);
        } else {
            $('#name').attr('disabled', false);
            // $('#telp').attr('disabled', false);
            isanonim = 0;
        }
    });

    $('#10k').on('click', function() {
        $('#amount').val("10000");
        selectButton($('#10k'));
    });
    $('#25k').on('click', function() {
        $('#amount').val("25000");
        selectButton($('#25k'));
    });
    $('#50k').on('click', function() {
        $('#amount').val("50000");
        selectButton($('#50k'));
    });
    $('#100k').on('click', function() {
        $('#amount').val("100000");
        selectButton($('#100k'));
    });
    $('#200k').on('click', function() {
        $('#amount').val("200000");
        selectButton($('#200k'));
    });
    $('#350k').on('click', function() {
        $('#amount').val("350000");
        selectButton($('#350k'));
    });
    $('#500k').on('click', function() {
        $('#amount').val("500000");
        selectButton($('#500k'));
    });
    $('#1000k').on('click', function() {
        $('#amount').val("1000000");
        selectButton($('#1000k'));
    });
    $('#2500k').on('click', function() {
        $('#amount').val("2500000");
        selectButton($('#2500k'));
    });
    $('#5000k').on('click', function() {
        $('#amount').val("5000000");
        selectButton($('#5000k'));
    });
    $('#10000k').on('click', function() {
        $('#amount').val("1000000");
        selectButton($('#10000k'));
    });

    function resetAllButton() {
        $('#10k').removeClass('btn-success');
        $('#25k').removeClass('btn-success');
        $('#50k').removeClass('btn-success');
        $('#100k').removeClass('btn-success');
        $('#200k').removeClass('btn-success');
        $('#350k').removeClass('btn-success');
        $('#500k').removeClass('btn-success');
        $('#1000k').removeClass('btn-success');
        $('#2500k').removeClass('btn-success');
        $('#5000k').removeClass('btn-success');
        $('#10000k').removeClass('btn-success');

        $('#10k').addClass('btn-outline-success');
        $('#25k').addClass('btn-outline-success');
        $('#50k').addClass('btn-outline-success');
        $('#100k').addClass('btn-outline-success');
        $('#200k').addClass('btn-outline-success');
        $('#350k').addClass('btn-outline-success');
        $('#500k').addClass('btn-outline-success');
        $('#1000k').addClass('btn-outline-success');
        $('#2500k').addClass('btn-outline-success');
        $('#5000k').addClass('btn-outline-success');
        $('#10000k').addClass('btn-outline-success');
    }

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

    function selectProduct(productid) {
        $("#product_id").val(productid);
        $("#product_id").addClass("bg-green");
        $('html, body').animate({
            scrollTop: $("#donation_form").offset().top
        }, 200);        
    }

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

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

        $.ajax({
            url: _url,
            type: "POST",
            data: {
                product_id: $('#product_id').val(),
                donator_id: 1,
                amount: amount.replace(/\D/g,''),
                method: paymentMethod,
                isanonim: isanonim,
                notes: $('#notes').val(),
                name: $('#name').val(),
                telp: $('#telp').val(),
                source: source,
                _token: _token
            },
            success: function(response) {
                console.log(response.data);
                console.log(response.method);
                console.log(JSON.stringify(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="window.location.reload();" class="btn btn-success">Selesai</button>');
                        } else {
                            // else if (response.method = "Bank Muamalat") {
                            //     $("#pay-body").append('<div align="center"><img src="https://payment.fusi.id/storage/18/6153ea9c586bc_logo_bank_muamalat.png" width=30% /></div>');
                            //     $("#pay-body").append('<p align="center">Transfer sebesar <strong>Rp. ' + formatRupiah(response.data.amount) + ',- </strong> dengan No Rekening:</p>');
                            // }
                            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>');
                                $("#pay-body").append('<h5 align="center">7474732112 a.n Pusat Dakwah Muslimah Wahdah Islamiyah</h5>');
                            } 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('<h5 align="center">' + response.data.va_number + '</h5>');
                            }
                            // $("#pay-body").append('<h4 align="center">' + response.method + '</h4>');
                            $("#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();
        var token = "{{ env('PAYMENT_TOKEN') }}"
        var merchant_code = "{{ env('PAYMENT_MERCHANT_CODE') }}"
        if (valid) {
            $('#exampleModal').modal('toggle');
            $('#exampleModal').modal('show');
            amount = $('#amount').val();
            console.log(amount);
            var jsonBody = {
                "merchant_code": merchant_code
            };
            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 ' + token,
                    "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(\'muamalat\')" class="list-group-item list-group-item-action"><img src="https://payment.fusi.id/storage/18/6153ea9c586bc_logo_bank_muamalat.png" width=30%/>Bank Muamalat (Konfirmasi Manual)</button> ');
                        $("#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 (Konfirmasi Manual)</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 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);
    }

    function finish(){
        location.reload();
    }
</script>
@endsection