@extends('layout.header')
@section('content')



<div class="container-fluid bg-image">
    <div class="col-12 col-md-8 col-lg-6 d-flex align-items-center justify-content-center">
        <div class="form-container">
            <div class="row p-2">
                <div class="col-12 col-md-6">
                    <div class="p-3 bg-custom rounded">
                        <h6 class="text-custom them-fs-1">Almost There</h6>
                        <p class=" them-fs-3">Improve Your Question By Answering a few more Questions</p>
                        <img class="img-fluid px-5 " src="{{asset('assets/images/Tiqkets-01.png')}}" alt="">
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="py-5 px-3">
                        <div class="justify-content-between align-items-center mb-3">
                            <i id="go-back" class="fa-solid fa-circle-chevron-left fs-3"></i>
                            <a href="{{url('company')}}" id="go-forward" class="fa-solid fa-circle-chevron-right fs-3"></a>
                        </div>
                        <div class="mb-3">
                            <h6 class='them-fs-3'>1) Enter Your Phone Number<span class="text-danger">*</span></h6>
                            <div class="input-group">
                                <select style="max-width: 140px;" class="form-select my-3 line-input" id="code" name="code">
                                    @foreach($countryList as $code => $name)
                                    <option value="{{ $name }} (+{{ $countryCodes[$code] }})" @if(auth()->user()->country == $name && auth()->user()->countrycode == $countryCodes[$code])
                                        selected
                                        @endif
                                        >
                                        {{ $name }} (+{{ $countryCodes[$code] }})
                                    </option>
                                    @endforeach
                                </select>

                                <input type="text" name="mobile" id="mobile" class="form-control my-3 line-input " value="{{auth()->user()->mobile}}">



                            </div>
                            <span id='mobile_error' class="error-text-msg d-none text-danger"></span>
                            <span id='code_error' class="error-text-msg d-none text-danger"></span>
                        </div>
                        <div>
                            <!-- <a href="{{ url('industry') }}" class="btn btn-custom px-5">OK</a> -->
                            <button onclick="mobile()" class="btn btn-custom px-5 them-fs-3 mt-2">OK</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function mobile() {
        // var formData = new FormData($('#saveform')[0]);
        var mobile = $("#mobile").val();
        var code = $("#code").val();
        var codesplit = code.split("("); // Split the string at the comma

        var countryName = codesplit[0].trim(); // Extract and trim the country name
        var countryCode = codesplit[1].match(/\d+/)[0];
        var id = "{{auth()->user()->id;}}";
        // alert(countryName +"     "+  countryCode);
        $.ajax({
            type: 'POST',
            url: "{{ env('APP_URL') }}/api/save",
            data: {
                mobile: mobile,
                code: countryCode,
                country: countryName,
                id: id,
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                // "Authorization": "Bearer " + "{{ session('token') }}"
            },
            success: function(response) {
                $('.error-text-msg').html('').addClass('d-none');

                if (response.success == true) {
                    // Swal.fire({
                    //     position: 'center',
                    //     icon: 'success',
                    //     title: response.message,
                    //     showConfirmButton: false,
                    //     timer: 3500,
                    //     showCloseButton: true
                    // });
                    window.location.href = "{{url('company')}}";
                } else if (response.success == false) {
                    Swal.fire({
                        position: 'center',
                        icon: 'success',
                        title: response.message,
                        showConfirmButton: false,
                        timer: 3500,
                        showCloseButton: true
                    });
                } else {
                    $.each(response.errors, function(key, value) {
                        $('#' + key + '_error').html(value.join('<br>')).removeClass('d-none');
                        $('#' + key).focus();
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error(xhr.responseText);
                alert('An error occurred. Please try again.');
            }
        });
    }
</script>
@endsection