@using SitefinityWebApp.Mvc.Views.FormsA.Resources

@using SitefinityWebApp.Helper.Controls

<div class="amx-sn-content">
    <section class="amx-section">

        <div class="amx-container">
            <!-- Main Content -->
            <div class="amx-small-block-4-4 amx-medium-block-8-8 amx-large-block-12-12">

                <!-- Native Forms -->
                <div class="amx-small-block-4-4 amx-medium-block-8-8 amx-large-span-12-12">
                    <div class="amx-module amx-md-panel amx-mr-form-panel">
                        <div class="content--header">
                            <span class="panel-bar"></span>
                            <h2 class="header">
                                @FormA.NativeForms
                            </h2>
                        </div>
                        <div class="content--body">
                            @using (Html.BeginForm("SaveFormsA", "FormsA", FormMethod.Post, new { @class = "amx-md-form", @data_module_name = "amx-form-validation" }))
                            {

                                <div class="amx-form-entry-container" data-validation="isRequired" data-validation-error="Field is required">
                                    <label for="regular"><strong class="amx-h-font-highlighted">FF01 : </strong> @FormA.InputText</label>
                                    @Html.AramexTextBox("Name", "text", "", "")
                                </div>

                                <div class="amx-form-entry-container" data-validation="isNumeric" data-validation-error="Field is required">
                                    <label for="regular"><strong class="amx-h-font-highlighted">FF02 : </strong> @FormA.InputNumber</label>
                                    @Html.AramexTextBox("Number", "number", "", "")
                                </div>

                                <div class="amx-form-entry-container" data-validation="isEmail" data-validation-error="Field is required">
                                    <label for="regular"><strong class="amx-h-font-highlighted">FF03 : </strong> @FormA.InputEmail</label>
                                    @Html.AramexTextBox("Email", "email", "", "")
                                </div>

                                <div class="amx-form-entry-container" data-validation="isRequired" data-validation-error="Field is required">
                                    <label for="regular"><strong class="amx-h-font-highlighted">FF04 : </strong> @FormA.Password </label>
                                    @Html.AramexTextBox("Password", "password", "", "")
                                </div>

                                <div class="amx-form-entry-container" data-validation="isRequired" data-validation-error="Field is required">
                                    <label for="regular"><strong class="amx-h-font-highlighted">FF05 : </strong> @FormA.ConfirmPassword</label>
                                    @Html.AramexTextBox("Re-Password", "password", "", "")
                                </div>

                                <div class="amx-form-entry-container amx-md-custom-checkbox" data-validation="isChecked" data-validation-error="Field is required">
                                    <label for="regular"><strong class="amx-h-font-highlighted">FF06 : </strong> @FormA.Checkbox </label>

                                    @Html.AramexCheckBox("Chk-1", "Yes", "Chk-2", "No")

                                </div>
                                var ddList = new List<DropdownListData> { new DropdownListData{Text="Select", Value="0", IsSelected=true},
                                                 new DropdownListData{Text="One", Value="1", IsSelected=false},
                                                 new DropdownListData{Text="Two", Value="2", IsSelected=false},
                                                 new DropdownListData{Text="Three", Value="3", IsSelected=false},
                                                 new DropdownListData{Text="Four", Value="4", IsSelected=false}
                                    };
                                    <div class="amx-form-entry-container" data-validation="isRequired" data-validation-error="Field is required">
                                        <label for="select-box"><strong class="amx-h-font-highlighted">FF07 : </strong> @FormA.DropdownSelect </label>
                                        @Html.AramexDropDownList("form-entry-select-name", "form-entry-select-name", ddList)
                                    </div>

                                    <div class="amx-form-entry-container" data-validation="isAutoComplete" data-validation-error="Please enter a valid country">
                                        <label for="from-country"><strong class="amx-h-font-highlighted">FF08 : </strong>@FormA.AutocompleteCountry</label>
                                        <div class="amx-form-entry-wrapper">
                                            @Html.AramexAutopopulateCountry("Country")
                                            <div class="amx-form-input-icon amx-i-search-country"></div>
                                        </div>
                                    </div>

                                    <div class="amx-form-entry-container" data-validation="isRequired" data-validation-error="Field is required">
                                        <label for="select-box"><strong class="amx-h-font-highlighted">FF09 : </strong> @FormA.Commentbox </label>
                                        @Html.AramexTextAria("CommentBox", 8, 40, "")
                                    </div>

                                    <label for=""><strong class="amx-h-font-highlighted">BTN01</strong></label>
                                    <div class="amx-cp-btn-holder">
                                        @{string SubmitText = FormA.Submit;
                                        string ResetText = FormA.Reset;
                                        }
                                        @Html.AramexButton("submit", "amx-cp-btn", SubmitText)
                                    </div>

                                    <label for=""><strong class="amx-h-font-highlighted">BTN02</strong></label>
                                    <div class="amx-cp-btn-holder">
                                        @Html.AramexButton("reset", "amx-cp-btn amx-mr-secondary", ResetText)
                                    </div>

                            }
                        </div>
                    </div>
                </div>
                <!-- /Native Forms -->
                <!-- Form Modules -->
                <div class="amx-small-block-4-4 amx-medium-block-8-8 amx-large-span-12-12">
                    <div class="amx-module amx-md-panel amx-mr-form-panel">

                        <div class="content--header">
                            <span class="panel-bar"></span>
                            <h2 class="header">@FormA.FormModules</h2>
                        </div>

                        <div class="content--body">

                            <form class="amx-md-form" data-module-name="amx-form-validation">

                                @{
                                    var ddlUnitLsit = new List<DropdownListData> { new DropdownListData { Text = "Kg", Value = "0", IsSelected = false }
                                                                               , new DropdownListData{ Text="Lbs", Value="0", IsSelected=false}
                                                                               , new DropdownListData{ Text="gm", Value="0", IsSelected=false}};
                                }

                                <div class="amx-form-entry-container -short-inputs" data-validation="isNumeric" data-validation-error="Field is required">
                                    <label for="inputSelect"> <strong class="amx-h-font-highlighted">FF10 : </strong>@FormA.InputSelect </label>
                                    @Html.AramexInputSelect("UnitValue", "Unit", ddlUnitLsit)
                                </div>
                                <br>
                                <div class="amx-form-entry-container" data-validation="isDate" data-validation-error="Field is required">
                                    <label for="datepicker"> <strong class="amx-h-font-highlighted">FF11 : </strong>@FormA.Datepicker </label>
                                    @Html.AramexDatePicker("dtDate")
                                </div>
                                <br>
                                <div class="amx-form-entry-container" data-validation="isDate" data-validation-error="Field is required">
                                    <label for="datepicker"> <strong class="amx-h-font-highlighted">FF12 : </strong>@FormA.DateTimepicker </label>
                                    @Html.AramexDateTimePicker("date-picker12312", "time-pickeradfasdfsd")

                                    @*<div class="amx-cp-date-time-picker amx-mr-date-time" data-module-name="amx-form-datepicker" data-date-picker="input[name='date-picker']" data-time-picker="input[name='time-picker']">
                                            <div class="date--picker">
                                                <input type="text" data-default-date="2013-01-08" name="date-picker">
                                                <button type="button" class="datepicker-button"><i class="amx-i-datepicker-icon"></i></button>
                                            </div>

                                            <div class="time--picker">
                                                <input type="text" class="time--picker-input" name="time-picker">
                                                <button type="button" class="timepicker-button"><i class="amx-i-caret-down"></i></button>
                                            </div>
                                        </div>*@

                                </div>
                                <br>
                                <!-- date range picker -->
                                <div data-module-name="amx-form-date-range-picker" data-date-from="[data-start-date]" data-date-to="[data-end-date]">
                                    <div class="amx-form-entry-container" data-validation="isDate" data-validation-error="Field is required">
                                        <label for="datepicker"> <strong class="amx-h-font-highlighted">FF13 : </strong>@FormA.Daterangepicker </label>
                                        <label for="field Id">@FormA.StartDate</label>
                                        @Html.AramexStartDateRangePicker("pickup-start-date", "pickup-start-time")

                                        @*<div class="amx-cp-date-time-picker amx-mr-date-time start-date" data-start-date data-module-name="amx-form-datepicker"
                                                 data-date-picker="input[name='pickup-start-date']" data-time-picker="input[name='pickup-start-time']">
                                                <div class="date--picker">
                                                    <input type="text" name="pickup-start-date">
                                                    <button type="button" class="datepicker-button"><i class="amx-i-datepicker-icon"></i></button>
                                                </div>
                                                <div class="time--picker">
                                                    <input type="text" class="time--picker-input" name="pickup-start-time" data-default-time="9:00am">
                                                    <button type="button" class="timepicker-button"><i class="amx-i-caret-down"></i></button>
                                                </div>
                                            </div>*@

                                    </div>
                                    <div class="amx-form-entry-container" data-validation="isDate" data-validation-error="Field is required">
                                        <label for="field Id">@FormA.EndDate</label>
                                        @Html.AramexStartDateRangePicker("pickup-end-date", "pickup-end-time")

                                        @*<div class="amx-cp-date-time-picker amx-mr-date-time end-date" data-end-date data-module-name="amx-form-datepicker" data-date-picker="input[name='pickup-end-date']" data-time-picker="input[name='pickup-end-time']">
                                                <div class="date--picker">
                                                    <input type="text" name="pickup-end-date">
                                                    <button type="button" class="datepicker-button"><i class="amx-i-datepicker-icon"></i></button>
                                                </div>
                                                <div class="time--picker">
                                                    <input type="text" class="time--picker-input" name="pickup-end-time">
                                                    <button type="button" class="timepicker-button"><i class="amx-i-caret-down"></i></button>
                                                </div>
                                            </div>*@
                                    </div>
                                </div>
                                <!-- // date range picker -->

                                <div class="amx-form-entry-container amx-cp-tab-btn">
                                    <label for="radio"> <strong class="amx-h-font-highlighted">FF14 : </strong>@FormA.Radio   </label>
                                    <div class="amx-cp-btn-group btn-group btn-group-justified amx-mr-full" data-toggle="buttons">


                                        @Html.AramexRadio("radio12", "active", "checked", FormA.RadioOne)
                                        @*<label class="amx-radio-inline btn btn-default active">
                                                <input type="radio" value="Radio One" checked="checked">
                                                Radio One
                                            </label>*@
                                        @Html.AramexRadio("radio2", "", "", FormA.RadioTwo)
                                        @*<label class="amx-radio-inline btn btn-default">
                                                <input type="radio" value="Radio Two">
                                                Radio Two
                                            </label>*@
                                    </div>
                                </div>

                                <div class="amx-form-entry-container" data-validation="isChecked" data-validation-target="input[name='what']" data-validation-trigger="[class='custom-radio-button']">
                                    <label for="radio"> <strong class="amx-h-font-highlighted">FF15 : </strong>Radio   </label>

                                    <div class="amx-module amx-md-custom-radios amx-h-equal-height amx-form-entry-container" data-module-name="amx-equal-height-children" data-force-height="true">

                                        <!-- Option One -->
                                        <div class="amx-md-panel amx-md-panel-rounded amx-small-span-4-4 amx-medium-span-4-8 amx-large-span-4-8">

                                            @Html.AramexRadioDP("rdgrp", "Radio tree", FormA.RadioOneTitle, FormA.RadioOneSubtitle, "")

                                            @*<label>
                                                    <!-- Radio -->
                                                    <input type="radio" name="what" value="Radio One">
                                                    <!-- /Radio -->
                                                    <!-- Custom Radio HTML -->
                                                    <div class="custom-radio-button">
                                                        <div class="icon-status"></div>
                                                        <div class="amx-cp-icon-holder">
                                                            <i class="amx-i-shipping-rates-document"></i>
                                                        </div>
                                                        <div class="text-container">
                                                            <p class="title">
                                                                Document
                                                            </p>
                                                            <p class="subtitle">
                                                                Documents and printed matter.
                                                            </p>
                                                        </div>
                                                    </div>
                                                    <!-- /Custom Radio HTML -->
                                                </label>*@

                                        </div>
                                        <!-- /Option One -->
                                        <!-- Option Two -->
                                        <div class="amx-md-panel amx-md-panel-rounded amx-small-span-4-4 amx-medium-span-4-8 amx-large-span-4-8">

                                            @Html.AramexRadioDP("rdgrp", "Radio four", FormA.RadioTwoTitle, FormA.RadioTwoSubtitle, "")
                                            @*<label>

                                                    <!-- Radio -->
                                                    <input type="radio" name="what" value="Radio Two">
                                                    <!-- /Radio -->
                                                    <!-- Custom Radio HTML -->
                                                    <div class="custom-radio-button">
                                                        <div class="icon-status"></div>
                                                        <div class="amx-cp-icon-holder">
                                                            <i class="amx-i-shipping-rates-parcel"></i>
                                                        </div>
                                                        <div class="text-container">
                                                            <p class="title">
                                                                Parcel
                                                            </p>
                                                            <p class="subtitle">
                                                                Package, packet, box, and other objects.
                                                            </p>
                                                        </div>
                                                    </div>
                                                    <!-- /Custom Radio HTML -->
                                                </label>*@

                                        </div>
                                        <!-- /Option Two -->

                                    </div>
                                </div>

                                <!-- address locator module -->
                                <div class="amx-form-entry-container">
                                    <label for="addressLocator"> <strong class="amx-h-font-highlighted">FF16 : </strong>@FormA.AddressLocator   </label>
                                </div>

                                <div class="amx-form-entry-container" data-module-name="amx-address-locator" data-validation="isValidAddress">

                                    <div class="amx-form-entry-container">
                                        <label for="country">Country</label>
                                        <input name="country" type="text" placeholder="Start typing your country"
                                               data-module-name="amx-form-autocomplete"
                                               data-form-type="country"
                                               data-external-source="http://ws.dev.aramex.net:80/aramexdotcomapi/countries"
                                               data-form-heading="3">

                                        <span class="amx-cp-loader amx-mr-form-loader">@FormA.Loading</span>
                                    </div>

                                    <div class="amx-form-entry-container">
                                        <label for="zip">Zip</label>
                                        <input name="zip" type="text" placeholder="Zip code / Postal code"
                                               data-module-name="amx-form-autocomplete"
                                               data-form-type="zip"
                                               data-external-source="http://ws.sandbox.aramex.net:80/aramexdotcomapi/postcodes/">

                                        <span class="amx-cp-loader amx-mr-form-loader">@FormA.Loading</span>
                                    </div>

                                    <div class="amx-form-entry-container">
                                        <label for="state">State</label>
                                        <input name="state" type="text" placeholder="Start typing your state"
                                               data-module-name="amx-form-autocomplete"
                                               data-form-type="state"
                                               data-external-source="http://ws.dev.aramex.net:80/aramexdotcomapi/states/"
                                               data-form-heading="2">

                                        <span class="amx-cp-loader amx-mr-form-loader">@FormA.Loading</span>
                                    </div>

                                    <div class="amx-form-entry-container">
                                        <label for="city">City</label>
                                        <input name="city" type="text"
                                               data-module-name="amx-form-autocomplete"
                                               data-form-type="city"
                                               data-external-source="http://ws.dev.aramex.net:80/aramexdotcomapi/cities/"
                                               data-form-heading="1">

                                        <span class="amx-cp-loader amx-mr-form-loader">@FormA.Loading</span>
                                    </div>

                                    <!-- <div class="amx-form-entry-container">
                                      <label for="contacts">contact number</label>
                                      <input name="contact" type="text">
                                    </div> -->

                                </div>

                                <!-- // address locator module -->

                            </form>

                            <!-- tracking module wrapper -->
                            <div class="amx-md-tracking">
                                <div class="amx-form-entry-container">
                                    <label for="tracking-form"> <strong class="amx-h-font-highlighted">FF17 : </strong>@FormA.TrackingFormModule </label>
                                </div>

                                <form name="frm-tracker" class="amx-md-form" data-module-name="amx-tracking" data-placeholder="Type your tracking number"
                                      data-module-type="widget"
                                      data-required="true" data-error-required="Oops, did you forget something?"
                                      data-alpha-numeric="true" data-error-alpha-numeric="We don’t recognise that number. Please try again."
                                      data-max-length="10" data-error-max-tracking="Sorry, we can only track 10 shipments at a time."
                                      data-max-duplicate="true" data-error-duplicate="Some of those numbers are the same.">
                                    <fieldset class="amx-cp-fieldset">
                                        <div class="tracking--wrapper">
                                            <input id="amx-md-tracking" name="tracking-number" class="tracking--input-text" type="text" placeholder="Type your tracking number">
                                            <span class="tracking--btn-track">
                                                <button name="track" class="amx-cp-btn" type="submit">@FormA.Track</button>
                                            </span>

                                            <div class="amx-cp-alert amx-s-error" data-module-name="amx-alert">
                                                <div class="amx-h-vertical-align">
                                                    <i class="amx-i-alert"></i>
                                                    <span class="text">@FormA.Error</span>
                                                </div>
                                            </div>

                                            <div class="tracking--controls">
                                                <span class="tracking--btn-track"><button name="track" class="amx-cp-btn" type="submit">@FormA.Track</button></span>
                                            </div>
                                        </div>
                                    </fieldset>
                                </form>

                            </div>
                            <!-- // tracking module wrapper -->

                            <form>

                                <div class="amx-form-entry-container">
                                    <label for="addressLocator"> <strong class="amx-h-font-highlighted">FF18 : </strong>@FormA.AddressBookPicker   </label>
                                </div>
                                <!-- address book picker -->
                                <div class="amx-form-entry-container" data-module-name="amx-address-book-picker" data-address-line1="[name=address-line-1]" data-address-line2="[name=address-line-2]">

                                    <div class="amx-form-entry-container" data-validation="isRequired" data-validation-error="Field is required">
                                        <label for="name">@FormA.Name</label>
                                        <input name="name" type="text" placeholder="Search Address Book"
                                               data-module-name="amx-form-autocomplete"
                                               data-form-type="address"
                                               data-external-source="/data/address.json">

                                        <span class="amx-cp-loader amx-mr-form-loader">@FormA.Loading</span>
                                    </div>

                                    <div class="amx-form-entry-container" data-validation="isRequired" data-validation-error="Field is required">
                                        <label for="address-line-1">@FormA.Addressline1</label>
                                        <input name="address-line-1" type="text">
                                    </div>

                                    <div class="amx-form-entry-container" data-validation="isRequired" data-validation-error="Field is required">
                                        <label for="address-line-2">@FormA.Addressline2</label>
                                        <input name="address-line-2" type="text">
                                    </div>

                                </div>

                                <!-- // address book picker -->

                            </form>

                            <div class="amx-form-entry-container">
                                <label for="addressLocator"> <strong class="amx-h-font-highlighted">FF19 : </strong>@FormA.SearchModule   </label>
                            </div>

                            <div class="amx-form-entry-container amx-mr-input-full">
                                <label for="search-contacts">@FormA.Findcontact</label>
                                <div class="amx-md-search" data-module-name="amx-search">
                                    @using (Html.BeginForm("Search", "FormsA", FormMethod.Post, new { @name = "search" }))
                                    {
                                        @Html.AramexSearchControl("search")
                                    }
                                </div>
                            </div>


                        </div>

                    </div>
                </div>
                <!-- /Form Modules -->
                <!-- Form Utilities -->
                <div class="amx-small-block-4-4 amx-medium-block-8-8 amx-large-span-12-12">
                    <div class="amx-module amx-md-panel">
                        <div class="content--header">
                            <span class="panel-bar"></span>
                            <h2 class="header">
                                @FormA.FormUtilites
                            </h2>
                        </div>

                        <div class="content--bleed">
                            <!-- Accordion -->

                            <div class="amx-module amx-md-panel amx-cat-default amx-md-rate-calculator">
                                <form class="" action="/" method="GET" data-module-name="amx-form-validation" data-form-group-selector=".amx-form-group-container">

                                    @Html.AramexFormUtility("section-one-input", "Section One incompleted title", "Section One incompleted blurb")
                                    @Html.AramexFormUtility("section-two-input", "Section two incompleted title", "Section tow incompleted blurb")
                                    @Html.AramexFormUtility("section-three-input", "Section three incompleted title", "Section Three incompleted blurb")
                                </form>



                                </form>
                            </div>
                            <!-- /Accordion -->
                        </div>

                        <div class="amx-cp-btn-holder">
                            <button type="submit" class="amx-cp-btn">@FormA.Submit</button>
                        </div>
                    </div>
                </div>
                <!-- /Form Utilities -->


            </div>
            <!-- /Main Content -->
        </div>

    </section>
</div>