accordion('aio-accordion')
var paxformblank = document.getElementById('id-paxform-blank');
var bookingnumber = document.getElementById('id-bookingnumber');
var paxformset = document.getElementById('id-paxformset-append');
var paxformadd = document.getElementById('id-add-pax')
var paxformdel = document.getElementById('booking-info')
var paxhandler = document.getElementById('id_booking-paxhandler')
var acknowledge = document.getElementById('id_booking-acknowledge')
 
var csrf = document.getElementById('id_csrfmiddlewaretoken');
var step_next = document.getElementById('id_step_next')
var paxnumber = 0
var paxnumberid = []
var id_settlemetnproven_form_button_action = document.getElementById('id_settlemetnproven_form_button_action')

if (id_settlemetnproven_form_button_action){
    id_settlemetnproven_form_button_action.addEventListener('click', function () {

    $('#id_settlemetnproven_form_button').click();
    })
}


if (acknowledge){
    var validateForm = function(e){
        var is_valid = true
        var message = ''
        
        var paymentmethod = document.querySelector( 'input[name="paymentmethod"]:checked');  
        if (!acknowledge.checked){
            message = '已詳閱及接受所有條文'
            is_valid=false
            // alert("已詳閱及接受所有條文。");
        }
        if (paymentmethod){
            if (paymentmethod.value == '0') {
                message += '' ? '' : '和'
                message += '選擇付款方法'
                is_valid=false
            }
        }
        if (is_valid) {
            messageconfirm()
            if (step_next.dataset.check == 0){
                step_next.dataset.check = 1
            }else{
                e.preventDefault();
            }
        } else {
            alert('請確認' + message + '。');
            return false;
        }
    }
    
}

var messageconfirm = function() {
    $(".ix-confirm").modal({backdrop: "static",keyboard: false,show: true});
}
var messageuploadimage = function() {
    $(".ix-upload-image").modal({backdrop: "static",keyboard: false,show: true});
}
var formscounter = document.getElementById('id_form-TOTAL_FORMS')
if (formscounter){
paxnumber = parseInt(formscounter.value)
for(var i=0;i <formscounter.value;i++) paxnumberid.push(1)
if (paxformadd){
    paxformadd.addEventListener('click', function () {
        if (paxnumber >= 8) {
            alert('最多人數為 8!')
        } else{
            var index = parseInt(formscounter.value)
            // debugger;
            var clone = paxformblank.cloneNode(true)
            clone.id = ''
            clone.innerHTML = updatePaxBlankForm(clone.innerHTML, index, (index+1))
            paxformset.append(clone)
            formscounter.value =  parseInt(formscounter.value) + 1
            paxnumberid.push(1)
            paxhandler.value = paxnumberid
            paxnumber++
        }
    })
}}
if (paxformdel){
    paxformdel.addEventListener('click', function (e) {
        if (e.target.tagName === 'BUTTON'){
            if (paxnumber > 1){
                // alert(e.target.dataset.activeid)
                document.getElementById(e.target.dataset.paxid).remove()
                // document.getElementById(e.target.dataset.activeid).checked = false
                paxnumberid[e.target.dataset.id] = 0
                paxhandler.value = paxnumberid
                paxnumber--
            }else{
                alert('最少人數為 1!')
            }
        // var index = parseInt(formscounter.value)
        }
    })
}


function updatePaxBlankForm(str) {
    var args = [].slice.call(arguments, 1),
        i = 0;
        str = str.replace(/{}/g, () => args[0]);
        str = str.replace(/{pax}/g, () => args[1]);
    return str;
}
var booking = JSON.parse(getCookie('booking'))
if (bookingnumber){
    booking = {number:bookingnumber.dataset.bookingnumber}
    console.log('Booking Created!', booking)
    document.cookie ='booking=' + JSON.stringify(booking) + ";domain=;path=/"
}
function getCookie(name) {
    // Split cookie string and get all individual name=value pairs in an array
    var cookieArr = document.cookie.split(";");
    for(var i = 0; i < cookieArr.length; i++) {
        var cookiePair = cookieArr[i].split("=");
        if(name == cookiePair[0].trim()) {
            return decodeURIComponent(cookiePair[1]);
        }
    }
    return null;
}

var input = document.getElementById('id_settlementproven-media')
if (input){
    var dataURLToBlob = function(dataURL) {
        var BASE64_MARKER = ';base64,';
        if (dataURL.indexOf(BASE64_MARKER) == -1) {
            var parts = dataURL.split(',');
            var contentType = parts[0].split(':')[1];
            var raw = parts[1];

            return new Blob([raw], {type: contentType});
        }

        var parts = dataURL.split(BASE64_MARKER);
        var contentType = parts[0].split(':')[1];
        var raw = window.atob(parts[1]);
        var rawLength = raw.length;

        var uInt8Array = new Uint8Array(rawLength);

        for (var i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
        }

        return new Blob([uInt8Array], {type: contentType});
    }
    input.addEventListener('change', function(e){
        if (this.files && this.files[0]) {
            var i;
            for (i = 0; i < input.files.length; ++i) {
              var reader = new FileReader();
              reader.onload = function (readerEvent) {
                    var image = new Image();
                    image.onload = function (imageEvent) {

                        // Resize the image
                        var canvas = document.createElement('canvas'),
                            max_size = 544,// TODO : pull max size from a site config
                            width = image.width,
                            height = image.height;
                        if (width > height) {
                            if (width > max_size) {
                                height *= max_size / width;
                                width = max_size;
                            }
                        } else {
                            if (height > max_size) {
                                width *= max_size / height;
                                height = max_size;
                            }
                        }
                        canvas.width = width;
                        canvas.height = height;
                        canvas.getContext('2d').drawImage(image, 0, 0, width, height);
                        var dataUrl = canvas.toDataURL('image/jpeg');
                        var resizedImage = dataURLToBlob(dataUrl);
                        $.event.trigger({
                            type: "imageResized",
                            blob: resizedImage,
                            url: dataUrl
                        });
                        // $('#id-image-preview').append('<img src="'+dataUrl+'">');
                        $('#id-upload-image').append('<img src="'+dataUrl+'">');
                        messageuploadimage();
                    }
                    image.src = readerEvent.target.result;
                    
              }
              reader.readAsDataURL(this.files[i]);
            }
        }
    })
}
var api_post = function(context, fn){
    var url = context.url
    fetch(url, {
        method:'POST',
        headers:{
            'Content-Type':'application/json',
            'X-CSRFToken': csrf.value,
        }, 
        body:JSON.stringify(context)
    })
    .then((response) => {
        return response.json();
    })
    .then((data) => {fn(data)});
}