@extends('layout.header')
@section('content')
    <style>
        p {
            margin-top: 0;
            margin-bottom: 4px;
            font-size: 15px;
        }

        .selected {
            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 class="text-custom them-fs-1">Almost There</h6>
                            <p class="them-fs-3">Improve Your Question By Answering a few more Questions</p>
                            <div class="them-center h-100" style="display: flex;width: auto;align-items: center;">
                                <img class="img-fluid px-5 " src="/assets/images/Tiqkets-02.png" alt="">

                            </div>
                        </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('company') }}" class="fa-solid fa-circle-chevron-left fs-3"></a>
                                <a href="{{ url('people') }}" class="fa-solid fa-circle-chevron-right fs-3"></a>
                            </div>
                            <div>
                                <p class=' fw-6 ' style="font-size:22px;font-weight: 500;">3) Industry<span class="text-danger">*</span></p>
                                @foreach ($industries as $industry)
                                    <!-- <p onclick="toggleColor(this)" class="p-2 rounded industry-option" style="border: 1px solid #0a58ca;color: #0a58ca;background-color: #f8f8f9;" data-sel="1">Healthcare</p>
                                        <p onclick="toggleColor(this)" class="p-2 rounded industry-option" style="border: 1px solid #0a58ca;color: #0a58ca;background-color: #f8f8f9;"data-sel="2">Banking and Financial Service</p>
                                        <p onclick="toggleColor(this)" class="p-2 rounded industry-option" style="border: 1px solid #0a58ca;color: #0a58ca;background-color: #f8f8f9;"data-sel="3">Retail</p>
                                        <p onclick="toggleColor(this)" class="p-2 rounded industry-option" style="border: 1px solid #0a58ca;color: #0a58ca;background-color: #f8f8f9;"data-sel="4">Government And Public Service</p>
                                        <p onclick="toggleColor(this)" class="p-2 rounded industry-option" style="border: 1px solid #0a58ca;color: #0a58ca;background-color: #f8f8f9;"data-sel="5">Telecom And Utility Service</p>
                                        <p onclick="toggleColor(this)" class="p-2 rounded industry-option"style="border: 1px solid #0a58ca;color: #0a58ca;background-color: #f8f8f9;"data-sel="6">Education</p> -->
                                    <p onclick="toggleColor(this)"
                                        class=" rounded industry-option p-2  {{ $industry->id == auth()->user()->industry ? ' selected ' : ' ' }}"
                                        style="border: 1px solid #0a58ca; color: #0a58ca; background-color: #f8f8f9;font-size:15px"
                                        data-sel="{{ $industry->id }}">{{ $industry->industry }}</p>
                                @endforeach
                            </div>
                            <span id='industry_error' class="error-text-msg d-none text-danger"></span>
                            <div>
                                <button onclick="getSelectedValue()" class="btn btn-custom px-5 mt-2"
                                    onclick="getSelectedValue()">OK</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function toggleColor(element) {
            // Remove the 'selected' class from all options
            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/industrysave",
                    data: {
                        industry: 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('/people') }}";
                        } 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 {
                alert("No industry selected");
            }
        }
    </script>
@endsection