@extends('admin.layout.master')

@section('content')

<style>

    .error{
        color:red;
    }
    #message {
    display:none;
    background: #f1f1f1;
    color: #000;
    position: relative;
    padding: 10px;
    margin-top: 10px;
    }

    #message p {
        padding: 0px 10px;
        font-size: 14px;
    }
    /* Add a green text color and a checkmark when the requirements are right */
    .valid {
    color: green;
    }

    .valid:before {
    position: relative;
    left: -10px;
    content: "✔";
    }

    /* Add a red text color and an "x" when the requirements are wrong */
    .invalid {
    color: red;
    }

    .invalid:before {
    position: relative;
    left: -10px;
    content: "✖";
    }
    a.disabled {
        pointer-events: none;
        cursor: default;
      }
</style>
    <div class="content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                  @if (!empty($CustomerData->companyname))
                    
                     <h1 class="m-0">Customer Information - {{ $CustomerData->companyname }}, {{ $CustomerData->firstname.' '.$CustomerData->lastname }}</h1>
                @else
                    @if (!empty($is_primary_address->companyname))
                    
                     <h1 class="m-0">Customer Information - {{ $CustomerData->companyname }}, {{ $CustomerData->firstname.' '.$CustomerData->lastname }}</h1>
                    @else
                    <h1 class="m-0">Customer Information - {{ $CustomerData->firstname.' '.$CustomerData->lastname }}</h1>
                    @endif
                @endif
                    
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right ">
                        <li class="breadcrumb-ite m-1"><a href="{{ url()->previous() }}" class="btn btn-warning">Back</a></li>
                        <li class="breadcrumb-ite m-1"><a onclick="deleteUser(event)" data-href="{{ route('admin.customer-delete',['id'=>$CustomerData->customerid]) }}" class="btn btn-danger @if($customerorder > 0) disabled @endif"><i class="fa fa-trash"></i> Delete</a></li>
                        <li class="breadcrumb-ite m-1"><a href="#" class="btn btn-info">Create Order</a></li>
                        <li class="breadcrumb-ite m-1"><a href="#" class="btn btn-secondary">Reset</a></li>
                        <li class="breadcrumb-ite m-1"><a href="#" class="btn btn-success">Save</a></li>
                        <li class="breadcrumb-ite m-1"><a onclick="openScheduleModal()" id="getScheduleData" class="btn btn-success" style="background-color:#B867FF; border-color:#B867FF;" page-url="{{ route('admin.customer-schedule-modaldata', $id) }}">+ Task</a></li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">

            @foreach (['danger', 'warning', 'success', 'info'] as $msg)
                @if(Session::has('alert-' . $msg))

                <p class="alert alert-{{ $msg }}">{{ Session::get('alert-' . $msg) }}
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                </p>
                @endif
            @endforeach

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <div class="row">
                <!-- left column -->
                <div class="col-md-12">
                    <!-- general form elements -->
                    <div class="card card-primary">

                        <div class="card-body">
                            <div class="row">
                                <div class="col-5 col-sm-3">
                                    <div class="nav flex-column nav-tabs h-100" id="vert-tabs-tab" role="tablist"
                                        aria-orientation="vertical">
                                        <a class="nav-link active" id="vert-tabs-account-information-tab" data-toggle="pill"
                                            href="#vert-tabs-account-information" role="tab"
                                            aria-controls="vert-tabs-account-information" aria-selected="true" style="background: #03458f;color: #fff;">Account
                                            information</a>
                                        <a class="nav-link" id="vert-tabs-address-tab" data-toggle="pill"
                                            href="#vert-tabs-address" role="tab" aria-controls="vert-tabs-address"
                                            aria-selected="false" onclick="getCustomerAddress()">Address</a>
                                        <a class="nav-link" id="vert-tabs-order-tab" data-toggle="pill"
                                            href="#vert-tabs-order" role="tab" aria-controls="vert-tabs-order"
                                            aria-selected="false" onclick="getCustomerOrders()">Order History</a>
                                        <a class="nav-link" id="vert-tabs-shipping-cart-tab" data-toggle="pill"
                                            href="#vert-tabs-shipping-cart" role="tab"
                                            aria-controls="vert-tabs-shipping-cart" aria-selected="false" onclick="getCustomerShippingCart()">Shopping cart</a>
                                        <a class="nav-link" id="vert-tabs-newsletter-tab" data-toggle="pill"
                                            href="#vert-tabs-newsletter" role="tab" aria-controls="vert-tabs-newsletter"
                                            aria-selected="false">Newsletter</a>
                                        <a class="nav-link" id="vert-tabs-product-reviews-tab" data-toggle="pill"
                                            href="#vert-tabs-product-reviews" role="tab"
                                            aria-controls="vert-tabs-product-reviews" aria-selected="false" onclick="getCustomerProductReview()">Product
                                            Reviews</a>
                                        <a class="nav-link" id="vert-tabs-my-gear-tab" data-toggle="pill"
                                            href="#vert-tabs-my-gear" role="tab" aria-controls="vert-tabs-my-gear"
                                            aria-selected="false" onclick="getCustomerMyGear()">My Gear</a>
                                        <a class="nav-link" id="vert-tabs-save-card-tab" data-toggle="pill"
                                            href="#vert-tabs-save-card" role="tab" aria-controls="vert-tabs-save-card"
                                            aria-selected="false" onclick="getCustomerSaveCard()">Saved Cards</a>
                                        <a class="nav-link" id="task-history-tab" data-toggle="pill"
                                            href="#task-history" role="tab" aria-controls="task-history"
                                            aria-selected="false" onclick="getCustomerTaskHistory()">Task History</a>
                                    </div>
                                </div>
                                <div class="col-7 col-sm-9">
                                    <div class="tab-content" id="vert-tabs-tabContent">


                                        <div class="tab-pane text-left fade show active" id="vert-tabs-account-information"
                                            role="tabpanel" aria-labelledby="vert-tabs-account-information-tab">
                                            <div class="row">
                                                <div class="col-6 text-left">
                                                    <h4>Account information</h4>
                                                </div>
                                                <div class="col-6 text-center">
                                                    <form id="customerAddForm" action="{{ route('admin.customer-sales-rep-update') }}" method="post">
                                                        @csrf
                                                        <input type="hidden" name="customerid" value="{{ $CustomerData->customerid }}">
                                                        <div class="row">
                                                            <div class="col-3" style="text-align: end;">
                                                                <label for="salesrep_customerid" style="margin-top: 15px;">Sales Rep -</label>
                                                            </div>
                                                            <div class="col-5 " style="text-align: left;">
                                                                <div class="mb-3 form-group mt-2">

                                                                   <select name="salesrep_customerid" id="salesrep_customerid" style="width: 100%" data-palcehoder="Select Sales Rep" class="form-control" required>
                                                                       <option value="" disabled selected>Select Sales Rep</option>
                                                                       @foreach ($salesrepsusers as $c)
                                                                           <option data-id="{{ $c->sales_rep_id }}" value="{{ $c->sales_rep_id }}" {{ (($CustomerData->salesrep_customerid == $c->sales_rep_id) ? "selected" : "") }}>{{ $c->name.' ('.$c->sales_rep_id.')' }}</option>
                                                                       @endforeach
                                                                   </select>
                                                               </div>
                                                            </div>
                                                            <div class="col-4" style="text-align: left;">
                                                                <button type="submit" class="btn btn-primary " style="margin-top: 8px;" {{ Auth::guard('admin')->user()->is_admin == 0 ? 'disabled' : '' }}>Update</button>
                                                            </div>
                                                        </div>





                                                    </form>

                                                </div>

                                            </div>

                                            <hr/>
                                            <div class="row p-1">
                                                <div class="col-md-7">

                                                            <table class="table table-bordered table-striped">
                                                                <thead class="thead-dark">
                                                                    <tr>
                                                                        <th>90 Day #</th>
                                                                        <th>90 Day $</th>
                                                                        <th>12 Month #</th>
                                                                        <th>12 Month $</th>
                                                                        <th>Lifetime #</th>
                                                                        <th>Lifetime $</th>
                                                                        
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr>
                                                                        @if(!empty($admin_history))
                                                                        <td>{{ $admin_history->days90order }}</td>
                                                                        <td>${{ number_format(floor($admin_history->days90amount)) }}</td>
                                                                        <td>{{ $admin_history->days12order }}</td>
                                                                        <td>${{ number_format(floor($admin_history->days12amount)) }}</td>
                                                                        <td>{{ $admin_history->dayslifetimeorder }}</td>
                                                                        <td>${{ number_format(floor($admin_history->dayslifetimeamount)) }}</td>
                                                                        
                                                                        @endif
                                                                    </tr>
                                                                </tbody>

                                                            </table>
                                                            <div class="card card-body">
                                                                <form action="{{ route('admin.customer-notes-update') }}" method="post">
                                                                    @csrf
                                                                    <input type="hidden" name="customerid" value="{{ $CustomerData->customerid }}">
                                                                    <h6>Customer Notes</h6>
                                                                    <div class="form-group">
                                                                        <textarea class="form-control ordrenotes" placeholder="Enter Customer Notes" name="customer_notes" rows="3" spellcheck="false" required>{{ $CustomerData->customer_notes }}</textarea>
                                                                    </div>
                                                                    <div class="text-end mt-3">
                                                                        <button type="submit" class="btn btn-primary ">Update</button>
                                                                    </div>



                                                                </form>

                                                            </div>

                                                    <div class="card">

                                                        <div class="card-body p-0">
                                                            <table class="table table-striped">
                                                                <tbody>
                                                                    <tr>
                                                                        <td>Customer Group:</td>
                                                                        <td>
                                                                            <form id="customerAddForm" action="{{ route('admin.customer-groups-update') }}" method="post">
                                                                                @csrf
                                                                                <input type="hidden" name="customerid" value="{{ $CustomerData->customerid }}">

                                                                                <div class="row">
                                                                                    <div class="col-9">
                                                                                        <div class="mb-3 form-group mt-2">
                                                                                            {{-- <label for="id_customers_groups">Customer Group</label> --}}
                                                                                            <select name="id_customers_groups" id="id_customers_groups" style="width: 100%" data-palcehoder="Select Customer Group" class="form-control">
                                                                                                <option value="" disabled selected>Select Customer Group</option>
                                                                                                @foreach ($customerGroup as $c)
                                                                                                    <option data-id="{{ $c->id }}" value="{{ $c->id }}" {{ (($CustomerData->id_customers_groups == $c->id) ? "selected" : "") }}>{{ $c->name }}</option>
                                                                                                @endforeach
                                                                                            </select>
                                                                                        </div>
                                                                                    </div>
                                                                                    <div class="col-3 mt-2">
                                                                                        <div class="text-end">
                                                                                            <button type="submit" class="btn btn-primary ">Update</button>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </form>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Last Logged in:</td>
                                                                        <td>{{ !empty($CustomerData->lastlogin) ? date('n/d/Y g:i A',strtotime($CustomerData->lastlogin)) : "-" }}</td>
                                                                    </tr>
                                                                    {{-- <tr>
                                                                        <td>Account Lock:</td>
                                                                        <td>Unlocked</td>
                                                                    </tr> --}}
                                                                    <tr>
                                                                        <td>Confirmed email:</td>
                                                                        <td>{{ !empty($CustomerData->emailaddress) ? $CustomerData->emailaddress : "-" }}</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Account Created:</td>
                                                                        <td>{{  !empty($CustomerData->created_at) ? date('m-d-Y h:i a',strtotime($CustomerData->created_at)) : "-" }}</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Account Created In:</td>
                                                                        <td>Default Store View</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>Last Contact:</td>
                                                                        <td>{{ !empty($CustomerData->lastcontant) ? date('m-d-Y h:i a', strtotime($CustomerData->lastcontant)) : "-" }}</td>
                                                                    </tr>

                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-5">


                                                    <h6>Default Primary Address</h6>
                                                    @if(!empty($is_primary_address))
                                                    <p class="p-2"> @if (!empty($CustomerData->companyname))
                                                            <b>{{ $CustomerData->companyname }}</b><br>
                                                        @else
                                                            @if (!empty($is_primary_address->companyname))
                                                            <b>{{ $is_primary_address->companyname }}</b><br>
                                                            @endif
                                                        @endif 
                                                        {{ $is_primary_address->name }}<br>
                                                        
                                                        {{ $is_primary_address->street_name }}<br>
                                                        @if (!empty($is_primary_address->street_app_unit))
                                                            {{ $is_primary_address->street_app_unit }}<br>
                                                        @endif {{ $is_primary_address->city }}, &nbsp;
                                                        {{ $is_primary_address->state }}, &nbsp;
                                                        {{ $is_primary_address->zip }}</br>
                                                        {{ $is_primary_address->country }}</br>
                                                        @if(!empty($is_primary_address->phone))
                                                            T: {{ $is_primary_address->phone }}
                                                        @endif
                                                    </p>
                                                    @endif
                                                    {{--  <form id="customerAddForm"
                                                    action="{{ route('admin.customer-companyname-update') }}" method="post">
                                                    @csrf
                                                    <input type="hidden" name="id"
                                                        value="{{ $CustomerData->customerid }}">
                                                    <div class="row">
                                                        <div class="col-10">

                                                            <div class="form-group">
                                                                <label for="companyname">Business Name</label>
                                                                <input type="text" class="form-control"
                                                                    value="{{ $CustomerData->companyname }}"
                                                                    name="companyname" id="companyname"
                                                                    placeholder="Enter business name" autocomplete="off">
                                                            </div>
                                                        </div>
                                                        <div class="col-2">
                                                            <div class="text-end">
                                                                <button type="submit" class="btn btn-primary "
                                                                    style="margin-top: 30px;">Update</button>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>  --}}
                                                    <form id="customerAddForm"
                                                        action="{{ route('admin.customer-update') }}" method="post">
                                                        @csrf
                                                        <input type="hidden" name="id"
                                                            value="{{ $CustomerData->customerid }}">
                                                        <div class="row">
                                                            <div class="col-10">

                                                                <div class="form-group">
                                                                    <label for="email">Email</label>
                                                                    <input type="text" class="form-control"
                                                                        value="{{ $CustomerData->emailaddress }}"
                                                                        name="email" id="email"
                                                                        placeholder="Enter email" autocomplete="off">
                                                                </div>
                                                            </div>
                                                            <div class="col-2">
                                                                <div class="text-end">
                                                                    <button type="submit" class="btn btn-primary "
                                                                        style="margin-top: 30px;">Update</button>

                                                                </div>
                                                            </div>
                                                        </div>
                                                    </form>
                                                    <form id="customerPasswordForm" action="{{ route('admin.customer-password-update') }}" method="post">
                                                        @csrf
                                                        <input type="hidden" name="id" value="{{ $CustomerData->customerid }}">

                                                            <label for="email">Reset Password</label>

                                                            <div class="row">
                                                                <div class="col-5">
                                                                    <div class="form-group">
                                                                        <input type="password" class="form-control" id="new_password" name="new_password" placeholder="Password">
                                                                    </div>

                                                                    <div class="" id="message">
                                                                        <p id="length" class="invalid">Minimum <b>8 characters</b></p>
                                                                        <p id="letter" class="invalid">A <b>lowercase</b> letter</p>
                                                                        <p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
                                                                        <p id="number" class="invalid">A <b>number Or spacial character</b></p>

                                                                    </div>
                                                                </div>

                                                                <div class="col-5">
                                                                    <div class="form-group">
                                                                        <input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="Confirm Password">
                                                                    </div>
                                                                </div>
                                                                <div class="col-2">
                                                                    <div class="text-end">
                                                                        <button type="submit" class="btn btn-primary ">Update</button>

                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </form>
                                                        <form id="customerPaysStatetaxForm" action="{{ route('admin.customer-pay-state-tax-update') }}" method="post">
                                                            @csrf
                                                            <input type="hidden" name="id" value="{{ $CustomerData->customerid }}">



                                                                <div class="row">

                                                                    <div class="col-4">
                                                                        <div class="form-check">
                                                                            <input type="checkbox" class="form-check-input" {{ (($CustomerData->paysstatetax == 'N') ? "checked" : "") }} id="paysstatetax" name="paysstatetax" value="N">
                                                                            <label class="form-check-label" for="paysstatetax">
                                                                                <b>Tax Exempt</b>
                                                                            </label>
                                                                          </div>

                                                                    </div>
                                                                    <div class="col-2">
                                                                        <div class="text-end">
                                                                            <button type="submit" class="btn btn-primary ">Update</button>

                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </form>

                                                </div>
                                            </div>






                                        </div>


                                        <div class="tab-pane fade" id="vert-tabs-address" role="tabpanel"
                                            aria-labelledby="vert-tabs-address-tab">
                                            <h4>Addresses</h4>
                                            <hr>
                                            <div class="row">
                                                @if(!empty($is_primary_address))
                                                <div class="col-md-4">
                                                    <h6>Default Primary Address &nbsp; &nbsp; <a class="text-blue" onclick="addressEdit('{{ $is_primary_address->id }}')" style="cursor: pointer;">Edit</a>
                                                    </h6>
                                                    <p class="p-2">{{ $is_primary_address->name }}<br>

                                                        {{ $is_primary_address->street_name }}<br>
                                                        @if (!empty($is_primary_address->companyname))
                                                        <b>{{ $is_primary_address->companyname }}</b><br>
                                                        @endif
                                                        @if (!empty($is_primary_address->street_app_unit))
                                                            {{ $is_primary_address->street_app_unit }}<br>
                                                        @endif {{ $is_primary_address->city }}, &nbsp;
                                                        {{ $is_primary_address->state }}, &nbsp;
                                                        {{ $is_primary_address->zip }}</br>
                                                        {{ $is_primary_address->country }}</br>
                                                        @if(!empty($is_primary_address->phone))
                                                            T: {{ $is_primary_address->phone }}
                                                        @endif
                                                    </p>
                                                </div>
                                                @endif

                                                {{-- <div class="col-md-4">
                                                    <h6>Default Shipping Address &nbsp; &nbsp; <a href="#">Edit</a></h6>
                                                    <span>veronica Costello</span></br>
                                                    <span>6146 Honey Bluff spanarkway</span></br>
                                                    <span>Calder, Michigan, 49628-7978</span></br>
                                                    <span>United States</span></br>
                                                    <span>T:(555) 229-3326</span>
                                                </div> --}}
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-12 CustomerAddress" id="CustomerAddress"
                                                    page-url="{{ route('admin.customer-address', $id) }}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="vert-tabs-order" role="tabpanel"
                                            aria-labelledby="vert-tabs-order-tab">
                                            <h4>Orders</h4>
                                            <hr>

                                            <div class="row mt-2">
                                                <div class="col-lg-12 CustomerOrders" id="CustomerOrders" page-url="{{ route('admin.customer-orders', $id) }}">
                                                </div>
                                            </div>


                                        </div>
                                        <div class="tab-pane fade" id="vert-tabs-shipping-cart" role="tabpanel"
                                            aria-labelledby="vert-tabs-shipping-cart-tab">
                                            <h4>Shopping cart</h4>
                                            <hr>

                                            <div class="row mt-2">
                                                <div class="col-lg-12 CustomerShippingCart" id="CustomerShippingCart" page-url="{{ route('admin.customer-shipping-cart', $id) }}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="vert-tabs-newsletter" role="tabpanel"
                                            aria-labelledby="vert-tabs-newsletter-tab">
                                            <h4>Newsletter</h4>
                                            <hr>

                                        </div>
                                        <div class="tab-pane fade" id="vert-tabs-product-reviews" role="tabpanel"
                                            aria-labelledby="vert-tabs-product-reviews-tab">
                                            <h4>Product Reviews</h4>
                                            <hr>

                                            <div class="row mt-2">
                                                <div class="col-lg-12 getCustomerProductReview" id="getCustomerProductReview" page-url="{{ route('admin.customer-product-review', $id) }}">
                                                </div>
                                            </div>

                                        </div>
                                        <div class="tab-pane fade" id="vert-tabs-my-gear" role="tabpanel"
                                            aria-labelledby="vert-tabs-my-gear-tab">
                                            <h4>My Gear</h4>
                                            <hr>

                                            <div class="row mt-2">
                                                <div class="col-lg-12 getCustomerMyGear" id="getCustomerMyGear" page-url="{{ route('admin.customer-gear', $id) }}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="vert-tabs-save-card" role="tabpanel"
                                            aria-labelledby="vert-tabs-save-card-tab">
                                            <h4>Save Card</h4>
                                            <hr>

                                            <div class="row mt-2">
                                                <div class="col-lg-12 getCustomerSaveCard" id="getCustomerSaveCard" page-url="{{ route('admin.customer-card', $id) }}">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="tab-pane fade" id="task-history" role="tabpanel"
                                            aria-labelledby="task-history-tab">
                                            <h4>Task History</h4>
                                            <hr>

                                            <div class="row mt-2">
                                                <div class="col-lg-12 getCustomerTaskHistory" id="getCustomerTaskHistory" page-url="{{ route('admin.customer-task-history', $id) }}">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>

                    </div>
                </div>
            </div>
        </div><!-- /.container-fluid -->
        <div class="modal" id="openScheduleModal" tabindex="-1">
            <div class="modal-dialog modal-md">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="text-center" style="margin-left:35%;">
                            <h3>Schedule</h3>
                        </div>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-body" id="scheduleModeldiv">

                    </div>

                </div>
            </div>
        </div>

    </section>

    <script>
    function openScheduleModal(){

          $('#scheduleModeldiv').text('Loading....');
          var url = $('#getScheduleData').attr('page-url');
          $('#scheduleModeldiv').load(url);
          $('#openScheduleModal').modal('show');
    }

    $(document).ready(function() {
        $('#id_customers_groups').select2({
            placeholder: "Select a customer group",
            theme: 'bootstrap4',
        });
        $('#salesrep_customerid').select2({
            placeholder: "Select sales rep",
            theme: 'bootstrap4',
        });
      @if(!empty(request()->type) && request()->type = 'task-history')
             $('#task-history-tab').trigger("click");
         @endif
    });

        function deleteUser(e) {
            var url = e.currentTarget.getAttribute('data-href')
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = url;
                }
            })
        }


        function getCustomerAddress(){

            $('.CustomerAddress').text('Loading....');
            var url = $('#CustomerAddress').attr('page-url');
            $('#CustomerAddress').load(url);

        }

        function getCustomerOrders(){

            $('.CustomerOrders').text('Loading....');
            var url = $('#CustomerOrders').attr('page-url');
            $('#CustomerOrders').load(url);

        }

        function getCustomerShippingCart(){

            $('.CustomerShippingCart').text('Loading....');
            var url = $('#CustomerShippingCart').attr('page-url');
            $('#CustomerShippingCart').load(url);

        }

        function getCustomerProductReview(){

            $('.getCustomerProductReview').text('Loading....');
            var url = $('#getCustomerProductReview').attr('page-url');
            $('#getCustomerProductReview').load(url);

        }

        function getCustomerMyGear(){

            $('.getCustomerMyGear').text('Loading....');
            var url = $('#getCustomerMyGear').attr('page-url');
            $('#getCustomerMyGear').load(url);

        }

        function getCustomerSaveCard(){

            $('.getCustomerSaveCard').text('Loading....');
            var url = $('#getCustomerSaveCard').attr('page-url');
            $('#getCustomerSaveCard').load(url);

        }
        function getCustomerTaskHistory(){

                  $('.getCustomerTaskHistory').text('Loading....');
                  var url = $('#getCustomerTaskHistory').attr('page-url');
                  $('#getCustomerTaskHistory').load(url);

              }
    </script>

<script>
    $(function () {
        $.validator.addMethod("strongePassword", function(value) {
            return /^(?=.*[A-Z])(?=.*[a-z])((?=.*[0-9])|(?=.*?[#?!@$%^&*-]))/.test(value);
        },"The password must contain at least one number, at least one lower case letter, and at least one upper case letter");

        $('#customerPasswordForm').validate({
            rules: {

                new_password: {
                    required: true,
                    strongePassword: true,
                    minlength: 6,

                },
                confirm_password: {
                    required: true,
                    equalTo: "#new_password"
                }
            },
            messages: {

                new_password: {
                    required: "Please enter a new password"
                },
                confirm_password: {
                    required: "Please enter a confirm password",
                    equalTo: "Password does not match"
                }
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                $(element).parents('.form-group').append(error)
            },
            highlight: function(element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });
    });
</script>

<script>
    var myInput = document.getElementById("new_password");
    var letter = document.getElementById("letter");
    var capital = document.getElementById("capital");
    var number = document.getElementById("number");
    var length = document.getElementById("length");

    // When the user clicks on the password field, show the message box
    myInput.onfocus = function() {
      document.getElementById("message").style.display = "block";
    }

    // When the user clicks outside of the password field, hide the message box
    myInput.onblur = function() {
      document.getElementById("message").style.display = "none";
    }

    // When the user starts to type something inside the password field
    myInput.onkeyup = function() {
      // Validate lowercase letters
      var lowerCaseLetters = /[a-z]/g;
      if(myInput.value.match(lowerCaseLetters)) {
        letter.classList.remove("invalid");
        letter.classList.add("valid");
      } else {
        letter.classList.remove("valid");
        letter.classList.add("invalid");
      }

      // Validate capital letters
      var upperCaseLetters = /[A-Z]/g;
      if(myInput.value.match(upperCaseLetters)) {
        capital.classList.remove("invalid");
        capital.classList.add("valid");
      } else {
        capital.classList.remove("valid");
        capital.classList.add("invalid");
      }

      // Validate numbers
      var numbers = /[0-9]/g;
      var spacial = /[#?!@$%^&*-]/g;
      if(myInput.value.match(numbers)) {
        number.classList.remove("invalid");
        number.classList.add("valid");
      } else if(myInput.value.match(spacial)) {
        number.classList.remove("invalid");
        number.classList.add("valid");
      }else {
        number.classList.remove("valid");
        number.classList.add("invalid");
      }

      // Validate length
      if(myInput.value.length >= 8) {
        length.classList.remove("invalid");
        length.classList.add("valid");
      } else {
        length.classList.remove("valid");
        length.classList.add("invalid");
      }
    }
    </script>
    <script>
        $('#phone').inputmask("(999) 999-9999", {
            "clearIncomplete": true
        });
        $(function() {
            $('#state').select2({
                theme: 'bootstrap4'
            });
            jQuery.validator.addMethod("zipcodeUS", function(value, element) {
                return this.optional(element) || /\d{5}-\d{4}$|^\d{5}$/.test(value)
            }, "Please enter valid Zip Code");
            $('#customerAddForm').validate({
                rules: {
                    firstname: {
                        required: true
                    },
                    lastname: {
                        required: true,
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    address: {
                        required: true,
                    },
                    phone: {
                        required: true,
                        // minlength:10,
                        // maxlength:10
                    },
                    city: {
                        required: true,
                    },
                    state: {
                        required: true,
                    },
                    zipcode: {
                        required: true,
                        zipcodeUS: true
                    }
                },
                messages: {
                    fisrtname: {
                        required: "Please enter a first name",
                    },
                    lastname: {
                        required: "Please enter a first name",
                    },
                    lastname: {
                        required: "Please enter a first name",
                    },
                    email: {
                        required: "Please enter a email address",
                        email: "Please enter a valid email address"
                    },
                    phone: {
                        required: "Please enter a phone",
                        minlength: "Please enter valid phone",
                        maxlength: "Please enter valid phone",
                    },
                    address: {
                        required: "Please enter a address"
                    },
                    city: {
                        required: "Please enter a city"
                    },
                    state: {
                        required: "Please enter a state"
                    },
                    zipcode: {
                        required: "Please enter a zipcode"
                    }

                },
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function(element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                }
            });
        });
    </script>
@endsection