@extends('layout.header')
@section('content')
<style>
        p {
        margin-top: 0;
        margin-bottom: 4px;
        font-size: 15px;
    }
    .selected {
    /* color: black !important; */
    border:1px solid #52050A !important ;
    color :#52050A !important;
    background-color: #f2e6eb !important;
  }
</style>
    <div class="container-fluid bg-image">
        <div class="col-12 col-md-10 col-lg-8 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="h-100 p-3 bg-custom rounded">
                            <h6 style='font-size:22px'class="text-custom">Almost There</h6>
                            <p style='font-size:15px'class="">Improve Your Question By Answering a few more Questions</p>
                            <img class="img-fluid px-3" src="{{asset('assets/images/Tiqkets-07.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">
                            <a href="{{url('currently')}}" class="fa-solid fa-circle-chevron-left fs-3"></a>
                            <a href="{{url('overview')}}" class="fa-solid fa-circle-chevron-right fs-3"></a>
                            </div>
                            <div class="">
                                <h6 style='font-size:22px'>8) How did you here about us?</h6>
                                @foreach ($hearethis     as $hear)

                          <p onclick="toggleColor(this)" class="p-2 rounded industry-option {{($hear->id ==(auth()->user()->about_us))?' selected ':' '}}" style="border: 1px solid #0a58ca; color: #0a58ca; background-color: #f8f8f9;" data-sel="{{ $hear->id }}">{{ $hear->how_to_here }}</p>
                          @endforeach
                            </div>
                            <span id='hear_error' class="error-text-msg d-none text-danger"></span>
                            <div class="mt-4">
                                <button style='font-size:15px'onclick="getSelectedValue()" class="btn btn-custom px-5">OK</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
  function toggleColor(element) {
    // Toggle class to change color
    element.classList.toggle('selected');
  }
</script>
<script>
    function toggleColor(element) {
        // Remove the 'selected' class from all optionss
        var options = document.getElementsByClassName('industry-option');
        for (var i = 0; i < options.length; i++) {
            options[i].classList.remove('selected');
        }

        // Add the 'selected' class to the clicked element
        element.classList.add('selected');
    }

    function getSelectedValue() {
        var selectedElement = document.querySelector('.industry-option.selected');
        if (selectedElement) {
            var selectedValue = selectedElement.getAttribute('data-sel');
            // alert("Selected value: " + selectedValue);
            // You can also perform other actions with the selected value here


            var id="{{auth()->user()->id;}}";
            $.ajax({
                type: 'POST',
                url: "{{ env('APP_URL') }}/api/hearthisSave",
                data: {
                    hear: selectedValue,
                    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
                        // });
                        // alert(response.user_id);
                        window.location.href= "{{ route('home') }}";
                    } 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.');
                }
            });


        } else {
          var value="please select input";
            $('#hear_error').html('please select input* <br>').removeClass('d-none');
            $('#hear_error').focus();
        }
    }
</script>
    @endsection