@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 " src="{{asset('assets/images/Tiqkets-05.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('branch')}}" class="fa-solid fa-circle-chevron-left fs-3"></a>
                            <a href="{{url('currently')}}" class="fa-solid fa-circle-chevron-right fs-3"></a>
                        </div>
                        <div class="">
                            <h6 style='font-size:22px'>6) What problem are you looking to solve with tickets?</h6>
                            @foreach ($solve as $solv)

                            <p onclick="toggleColor(this)" class="p-2 rounded industry-option {{($solv->id ==(auth()->user()->solve_tickets))?' selected ':' '}}" style="border: 1px solid #0a58ca; color: #0a58ca; background-color: #f8f8f9;" data-sel="{{ $solv->id }}">{{ $solv->solve }}</p>
                            @endforeach
                        </div>
                        <span id='solve_error' class="error-text-msg d-none text-danger"></span>
                        <div class="mt-4">
                            <button  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/solvesave",
                data: {
                    solve: 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('/currently') }}";
                    } 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";
            $('#solve_error').html('please select input* <br>').removeClass('d-none');
            $('#solve_error').focus();
        }
    }
</script>
@endsection