@extends('index')

@section('content')
    <div class="container h-m-100 container-tickets">
        {{-- <div class="card card-dashed shadow-sm mb-3">
        <div class="card-header ribbon ribbon-end">
            <div class="card-title">PAKET GUMBIRA RIA</div>
            <div class="ribbon-label bg-primary">
                <h5 class="text-white mb-0">Rp. 500.000</h5>
            </div>
        </div>
        <div class="card-body">
            <h5 class="mb-0">1 Tiket + Merch* + Name Tag</h5>
            <p class="text-danger">*Emoney, Totebag & Tshirt + Merch Exclusive: Tumbler</p>
            <!-- <button class="btn btn-primary text-right">Pilih</button> -->
        </div>
    </div> --}}
    </div>
@endsection

@push('modal')
@if (auth()->check())
<div class="modal fade" id="modalPayment" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" role="dialog" aria-labelledby="modalTitleId" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-md" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitleId">
                    Payment
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="" method="POST" id="formPayment">
                    <input type="hidden" name="id" autocomplete="">
                    @csrf
                    <p class="text-muted mb-0">Silahkan isi nama dan ukuran baju. Untuk melihat ukuran baju silanhkan klik <a href="{{ asset('media/ukuran-baju.jpeg') }}" target="blank">disini</a></p>
                    <div class="container-detail">
                        <div class="mb-3 input-detail default">
                            <div class="row">
                                <div class="col-6">
                                    <label for="" class="form-label">Nama</label>
                                    <input name="nama[]" class="form-control" rows="3" autocomplete="off" value="{{ auth()->user()?->name }}">
                                </div>
                                <div class="col-3">
                                    <label for="" class="form-label">Size</label>
                                    <select name="size[]" class="form-select">
                                        <option value="S">S</option>
                                        <option value="M">M</option>
                                        <option value="L">L</option>
                                        <option value="XL">XL</option>
                                        <option value="XXL">XXL</option>
                                        <option value="XXXL">XXXL</option>
                                        <option value="XJ">XJ</option>
                                        <option value="2XJ">2XJ</option>
                                        <option value="3XJ">3XJ</option>
                                        <option value="4XJ">4XJ</option>
                                        <option value="5XJ">5XJ</option>
                                    </select>
                                </div>
                                <div class="col-3">
                                    <label for="" class="form-label">Short/Long</label>
                                    <select name="long_shot[]" class="form-select">
                                        <option value="S">Short</option>
                                        <option value="L">Long</option>
                                        <option value="children">Children</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="" class="form-label">Alamat Pengiriman</label>
                        <textarea name="desc" class="form-control" autocomplete="off" required rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label for="" class="form-label">Ticket Price</label>
                        <input type="text" name="payment" class="form-control bg-light-secondary" disabled readonly autocomplete="off"/>
                    </div>

                    <div class="form-check form-check-custom form-check-solid me-10">
                        <input class="form-check-input h-20px w-20px" type="checkbox" id="checkDonation" autocomplete="off"/>
                        <label class="form-check-label text-dark" for="checkDonation">
                            Apakah anda ingin berdonasi?
                        </label>
                    </div>

                    <div class="my-3 container-donation" style="display: none">
                        <label for="" class="form-label">Donation</label>
                        {{-- <input type="text" name="donation" readonly class="form-control bg-light-secondary" placeholder="Rp 0,00" autocomplete="off"/> --}}
                        <div class="row gy-3">
                            <div class="col-md-6 d-grid flex-stretch">
                                <input type="radio" name="donation" value="500000" class="btn-check" id="opt1" autocomplete="off">
                                <label class="btn border border-1 border-secondary btn-active-secondary btn-sm rounded d-flex flex-column gy-1" for="opt1">
                                    <span class="fs-5">500 Perak</span>
                                    <span class="fs-7">IDR 500.000</span>
                                </label>
                            </div>
                            <div class="col-md-6 d-grid flex-stretch">
                                <input type="radio" name="donation" value="1000000" class="btn-check" id="opt2" autocomplete="off">
                                <label class="btn border border-1 border-secondary btn-active-secondary btn-sm rounded d-flex flex-column gy-1" for="opt2">
                                    <span class="fs-5">1000 Perak</span>
                                    <span class="fs-7">IDR 1.000.000</span>
                                </label>
                            </div>
                            <div class="col-md-6 d-grid flex-stretch">
                                <input type="radio" name="donation" value="2000000" class="btn-check" id="opt3" autocomplete="off">
                                <label class="btn border border-1 border-secondary btn-active-secondary btn-sm rounded d-flex flex-column gy-1" for="opt3">
                                    <span class="fs-5">2000 Perak</span>
                                    <span class="fs-7">IDR 2.000.000</span>
                                </label>
                            </div>
                            <div class="col-md-6 d-grid flex-stretch">
                                <input type="radio" name="donation" value="5000000" class="btn-check" id="opt4" autocomplete="off">
                                <label class="btn border border-1 border-secondary btn-active-secondary btn-sm rounded d-flex flex-column gy-1" for="opt4">
                                    <span class="fs-5">5000 Perak</span>
                                    <span class="fs-7">IDR 5.000.000</span>
                                </label>
                            </div>
                            <div class="col-md-6 d-grid flex-stretch">
                                <input type="radio" name="donation" value="0" class="btn-check" id="opt5" autocomplete="off">
                                <label class="btn border border-1 border-secondary btn-active-secondary btn-sm rounded d-flex flex-column gy-1" for="opt5">
                                    <span class="fs-5">Nominal Lainnya</span>
                                </label>
                                <div class="w-100 mt-3" style="display: none">
                                    <input type="text" class="form-control" name="nominal_donation" autocomplete="off" placeholder="Rp 0,00">
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" id="btnSubmitTransaction" class="btn btn-primary">
                    <span class="indicator-label">Confirm</span>
                    <span class="indicator-progress">Please wait... 
                    <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                </button>
            </div>
        </div>
    </div>
</div>
@endif
@endpush

@push('scripts')
    <script>
        const blockUI = new KTBlockUI(document.querySelector("#containerApps"), {
                message: '<div class="blockui-message bg-white"><span class="spinner-border text-primary"></span> Loading...</div>',
                overlayClass: "bg-light-dark bg-opacity-25",
            });
            
        function regenerateTicket()
        {
            if (!blockUI.isBlocked())
                blockUI.block()
            
            $.ajax({
                type: "GET",
                url: "{{ route('ticket.list') }}",
                success: function (view) {
                    $(".container-tickets").html(view)
                    if (blockUI.isBlocked())
                        blockUI.release()
                },
                error: function() {
                    if (blockUI.isBlocked())
                        blockUI.release()
                    Swal.fire("Maaf Terjadi Kesalahan", "", "error")
                }
            });
        }

        $(function () {
            regenerateTicket()
        });
    </script>
    @if (auth()->check())
        @if (config('midtrans.is_production'))
        <script src="https://app.midtrans.com/snap/snap.js" data-client-key="{{ env('MIDTRANS_CLIENT_KEY') }}"></script>
        @else
        <script src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="{{ env('MIDTRANS_CLIENT_KEY') }}"></script>
        @endif
        <script>
            $(function() {
                function snapRender(token)
                {
                    $.ajax({
                        url: "{{ route('payment.status', ':token') }}".replace(":token", token),
                        dataType: "json",
                        success: function (response) {
                            snap.pay(token, {
                                onSuccess: function(result) {
                                    $.ajax({
                                        type: "POST",
                                        url: "{{ route('payment.update', ':token') }}".replace(":token", token), 
                                        data: {
                                            _method: "PUT",
                                        },
                                        dataType: "json",
                                        success: function (response) {
                                            regenerateTicket()
                                            Swal.fire("Pembayaran Berhasil", "Teman Gajah 2000, Pemesanan Tiket 2000 Perak telah berhasil. Detail tiket akan dikirim melalui email dan paket merchandise akan dikirim sesuai alamat pengiriman selambat-lambatnya 30 hari setelah pembayaran.", "success")
                                        }
                                    });
                                },
                                onPending: function(result) {
                                    alert("Waiting for your payment!");
                                },
                                onError: function(result) {
                                    alert("Payment Failed!");
                                }
                            });
                        }
                    });
                }

                $(document).on('click', ".card-ticket", function() {
                    let id = $(this).data('id'),
                        price = $(this).data('price'),
                        status = $(this).data('status'),
                        total = $(this).data('for'),
                        token = $('.container-tickets').find("[data-token!=''][data-token]").data('token'),
                        formattedPrice = $(this).find('.formatted-price').html(),
                        title = $(this).find(".card-title").html();

                    urlPayment = '{{ route("payment.create", ":id") }}'.replace(":id", id)
                    if (token === "" || typeof token === "undefined") {
                        $("#modalPayment").find("form").attr("action", urlPayment)
                        $("#modalPayment").find("[name='payment']").val(formattedPrice)
                        $("#modalPayment").find("[name='id']").val(id)
                        
                        $("#modalPayment").find('.container-detail').find(".input-detail:not(.default)").remove()

                        for (let ticketFor = 1; ticketFor < total; ticketFor++) {
                            defaultInput = $(".container-detail").find(".default").clone()

                            defaultInput.find("[name='nama[]']").val("").trigger('change')
                            defaultInput.removeClass("default")
                            $("#modalPayment").find('.container-detail').append(defaultInput)
                        }

                        $("#modalPayment").modal("show")
                    } else if (status === "") {
                        if ($(".container-tickets").find("span:contains('Verified')").length > 0)
                            Swal.fire("Anda Telah Membeli Tiket", "Pembelian tiket hanya dapat dilakukan 1x", "error")
                        else
                            Swal.fire("Gagal Membeli Tiket", "Anda telah membeli tiket silahkan lanjutkan pembayaran atau batalkan pembayaran terlebih dahulu", "error")
                    } else if (token !== "" && status === 0) {
                        Swal.fire({
                            title: `Lanjut Pembayaran Tiket - ${title}`,
                            icon: "info",
                            showCancelButton: true,
                            showDenyButton: true,
                            confirmButtonText: "Ya",
                            denyButtonText: "Batalkan Transaksi",
                            cancelButtonText: "Tutup",
                            showLoaderOnDeny: true,
                            preDeny: async (login) => {
                                if (!blockUI.isBlocked())
                                    blockUI.block()
                            },

                            allowOutsideClick: () => !Swal.isLoading()
                        }).then((result) => {
                            /* Read more about isConfirmed, isDenied below */
                            if (result.isConfirmed) {
                                snapRender(token)
                            }else if (result.isDenied) {
                                $.ajax({
                                    type: "POST",
                                    url: "{{ route('payment.cancel', ':token') }}".replace(":token", token),
                                    data: {
                                        _method: "DELETE"
                                    },
                                    dataType: "json",
                                    success: function (response) {
                                        regenerateTicket()
                                        Swal.fire("Pembelian Tiket Berhasil Dibatalkan", "", "success")
                                        if (blockUI.isBlocked())
                                            blockUI.release()
                                    },
                                    error: function (response) {
                                        if (blockUI.isBlocked())
                                            blockUI.release()
                                    }
                                });
                            }
                        })
                    }
                })

                Inputmask({
                    alias: 'numeric',
                    groupSeparator: '.',
                    radixPoint: ',',
                    prefix: 'Rp ',
                    rightAlign: false,
                    allowMinus: false,
                    placeholder: '0',
                    autoUnmask: true,
                    digits: 2,
                    digitsOptional: false
                }).mask("[name='nominal_donation']");

                $("#checkDonation").change(function() {
                    if ($(this).is(':checked')) {
                        $(".container-donation").show()
                        $(`[name="donation"]`).prop('readonly', false)
                        $(`[name="donation"]`).prop('disabled', false)
                    } else {
                        $(".container-donation").hide()
                        $(`[name="donation"]`).val("")
                        $(`[name="donation"]`).prop('readonly', true)
                        $(`[name="donation"]`).prop('disabled', true)
                    }
                })

                $(document).on('change', '[name="donation"]', function () {
                    $('[name="nominal_donation"]').val("")
                    if ($(this).attr("id") == "opt5") {
                        $('[name="nominal_donation"]').closest('div').show()
                    } else {
                        $('[name="nominal_donation"]').closest('div').hide()
                    }
                });

                $(document).on('click', '#btnSubmitTransaction', function() {
                    btnSubmit = $(this)

                    if (!$("#formPayment")[0].reportValidity())
                        return;

                    btnSubmit.attr('data-kt-indicator', "on")
                    data = new FormData($("#formPayment")[0])
                    id = $("#formPayment").find("[name='id']").val()

                    $.ajax({
                        url: $("#formPayment").attr('action'),
                        method: 'POST',
                        data: data,
                        contentType: false,
                        processData: false,
                        dataType: 'json',
                        success: function(data) {
                            // regenerateTicket()
                            
                            btnSubmit.attr('data-kt-indicator', "off")
                            if (data.snap_token) {
                                snapRender(data.snap_token)
                            } else {
                                alert('Snap token tidak ditemukan');
                            }
                            $("#modalPayment").modal("hide")

                            if (!blockUI.isBlocked())
                            blockUI.block()
                        
                            $.ajax({
                                type: "GET",
                                url: "{{ route('ticket.list') }}",
                                success: function (view) {
                                    $(".container-tickets").html(view)
                                    if (blockUI.isBlocked())
                                        blockUI.release()
                                },
                                error: function() {
                                    if (blockUI.isBlocked())
                                        blockUI.release()
                                    Swal.fire("Maaf Terjadi Kesalahan", "", "error")
                                }
                            });
                        },
                        error: function(xhr, status, error) {
                            btnSubmit.attr('data-kt-indicator', "off")
                            console.error('Terjadi kesalahan:', error);
                            alert('Terjadi kesalahan saat memproses pembayaran.');
                        }
                    });
                })
            });
        </script>
    @endif
@endpush