@extends("frond.template.user_layout")
@section('head')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@21.0.4/build/css/intlTelInput.css">
<style>
    .error{
        color:red !important;
    }
    .mobile-no-country-cd .iti{
        width: 100%;
    }
    .iti__dropdown-content{
        background: #1c1c1c;
    }
</style>
@stop
@section('content')

    <div class="col-lg-8">
        <div class="user-card mb-30 p-20 overflow-hidden">
                    <div class="contest-card">
                        <form method="post" id="register-form" action="{{route('customer.update_profile')}}">
                        @csrf
                        <div class="row justify-content-center">
                            <div class="col-lg-6 mb-4">
                                <div class="form-group mb-0 text-start">
                                    <label>First Name <sup>*</sup></label>
                                    <input type="text" name="first_name" id="first_name" class="jqv-input" data-jqv-required="true" value="{{Auth::user()->first_name}}" placeholder="Enter First Name">
                                </div>
                            </div>
                            <div class="col-lg-6 mb-4">
                                <div class="form-group mb-0 text-start">
                                    <label>Last Name <sup>*</sup></label>
                                    <input type="text" name="last_name" id="last_name" class="jqv-input" data-jqv-required="true" value="{{Auth::user()->last_name}}" placeholder="Enter Last Name">
                                </div>
                            </div>
                            <div class="col-lg-6 mb-3">
                                <div class="form-group mb-0 text-start mobile-no-country-cd">
                                    <label>Phone <sup>*</sup></label>
                                    <input id="phone" type="tel" name="phone" required class="jqv-input form-control" data-jqv-required="true" style="width:100%;" value="{{Auth::user()->phone}}">
                                    <input type="hidden" name="dial_code" id="dial_code" value="{{Auth::user()->dial_code}}">
                                    <!--<select name="dial_code" id="dial_code" class="jqv-input form-control" data-jqv-required="true" style="width:100% !important;" >-->
                                    <!--    <option value="">Select</option>-->
                                    <!--    @foreach($country_list as $country)-->
                                    <!--        <option {{(Auth::user()->dial_code==$country->dial_code)?'selected':''}} value="{{$country->dial_code}}">{{$country->dial_code}}</option>-->
                                    <!--    @endforeach-->
                                    <!--</select>-->
                                </div>
                            </div>
                            <!--<div class="col-lg-4 mb-3">-->
                            <!--    <div class="form-group mb-0 text-start">-->
                            <!--        <label>Mobile Number <sup>*</sup></label>-->
                            <!--        <input type="number" name="phone" id="phone" class="jqv-input" data-jqv-required="true" value="{{Auth::user()->phone}}" placeholder="Enter Mobile Number">-->
                            <!--    </div>-->
                            <!--</div>-->
                            <div class="col-lg-6 mb-4">
                                <div class="form-group mb-0 text-start">
                                    <label>Email Id <sup>*</sup></label>
                                    <input type="email" name="email" readonly id="email" class="jqv-input" value="{{Auth::user()->email}}" data-jqv-required="true" placeholder="Enter Email Id">
                                </div>
                            </div>
                            
                            <div class="col-lg-6 mb-4">
                                <div class="form-group mb-0 text-start position-relative">
                                    <label>Wallet Address <sup>*</sup></label>
                                    <input type="text" name="wallet_address" id="wallet_address" readonly value="{{Auth::user()->wallet_address}}" class="jqv-input" data-jqv-required="true" data-jqv-minlength="42" data-jqv-maxlength="42"  placeholder="Enter Your Wallet address">
                                </div>
                            </div>
                            
                            <div class="col-lg-6 mb-4"></div>
                            <div class="col-lg-6 mt-3">
                                <div class="form-group text-start mb-0">
                                    <button type="submit" class="cmn-btn w-100">Update</button>
                                </div>                                
                            </div>
                        </div>
                    </form>
                    </div>
                </div>
    </div>
       

@stop

@section('script')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@21.0.4/build/js/intlTelInput.min.js"></script>
<script>
@php
$codes = array_column($country_list->toArray(),'prefix','dial_code');
@endphp
const input = document.querySelector("#phone");
const iti = window.intlTelInput(input, {
    initialCountry: "{{$codes[Auth::user()->dial_code]??'AE'}}",
    separateDialCode: true,
  onlyCountries: ["YE","AE","TR","SY","SA","QA","PS","OM","LB","KW","JO","IL","IQ","IR","EG","CY","BH"],
  utilsScript: "/intl-tel-input/js/utils.js?1716383386062" // just for formatting/placeholders etc
});

input.addEventListener("input", function () {
            // Get the selected country's dial code
            var dialCode = iti.getSelectedCountryData().dialCode;
            $('#dial_code').val(dialCode);
            

            // If you want to use the dial code somewhere else, you can do so here
        });
    $('document').ready(function(){
        //WebApp.alert("sss");
        //$('#dial_code').select2();
    })
    
    $('body').off('submit', '#register-form');
    $('body').on('submit', '#register-form', function(e) {
        e.preventDefault();
        
        var validation = $.Deferred();
        var $form = $(this);
        var formData = new FormData(this);
        $(".invalid-feedback").remove();
        $form.validate({
            rules: {
                
                dial_code: {
                required: true
            }
            },
            errorElement: 'div',
            errorPlacement: function(error, element) {
                element.addClass('is-invalid');
                error.addClass('error');
                error.insertAfter(element);
            }
        });

        //Bind extra rules. This must be called after .validate()
        WebApp.setJQueryValidationRules('#register-form');

        if ( $form.valid() ) {
            validation.resolve();
        } else {
            var error = $form.find('.error').eq(0);
            $('html, body').animate({
                scrollTop: (error.offset().top - 1000),
            }, 500);
            validation.reject();
        }

        validation.done(function() {
            WebApp.loading(true);
            $form.find('button[type="submit"]')
                .text('Saving')
                .attr('disabled', true);

            

            $.ajax({
                type: "POST",
                enctype: 'multipart/form-data',
                url: $form.attr('action'),
                data: formData,
                processData: false,
                contentType: false,
                cache: false,
                timeout: 600000,
                dataType: 'json',
                success: function(res) {
                    WebApp.loading(false);

                    if (res['status'] == 0) {
                        if (typeof res['errors'] !== 'undefined') {
                            var error_def = $.Deferred();
                            var error_index = 0;
                            jQuery.each(res['errors'], function(e_field, e_message) {
                                if (e_message != '') {
                                    $('[name="' + e_field + '"]').eq(0).addClass('is-invalid');
                                    $('<div class="invalid-feedback">' + e_message + '</div>')
                                        .insertAfter($('[name="' + e_field + '"]').eq(0));
                                    if (error_index == 0) {
                                        error_def.resolve();
                                    }
                                    error_index++;
                                }
                            });
                            error_def.done(function() {
                                var error = $form.find('.is-invalid').eq(0);
                                $('html, body').animate({
                                    scrollTop: (error.offset().top - 100),
                                }, 500);
                            });
                        } else {
                            var m = res['message'] ||
                            'Unable to submit your data. Please try again later.';
                            WebApp.alert(m, 'Oops!');
                        }
                    } else {
                        WebApp.alert(res['message'], 'Success!');
                                setTimeout(function(){
                                    if(res['redirectUrl'] && res['redirectUrl'] != ''){
                                        window.location.href=res['redirectUrl'];
                                    }else{
                                        //$('#loginModal').modal('show');
                                        window.location.reload();
                                    }
                                },1500);
                        
                    }

                    $form.find('button[type="submit"]')
                        .text('Save')
                        .attr('disabled', false);
                },
                error: function(e) {
                    WebApp.loading(false);
                    $form.find('button[type="submit"]')
                        .text('Save')
                        .attr('disabled', false);
                        WebApp.alert(e.responseText, 'Oops!');
                }
            });
        });
    });
    
</script>
@stop