@extends('reachassuree_web/layouts.main')
@section('title', $data['title'])
@section('content')
    <style>
        .form-control:disabled,
        .form-control[readonly] {
            background-color: #f1f1f1 !important;
        }

        .form-control-input:disabled {
            background-color: #ffffff !important;
            border: 0;

            text-align: right;
        }

        input#feedback_regarding1 {
            display: none;
        }

        @media(max-width: 991px) {
            label#feedback_regarding {
                font-size: 14px;
                padding: 0;
                line-height: 1.3;
            }
        }

        @media(max-width: 575px) {
            #feedback_regarding {
                display: none;
            }

            .feedback-desc {
                margin-top: 16px;
            }

            input#feedback_regarding1 {
                display: block;
            }

            input#feedback_regarding1 {
                text-align: left;
                padding-left: 0;
            }

            label#feedback_regarding1 {
                display: none;
            }
        }

        label#feedback_regarding {
            border: unset;
            line-height: 1.5;
            text-align: right;
        }

        .rating-stars {
            display: inline-flex;
            font-size: 32px;
            cursor: pointer;
        }

        /* .rating-stars i {
                   color: #ccc;
                   transition: color 0.2s ease-in-out;
                  } */

        .rating-stars i.fas,
        .rating-stars i.far {
            color: #ccc;
        }

        .rating-stars i.active {
            color: #007bff !important;
        }

        .rating-stars i.hovered {
            color: #007bff !important;
        }

        .rating-stars {
            display: inline-flex;
            font-size: 32px;
            cursor: pointer;
        }

        .rating-stars i {
            color: #ccc;
            width: 32px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            transition: color 0.2s ease-in-out;
        }

        .help-block.with-errors {
            color: #dc3545;
            font-size: 14px;
            margin-top: 5px;
        }

        .has-error .form-control {
            border-color: #dc3545;
        }
    </style>
    <!-- Start Page Title Area -->
    <div class="page-title-area">
        <div class="container">
            <div class="page-title-content">
                <h2>Customer Feedback</h2>
                <ul>
                    <li><a href="{{ route('home.page') }}">Home</a></li>
                    <li class="active">Customer Feedback</li>
                </ul>
            </div>
        </div>
        <img src="{{ asset('rassets/images/subscribe-shape-1.png') }}" alt="Image" class="shape shape-1" data-speed="0.04"
            data-revert="true">
        <img src="{{ asset('rassets/images/subscribe-shape-2.png') }}" alt="Image" class="shape shape-2"
            data-speed="0.04" data-revert="true">
    </div>


    <!-- Start Contact Area -->
    <section class="feedback-area pt-50 pb-50">
        <div class="container">
            <div class="section-title">
                <h4>Your Feedback Is Like as Gold for Us</h4>
                <h4>Welcomes You by Heartly </h4>
            </div>
            <div class="feedback-form">
                <form id="customerFeedback">
                    @csrf
                    <div class="row">
                        <div class="col-lg-6 col-sm-6">
                            <div class="form-group">
                                <label for="agent_code" class="form-label">Please Enter Agent Client No. Or Mobile No. <span
                                        class="text-danger">*</span></label>
                                <input type="text" name="agent_code" id="agent_code" class="form-control" required
                                    data-error="Please enter Agent Client No. Or Mobile No."
                                    placeholder="Agent Client No. Or Mobile No.">
                                <div class="help-block with-errors"></div>
                                <input type="hidden" id="agent_id" name='agent_id' />
                            </div>
                        </div>
                        <div class="col-lg-6 col-sm-6">
                            <div class="form-group">
                                <label for="date" class="form-label">Date</label>
                                <input type="text" name="feedback_date" id="feedback_date" value="10-12-2025"
                                    required data-error="Please enter your date" class="form-control" readonly>
                                <input type="hidden" name="feedback_date" id="feedback_date" value="2025-12-10">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <br> <br> <br> <br>
                        <div class="col-lg-6 col-sm-6">
                            <div class="form-group">
                                <label for="firm_name" class="form-label">Firm Name</label>
                                <input type="text" disabled name="firm_name" id="firm_name" class="form-control" required
                                    data-error="Please enter your name">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-sm-6">
                            <div class="form-group">
                                <label for="feedback_email" class="form-label"> Email</label>
                                <input type="text" disabled name="feedback_email" id="feedback_email" required
                                    data-error="Please enter your E-mail" class="form-control">
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>
                        <h5 class="my-4 text-center">Please proceed for your valued feedback as below details. FeedBack of
                            your for Us</h5>

                        <div class="col-lg-6 col-sm-6">
                            <div class="form-group">
                                <label name="feedback_regarding" id="feedback_regarding" class="form-control">Our Sales
                                    Services</label>
                                <!-- <input type="text" disabled name="feedback_regarding" id="feedback_regarding" class="form-control  form-control-input" placeholder='Our Sales Services'> -->
                                <label for="feedback_regarding" class="form-label"></label>
                                <label name="feedback_regarding" id="feedback_regarding" class="form-control">Our Renewal
                                    Services</label>
                                <!-- <input type="text" disabled name="feedback_regarding" id="feedback_regarding" class="form-control form-control-input" placeholder='Our Renewal Services'> -->
                                <label for="feedback_regarding" class="form-label"></label>
                                <label name="feedback_regarding" id="feedback_regarding" class="form-control">Our Web Site
                                    Services</label>
                                <!-- <input type="text" disabled name="feedback_regarding" id="feedback_regarding" class="form-control form-control-input" placeholder='Our Web Site Services'> -->
                                <label for="feedback_regarding" class="form-label"></label>
                                <label name="feedback_regarding" id="feedback_regarding" class="form-control">Our "Reach
                                    Ins. Agent Portfolio" Products (RIAP)</label>
                                <!-- <input type="text" disabled name="feedback_regarding" id="feedback_regarding" class="form-control form-control-input" placeholder='Our "Reach Ins. Agent Portfolio" Products (RIAP)'> -->
                                <label for="feedback_regarding" class="form-label"></label>
                                <label name="feedback_regarding" id="feedback_regarding" class="form-control">Our
                                    Executive / Assistance Behaviour with you</label>
                                <!-- <input type="text" disabled name="feedback_regarding" id="feedback_regarding" class="form-control form-control-input" placeholder='Our Executive / Assistance Behaviour with you'> -->
                                <label for="feedback_regarding" class="form-label"></label>
                                <label name="feedback_regarding" id="feedback_regarding" class="form-control">Regarding
                                    Payment/Refund</label>
                                <!-- <input type="text" disabled name="feedback_regarding" id="feedback_regarding" class="form-control form-control-input" placeholder='Regarding  Payment/Refund'> -->
                                <label for="feedback_regarding" class="form-label"></label>
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>


                        <div class="col-lg-6 col-sm-6">
                            <div class="row">
                                <!-- Feedback Rows -->
                                <div class="col-lg-12">
                                    <!-- Each feedback row -->
                                    <div class="form-group row align-items-center mb-4">

                                        {{-- <label class="col-sm-6 col-form-label">Our Sales Services</label> --}}
                                        <label for="feedback_regarding1" id="feedback_regarding1"
                                            class="form-label form-control-input"></label>
                                        <input type="hidden" name="rating1" id="rating1" value="">
                                        {{-- <input type="hidden" id="agent_id" name="agent_id" value="{{ $agent_id }}"> --}}
                                        <div class="col-sm-6">
                                            <div class="rating-stars" data-input="rating1">
                                                <i class="far fa-star" data-value="1"></i>
                                                <i class="far fa-star" data-value="2"></i>
                                                <i class="far fa-star" data-value="3"></i>
                                                <i class="far fa-star" data-value="4"></i>
                                                <i class="far fa-star" data-value="5"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row align-items-center mb-5">
                                        {{-- <label class="col-sm-6 col-form-label">Our Web Site Services</label> --}}
                                        <label for="feedback_regarding1" id="feedback_regarding1"
                                            class="form-label form-control-input" style="margin-top: 10px;"></label>
                                        <input type="hidden" name="rating2" id="rating2" value="">
                                        <div class="col-sm-6">
                                            <div class="rating-stars" data-input="rating2">
                                                <i class="far fa-star" data-value="1"></i>
                                                <i class="far fa-star" data-value="2"></i>
                                                <i class="far fa-star" data-value="3"></i>
                                                <i class="far fa-star" data-value="4"></i>
                                                <i class="far fa-star" data-value="5"></i>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row align-items-center mb-3">
                                        {{-- <label class="col-sm-6 col-form-label">Our Web Site Services</label> --}}
                                        <label for="feedback_regarding1" id="feedback_regarding1"
                                            class="form-label form-control-input" style="margin-top: -24px;"></label>
                                        <input type="hidden" name="rating3" id="rating3" value="">
                                        <div class="col-sm-6">
                                            <div class="rating-stars" data-input="rating3">
                                                <i class="far fa-star" data-value="1"></i>
                                                <i class="far fa-star" data-value="2"></i>
                                                <i class="far fa-star" data-value="3"></i>
                                                <i class="far fa-star" data-value="4"></i>
                                                <i class="far fa-star" data-value="5"></i>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row align-items-center  mb-3">
                                        <label for="feedback_regarding1" id="feedback_regarding1"
                                            class="form-label form-control-input" style="margin-top: 15px;"></label>
                                        <input type="hidden" name="rating4" id="rating4" value="">
                                        <div class="col-sm-6">
                                            <div class="rating-stars" data-input="rating4">
                                                <i class="far fa-star" data-value="1"></i>
                                                <i class="far fa-star" data-value="2"></i>
                                                <i class="far fa-star" data-value="3"></i>
                                                <i class="far fa-star" data-value="4"></i>
                                                <i class="far fa-star" data-value="5"></i>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row align-items-center mb-3">
                                        <label for="feedback_regarding1" id="feedback_regarding1" class="form-label"
                                            style="margin-top: 24px;"></label>
                                        <input type="hidden" name="rating5" id="rating5" value="">
                                        <div class="col-sm-6">
                                            <div class="rating-stars" data-input="rating5">
                                                <i class="far fa-star" data-value="1"></i>
                                                <i class="far fa-star" data-value="2"></i>
                                                <i class="far fa-star" data-value="3"></i>
                                                <i class="far fa-star" data-value="4"></i>
                                                <i class="far fa-star" data-value="5"></i>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row align-items-center mb-3">
                                        <label for="feedback_regarding1" id="feedback_regarding1" class="form-label"
                                            style="margin-top: 20px;"></label>
                                        <input type="hidden" name="rating6" id="rating6" value="">
                                        <div class="col-sm-6">
                                            <div class="rating-stars" data-input="rating6">
                                                <i class="far fa-star" data-value="1"></i>
                                                <i class="far fa-star" data-value="2"></i>
                                                <i class="far fa-star" data-value="3"></i>
                                                <i class="far fa-star" data-value="4"></i>
                                                <i class="far fa-star" data-value="5"></i>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label for="description" class="form-label feedback-desc">
                                    Write Your Feedback/Comments <span class="text-danger">*</span>
                                </label>
                                <textarea name="description" class="form-control" id="description" cols="30" rows="6" maxlength="250"
                                    required data-error="Please write your Feedback/Comment" placeholder="Write your Feedback Please "></textarea>
                                <div class="help-block with-errors"></div>
                            </div>
                        </div>

                        <!-- Add spacing using Bootstrap's `mb-4` (margin-bottom) -->
                        <div class="mb-4"></div>

                        <div class="col-lg-12 text-center">
                            <button id="FeedbackSubmitBtn" type="submit" class="default-btn">
                                <i class="ri-arrow-right-s-line"></i>
                                Submit
                            </button>
                            <div id="msgSubmit" class="h3 text-center hidden"></div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
    <script type="text/javascript">
        var ajaxRegistationURL = "{{ route('customer.feedback.search') }}";
        var ajaxcustomerFeedback = "{{ route('customer.feedback.save') }}";
        var checkFeedbackExistUrl = "{{ route('check.feedback.exist') }}";
    </script>
    <!-- Links of JS File -->
    <script src="{{ asset('rassets/js/jquery.min.js') }}"></script>
    <script src="{{ asset('rassets/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('rassets/js/meanmenu.min.js') }}"></script>
    <script src="{{ asset('rassets/js/owl.carousel.min.js') }}"></script>
    <script src="{{ asset('rassets/js/carousel-thumbs.min.js') }}"></script>
    <script src="{{ asset('rassets/js/aos.min.js') }}"></script>
    <script src="{{ asset('rassets/js/appear.min.js') }}"></script>
    <script src="{{ asset('rassets/js/odometer.min.js') }}"></script>
    <script src="{{ asset('rassets/js/magnific-popup.min.js') }}"></script>
    <script src="{{ asset('rassets/js/tween-max.min.js') }}"></script>
    <script src="{{ asset('rassets/js/form-validator.min.js') }}"></script>
    <script src="{{ asset('rassets/js/feedback-script.js') }}"></script>
    <script src="{{ asset('rassets/js/ajaxchimp.min.js') }}"></script>
    <script src="{{ asset('rassets/js/custom.js') }}"></script>
    <script src="{{ asset('rassets/libs/node-waves/waves.min.js') }}"></script>

    <script>
        // $(document).on('change', '#agent_code', function() {
        //     var csrfToken = $("[name=_token]").val();
        //     var agent_code = $(this).val();

        //     $.ajax({
        //         type: "POST",
        //         url: ajaxRegistationURL,
        //         data: {
        //             "agent_code": agent_code,
        //             "_token": csrfToken,
        //         },
        //         dataType: 'json',
        //         success: function(response) {
        //             if (response['status'] == 1) {
        //                 $("#FeedbackSubmitBtn").prop("disabled", false);
        //                 $("#firm_name").val(response['data']['firm_name']);
        //                 $("#feedback_email").val(response['data']['email']);
        //                 $("#agent_id").val(response['data']['id']);

        //                 // Call checkFeedbackExists only after agent_id is ready
        //                 checkFeedbackExists();
        //             } else {
        //                 $("#FeedbackSubmitBtn").prop("disabled", true);
        //             }
        //         }
        //     });
        // });



        $(document).on('change', '#agent_code', function() {
            var csrfToken = $("[name=_token]").val();
            var agent_code = $(this).val();
            var $agentCodeField = $(this);
            var $errorBlock = $agentCodeField.next('.help-block');

            if (agent_code.trim() === '') {
                $errorBlock.html('Please enter Agent Client No. Or Mobile No.');
                $("#FeedbackSubmitBtn").prop("disabled", true);
                return;
            }

            $.ajax({
                type: "POST",
                url: ajaxRegistationURL,
                data: {
                    "agent_code": agent_code,
                    "_token": csrfToken,
                },
                dataType: 'json',
                success: function(response) {
                    if (response['status'] == 1) {
                        $errorBlock.html(''); // Clear error message
                        $("#FeedbackSubmitBtn").prop("disabled", false);
                        $("#firm_name").val(response['data']['firm_name']);
                        $("#feedback_email").val(response['data']['email']);
                        $("#agent_id").val(response['data']['id']);
                        checkFeedbackExists();
                    } else {
                        $errorBlock.html('Invalid Agent Client No. Or Mobile No.');
                        $("#FeedbackSubmitBtn").prop("disabled", true);
                        resetFormFields();
                    }
                },
                error: function() {
                    $errorBlock.html('Error validating Agent Client No. Or Mobile No.');
                    $("#FeedbackSubmitBtn").prop("disabled", true);
                    resetFormFields();
                }
            });
        });

        function resetFormFields() {
            $("#firm_name").val('');
            $("#feedback_email").val('');
            $("#agent_id").val('');
        }

        $(document).on('input', '#agent_code', function() {
            if ($(this).val().trim() === '') {
                resetForm();
            } else {
                // When new value is entered, ensure form is properly reset first
                resetForm();

                // Then fetch new agent details
                fetchAgentDetails($(this).val().trim());
            }
        });

        function resetForm() {
            // Reset all form fields
            $("#firm_name").val('');
            $("#feedback_email").val('');
            $("#agent_id").val('');
            $("#description").val('');

            // Reset date
            $("#feedback_date").val('10-12-2025');
            $("input[name='feedback_date'][type='hidden']").val('2025-12-10');

            // Reset star ratings
            resetAllRatings();

            // Reset button state
            $("#FeedbackSubmitBtn")
                .prop("disabled", true) // Start disabled until valid agent code is entered
                .html('<i class="ri-arrow-right-s-line"></i> Submit')
                .removeClass('updating');

            // Clear any validation errors
            $(".help-block").html('');
            $(".has-error").removeClass("has-error");
        }

        function fetchAgentDetails(agentCode) {
            var csrfToken = $("[name=_token]").val();

            $.ajax({
                type: "POST",
                url: ajaxRegistationURL,
                data: {
                    "agent_code": agentCode,
                    "_token": csrfToken,
                },
                dataType: 'json',
                success: function(response) {
                    if (response.status == 1) {
                        $("#firm_name").val(response.data.firm_name);
                        $("#feedback_email").val(response.data.email);
                        $("#agent_id").val(response.data.id);
                        checkFeedbackExists();
                    } else {
                        $("#FeedbackSubmitBtn").prop("disabled", true);
                    }
                },
                error: function() {
                    $("#FeedbackSubmitBtn").prop("disabled", true);
                }
            });
        }

        // Initialize form on page load
        $(document).ready(function() {
            resetForm();
        });

        //   $(document).ready(function () {
        //     checkFeedbackExists();
        //   });

        $('#agent_code').on('blur', function() {
            checkFeedbackExists(); // will auto-fill only if something is found
        });


        function checkFeedbackExists() {
            $.ajax({
                type: "GET",
                url: checkFeedbackExistUrl,
                data: {
                    agent_id: $("#agent_id").val()
                },
                success: function(response) {
                    if (response.exists) {
                        $("#FeedbackSubmitBtn").text("Update");
                        fillFeedbackForm(response.feedback);
                    }
                }
            });
        }

        function fillFeedbackForm(feedback) {
            $("#feedback_date").val(feedback.display_date);
            $("#description").val(feedback.description);

            const ratings = {
                rating1: feedback.our_sales_servies,
                rating2: feedback.our_renewal_servies,
                rating3: feedback.our_website_servies,
                rating4: feedback.RIAprating,
                rating5: feedback.assistancebehaviour,
                rating6: feedback.pymentrating
            };

            for (const [inputId, value] of Object.entries(ratings)) {
                $("#" + inputId).val(value);

                const $starGroup = $(`.rating-stars[data-input="${inputId}"]`);
                $starGroup.children("i").each(function() {
                    const index = parseInt($(this).data("value"));
                    $(this).removeClass("fas fa-star fas fa-star-half-alt far active");

                    if (value >= index) {
                        $(this).addClass("fas fa-star active");
                    } else if (value >= index - 0.5) {
                        $(this).addClass("fas fa-star-half-alt active");
                    } else {
                        $(this).addClass("far fa-star");
                    }
                });

                // Manually track current rating for this group (if needed)
                // This keeps consistency with the click tracker system
                $starGroup.data("currentRating", value);
            }
        }



        $(document).ready(function() {

            $(".rating-stars i").on("click", function() {
                const index = parseFloat($(this).data("value"));
                const inputId = $(this).parent().data("input");

                let currentRating = $(this).parent().data("currentRating") || 0;

                // Toggle half/full click
                if (currentRating === index) {
                    currentRating = index - 0.5;
                } else {
                    currentRating = index;
                }

                // Set hidden input value
                $("#" + inputId).val(currentRating);
                $(this).parent().data("currentRating", currentRating);

                // Render stars
                $(this).parent().children("i").each(function() {
                    const starIndex = parseFloat($(this).data("value"));
                    $(this).removeClass("fas fa-star fas fa-star-half-alt far active");

                    if (currentRating >= starIndex) {
                        $(this).addClass("fas fa-star active");
                    } else if (currentRating >= starIndex - 0.5) {
                        $(this).addClass("fas fa-star-half-alt active");
                    } else {
                        $(this).addClass("far fa-star");
                    }
                });
            });

            // 👇 Remove mouseenter/mouseover if present in your code!
            $(".rating-stars i").off("mouseenter mouseover mousemove");
        });


        function resetAllRatings() {
            $(".rating-stars").each(function() {
                const inputId = $(this).data("input");

                // Clear hidden input value
                $("#" + inputId).val('');

                // Remove all active/star classes and reset
                $(this).data("currentRating", 0);
                $(this).children("i").each(function() {
                    $(this)
                        .removeClass("fas fa-star fas fa-star-half-alt active")
                        .addClass("far fa-star");
                });
            });


        }

        function resetFormUI() {

            $("#FeedbackSubmitBtn").html('<i class="ri-arrow-right-s-line"></i> Submit');
        }
    </script>

    <!-- End Contact Area -->
@endsection