@include('header')
<style>
    .my_question {
        max-width: 50%;
    }

    .custom-dropdown {
        position: relative;
        width: 100%;
    }

    .dropdown-content {
        position: absolute;
        width: 100%;
        max-height: 180px; /* ارتفاع محدود */
        overflow-y: auto;
        border: 1px solid #ccc;
        background: white;
        display: none;
        z-index: 1000;
        border-radius: 4px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .user-item {
        padding: 10px;
        cursor: pointer;
        border-bottom: 1px solid #ddd;
        transition: background 0.3s;
    }

    .user-item:hover {
        background-color: #f7f7f7;
    }

    /* تنظیم باکس ورودی شبیه به فیلدهای Gentelella */
    #user_search {
        border-radius: 4px;
        height: 40px;
        font-size: 14px;
    }
    #service_questions{
        margin-right: 25%;
        /*background-color: #e1e1e1;*/
    }
</style>
<div class="x_panel">
    <div class="x_title">
        <h2>ثبت سفارش جدید</h2>
        <ul class="nav navbar-right panel_toolbox">
            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
        </ul>
        <div class="clearfix"></div>
    </div>

    <div style="display: flex">
        <i class="fa fa-info-circle" style="font-size: 20px; color: red"></i>
        <p style="margin-right:10px ; color: red "> همه فیلدها و سوالات باید تکمیل گردد.</p>
    </div>
    <div class="x_content">
        <form id="orderForm" class="form-horizontal form-label-left">

            <div class="item form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">انتخاب کاربر
                    <span class="required">*</span>
                </label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <div class="custom-dropdown">
                        <input type="text" id="user_search" class="form-control"
                               placeholder="نام کاربر را جستجو کنید...">
                        <div id="user_list" class="dropdown-content"></div>
                    </div>
                    <input type="hidden" id="selected_user_id" name="user_id">
                </div>
            </div>


            <!-- انتخاب سرویس اصلی -->
            <div class="item form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">انتخاب سرویس
                    <span class="required">*</span></label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <select id="parent_service" class="form-control">
                        <option value="">انتخاب کنید</option>
                        @foreach($parent_service as $service)
                            <option value="{{ $service->id }}">{{ $service->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <!-- انتخاب زیر دسته -->
            <div class="item form-group" id="sub_service_container" style="display: none;">
                <label class="control-label col-md-3 col-sm-3 col-xs-12"> انتخاب زیر دسته <span
                        class="required">*</span></label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <select id="sub_service" class="form-control">
                        <option value="">ابتدا دسته اصلی را انتخاب کنید</option>
                    </select>
                </div>
            </div>

            <!-- نمایش سوالات مربوطه -->
            <div class="item form-group my_question" id="service_questions" ></div>

            <!-- انتخاب تاریخ و زمان -->
            <div class="item form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">تاریخ: <span class="required">*</span></label>

                <div class="col-md-6 col-sm-6 col-xs-12">
                    <div style="display: flex">
                        <i class="fa fa-info-circle" style="font-size: 20px; color: red"></i>
                        <p style="margin-right:10px ; color: red "> تاریخ الزاما طبق فرمت 1401/01/01 وارد شود</p>
                    </div>
                    <input type="text" id="date" name="date" class="form-control" placeholder="1401/01/01">
                </div>
            </div>

            <div class="item form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">بازه زمانی: <span
                        class="required">*</span></label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <div style="display: flex">
                        <i class="fa fa-info-circle" style="font-size: 20px; color: red"></i>
                        <p style="margin-right:10px ; color: red "> بازه های زمانی طبق فرمت های اپلیکیشن وارد شود 24-20 / 20-16 / 16-12/ 12-8</p>
                    </div>

                    <input type="text" id="time" name="time" class="form-control" placeholder="16-20">
                </div>
            </div>

            <div class="item form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">انتخاب آدرس <span
                        class="required">*</span></label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <select id="address_id" name="address_id" class="form-control">
                        <option value="">آدرس را انتخاب کنید</option>
                    </select>
                </div>
            </div>

            <div class="item form-group">
                <label class="control-label col-md-3 col-sm-3 col-xs-12">توضیحات: <span
                        class="required">*</span></label>
                <div class="col-md-6 col-sm-6 col-xs-12">
                    <textarea id="caption" name="caption" class="form-control" placeholder="توضیحات اضافه"></textarea>
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-6 col-md-offset-3">
                    <button type="submit" class="btn btn-primary">ارسال سفارش</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


<script>

    // انتخاب کاربر و سرچ نام
    $(document).ready(function () {
        $("#user_search").on("input", function () {
            let searchText = $(this).val().trim();

            if (searchText.length > 1) { // جستجو فقط بعد از وارد کردن ۲ کاراکتر انجام شود
                $.ajax({
                    url: "/panel/get_users",
                    type: "POST",
                    data: {search: searchText},
                    success: function (users) {
                        let userHtml = "";
                        if (users.length > 0) {
                            users.forEach(user => {
                                userHtml += `<div class="user-item" data-id="${user.id}">${user.name}</div>`;
                            });
                        } else {
                            userHtml = `<div class="no-result">کاربری یافت نشد</div>`;
                        }

                        $("#user_list").html(userHtml).show();

                        // اضافه کردن کلیک برای هر کاربر
                        $(".user-item").click(function () {
                            let userId = $(this).data("id");
                            let userName = $(this).text();
                            $("#user_search").val(userName);
                            $("#selected_user_id").val(userId);
                            $("#user_list").hide();

                            // وقتی کاربر انتخاب شد، آدرس‌ها را بارگذاری می‌کنیم
                            loadUserAddresses(userId);
                        });
                    }
                });
            } else {
                $("#user_list").hide();
            }
        });

        // گرفتن آدرس های کاربر
        function loadUserAddresses(userId) {
            $.ajax({
                url: "/panel/get_user_address", // مسیر برای دریافت آدرس‌ها
                type: "POST",
                data: {user_id: userId},
                success: function (addresses) {
                    let addressHtml = "<option value=''>آدرس را انتخاب کنید</option>";
                    addresses.forEach(address => {
                        addressHtml += `<option value="${address.id}">${address.address}</option>`;
                    });

                    $("#address_id").html(addressHtml);
                },
                error: function () {
                    alert("خطا در دریافت آدرس‌ها. لطفاً دوباره امتحان کنید.");
                }
            });
        }
    });

    // گرفتن زیر دسته های یک دسته بندی
    $(document).ready(function () {
        // وقتی دسته اصلی انتخاب شد
        $("#parent_service").change(function () {
            let serviceId = $(this).val();
            console.log("Service ID:", serviceId); // مقدار بررسی شود

            if (serviceId) {
                // دریافت زیر دسته‌ها
                $.ajax({
                    type: "POST",
                    url: "/panel/get_service",
                    data: {id: serviceId},
                    success: function (res) {
                        if (res.length > 0) {
                            $("#sub_service").html('<option value="">یک زیر دسته انتخاب کنید</option>');
                            $.each(res, function (index, sub) {
                                $("#sub_service").append('<option value="' + sub.id + '">' + sub.name + '</option>');
                            });
                            $("#sub_service_container").show();
                        } else {
                            $("#sub_service_container").hide();
                            $("#service_questions").html(""); // سوالات را خالی کن
                        }
                    },
                    error: function () {
                        alert("خطا در دریافت زیر دسته‌ها. دوباره امتحان کنید.");
                    }
                });
            } else {
                $("#sub_service_container").hide();
                $("#service_questions").html(""); // سوالات را خالی کن
            }
        });

        // گرفتن سوالات یک دسته بندی
        $("#sub_service").change(function () {
            let subServiceId = $(this).val();

            if (subServiceId) {
                $.ajax({
                    type: "POST",
                    url: "/panel/get_question",
                    data: {id: subServiceId, _token: "{{ csrf_token() }}"},
                    success: function (res) {
                        let questionHtml = "";

                        res.forEach(question => {
                            questionHtml += '<div class="form-group question" data-id="' + question.id + '">'; // اضافه کردن کلاس question
                            questionHtml += '<label >' + question.question + '<span class="required">*</span></label>';

                            if (question.type === 'radio') {
                                question.answers.forEach(answer => {
                                    questionHtml += `
            <div class="form-check">
                <input class="form-check-input" type="radio" name="questions[${question.id}]" value="${answer.id}">
                <label class="form-check-label">${answer.answer}</label>
            </div>`;
                                });
                            } else if (question.type === 'checkbox') {
                                question.answers.forEach(answer => {
                                    questionHtml += `
            <div class="form-check">
                <input class="form-check-input" type="checkbox" name="questions[${question.id}][]" value="${answer.id}">
                <label class="form-check-label">${answer.answer}</label>
            </div>`;
                                });
                            } else if (question.type === 'text') {
                                questionHtml += `<textarea class="form-control" name="questions[${question.id}]" placeholder="پاسخ خود را بنویسید..."></textarea>`;
                            }

                            questionHtml += '</div>';
                        });

                        $("#service_questions").html(questionHtml);
                    },
                    error: function () {
                        alert("خطا در دریافت سوالات. لطفاً دوباره امتحان کنید.");
                    }
                });
            } else {
                $("#service_questions").html(""); // سوالات را خالی کن
            }
        });
    });

    //***************************** ارسال فرم نهایی

    $(document).ready(function () {
        // وقتی فرم ارسال می‌شود
        $("#orderForm").submit(function (e) {
            e.preventDefault();  // جلوگیری از ارسال پیش‌فرض فرم

            let formData = {
                user_id: $("#selected_user_id").val(),
                service_id: $("#parent_service").val(),
                sub_service_id: $("#sub_service").val(),
                date: $("#date").val(),
                time: $("#time").val(),
                address_id: $("#address_id").val(),
                caption: $("#caption").val(),
                questions: []  // اینجا آرایه سوالات خالی است که بعداً پر می‌شود
            };

            // جمع‌آوری سوالات و پاسخ‌ها
            $(".question").each(function () {
                let question_id = $(this).data("id");
                let question_type = $(this).find("input[type='radio'], input[type='checkbox'], textarea").attr("type") || "text";
                let answers = [];

                if (question_type === "radio") {
                    let selectedAnswer = $(this).find("input[type='radio']:checked");
                    if (selectedAnswer.length > 0) {
                        answers.push({
                            answer_id: selectedAnswer.val(),
                            answer_text: selectedAnswer.next("label").text()
                        });
                    }
                } else if (question_type === "checkbox") {
                    $(this).find("input[type='checkbox']:checked").each(function () {
                        answers.push({
                            answer_id: $(this).val(),
                            answer_text: $(this).next("label").text()
                        });
                    });
                } else if (question_type === "text") {
                    let answerText = $(this).find("textarea").val();
                    if (answerText) {
                        answers.push({
                            answer_id: null,
                            answer_text: answerText
                        });
                    }
                }

                if (answers.length > 0) {
                    formData.questions.push({
                        question_id: question_id,
                        answers: answers
                    });
                }
            });

            // لاگ گرفتن از اطلاعات فرم
            console.log("فرم ارسال شد با اطلاعات زیر:");
            console.log(formData);

            Swal.fire({
                title: 'آیا از ثبت سفارش مطمئن هستید؟',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'بله',
                cancelButtonText: 'خیر'
            }).then((result) => {
                if (result.isConfirmed) {
                    // ارسال اطلاعات به سرور
                    $.ajax({
                        type: "POST",
                        url: "/panel/add_order_page_action",
                        data: JSON.stringify(formData),
                        contentType: "application/json",
                        success: function (res) {
                            if (res.status === 'ok') {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'سفارش با موفقیت ثبت شد!',
                                    timer: 1500
                                }).then(() => {
                                    location.reload();
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'خطا در ثبت سفارش',
                                    text: res.message || 'مشکلی پیش آمد، لطفا مجدد تلاش کنید'
                                });
                            }
                        },
                        error: function (res) {
                            Swal.fire({
                                icon: 'error',
                                title: 'خطای سرور',
                                text: res.responseJSON?.message || 'مشکلی پیش آمد، لطفا مجدد تلاش کنید'
                            });
                        }
                    });
                }
            });
        });
    });

</script>
@include('footer')