{% from "bootstrap_wtf.html" import horizontal_field as ff %}
{% from "bootstrap_wtf.html" import form_errors as form_errors %}

    {% if order_extend_form %}
    <div id="dialog-extend-order-confirm">
        <form method="POST" action="" enctype="multipart/form-data" class="form form-horizontal" id="order-extend-form">
            {{ order_extend_form.extend_order_id }}
            {{ order_extend_form.extend_days }}
            {{ order_extend_form.extend_order_slide_count }}
            {{ order_extend_form.extend_user_slide_count }}
            {{ order_extend_form.extend_user_slide_multiplier }}
            Are you sure you want to increase the online time of the slides for order <strong><span id="extend-order-id"></span></strong>?<br/><br/>
            Extending the online time for all <strong><span id="extend-slide-count">0</span></strong> slides of this order will cost an additional
            <nobr>$<span class="restore-cost" id="extend-cost">0.00</span></nobr><br/>
        </form>
    </div>
    <script type="text/javascript">
        function update_extend_cost() {
            var days_dd = parseInt($("#extend_days").val());
            var order_slide_count = parseInt($("#extend_order_slide_count").val());
            var user_slide_count = parseInt($("#extend_user_slide_count").val());
            var user_slide_mult = parseFloat($("#extend_user_slide_multiplier").val());
            
            $("#extend-slide-count").html(order_slide_count);

            var s3_cost = (Math.round(parseInt(days_dd)/30.0) * 0.14 * parseInt(order_slide_count));
            $("#extend-cost").html(parseFloat(s3_cost * user_slide_mult).toFixed(2));
        }

        $(document).on('change', "#extend_days", function(event){
            update_extend_cost();
        });

        $(document).on('click', "#order-extend-btn", function(event){
            event.preventDefault();
            
            var order_id = $(this).attr("data-order-id");
            $("#extend-order-id").html(order_id);

            var order_slide_count = $(this).attr("data-order-slide-count");
            $("#extend_order_slide_count").val(order_slide_count);
            
            $("#dialog-extend-order-confirm").dialog("open");
            
            update_extend_cost();
        });

        function init_extend_order_dialog() {
            // Define the Dialog and its properties.
            $("#dialog-extend-order-confirm").dialog({
                resizable: false,
                autoOpen: false,
                modal: true,
                title: "Extend Online Time of Order",
                height: 350,
                width: Math.min(550, $(window).width()),
                maxWidth: $(document).width(),
                responsive: true, // jQuery-UI-Dialog-extended-1.0
                buttons: {
                    "Yes": function () {
                        $(this).dialog('close');
                        var formData = new FormData(document.getElementById('order-extend-form'));

                        $.ajax({
                            type: "POST",
                            url: "/orders/extend-order",
                            enctype: 'multipart/form-data',
                            data: formData,
                            processData: false,  // tell jQuery not to process the data
                            contentType: false   // tell jQuery not to set contentType
                        }).done(function(data) {
                            if (data == 'Success') {
                                alert("Order expiration extended!");
                            }
                            else {
                                alert("Problem extending your order. Please contact the system administrator.");
                            }
                        });
                    },
                    "No": function () {
                        $(this).dialog('close');
                    }
                }
            });
        }
        </script>
    {% endif %}

    {% if slide_restore_form %}
    <div id="dialog-restore-slide-confirm">
        <form method="POST" action="" enctype="multipart/form-data" class="form form-horizontal" id="slide-restore-form">        
            {{ slide_restore_form.slide_id }}
            {{ slide_restore_form.s_user_slide_count }}
            {{ slide_restore_form.s_user_slide_multiplier }}
            {{ ff(slide_restore_form.s_restore_days) }}
            Are you sure you want to restore<br/><strong><span id="slide-name"></span></strong>?<br/><br/>
            {% if not is_admin() %}
            Retaining this slide for the selected period will cost
            <nobr>$<span class="restore-cost" id="restore-cost">0.14</span>/slide</nobr> restored<br/>
            {% endif %}
        </form>
    </div>
    <script type="text/javascript">
        function update_slide_cost() {
            var days_dd = parseInt($("#s_restore_days").val());
            var user_slide_count = parseInt($("#s_user_slide_count").val());
            var user_slide_mult = parseFloat($("#s_user_slide_multiplier").val());
            var s3_cost = Math.round((parseInt(days_dd)/30.0)) * 0.14;
            $("#restore-cost").html(parseFloat(s3_cost * user_slide_mult).toFixed(2));
        }

        $(document).on('change', "#s_restore_days", function(event){
            update_slide_cost();

            //var gl_cost = (parseInt($(this).val())/30.0) * 0.02;
            //$("#archive-cost").html(parseFloat(gl_cost * user_slide_mult + 0.01).toFixed(2));
        });

        $(document).on('click', ".slide-restore-btn", function(event){
            event.preventDefault();
            
            var mult = $(this).attr("data-multiplier");
        
            if (mult.length > 0) {
                $("#s_user_slide_multiplier").val(mult);
            }
            
            var slide_id = $(this).attr("data-slide-id");
            $("#slide_id").val(slide_id);
            var slide_name = $(this).attr("data-slide-name");
            $("#slide-name").html(slide_name);
            $("#dialog-restore-slide-confirm").dialog("open");
            
            update_slide_cost();
        });

        function init_slide_restore_dialog() {
            // Define the Dialog and its properties.
            $("#dialog-restore-slide-confirm").dialog({
                resizable: false,
                autoOpen: false,
                modal: true,
                title: "Restore Slide from Archive",
                height: 350,
                width: Math.min(550, $(window).width()),
                maxWidth: $(document).width(),
                responsive: true, // jQuery-UI-Dialog-extended-1.0
                buttons: {
                    "Yes": function () {
                        $(this).dialog('close');
                        var formData = new FormData(document.getElementById('slide-restore-form'));
                        $.ajax({
                            type: "POST",
                            url: "/slides/restore",
                            enctype: 'multipart/form-data',
                            data: formData,
                            processData: false,  // tell jQuery not to process the data
                            contentType: false   // tell jQuery not to set contentType
                        })
                        .then(function(data, textStatus, jqXHR) {
                            if (data !== 'Success') {
                                return $.Deferred().reject(jqXHR, textStatus, e);
                            }
                        }).done(function() {
                            alert("Restoration initiated!");
                        }).fail(function(jqXHR, textStatus, errorThrown) {
                            console.error('fail', jqXHR, textStatus, errorThrown);
                            alert("Problem restoring your slide. Please contact the system administrator.");
                        });
                    },
                    "No": function () {
                        $(this).dialog('close');
                    }
                }
            });
        }
    </script>
    {% endif %}

    {% if order_restore_form %}
    <div id="dialog-restore-order-slides-confirm">
        <form method="POST" action="" enctype="multipart/form-data" class="form form-horizontal" id="order-slides-restore-form">        
            {{ order_restore_form.order_id }}
            {{ order_restore_form.order_slide_count }}
            {{ order_restore_form.o_user_slide_count }}
            {{ order_restore_form.o_user_slide_multiplier }}
            {{ ff(order_restore_form.o_restore_days) }}
            Are you sure you want to restore<br/><strong>Order <span id="order-id"></span> (<span id="order-slides"></span> slides)</strong>?<br/><br/>
            Retaining the slides in this order for the selected period will cost
            <nobr>$<span class="per-slide-restore-cost" id="per-slide-restore-cost">0.14</span>/slide</nobr> restored,
            totalling $<span class="order-restore-cost" id="order-restore-cost">0.00</span> for this order.<br/>
        </form>
    </div>
    <script type="text/javascript">
        
        function update_order_cost() {
            var days_dd = parseInt($("#o_restore_days").val());
            var order_slide_count = parseInt($("#order_slide_count").val());
            var user_slide_count = parseInt($("#o_user_slide_count").val());
            var user_slide_mult = parseFloat($("#o_user_slide_multiplier").val());
            var s3_cost = Math.round((parseInt(days_dd)/30.0)) * 0.14;
            $("#per-slide-restore-cost").html(parseFloat(s3_cost * user_slide_mult).toFixed(2));
            $("#order-restore-cost").html(parseFloat(order_slide_count * (s3_cost * user_slide_mult)).toFixed(2));
        }
        
        $(document).on('change', "#o_restore_days", function(event){
            update_order_cost();
        });
        
        $(document).on('click', "#order-restore-btn", function(event){
            event.preventDefault();
            var order_id = $(this).attr("data-order-id");
            $("#order_id").val(order_id);
            $("#order-id").html(order_id);
            var slide_count = $(this).attr("data-order-slide-count");
            $("#order-slides").html(slide_count);
            $("#order_slide_count").val(slide_count);
            $("#dialog-restore-order-slides-confirm").dialog("open");
            
            update_order_cost();
        });
        
        function init_order_restore_dialog() {
            // Define the Dialog and its properties.
            $("#dialog-restore-order-slides-confirm").dialog({
                resizable: false,
                autoOpen: false,
                modal: true,
                title: "Restore Order Slides from Archive",
                height: 350,
                width: Math.min(550, $(window).width()),
                maxWidth: $(document).width(),
                responsive: true, // jQuery-UI-Dialog-extended-1.0
                buttons: {
                    "Yes": function () {
                        $(this).dialog('close');
                        var formData = new FormData(document.getElementById('order-slides-restore-form'));

                        $.ajax({
                            type: "POST",
                            url: "/orders/restore-slides",
                            enctype: 'multipart/form-data',
                            data: formData,
                            processData: false,  // tell jQuery not to process the data
                            contentType: false   // tell jQuery not to set contentType
                        }).done(function(data) {
                            if (data == 'Success') {
                                alert("Restore initiated!");
                            }
                            else {
                                alert("Problem restoring your order. Please contact the system administrator.");
                            }
                        });
                    },
                    "No": function () {
                        $(this).dialog('close');
                    }
                }
            });
        }        
    </script>
    {% endif %}