<%@ Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeBehind="ContainerDetail.aspx.cs" Inherits="TruxWebPortal.OnlineBin.ContainerDetail" %>

<%@ Register TagPrefix="ucHeader" TagName="truxHeader" Src="../header.ascx" %>
<%@ Register TagPrefix="ucHeader2" TagName="truxHeader2" Src="../header2.ascx" %>
<%@ Register TagPrefix="ucFooter" TagName="truxFooter" Src="../footer.ascx" %>
<%@ PreviousPageType TypeName="TruxWebPortal.TruxBasePage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="HeadLogin" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Container Detail</title>
    <link rel="stylesheet" type="text/css" href="../_style/stylesheet.css" title="TRUX7" />
    <link rel="Stylesheet" href="../_style/css/jquery-ui-1.8.24.custom.css" />
    <script src="../Services.js" type="text/javascript"></script>
    <script src="../js/jquery/jquery-1.11.2.min.js" type="text/javascript"> </script>
    <script src="../js/jqueryUI/jquery-ui.min.js" type="text/javascript"> </script>
    <script type="text/javascript">
        
        var noServiceDates = [<%= _noServiceDates %>];

        function PickUpDate_ClientValidate(sender, e) {
            var valid = true;
            var dropOffDate = $('#txtDropOffDate').datepicker("getDate");
            var pickUpDateDate = $('#txtPickUpDate').datepicker("getDate");

            var firstDate = dropOffDate;
            firstDate.setDate(firstDate.getDate() + 1);

            while (firstDate < pickUpDateDate) {
                if (noServiceDates.indexOf(jQuery.datepicker.formatDate('yy-mm-dd', firstDate)) >=0) {
                    valid = false;
                }
                firstDate.setDate(firstDate.getDate() + 1);
            }
            e.IsValid = valid;
        }

        function InitializeRequest(sender, args) {
            document.getElementById("<%= btnCheckout.ClientID %>").disabled = true;
        }

        function EndRequest(sender, args) {
            document.getElementById("<%= btnCheckout.ClientID %>").disabled = false;
        }

        $(document).ready(function () {

            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_initializeRequest(InitializeRequest);
            prm.add_endRequest(EndRequest);


            $('#txtDropOffDate').datepicker({
                changeMonth: true,
                changeYear: true,
                minDate: 0,
                maxDate: "+1y",
                dateFormat: "yy-mm-dd",
                beforeShowDay: function(date) {
                    var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                    return [noServiceDates.indexOf(string) === -1];
                }
            }).attr('readonly', 'readonly');

            $('#txtPickUpDate').datepicker({
                changeMonth: true,
                changeYear: true,
                minDate: 0,
                maxDate: "+1y",
                dateFormat: "yy-mm-dd",
                beforeShowDay: function (date) {
                    var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                    return [noServiceDates.indexOf(string) === -1];
                }
            }).attr('readonly', 'readonly');

            /*
            $('.containerImages').click(function () {
                var primaryImage = $('#primaryImage').attr('src');
                $('#primaryImage').attr('src', $(this).attr('src'));
                $(this).attr('src', primaryImage);
            });
            */

            $('.containerImages').click(function () {
                //var primaryImage = $('#primaryImageContainer').css('background-image').slice(5,-2);
                $('#primaryImageContainer').css('background-image', 'url(' + $(this).attr('src') + ')');
                //$(this).attr('src', primaryImage);
            });
        });

    </script>
    
    <script type="text/javascript">

        function DisableButton() {
            document.getElementById("<%= btnCheckout.ClientID %>").disabled = true;
        }

        window.onbeforeunload = DisableButton;
    </script>

</head>
<body>
    <form id="frmLogin" runat="server" autocomplete="off">
        <asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
        <% 
        if (!string.IsNullOrWhiteSpace(sCompanyCode))
        {
        %>
            <ucHeader:truxHeader ID="Hdr1" runat="server" />
        <%
        }
        else
        { 
        %>
            <ucHeader2:truxHeader2 ID="Hdr2" runat="server" />
        <%
        }
        %>

        <div id="main_area">
            <div id="work_area">
                <div style="width: 100%; position:relative">
                    <asp:Label ID="lblAddress" CssClass="headerLabel topRight" runat="server"></asp:Label>
                </div>
                <h1>
                    <asp:Label ID="lblContainerTypeAndSize" runat="server"></asp:Label>
                </h1>
                <p class="description" style="margin-bottom: 20px">
                    <span id="Span19">
                        <asp:Label ID="lblDesc" runat="server"></asp:Label>
                    </span>
                </p>
                <div style="display: flex; flex-direction: row">
                    <div style="display: flex; flex-direction: column; width: 460px;">
                        <div id="primaryImageContainer" runat="server" style="padding-left: 10px; height: 440px; padding-right: 10px;background-image: url('../_images/no-photo.png');background-size: contain; background-position:top;background-repeat: no-repeat;">
                          <!--  <img id="primaryImage" runat="server" style="display: block; margin: auto; max-height: 100%; max-width: 100%; width: auto; height: auto;"  src="../_images/no-photo.png" /> -->
                        </div>
                        <div id="imagesContainer" runat="server" style="display: flex; flex-direction: row; padding: 5px">
                            <asp:Repeater ID="imageRepeater" runat="server">
                                <ItemTemplate>
                                    <div style="margin: 5px">

                                        <img class="containerImages" style="max-height: 100px; max-width: 100%" src='<%# string.Format("data:image/{0};base64,{1}", System.IO.Path.GetExtension(Eval("CD16IMG_NAME").ToString()).Replace(".",""), Eval("CD16IMG_BASE64"))  %>' />
                                    </div>
                                </ItemTemplate>
                            </asp:Repeater>
                        </div>
                    </div>


                    <div style="width: 50%; padding-left: 10px">
                        <p class="frm_error_lbl">
                            <asp:Label class="label" ID="lblCreditLimit" runat="server" ForeColor="Red"></asp:Label>
                        </p>
                        <asp:ValidationSummary ForeColor="red" ID="ValidationSummary1" runat="server" />
                        <div class="auto_width" style="width: 100%;">
                            <div class="title_bar_blk">
                                Your Order
                            </div>
                            <table class="tableForm" style="width: 100%">
                                <tr>
                                    <td>
                                        <label>
                                            <asp:RequiredFieldValidator  ForeColor="Red" ID="rfvDropOffDate" ControlToValidate="txtDropOffDate" runat="server" ErrorMessage="">*</asp:RequiredFieldValidator>Drop Off Date:</label></td>
                                    <td>
                                        <asp:TextBox ID="txtDropOffDate" AutoPostBack="True" placeholder="Select Your Date" runat="server" Style="box-sizing: border-box; width: 100%;" MaxLength="40" class="textfield" OnTextChanged="txtDropOffDate_TextChanged" CausesValidation="True"></asp:TextBox></td>
                                    <td>
                                        <asp:DropDownList ID="ddlDropOffAction" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlDropOffAction_SelectedIndexChanged" CausesValidation="True"></asp:DropDownList></td>
                                </tr>
                                <tr>
                                    <td>
                                        <label>
                                            <asp:CustomValidator Display="Dynamic" runat="server" ForeColor="Red" ID="cvPickUpDate" EnableClientScript="true" ClientValidationFunction="PickUpDate_ClientValidate" ErrorMessage="The bin is not available in the selected date range">*</asp:CustomValidator><asp:CompareValidator Display="Dynamic" ForeColor="Red" ControlToCompare="txtDropOffDate" ControlToValidate="txtPickUpDate" Operator="GreaterThanEqual" CultureInvariantValues="true" ID="cvDate" runat="server" Type="Date" ErrorMessage="">*</asp:CompareValidator><asp:RequiredFieldValidator  Display="Dynamic" ForeColor="Red" ID="rfvPickUpDate" ControlToValidate="txtPickUpDate" runat="server" ErrorMessage="">*</asp:RequiredFieldValidator>Pick Up Date:
                                        </label></td>
                                    <td>
                                        <asp:TextBox ID="txtPickUpDate" AutoPostBack="True" placeholder="Select Your Date" runat="server" Style="box-sizing: border-box; width: 100%;" MaxLength="40" class="textfield" OnTextChanged="txtPickUpDate_TextChanged" CausesValidation="True"></asp:TextBox></td>
                                    <td>
                                        <asp:DropDownList ID="ddlPickUpAction" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlPickUpAction_SelectedIndexChanged" CausesValidation="True"></asp:DropDownList></td>
                                </tr>
                                <tr>
                                    <td>Qty: 1</td>
                                    <td>
                                        <asp:UpdatePanel ID="upMaterial" runat="server" UpdateMode="Conditional">
                                            <ContentTemplate>
                                        <asp:Label ID="lblMaterialCap" runat="server" Text=""></asp:Label>
                                                </ContentTemplate>
                                               <Triggers>
                                    <asp:AsyncPostBackTrigger ControlID="ddlMaterial" />

                                </Triggers>
                                        </asp:UpdatePanel>
                                    </td>
                                    <td>
                                        <asp:DropDownList ID="ddlMaterial" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddlMaterial_SelectedIndexChanged"></asp:DropDownList></td>
                                </tr>
                            </table>
                        </div>
                        <div class="full_width" style="width: 100%;">
                            <div class="title_bar_blk">
                                Payment Summary
                            </div>

                            <asp:Label ID="lblBinSummary" runat="server" Text=""></asp:Label>
                            <asp:UpdatePanel ID="upPaymentSummary" runat="server" UpdateMode="Conditional">
                                <ContentTemplate>
                                    <asp:GridView Style="margin-left: auto; margin-right: 10px; min-width: 50%" ID="gvPaymentSummary" runat="server" AutoGenerateColumns="False" GridLines="None" ShowFooter="True" ShowHeader="False" OnRowDataBound="gvPaymentSummary_RowDataBound" OnDataBinding="gvPaymentSummary_DataBinding">
                                        <Columns>
                                            <asp:TemplateField>
                                                <ItemTemplate>
                                                    <%# Eval("Desc") %>:
                                                </ItemTemplate>
                                                <FooterTemplate>
                                                    Total:
                                                </FooterTemplate>
                                            </asp:TemplateField>
                                            <asp:TemplateField>
                                                <ItemTemplate>
                                                    <%# string.Format("{0:C2}", Eval("AMOUNT")) %>
                                                </ItemTemplate>
                                                <FooterTemplate>
                                                    <%#  string.Format("{0:C2}",_summaryTotal)  %>
                                                </FooterTemplate>
                                                <ItemStyle HorizontalAlign="Right" />
                                                <FooterStyle HorizontalAlign="Right" />
                                            </asp:TemplateField>

                                        </Columns>

                                        <FooterStyle CssClass="bottomBorder" />

                                    </asp:GridView>
                                </ContentTemplate>
                                <Triggers>
                                    <asp:AsyncPostBackTrigger ControlID="ddlDropOffAction" />
                                    <asp:AsyncPostBackTrigger ControlID="ddlPickUpAction" />
                                    <asp:AsyncPostBackTrigger ControlID="txtDropOffDate" />
                                    <asp:AsyncPostBackTrigger ControlID="txtPickUpDate" />
                                </Triggers>
                            </asp:UpdatePanel>

                            <asp:Button ID="btnCheckout" runat="server" Text="Checkout" CssClass="default_button" Style="display: block; margin: 10px 10px 0px auto" OnClick="btnCheckout_Click" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>
