@extends('template.main-site')

@section('content')
<section class="pos-r o-hidden">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h4 class="mb-4">Keranjang Belanja</h4>
            </div>
            <div class="col-12">
                <table class="table">
                    <thead class="thead-dark">
                      <tr>
                        <th scope="col">Deskripsi</th>
                        <th scope="col" class="text-center">Harga</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th scope="row">{{ $name }} - {{ $template_name }}</th>
                        <td class="text-center">Rp {{ number_format($pricing + $pricing_setup,0,',','.') }}</td>
                      </tr>
                      <tr>
                        <th scope="row">Register Domain - {{ $domain }} (1 tahun)</th>
                        <td class="text-center">Free</td>
                      </tr>
                      <tr>
                        <th scope="row" class="text-right font-weight-bolder">TOTAL</th>
                        <td class="text-center" class="font-weight-bolder">Rp {{ number_format($pricing + $pricing_setup,0,',','.') }}</td>
                      </tr>
                      <tr>
                          <td colspan="2" class="text-right">
                              <button class="btn btn-theme btn-sm btn-login-checkout">Silahkan login sebelum checkout</button>
                          </td>
                      </tr>
                    </tbody>
                </table>
                <hr>
                <p>
                    <b>PENTING!</b> 
                    Gambar hanya digunakan untuk demo saja, tidak tersedia untuk website yang telah dibeli.
                </p>
            </div>
        </div>
    </div>
</section>
 <!-- Modal -->
 <div class="modal fade modal-cart" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" style="z-index: 10000;">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          
        </div>
      </div>
    </div>
  </div>
@endsection

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script>
const domain = "{{ $domain }}"
const product_id = "{{ $product_id }}"
const template_id = "{{ $template_id }}"

$(document).ready(function() {
    if(localStorage.getItem('your-order-binggo')) {
        $('body').find( ".btn-login-checkout" ).replaceWith(`
            <button class="btn btn-theme btn-sm btn-checkout" domain="${domain}" template-id="${template_id}" product-id="${product_id}" id-login="${localStorage.getItem('your-order-binggo')}">Checkout</button>
        `)
    }

    $('body').on('click', '.btn-login-checkout', function() {
       loginHTML()
        $('body').find('.modal-cart').modal('show')
    })

    $('body').on('click', '.btn-login-my', function() {
        $('body').find('.email-error').removeClass('d-none')
        $('body').find('.email-valid-error').removeClass('d-none')
        $('body').find('.password-error').removeClass('d-none')
        $('body').find('.error-binggo-login').removeClass('d-none')
        $('body').find('.email-error').addClass('d-none')
        $('body').find('.email-valid-error').addClass('d-none')
        $('body').find('.password-error').addClass('d-none')
        $('body').find('.error-binggo-login').addClass('d-none')

        let email = $(this).parent().find('[name="email"]').val()
        let password = $(this).parent().find('[name="password"]').val()

        if (email && password) {

            if(validateEmail(email)) {
                $.ajax({
                    type: 'GET',
                    url: "https://my.binggo.co.id/api/userlogin",
                    data: {
                        email,
                        password
                    },
                    beforeSend() {
                        $('body').find('.btn-login-my').text('loading...')
                    },
                    success(response) {
                        if(response.response == 'success') {
                            $('body').find( ".btn-login-checkout" ).replaceWith(`
                                <button class="btn btn-theme btn-sm btn-checkout" domain="${domain}" template-id="${template_id}" product-id="${product_id}" id-login="${response.whmcs_id}">Checkout</button>
                            `)
                            localStorage.setItem('your-order-binggo', response.whmcs_id)
                            localStorage.setItem('email-binggo', email)
                            localStorage.setItem('token-binggo', btoa(password))
                            $('body').find('.modal-cart').modal('hide')
                            $('body').find('.btn-login-site').attr('data-text', 'My Profile');
                            $('body').find('.btn-login-site').html(`
                                <span>M</span>
                                <span>y</span>
                                <span> </span>
                                <span>P</span>
                                <span>r</span>
                                <span>o</span>
                                <span>f</span>
                                <span>i</span>
                                <span>l</span>
                                <span>e</span>
                            `);
                        } else {
                            $('body').find('.error-binggo-login').removeClass('d-none')
                        }

                        $('body').find('.btn-login-my').text('Login')
                    }
                })
            } else {
                $('body').find('.email-valid-error').removeClass('d-none')
            }

        } else {
            if(!email) {
                $('body').find('.email-error').removeClass('d-none')
            }

            if(!password) {
                $('body').find('.password-error').removeClass('d-none')
            }
        }
    })

    $('body').on('click', '.register-my-binggo', function() {
        $('body').find('.modal-body').html(`
            <div class="form-group text-center">
                <p>Register my.binggo.co.id</p>
            </div>
            <div class="row">
                <div class="col-md-6 col-sm-12">
                    <label>Nama Depan</label>
                    <input type="text" class="form-control" name="first_name" placeholder="Nama Depan">
                    <small class="text-danger first-name-error ml-2 d-none">Nama Depan Wajib Diisi</small>
                </div>
                <div class="col-md-6 col-sm-12">
                    <label>Nama Belakang</label>
                    <input type="text" class="form-control" name="last_name" placeholder="Nama Belakang">
                    <small class="text-danger last-name-error ml-2 d-none">Nama Belakang Wajib Diisi</small>
                </div>
                <div class="col-md-6 col-sm-12">
                    <label>Password</label>
                    <input type="password" class="form-control" name="password" placeholder="Password">
                    <small class="text-danger password-error ml-2 d-none">Password Wajib Diisi</small>
                    <small class="text-danger password-same-error ml-2 d-none">Password & Konfirmasi Password Harus Sama</small>
                </div>
                <div class="col-md-6 col-sm-12">
                    <label>Konfirmasi Password</label>
                    <input type="password" class="form-control" name="confirm_password" placeholder="Konfirmasi Password">
                    <small class="text-danger confirm-password-error ml-2 d-none">Konfirmasi Password Wajib Diisi</small>
                </div>
                <div class="col-md-6 col-sm-12">
                    <label>Email</label>
                    <input type="text" class="form-control" name="email" placeholder="Email">
                    <small class="text-danger email-error ml-2 d-none">Email Wajib Diisi</small>
                    <small class="text-danger email-valid-error ml-2 d-none">Email Tidak Valid</small>
                </div>
                <div class="col-md-6 col-sm-12">
                    <label>No. Telepon</label>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text" id="basic-addon1">+62</span>
                        </div>
                        <input type="number" name="phone" class="form-control">
                    </div>
                    <small class="text-danger phone-error ml-2 d-none">No. Telepon Wajib Diisi</small>
                </div>
                <div class="col-md-6 col-sm-12">
                    <label>Alamat 1</label>
                    <input type="text" class="form-control" name="address_1" placeholder="Alamat 1">
                    <small class="text-danger address-1-error ml-2 d-none">Alamat 1 Wajib Diisi</small>
                </div>
                <div class="col-md-6 col-sm-12">
                    <label>Alamat 2</label>
                    <input type="text" class="form-control" name="address_2" placeholder="Alamat 2">
                    <small class="text-danger address-2-error ml-2 d-none">Alamat 2 Wajib Diisi</small>
                </div>
                <div class="col-md-6 col-sm-12">
                    <label>Kota</label>
                    <input type="text" class="form-control" name="city" placeholder="Kota">
                    <small class="text-danger city-error ml-2 d-none">Kota Wajib Diisi</small>
                </div>
                <div class="col-md-6 col-sm-12">
                    <label>Provinsi</label>
                    <input type="text" class="form-control" name="province" placeholder="Provinsi">
                    <small class="text-danger province-error ml-2 d-none">Provinsi Wajib Diisi</small>
                </div>
                <div class="col-md-6 col-sm-12">
                    <label>Kode Pos</label>
                    <input type="number" class="form-control" name="postcode" placeholder="Kode Pos">
                    <small class="text-danger postcode-error ml-2 d-none">Kode Pos Wajib Diisi</small>
                </div>
            </div>
            <div class="form-group text-center">
                <p>Sudah punya akun ? silahkan <span class="text-success login-my-binggo" style="cursor:pointer;">Login</span></p>
                <p class="text-danger d-none error-binggo-register">Email Sudah Terdaftar</p>
            </div>
            <button class="btn btn-theme float-right btn-register-my">Register</button>
        `)

        numberonly()
    })

    $('body').on('click', '.login-my-binggo', function() {
        loginHTML()
    })

    $('body').on('click', '.btn-register-my', function() {
        registerError()
        let first_name = $(this).parent().find('[name="first_name"]').val()
        let last_name = $(this).parent().find('[name="last_name"]').val()
        let password = $(this).parent().find('[name="password"]').val()
        let confirm_password = $(this).parent().find('[name="confirm_password"]').val()
        let email = $(this).parent().find('[name="email"]').val()
        let phone = $(this).parent().find('[name="phone"]').val()
        let address_1 = $(this).parent().find('[name="address_1"]').val()
        let address_2 = $(this).parent().find('[name="address_2"]').val()
        let city = $(this).parent().find('[name="city"]').val()
        let province = $(this).parent().find('[name="province"]').val()
        let postcode = $(this).parent().find('[name="postcode"]').val()

        if(first_name && last_name && password && confirm_password && email && phone && address_1 && address_2 && city && province && postcode) {
            
            if(password == confirm_password) {
                if(validateEmail(email)) {
                    $.ajax({
                        type: 'POST',
                        url: "https://my.binggo.co.id/api/usersignup",
                        data: {
                            first_name,
                            last_name,
                            password,
                            email,
                            phone,
                            address_1,
                            address_2,
                            city,
                            province,
                            postcode
                        },
                        beforeSend() {
                            $('body').find('.btn-register-my').text('loading...')
                        },
                        success(response) {
                            if(response.response == 'success') {
                                $('body').find( ".btn-login-checkout" ).replaceWith(`
                                    <button class="btn btn-theme btn-sm btn-checkout" domain="${domain}" template-id="${template_id}" product-id="${product_id}" id-login="${response.whmcs_id}">Checkout</button>
                                `)
                                localStorage.setItem('your-order-binggo', response.whmcs_id)
                                localStorage.setItem('email-binggo', email)
                                localStorage.setItem('token-binggo', btoa(password))
                                $('body').find('.modal-cart').modal('hide')
                                $('body').find('.btn-login-site').attr('data-text', 'My Profile');
                                $('body').find('.btn-login-site').html(`
                                    <span>M</span>
                                    <span>y</span>
                                    <span> </span>
                                    <span>P</span>
                                    <span>r</span>
                                    <span>o</span>
                                    <span>f</span>
                                    <span>i</span>
                                    <span>l</span>
                                    <span>e</span>
                                `);
                            } else {
                                $('body').find('.btn-register-my').text('Register')
                                $('body').find('.error-binggo-register').removeClass('d-none')
                            }
                        }
                    
                    })
                } else {
                    $('body').find('.email-valid-error').removeClass('d-none')
                }
            } else {
                $('body').find('.password-same-error').removeClass('d-none')
            }

        } else {
            if(!first_name) {
                $('body').find('.first-name-error').removeClass('d-none')
            }

            if(!last_name) {
                $('body').find('.last-name-error').removeClass('d-none')
            }

            if(!password) {
                $('body').find('.password-error').removeClass('d-none')
            }

            if(!confirm_password) {
                $('body').find('.confirm-password-error').removeClass('d-none')
            }

            if(!email) {
                $('body').find('.email-error').removeClass('d-none')
            }

            if(!phone) {
                $('body').find('.phone-error').removeClass('d-none')
            }

            if(!address_1) {
                $('body').find('.address-1-error').removeClass('d-none')
            }

            if(!address_2) {
                $('body').find('.address-2-error').removeClass('d-none')
            }

            if(!city) {
                $('body').find('.city-error').removeClass('d-none')
            }

            if(!province) {
                $('body').find('.province-error').removeClass('d-none')
            }

            if(!postcode) {
                $('body').find('.postcode-error').removeClass('d-none')
            }
        }
    })

    $('body').on('click', '.btn-checkout', function() {
        let whmcs_id = $(this).attr('id-login')
        let pid = $(this).attr('product-id')
        let domain = $(this).attr('domain')
        let template_id = $(this).attr('template-id')
        $.ajax({
            type: 'POST',
            url: "https://my.binggo.co.id/api/orderwebsite",
            data: {
                whmcs_id,
                pid,
                domain,
                template_id
            },
            beforeSend() {
                let timerInterval;
                Swal.fire({
                    title: 'Mohon Menunggu',
                    html: '',
                    timerProgressBar: true,
                    showCancelButton: false,
                    showConfirmButton: false,
                    onBeforeOpen: () => {
                        Swal.showLoading()
                    },
                    onClose: () => {
                        clearInterval(timerInterval)
                    }
                }).then((result) => {
                if (
                        /* Read more about handling dismissals below */
                        result.dismiss === Swal.DismissReason.timer
                    ) {
                        console.log('I was closed by the timer') // eslint-disable-line
                    }
                })
            },
            success(response) {
                console.log(response)
                addOrderBinggo({
                    invoice_id: response.invoice_id,
                    whmcs_id,
                    name: response.name,
                    service: response.service,
                    domain: response.domain,
                    whmcs_client_id: response.whmcs_client_id,
                    whmcs_order_id: response.whmcs_order_id,
                    email: response.email,
                    template_id: response.template_id,
                    _token: "{{ csrf_token() }}"
                });
                // Swal.queue([{
                //     title: '',
                //     confirmButtonText: 'OK',
                //     text: 'Invoice anda sudah terkirim via email',
                //     showLoaderOnConfirm: true,
                //     preConfirm: () => {
                      
                //     }
                // }])
            }
        })
    })
})

function addOrderBinggo(data) {
    console.log(data)
    $.ajax({
        type: 'POST',
        url: "{{ route('template.add-order-binggo') }}",
        data,
        success(res) {
            window.location = "{{ route('order.finish') }}" + `?invoice=${data.invoice_id}&id=${data.whmcs_id}`
        }
    })
}

function registerError() {
    $('body').find('.first-name-error').removeClass('d-none')
    $('body').find('.last-name-error').removeClass('d-none')
    $('body').find('.password-error').removeClass('d-none')
    $('body').find('.password-same-error').removeClass('d-none')
    $('body').find('.confirm-password-error').removeClass('d-none')
    $('body').find('.email-error').removeClass('d-none')
    $('body').find('.email-valid-error').removeClass('d-none')
    $('body').find('.phone-error').removeClass('d-none')
    $('body').find('.address-1-error').removeClass('d-none')
    $('body').find('.address-2-error').removeClass('d-none')
    $('body').find('.city-error').removeClass('d-none')
    $('body').find('.province-error').removeClass('d-none')
    $('body').find('.postcode-error').removeClass('d-none')
    $('body').find('.error-binggo-register').removeClass('d-none')
    $('body').find('.first-name-error').addClass('d-none')
    $('body').find('.last-name-error').addClass('d-none')
    $('body').find('.password-error').addClass('d-none')
    $('body').find('.password-same-error').addClass('d-none')
    $('body').find('.confirm-password-error').addClass('d-none')
    $('body').find('.email-error').addClass('d-none')
    $('body').find('.email-valid-error').addClass('d-none')
    $('body').find('.phone-error').addClass('d-none')
    $('body').find('.address-1-error').addClass('d-none')
    $('body').find('.address-2-error').addClass('d-none')
    $('body').find('.city-error').addClass('d-none')
    $('body').find('.province-error').addClass('d-none')
    $('body').find('.postcode-error').addClass('d-none')
    $('body').find('.error-binggo-register').addClass('d-none')
}

function loginHTML() {
    $('body').find('.modal-body').html(`
        <div class="form-group text-center">
            <p>Login my.binggo.co.id</p>
        </div>
        <div class="form-group">
            <label>Email</label>
            <input type="text" class="form-control" name="email" placeholder="email">
            <small class="text-danger email-error ml-2 d-none">email wajib diisi</small>
            <small class="text-danger email-valid-error ml-2 d-none">email tidak valid</small>
        </div>
        <div class="form-group">
            <label>Password</label>
            <input type="password" class="form-control" name="password" placeholder="password">
            <small class="text-danger password-error ml-2 d-none">password wajib diisi</small>
        </div>
        <div class="form-group text-center">
            <p>Belum punya akun ? silahkan <span class="text-success register-my-binggo" style="cursor:pointer;">register</span></p>
            <p class="text-danger d-none error-binggo-login">Login Tidak Berhasil</p>
        </div>
        <button class="btn btn-theme float-right btn-login-my">Login</button>
    `)
}

function validateEmail(email) {
    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(String(email).toLowerCase());
}

function numberonly() {
    var input = document.querySelector('#phone');

    input.addEventListener('input', function() {
        if(this.value.substring(0,2) == '62') {
            this.value =  this.value.replace(/[^0-9 \,]/, '');
        } else {
            this.value = '62'
        }

    });
}

</script>
@endsection