@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="">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-06.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('solve') }}" class="fa-solid fa-circle-chevron-left fs-3"></a>
                                <a href="{{ url('/how-here-this') }}" class="fa-solid fa-circle-chevron-right fs-3"></a>
                            </div>
                            <div class="">
                                <h6 style='font-size:22px'>7) How did you currently solve this problem?</h6>
                                @foreach ($currentlySolve as $currently)
                                    <p onclick="toggleColor(this)"
                                        class="p-2 rounded industry-option {{ $currently->id == auth()->user()->currently_solve ? ' selected ' : ' ' }}"
                                        style="border: 1px solid #0a58ca; color: #0a58ca; background-color: #f8f8f9;"
                                        data-sel="{{ $currently->id }}">{{ $currently->currently_solve }}</p>
                                @endforeach
                            </div>
                            <span id='currently_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/currentlySave",
                    data: {
                        currently: 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 = "{{ url('/how-here-this') }}";
                        } 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";
                $('#currently_error').html('please select input* <br>').removeClass('d-none');
                $('#currently_error').focus();
            }
        }
    </script>
@endsection