<div class="app-header bg-header-1">
    <div class="layout-fixed full-h text-center">
        <div class="full-h v-bottom-i pdB15">
            <div class="app-content-header bg-header-1">
                <div class="text-title-header-1 nowrap mgT5">Add payment plan</div>
            </div>
        </div>
    </div>
    <button class="popup-close-button bg-transparent pd0-i biger-3-time" type="button" ng-click="closeTarget('#addpayment')">
        <svg class="block h18px" viewBox="0 0 64 64"> <g> <path fill="#FFF" d="M28.941,31.786L0.613,60.114c-0.787,0.787-0.787,2.062,0,2.849c0.393,0.394,0.909,0.59,1.424,0.59   c0.516,0,1.031-0.196,1.424-0.59l28.541-28.541l28.541,28.541c0.394,0.394,0.909,0.59,1.424,0.59c0.515,0,1.031-0.196,1.424-0.59   c0.787-0.787,0.787-2.062,0-2.849L35.064,31.786L63.41,3.438c0.787-0.787,0.787-2.062,0-2.849c-0.787-0.786-2.062-0.786-2.848,0   L32.003,29.15L3.441,0.59c-0.787-0.786-2.061-0.786-2.848,0c-0.787,0.787-0.787,2.062,0,2.849L28.941,31.786z" /> </g> </svg>
    </button>
</div>
<div class="app-content">
    <div class="app-content-inner content-pd">
        <ion-scroll class="scroll-area" direction="y" has-bouncing="false" overflow-scroll="false">
            <div class="box-setting-4 no-saperator">
                <div class="content content-in">
                    <div class="itm">
                        <div class="layout-fixed input-1-group">
                            <div>
                                <label class="label-form-field-1">First Name</label>
                                <div class="layout-fixed">
                                    <div>
                                        <div class="input-form-field-1" ng-class="{ 'has-errors' : formPaymentAdd.Payment_Plan_first_name.$invalid  }">
                                            <input type="text" placeholder="" value="" name="Payment_Plan_first_name" ng-model="Payment_Plan.first_name" class="h32px" required id="Payment_Plan_first_name">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <label class="label-form-field-1">Last Name</label>
                                <div class="layout-fixed">
                                    <div>
                                        <div class="input-form-field-1" ng-class="{ 'has-errors' : formPaymentAdd.Payment_Plan_last_name.$invalid  }">
                                            <input class="h32px" name="Payment_Plan_last_name" value="" placeholder="" type="text" ng-model="Payment_Plan.last_name" required id="Payment_Plan_last_name">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <label class="label-form-field-1">Address</label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-form-field-1" ng-class="{ 'has-errors' : formPaymentAdd.Payment_Plan_street.$invalid  }">
                                    <input type="text" class="h32px" name="Payment_Plan_street" value="" placeholder="" ng-model="Payment_Plan.street" required id="Payment_Plan_street">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <div class="layout-fixed input-1-group">
                            <div class="layout-w-1:2">
                                <label class="label-form-field-1">City</label>
                                <div class="layout-fixed">
                                    <div>
                                        <div class="input-form-field-1" ng-class="{ 'has-errors' : formPaymentAdd.Payment_Plan_city.$invalid  }">
                                            <input type="text" class="h32px" name="Payment_Plan_city" value="" placeholder="" ng-model="Payment_Plan.city" required id="Payment_Plan_city">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <label class="label-form-field-1">State</label>
                                <div class="layout-fixed">
                                    <div>
                                        <div class="input-form-field-1" ng-class="{ 'has-errors' : formPaymentAdd.Payment_Plan_state.$invalid  }">
                                            <input type="text" class="h32px" name="Payment_Plan_state" value="" placeholder="" ng-model="Payment_Plan.state" required id="Payment_Plan_state">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <label class="label-form-field-1">Zip Code</label>
                                <div class="layout-fixed">
                                    <div>
                                        <div class="input-form-field-1" ng-class="{ 'has-errors' : formPaymentAdd.Payment_Plan_zipcode.$invalid  }">
                                            <input type="text" class="ft-fifth h32px" value="" placeholder="" ng-model="Payment_Plan.zipcode" name="Payment_Plan_zipcode" required id="Payment_Plan_zipcode">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <div class="layout-fixed">
                            <div>
                                <label class="label-form-field-1">Credit card type</label>
                                <div class="pplogs text pdL5 mgT5">Please input card number</div>
                                <input type="hidden" id="required_Payment_Plan" placeholder="" value="0" name="">
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <label class="label-form-field-1">Credit Card Number</label>
                        <div class="layout-fixed">
                            <div>
                                <div class="input-form-field-1" ng-class="{ 'has-errors' : formPaymentAdd.Payment_Plan_Card_Number.$invalid  }">
                                    <input type="text" id="Payment_Plan_Card_Number" ng-change="requiredAmount(Payment_Plan.Card_Number, 'Payment_Plan')" ng-model="Payment_Plan.Card_Number" placeholder="" value="" name="Payment_Plan_Card_Number" class="h32px" required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <div class="layout-fixed input-1-group">
                            <div>
                                <label class="label-form-field-1">Expiration Date (Month)</label>
                                <div class="layout-fixed">
                                    <div>
                                        <div class="input-form-field-1">
                                            <input type="text" class="h32px" id="Payment_Plan_month" value="{{Input_value.CC_Manual_month_cc}}" placeholder="MM"
                                                   type="text" ng-class="{ 'has-errors' : formPaymentAdd.Payment_Plan_month.$invalid  }">
                                            <div class="sign-r clear">
                                                <button class="bg-transparent full-h right pdR10" type="button">
                                                    <svg class="h17px clr-symbol-clickable" viewBox="0 0 63.215 63.215"> <g> <g> <path fill="#1075BB" d="M59.807,15.717L31.491,43.791L3.419,15.475c-0.777-0.785-2.044-0.789-2.828-0.012c-0.784,0.777-0.789,2.044-0.012,2.827    l29.194,29.448c0.365,0.368,0.835,0.563,1.312,0.589c0.139,0.008,0.278-0.001,0.415-0.021c0.054,0.008,0.106,0.021,0.16,0.022    c0.544,0.029,1.099-0.162,1.515-0.576l29.447-29.196c0.785-0.777,0.79-2.043,0.012-2.828    C61.856,14.943,60.59,14.939,59.807,15.717z" /> </g> </g> </svg>
                                                </button>
                                            </div>
                                            <select name="Payment_Plan_month" ng-model="Payment_Plan.month" class="field-overlay" required
                                                    ng-change="setValueCC_Manual_month_cc(Payment_Plan.month)">
                                                <option value="">-----</option>
                                                <option value="{{item.value}}" ng-repeat="item in monthNames">{{item.name}}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <label class="label-form-field-1">Expiration Date (Year)</label>
                                <div class="layout-fixed">
                                    <div>
                                        <div class="input-form-field-1">
                                            <input type="text" class="h32px" id="Payment_Plan_year" value="{{Payment_Plan.year}}" placeholder="YYYY" type="text"
                                                   ng-class="{ 'has-errors' : formPaymentAdd.Payment_Plan_year.$invalid  }">
                                            <div class="sign-r clear">
                                                <button class="bg-transparent full-h right pdR10" type="button">
                                                    <svg class="h17px clr-symbol-clickable" viewBox="0 0 63.215 63.215"> <g> <g> <path fill="#1075BB" d="M59.807,15.717L31.491,43.791L3.419,15.475c-0.777-0.785-2.044-0.789-2.828-0.012c-0.784,0.777-0.789,2.044-0.012,2.827    l29.194,29.448c0.365,0.368,0.835,0.563,1.312,0.589c0.139,0.008,0.278-0.001,0.415-0.021c0.054,0.008,0.106,0.021,0.16,0.022    c0.544,0.029,1.099-0.162,1.515-0.576l29.447-29.196c0.785-0.777,0.79-2.043,0.012-2.828    C61.856,14.943,60.59,14.939,59.807,15.717z" /> </g> </g> </svg>
                                                </button>
                                            </div>
                                            <select name="Payment_Plan_year" ng-model="Payment_Plan.year" class="field-overlay" required>
                                                <option value="">-----</option>
                                                <option value="{{item}}" ng-repeat="item in yearName">{{item}}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layout-w-1:4">
                                <label class="label-form-field-1">CVV2 (Code)</label>
                                <div class="layout-fixed">
                                    <div>
                                        <div class="input-form-field-1" ng-class="{ 'has-errors' : formPaymentAdd.Payment_Plan_CVV2_Codes.$invalid  }">
                                            <input type="text" ng-change="requiredcvv(Payment_Plan.CVV2_Codes, 'Payment_Plan')" ng-model="Payment_Plan.CVV2_Codes" placeholder="" value="" name="Payment_Plan_CVV2_Codes" class="h32px" required="" id="Payment_Plan_CVV2_Codes">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="itm">
                        <div class="layout-fixed input-1-detail" ng-repeat="item in ChargeDate">
                            <div>
                                <label class="label-form-field-1">Amount ($)</label>
                                <div class="layout-fixed">
                                    <div>
                                        <div class="input-form-field-1" ng-class="{ 'has-errors' : formPaymentAdd.date_amount{{$inde}}.$invalid  }">
                                            <input type="text" placeholder="Amount" ng-model="item.amount" value="" name="date_amount{{$inde}}" class="h32px" ng-trim=false awnum num-sep="." num-int=18 num-fract=2 required id="date_amount{{$inde}}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="input-form-field-1" ng-class="{ 'has-errors' : formPaymentAdd.ChargeDate{{$index}}.$invalid  }">
                                    <input class="h32px" id="ChargeDate{{$index}}" placeholder="Choose date" type="text" value="{{item.ChargeDate| date: 'MM/dd/yyyy'}}">
                                    <div class="field-overlay datetime" date="" ion-datetime-picker="" name="ChargeDate{{$index}}" ng-model="item.ChargeDate" required>
                                        {{item.ChargeDate| date: 'MM/dd/yyyy'}}
                                    </div>
                                    <div class="sign-r clear" ng-click="addRowChargeDate('Payment_Plan', Payment_Plan_check)" ng-if="$index == 0">
                                        <button class="bg-transparent full-h right pdR8" type="button">
                                            <svg class="h20px" viewBox="0 0 53 53"> <polygon points="7,8.5 47,8.5 47,0.5 0,0.5 0,45.5 7,45.5 " style="fill:#B1C7D7;" /> <rect height="44" width="46" style="fill:#1075BB;" y="8.5" x="7" /> <line y2="41.5" x2="30" y1="19.5" x1="30" style="fill:none;stroke:#FFF;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;" /> <line y2="30.5" x2="19" y1="30.5" x1="41" style="fill:none;stroke:#FFF;stroke-width:3;stroke-linecap:round;stroke-miterlimit:10;" /> </svg>
                                        </button>
                                    </div>
                                    <div class="sign-r text-right" ng-click="removeItemChargeDate($index)" ng-if="$index != 0">
                                        <button type="button" class="bg-transparent full-h right pdR10">
                                            <svg viewBox="0 0 64 64" class="h16px"> <g> <path fill="#D75A4A" d="M28.941,31.786L0.613,60.114c-0.787,0.787-0.787,2.062,0,2.849c0.393,0.394,0.909,0.59,1.424,0.59   c0.516,0,1.031-0.196,1.424-0.59l28.541-28.541l28.541,28.541c0.394,0.394,0.909,0.59,1.424,0.59c0.515,0,1.031-0.196,1.424-0.59   c0.787-0.787,0.787-2.062,0-2.849L35.064,31.786L63.41,3.438c0.787-0.787,0.787-2.062,0-2.849c-0.787-0.786-2.062-0.786-2.848,0   L32.003,29.15L3.441,0.59c-0.787-0.786-2.061-0.786-2.848,0c-0.787,0.787-0.787,2.062,0,2.849L28.941,31.786z" /> </g> </svg>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </ion-scroll>
    </div>
</div>
<div class="app-control">
    <div class="layout-fixed full-h pdT2">
        <div class="full-h">
            <button class="button-form-field-1 darkgray position-left full" type="button" ng-click="closeTarget('#addpayment');">
                Cancel
            </button>
        </div>
        <div class="full-h">
            <button type="submit" class="button-form-field-1 position-right full">
                <svg class="icon h12px" viewBox="0 0 267.745 267.745"> <path style="fill:#030104;" d="M218.266,0v67.921c0,10.77-8.82,19.59-19.6,19.59H68.057c-10.77,0-19.579-8.82-19.579-19.59V0.02   h-16.71l0,0c-13.154,0-23.893,11.417-23.893,25.378v219.263c0,12.699,9.769,23.084,21.721,23.084H238.15   c11.951,0,21.721-10.385,21.721-23.075V50.969L218.266,0z M221.54,231.295c0,9.406-7.688,17.084-17.084,17.084H66.219   c-9.396,0-17.074-7.678-17.074-17.084v-71.194c0-9.406,7.678-17.085,17.074-17.085h138.237c9.396,0,17.084,7.679,17.084,17.085   V231.295z" /> <path style="fill:#030104;" d="M202.989,171.516H67.665c-0.799,0-1.447,0.648-1.447,1.447v3.521c0,0.799,0.648,1.447,1.447,1.447   h135.324c0.799,0,1.446-0.648,1.446-1.447v-3.521C204.435,172.164,203.788,171.516,202.989,171.516z" /> <path style="fill:#030104;" d="M202.989,184.348H67.665c-0.799,0-1.447,0.646-1.447,1.446v3.521c0,0.8,0.648,1.446,1.447,1.446   h135.324c0.799,0,1.446-0.646,1.446-1.446v-3.521C204.435,184.994,203.788,184.348,202.989,184.348z" /> <path style="fill:#030104;" d="M202.989,197.178H67.665c-0.799,0-1.447,0.648-1.447,1.447v3.521c0,0.799,0.648,1.447,1.447,1.447   h135.324c0.799,0,1.446-0.648,1.446-1.447v-3.521C204.435,197.826,203.788,197.178,202.989,197.178z" /> <path style="fill:#030104;" d="M179.708,70.294h20.322c1.979,0,3.598-1.616,3.598-3.594V0.031h-27.492v66.692   C176.136,68.689,177.746,70.294,179.708,70.294z" /> </svg>
                Save
            </button>
        </div>
    </div>
</div>
