@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>
    .c-app {
        background-color: #2d8c7d;
    }

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

    .form-control {
        border-color: black !important;
        background-color: #dffff9;
        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: #f7941d !important;
        color: #3c4b64;
        border-color: #3c4b64;
    }

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

    .jumbotron {
        margin-bottom: 0 !important;
    }
</style>
@endsection

@section('header')
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="height: 400px">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" style="height: 400px" src="https://wiz.or.id/wp-content/uploads/2022/01/wahdah-inspirasi-zakat-zakat-membersihkan.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" style="height: 400px" src="https://wiz.or.id/wp-content/uploads/2022/01/Peduli-Bencana-wahdah-inspirasi-zakat.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" style="height: 400px" src="https://wiz.or.id/wp-content/uploads/2022/01/wahdah-inspirasi-zakat-Sedekah-Subuh.jpg" alt="Third slide">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
@endsection

@section('content')
<div class="row mt-8 bg-white dark:bg-gray-800 overflow-hidden shadow sm:rounded-lg ml-1 mr-1">
    <div class="grid grid-cols-1 md:grid-cols-2">
        <div class="p-6">
            <div class="flex items-center">
                <div class="ml-2 text-lg leading-7 font-semibold">Tentang {{ env('APP_NAME') }}</div>
            </div>

            <div class="ml-2">
                <div class="mt-2 text-gray-800 dark:text-gray-800 text-sm">
                    <p><a href="{{ env('APP_URL') }}"><strong>{{ env('APP_NAME') }}</strong></a> adalah platform donasi online dengan berbagai fitur pembayaran terkini yang
                        memudahkan donatur dalam menitipkan dana infak atau sedekah.</p>
                    <p><a href="{{ env('APP_URL') }}"><strong>{{ env('APP_NAME') }}</strong></a> dibawah pengelolaan Wahdah Inspirasi Zakat (WIZ).
                        WIZ adalah Lembaga Amil Zakat Nasional dengan SK Kementrian Agama RI nomor 511 Tahun 2019.
                        Saat ini jaringan WIZ sudah berada di semua provinsi di Indonesia.</p>
                    <div class="text-lg leading-7 font-semibold">Infak Terkumpul tahun 2022</div>
                    <div class="alert alert-primary" role="alert">
                        <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-gray-200 dark:border-gray-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">
                            <input type="hidden" value="1" id="product_id">
                            <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">
                            <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-success">Infak Sekarang</button>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>

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

<div class="card-deck">
    @foreach ($allproducts as $key => $product)
    @if($key < 5) 
    <div class="card">
        <a href="/fundraising/{{ $product->shortcode }}">
        @if($product->featured_image)
        <div class="bg-image bg-image-news bg-center-bottom" style="background-image: url({{$product->featured_image->url}})"></div>
        @else
        <div class="bg-image bg-image-news bg-center-bottom" style="background-image: url('/img/default.jpeg')"></div>
        @endif
        </a>
        <div class="card-body">
            <h5 class="card-title">{{ $product->title }}</h5>
            <div class="pb-2">
                <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>
            <p><strong>Rp. {{ number_format($product->current_amount) }}</strong> terkumpul</p>
            <span class="badge badge-info">{{ $product->status }}</span>
        </div>
        <a class="btn btn-warning" href="/fundraising/{{ $product->shortcode }}">
            <span style="font-size: 1.2em"><strong>DONASI SEKARANG</strong></span>
        </a>
    </div>
    @endif
    @endforeach
</div>

<div class="text-center pt-4">
    <a class="btn btn-success" href="/product">Lihat Semua Product</a>
</div>

<!-- <div class="text-center mt-3 mb-3">
    <strong><a href="/berita">Lihat semua berita</a></strong>
</div> -->

<div class="text-center text-white mt-4">
    <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>

<div class="text-center pt-4 pb-4">
    <a class="btn btn-success" href="/berita">Lihat Semua Berita</a>
</div>

<!-- <div class="text-center mt-3 mb-3">
    <strong><a href="/berita">Lihat semua berita</a></strong>
</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/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 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,
                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>');
                            } 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(\'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