@extends('layout.master')
@section('content')
    <section class="content pb-5">
        <div class="container-fluid">
            <div class=" mt-4">
                <div class="col-md-12">
                     <div class="title-section">
                        <p>Billing Address</p>
                    </div>
                </div>
            </div>
            <div class="user-box">
                <div class="col-md-6">
                    <div class="form-group custom-form-group">
                        <label class="form-label" for="customer">Address Line 1<span class="text-danger">*</span></label>
                        <input name="billing_address_1" id="billing_address_1" class="form-control" placeholder="" type="text" > 
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group custom-form-group">
                        <label class="form-label" for="customer">Address Line 2<span class="text-danger">*</span></label>
                        <input name="billing_address_2" id="billing_address_2" class="form-control" placeholder="" type="text" > 
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group custom-form-group">
                        <label class="form-label" for="customer">Pincode<span class="text-danger">*</span></label>
                        <input name="pincode" id="pincode" class="form-control" placeholder="" type="text" onblur="fetchPincodeData(this)"> 
                    </div>
                </div>

                  <div class="col-md-6">
                    <label class="form-label" for="customer">State<span class="text-danger">*</span></label>
                    <select class="form-control" name="state_id" id="state_id">
                        <option value="">Select State</option>
                        @foreach($listData['state'] as $states)
                            <option value="{{@$states['id']}}" {{ old('userAddressState') == @$states['id'] ? 'selected': ''}}>{{$states['name']}}</option>
                        @endforeach
                    </select>
                </div>
                                        
                <div class="col-md-6">
                    <div class="form-group custom-form-group">
                        <label class="form-label" for="customer">City</label>
                        <select id="city_id" class="form-control" autocomplete="off" name="city_id" id="city_id">
                            <option value="">Select City</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-6 my-4">
                    <label class="form-label" for="customer">
                        Phone
                        <span class="text-danger">
                            *
                        </span>
                    </label>
                    <input name="phone" id="phone" class="form-control" placeholder="" type="text">
                </div>

                <div class="import-btns my-4">
                    <button type="button" class="btn btn-danger save-btn" id="billing-address">Update</button>
                </div>
            </div>
            <!-- Billing Address -->
            @foreach($listData['userAddress'] as $address)
                
                <div class="row mt-5" id="address-cards">
                    <div class="col-md-4">
                        <!-- <div class="address-radio"> -->
                            <!-- <input class="with-gap fill-gap" name="userAddressSectedData" type="radio" id="number336" value="335" checked=""> -->
                            <label for="number336" class="w-100">
                                <div class="card address-card">
                                    <div class="card-header address-card-header d-flex justify-content-between align-items-center">{{@$address['address']}}
                                        <icon class="fa fa-pencil" onclick="updateAddress({{@$address['id']}})"></icon>
                                    </div>
                                    <div class="card-body address-card-body">
                                        <p>{{@$address['contact_name']}}</p><p>{{@$address['temp_address']}}</p><p>{{$address['pincode']}}</p>
                                        <p>{{@$address['city']['name']}}</p><p>{{@$address['state']['name']}}</p><h6>Phone: 
                                        <strong>{{@$address['phoneNumber']}} </strong></h6> 
                                    </div>
                                </div>
                            </label>
                        <!-- </div> -->
                    </div>
                </div>
            @endforeach
            <!-- Billing Address -->

        </div>

        <style>
            .address-radio 
            {
                margin-bottom: 70px;
            }

            .address-radio input[type="radio"]+label:before, .address-radio input[type="radio"]+label:after 
            {
                height: 45px;
                width: 45px;
                position: absolute;
                content: '';
                right: 0;
                top: -25px;
                z-index: 3;
                transition: .28s ease;
                background: #FFFFFF;
                border: 1px solid #00AEEF;
                margin-right: 0px;
            }
        </style>

    </section>
    <script>
        // Start address script here
        $(document).ready(function(){
           $('.user-box').css('display','none');
           $('#address-cards').css('display','block');
        });

        function updateAddress(addressId)
        {
            $('.user-box').css('display','block');
            $('#address-cards').css('display','none');

            $.ajax({
                url: "{{route('get-billing-address')}}",
                type: "POST",
                data: { _token: "{{csrf_token()}}", 'addressId': addressId },
                success: function(data) {
                    console.log(data);
                    $('#billing_address_1').val(data.address);
                    $('#billing_address_2').val(data.address_nick_name);
                    $('#pincode').val(data.pincode);
                    $('#phone').val(data.phoneNumber);
                }
            });
        }

        // Close address script here
    </script>

    <script type="text/javascript">

        function fetchPincodeData(e) {

            let pincode = e.value;

            if (e.value.length == 6) {

                    $('#custum-loader').removeClass('hidden');
                    jQuery.ajax({
                        url: "{{route('pincode-country-state')}}",
                        type: "POST",
                        data: { _token: "{{csrf_token()}}", pincode: pincode },
                        success: function(data) {
                            $('#custum-loader').addClass('hidden');
                            if (!data.data) {
                                jQuery('select[name="state_id"]').empty();
                                jQuery('select[name="city"]').empty();

                                $('#state_id').removeClass('dissbleClickButton');
                                $('#city_id').addClass('dissbleClickButton');

                                $('select[name="state_id"]').append('<option value="">' + 'Select State' + '</option>');

                                jQuery.each(data.states, function(key, value) {

                                    $('select[name="state_id"]').append('<option value="' + value.id + '">' + value.name + '</option>');
                                });

                                swal({
                                    icon: 'error',
                                    title: "Alert",
                                    text: 'Pincode is not serviceable.',
                                    type: "error",

                                    closeOnConfirm: false,
                                    showLoaderOnConfirm: true,
                                });
                                return;
                            } else {
                                $('#state_id').addClass('dissbleClickButton');
                                $('#city_id').addClass('dissbleClickButton');

                                jQuery('select[name="state_id"]').empty();
                                jQuery('select[name="city_id"]').empty();

                                if (data.data.state) {
                                    $('select[name="state_id"]').append('<option value="' + data.data.state.id + '">' + data.data.state.name + '</option>');
                                }

                                if (data.data.district) {
                                    $('select[name="city_id"]').append('<option value="' + data.data.district.id + '">' + data.data.district.name + '</option>');
                                }

                                $('#custum-loader').addClass('hidden');
                            }

                        }
                    });

                }
        }

        

        $('#billing-address').click(function(){
            
            var state_id = $('#state_id').val();
            var billing_address_1 = $('#billing_address_1').val();
            var billing_address_2 = $('#billing_address_2').val();
            var pincode = $('#pincode').val();
            var city = $('#city_id').val();
            var phone = $('#phone').val();

            var rowData = {
                '_token': "{{csrf_token()}}",
                'state_id' : state_id,
                'billing_address_1': billing_address_1,
                'billing_address_2': billing_address_2,
                'pincode': pincode,
                'city': city,
                'phone': phone,
                
            }

              jQuery.ajax({
                    url: "{{route('save-billing-address')}}",
                    type: "POST",
                    data: rowData,
                    success: function(data) {
                       window.location.href = '{{url("/settings")}}';
                    }
                });
        });
    </script>
@endsection