@extends('web.layout.master')

@section('content')
<style>
    .error{
        color: red;
    }
</style>
<div class="container">


    <div class="row">
        <div class="col-sm-12">
            <div class=" mt-4 text-black font-weight-bold">
                <label class="fs-1">Add New Address</label>
                <p>You are logged in as {{ Auth::user()->emailaddress }}</p>
            </div>
        </div>
    </div>
    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

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

    <p class="alert alert-{{ $msg }}">{{ Session::get('alert-' . $msg) }}</p>
    @endif
    @endforeach
    <p class="alert alert-danger" id="addressVerifyFail" style="display: none" role="alert"></p>
    <div class="addressVerifyDiv" style="display: none">
        <div class="row mt-2" style="min-height: 300px">
            <div class="col-md-4">

                <div class="card mt-2 border border-dark border-3">
                    <div class="checkAddress1" style="display: none"><i class="fa fa-check-circle" aria-hidden="true"></i></div>
                    <div class="card-body">
                        <div style="min-height: 135px">
                            <p id="unfinedAddress"></p>
                        </div>
                        <div class="row">
                            <div class="col-md-12 text-center">
                              <button aria-labelledby="..." type="button" class="btn btn-success mb-3 " onclick="addressAction(1)">USE THIS ADDRESS</button>
                              <p class="text-danger">Unverified</p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <input aria-labelledby="PartsWarehouse" type="hidden" name="addressUrl" id="addressUrl">
                <input aria-labelledby="PartsWarehouse" type="hidden" name="re_addressId" id="re_addressId">
                <input aria-labelledby="PartsWarehouse" type="hidden" name="re_country" id="re_country">
                <input aria-labelledby="PartsWarehouse" type="hidden" name="re_state" id="re_state">
                <input aria-labelledby="PartsWarehouse" type="hidden" name="re_name" id="re_name">
                <input aria-labelledby="PartsWarehouse" type="hidden" name="re_street_name" id="re_street_name">
                <input aria-labelledby="PartsWarehouse" type="hidden" name="re_street_app_unit" id="re_street_app_unit">
                <input aria-labelledby="PartsWarehouse" type="hidden" name="re_city" id="re_city">
                <input aria-labelledby="PartsWarehouse" type="hidden" name="re_state" id="re_state">
                <input aria-labelledby="PartsWarehouse" type="hidden" name="re_zip" id="re_zip">
                <input aria-labelledby="PartsWarehouse" type="hidden" name="re_phone" id="re_phone">

                <div class="card mt-2 border border-dark border-3">
                    <div class="checkAddress2" style="display: none"><i class="fa fa-check-circle" aria-hidden="true"></i></div>
                    <div class="card-body">
                        <div style="min-height: 135px">
                            <p id="ReccommandedAddress">asda</p>
                        </div>
                        <div class="row">
                            <div class="col-md-12 text-center">
                                <button aria-labelledby="..." type="button" class="btn btn-success mb-3" onclick="addressAction(2)">USE THIS ADDRESS</button>
                                <p class="text-success">Recommended</p>
                              </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row addressVerifyOld">
        <div class="card border border-dark border-2">
            <div class="card-body">
                <div class="col-md-6">
                    <form action="#" id="addressAddForm" method="post">
                        @csrf

                        <input aria-labelledby="PartsWarehouse" type="hidden" name="myprofile_address" value="myprofile-address">

                        <div class="row mt-4">
                            <div class="col-md-6">
                                <div class="mb-3 form-group">
                                    <label for="country">Country</label>
                                    <select name="country" id="country" style="width: 100%" data-palcehoder="Select Country" class="form-control" onChange="getCountryWiseState(this.value,false)">
                                        <option value="" disabled  selected>Select Country</option>

                                        @foreach ($countries as $c)
                                            <option data-id="{{ $c->id }}" value="{{ $c->name }}">{{ $c->name }}</option>
                                        @endforeach
                                    </select>
                                </div>

                            </div>
                            <div class="col-md-6">
                                <div class="mb-3 form-group">
                                    <label for="state">State/Region</label>
                                    <select name="state" id="state" style="width: 100%" data-palcehoder="Select State"  class="form-control">
                                        <option value="" disabled  selected>Select State/Region</option>

                                    </select>

                                </div>
                            </div>
                        </div>
                        <div class="mb-3 form-group">
                            <label for="fullname">Full Name</label>
                            <input aria-labelledby="PartsWarehouse" type="text" class="form-control" name="name" id="fullname"
                                placeholder="First and Last">
                        </div>
                        <div class="mb-3 form-group">
                            <label for="street_address">Street Address</label>
                            <input aria-labelledby="PartsWarehouse" type="text" class="form-control" name="street_name" id="street_address"
                                placeholder="1234 Street Name">
                        </div>
                        <div class="form-group">
                            <input aria-labelledby="PartsWarehouse" type="text" class="form-control" name="street_app_unit" id="street_app_unit"
                                placeholder="App/Unit #">
                        </div>
                        <div class="row mt-4">
                            <div class="col-md-6">
                                <div class="mb-3 form-group">
                                    <label for="city">City</label>
                                    <input aria-labelledby="PartsWarehouse" type="text" class="form-control" name="city" id="city"
                                        placeholder="Please Enter City">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3 form-group">
                                    <label for="zip">Zip</label>
                                    <input aria-labelledby="PartsWarehouse" type="text" class="form-control" name="zip" id="zip" placeholder="12345">
                                </div>
                            </div>
                        </div>

                        <div class="row">

                            <div class="col-md-6">
                                <div class="mb-3 form-group">
                                    <label for="phone">Phone</label>
                                    <input aria-labelledby="PartsWarehouse" type="text" class="form-control" name="phone" id="phone"
                                        placeholder="123-456-7890">
                                </div>
                            </div>
                        </div>
                        @if(!$address->isEmpty())
                        <div class="form-check">
                                <input aria-labelledby="PartsWarehouse" type="hidden" name="is_primary" value="0">
                                <input aria-labelledby="PartsWarehouse" class="form-check-input" type="checkbox" name="is_primary" value="1" id="isprimary">
                                <label class="form-check-label" for="isprimary">
                                    Make this my primary address
                                </label>
                        </div>
                        @else
                            <input aria-labelledby="PartsWarehouse" type="hidden" name="is_primary" value="1">
                        @endif
                        <div class="mt-3" style="width: 500px;">
                            <a href="{{ route('addresses') }}" class="btn btn-lg btn-outline-primary w-25">CANCEL</a>
                            <button aria-labelledby="..." class="btn btn-lg btn-outline-primary ms-2 w-25" aria-label="SAVE">SAVE</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>

</div>

<script>
    $(document).ready(function() {
        $('#phone').inputmask("(999) 999-9999");
    });
  function getCountryWiseState(val,state="") {

    var country_name = val;

    $.ajax({
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            },
            url: "{{ route('shipping-countrywise-state') }}",
            dataType: "json",
            type: "GET",
            data: {
                'Country_name': country_name
            },

            success: function(data) {

                $('#state').html('');
                $('#state').append($("<option selected disabled>Select State/Region</option>"));

                $.each(data, function(key, value) {
                    $('#state').append('<option value="'+ value.state_code +'">'+ value.name +'</option>');

                });
                $('#country').val(val);
                $('#state').val(state);
                $('#country').select2("destroy").select2();
            },
        });
    }
</script>

<script>

    $("#state").change(function(){
        var Id = $('option:selected', this).data("id");
        $("#country option[data-id='" + Id + "']").attr("selected","selected");
     });
    $( document ).ready(function() {

        $("#state").select2({
            placeholder: "Select State/Region"
        });
        $("#country").select2({
            placeholder: "Select a country"
        });

        jQuery.validator.addMethod("zipcodeUS", function(value, element) {
            return this.optional(element) || /\d{5}-\d{4}$|^\d{5}$/.test(value)
        }, "Please enter valid Zip Code");
        $('input').focus();

        $('#addressAddForm').validate({
            rules: {
                name: {
                    required: true
                },
                street_name: {
                    required: true
                },

                city: {
                       required: true,
                       remote: {
                            headers: {
                                'X-CSRF-TOKEN': "{{ csrf_token() }}"
                            },
                           url: "{{ route('shipping-validate-address') }}",
                           type: "post",
                           data: {
                            street_name: function() {
                                   return $('#street_address').val();

                               },
                            city: function() {
                                   return $('#city').val();

                               },
                           }
                       }

                },

                country: {
                    required: true
                },
                zip: {
                    required: true
                },
                phone: {
                    required: true
                }
            },
            messages: {
                name: {
                    required: "Please enter full name"
                },

                city: {
                    remote: "This address already exists in your account.",
                },
                country: {
                    required: "Please enter a country",
                },
                state: {
                    required: "Please enter a state",
                },
                zip: {
                    required: "Please enter a zip",

                },
                phone: {
                    required: "Please enter a phone",
                    minlength:"Please enter valid phone",
                    maxlength:"Please enter valid phone",
                }

            },
            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');
            },
            submitHandler: function(form) {
                if($('#country').val() != 'United States'){

                    var addressData = {
                        '_token': '{{ csrf_token() }}',
                        'id' :0,
                        'name': $('#fullname').val(),
                        'street_name': $('#street_address').val(),
                        'street_app_unit': $('#street_app_unit').val(),
                        'city': $('#city').val(),
                        'state': $('#state').val(),
                        'country': $('#country').val(),
                        'zip': $('#zip').val(),
                        'phone': $('#phone').val(),
                        'is_primary': $('#isprimary:checked').val(),
                    };
                    addressUrl = "{{ route('addresses-add-process') }}";
                    $.ajax({
                        type: 'POST',
                        url: addressUrl,
                        data: addressData,
                        dataType: "json",
                        success: function (resultData) {
                            window.location.href = "{{ url('/addresses') }}";
                        }
                    });


                }else{

                    var addressData = {
                        "_token": '{{ csrf_token() }}',
                        'name': $('#fullname').val(),
                        'street_name': $('#street_address').val(),
                        'street_app_unit': $('#street_app_unit').val(),
                        'city': $('#city').val(),
                        'state': $('#state').val(),
                        'country': $('#country').val(),
                        'zip': $('#zip').val(),
                        'phone': $('#phone').val()
                    };


                    VerifyAddress(addressData)
                        .then((verifyres) => {

                            if (verifyres.ErrNumber != 0) {


                                $('#addressVerifyFail').text(verifyres.ErrDescription);
                                $('#addressVerifyFail').show();

                            } else {

                                $('#addressVerifyFail').hide();
                                $('#addressVerifyOld').hide();
                                $('#addressVerifyDiv').show();


                                $.ajax({
                                    type: 'POST',
                                    url: "{{ route('addresses-verify') }}",
                                    data: addressData,
                                    dataType: "xml",
                                    success: function (resultData) {
                                        var xmljson = xml2json(resultData);
                                        console.log(xmljson);
                                        var errorAddress = (xmljson.AddressValidateResponse.Address.Error) ? xmljson.AddressValidateResponse.Address.Error : [];

                                        if (xmljson.AddressValidateResponse.Address.Error) {

                                            $('#addressVerifyFail').show();
                                            $('#addressVerifyFail').text(errorAddress.Description);
                                        } else {


                                            $('#addressVerifyFail').hide();
                                            $('.addressVerifyOld').hide();
                                            $('.addressVerifyDiv').show();



                                            var undifinedAddress = '<b> Original Address</b><br>' + addressData.street_name + '<br>';
                                            if (addressData.street_app_unit) {
                                                undifinedAddress += addressData.street_app_unit + '<br>';
                                            }
                                            undifinedAddress += addressData.city + ',  ' + addressData.state + ' ' + addressData.zip + '<br> ' + addressData.country + '<br><a href="#" onclick="editAddress()">Edit</a>';



                                            $('#unfinedAddress').html(undifinedAddress);
                                            var address = xmljson.AddressValidateResponse.Address;


                                            $('#re_name').val($('#name').val());
                                            $('#re_street_name').val(address.Address2);
                                            $('#re_street_app_unit').val(address.Address);
                                            $('#re_city').val(address.City);
                                            $('#re_state').val(address.State);
                                            $('#re_country').val('United States');
                                            $('#re_zip').val(address.Zip5);
                                            $('#re_phone').val($('#phone').val());

                                            var ReccommandedCustomAddress = '<b> Recommended Address</b><br>';
                                            if (address.Address1) {
                                                ReccommandedCustomAddress += address.Address1 + '<br>';
                                            }
                                            if (address.Address2) {
                                                ReccommandedCustomAddress += address.Address2 + '<br>';
                                            }
                                            ReccommandedCustomAddress += address.City + ',  ' + address.State + ' ' + address.Zip5 + '<br>United States';
                                            $('#ReccommandedAddress').html(ReccommandedCustomAddress);
                                        }
                                        // $('#addressVerifyFail').html('<span>'+ xmljson.AddressValidateResponse.Address.Address2 +'<br>'+ xmljson.AddressValidateResponse.Address.City +', '+ xmljson.AddressValidateResponse.Address.State +' '+ xmljson.AddressValidateResponse.Address.Zip5 +'</span><p>'+ xmljson.AddressValidateResponse.Address.ReturnText +'</p>');

                                        // $('#addressVerifyFail').html('<span>'+ xmljson.AddressValidateResponse.Address.Address2 +'<br>'+ xmljson.AddressValidateResponse.Address.City +', '+ xmljson.AddressValidateResponse.Address.State +' '+ xmljson.AddressValidateResponse.Address.Zip5 +'</span><p>'+ xmljson.AddressValidateResponse.Address.ReturnText +'</p>');
                                        //$('#addressVerifyFail').show();
                                    }
                                });
                            }


                            return false;

                        })
                        .catch((error) => {
                            console.log(error)
                        })
                    }
            }
        });
    });
    function editAddress(){
        $('#addressVerifyFail').hide();
        $('.addressVerifyOld').show();
        $('.addressVerifyDiv').hide();
    }

    function addressAction(type){
        addressUrl = "{{ route('addresses-add-process') }}";

        if(type == 1){

            var addressData = {
                "_token": '{{ csrf_token() }}',
                "addressId" :0,
                'name': $('#fullname').val(),
                'street_name': $('#street_address').val(),
                'street_app_unit': $('#street_app_unit').val(),
                'city': $('#city').val(),
                'state': $('#state').val(),
                'country': $('#country').val(),
                'zip': $('#zip').val(),
                'phone': $('#phone').val(),
                'is_primary':$('#isprimary:checked').val(),
            };
            $.ajax({
                type: 'POST',
                url: addressUrl,
                data: addressData,
                dataType: "json",
                success: function (resultData) {
                    window.location.href = "{{ url('/addresses') }}";

                }
            });


        }else if(type == 2){

            var addressData = {
                '_token': '{{ csrf_token() }}',
                'id' :0,
                'name': $('#fullname').val(),
                'street_name': $('#re_street_name').val(),
                'street_app_unit': $('#re_street_app_unit').val(),
                'city': $('#re_city').val(),
                'state': $('#re_state').val(),
                'country': $('#re_country').val(),
                'zip': $('#re_zip').val(),
                'phone': $('#re_phone').val(),
                'is_primary':$('#isprimary:checked').val(),
            };
            console.log(addressData);
            $.ajax({
                type: 'POST',
                url: addressUrl,
                data: addressData,
                dataType: "json",
                success: function (resultData) {
                    window.location.href = "{{ url('/addresses') }}";
                }
            });

        }



    }
</script>
@endsection