@extends('seller.layout.index')

{{-- ===========  meta Title  =================== --}}
@section('title')
    اطلاعات فرم ارسالی
@endsection
@section('style')
    @include('admin.sellers.style')

    <style>
        .upload_div_icon {
            position: absolute;
            width: 100%;
            height: 100%;
            background: black;
            left: 0;
            top: 0;
            opacity: 0.7;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: white;
            cursor: pointer;
        }

        .show_file_upload_icon {
            position: relative;
        }
    </style>
@endsection


@section('script')
    <script>


        function show_accept_deal_modal() {
            $('#accept_deal_modal').modal('show');
        }

        fade_page()

        function fade_page() {
            $('.page-fade').show();
            $('#page-fade-loader').show();
        }

        // آرایه‌ای از مقادیر مورد نظر
        let selectedFields = {!! json_encode($selectedFields) !!} || []; // اطمینان از این که متغیر یک آرایه جاوااسکریپتی است

        // حذف نقل قول‌ها و کاما از هر عنصر
        if (Array.isArray(selectedFields)) {
            selectedFields = selectedFields.map(field => field.replaceAll('"', '').replaceAll(',', ''));
        } else {
            console.error('selectedFields باید یک آرایه باشد');
        }
        // اگر selectedFields یک رشته باشد، به آرایه‌ای تقسیم می‌شود
        const fieldsArray = typeof selectedFields === 'string' ? selectedFields.split(",") : selectedFields;
        console.log(fieldsArray);

        // اگر selectedFields یک رشته باشد، به آرایه‌ای تقسیم می‌شود
        function checkCheckboxes() {
            // برای هر چک باکس
            fieldsArray.forEach(field => {
                const checkbox = document.querySelector(`input[type="checkbox"][value="${field}"]`);
                if (checkbox) {
                    checkbox.checked = true; // چک باکس را انتخاب می‌کند
                }
            });
            disableAllCheckboxes();
            collectCheckedNames();
            disableCorrespondingInputs();
            @if(request()->is('seller/info'))
            removeCheckBoxes();
            @endif
            fade_out_page();

            setTimeout(function () {
                const elementsArray = $('.form-control').toArray();
                const namesArray = elementsArray.map(element => element.name);
// محاسبه اختلاف
                let differenceArray = namesArray.filter(name => !fieldsArray.includes(name));
                differenceArray = differenceArray.filter(item => item !== undefined);
                differenceArray = differenceArray.filter(Boolean);
                console.log('fieldsArray');
                console.log(fieldsArray);
                if (!fieldsArray.includes("type_user")) {
                    differenceArray.push('type_user');
                }else {
                    differenceArray = differenceArray.filter(item => item !== 'shenase_meli' && item !== 'shomare_sabt_sherkat');
                }
                differenceArray = differenceArray.filter(item => item !== 'new_password' && item !== 'repeat_password');
                console.log('differenceArray:' + differenceArray);
                $('#changes').val(differenceArray);

                let files_changes = $('.upload_div_icon').parent().find('input[type="file"]').toArray(); // فقط ورودی‌های نوع فایل
                let files_changes_name = files_changes.map(element => element.name);
                console.log(files_changes_name);
                $('#changes_files').val(files_changes_name);

            }, 2000)
        }

        function removeCheckBoxes() {
            $('input[onchange="collectCheckedNames()"]').remove();
        }

        function disableAllCheckboxes() {

            document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
                checkbox.disabled = true; // غیرفعال کردن چک باکس
            });
            if ($('input[name="type_user"]').is(':checked')) {
                $('#flexRadioDefault2').prop('disabled', true);
                $('#flexRadioDefault1').prop('disabled', true);
            } else {
                $('#flexRadioDefault2').prop('disabled', false); // اگر چک باکس تیک نخورده باشد، آن را فعال کن
                $('#flexRadioDefault1').prop('disabled', false); // اگر چک باکس تیک نخورده باشد، آن را فعال کن
            }
            if ($('input[value="map"]').is(':checked')) {
                $('#map').css({'pointer-events': 'none', 'opacity': '0.5'}); // غیرفعال کردن کلیک
            } else {
                $('#map').css({'pointer-events': 'auto', 'opacity': '1'}); // فعال کردن کلیک
            }

        }

        function disableCorrespondingInputs() {

            const checkboxes = document.querySelectorAll('input[type="checkbox"]');


            checkboxes.forEach(checkbox => {

                const inputId = checkbox.getAttribute('value'); // فرض بر این است که id اینپوت متناظر در data-target مشخص شده است

                const correspondingInput = document.getElementById(inputId);


                if (checkbox.checked && correspondingInput) {

                    correspondingInput.disabled = true; // غیرفعال کردن اینپوت متناظر

                } else if (!checkbox.checked && correspondingInput) {

                    correspondingInput.disabled = false; // فعال کردن اینپوت متناظر اگر چک باکس تیک نخورده باشد

                }

            });

        }


        // اضافه کردن رویداد برای چک باکس‌ها

        document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {

            checkbox.addEventListener('change', disableCorrespondingInputs);

        });


        // این تابع را در زمان بارگذاری صفحه صدا بزنید


        let checkedNames = [];


        function collectCheckedNames() {
            $('.highlight').removeClass('highlight')
            checkedNames = []; // Reset the array
            // همه چک باکس‌های انتخاب شده را دریافت می‌کنیم
            const checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
            console.log('checkboxes');
            console.log(checkboxes);
            let is_legal = $('input[name="type"]').val();
            if (fieldsArray.includes("user_type")) {
                $('#flexRadioDefault11').prop('disabled', true);
                $('#flexRadioDefault12').prop('disabled', true);
            }
            const firstCheckbox = document.querySelectorAll('input[type="checkbox"]:not(:checked)')[0];
            console.log(firstCheckbox);
            if (firstCheckbox) {
                firstCheckbox.scrollIntoView({behavior: 'smooth', block: 'center'});
            }

// پاک‌سازی هایلایت از تمامی ورودی‌ها
            document.querySelectorAll('input[type="text"], input[type="file"]').forEach(input => {
                input.classList.remove('highlight');
                const parentId = input.id + '_parent';
                const parentElement = document.getElementById(parentId);
                if (parentElement) {
                    parentElement.classList.remove('highlight');
                    parentElement.classList.add('show_file_upload_icon');

                    const newDiv = `
            <div class="upload_div_icon">

                <div class="file-label">
                    <div>
                        <svg width="50px" height="50px" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" fill="#8c8c8c" stroke="#8c8c8c">
                            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                            <g id="SVGRepo_iconCarrier">
                                <g fill="none" fill-rule="evenodd" stroke="#8c8c8c" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 5)">
                                    <path d="m8.5.5c2.7614237 0 5 2.23857625 5 5 0 .48543539-.0691781.95471338-.1982137 1.39851335.3339576-.25026476.748773-.39851335 1.1982137-.39851335 1.1045695 0 2 .8954305 2 2s-.8954305 2-2 2c-1.104407 0-10.16182706 0-11 0-1.65685425 0-3-1.34314575-3-3s1.34314575-3 3-3c.03335948 0 .06659179.00054449.09968852.00162508.46264217-2.28304993 2.48077946-4.00162508 4.90031148-4.00162508z"></path>
                                    <path d="m6.5 4.5 2-2 2 2"></path>
                                    <path d="m8.5 2.5v6"></path>
                                </g>
                            </g>
                        </svg>
                    </div>
                    انتخاب فایل
                </div>
<div>تصویر مورد تایید نمیباشد.لطفا تصویر جدیدی آپلود نمایید</div>
            </div>
        `;

                    parentElement.insertAdjacentHTML('afterbegin', newDiv);
                }
            });


            checkboxes.forEach(checkbox => {

                checkedNames.push(checkbox.value);

                const inputField = document.getElementById(checkbox.value);


                if (inputField) {


// اضافه کردن و حذف کلاس‌ها

                    inputField.classList.add('highlight');


                    // اگر ورودی نوع فایل باشد

                    if (inputField.type === 'file') {

                        const parentId = inputField.id + '_parent';

                        const parentElement = document.getElementById(parentId);

                        if (parentElement) {
                            console.log(parentElement);
                            parentElement.classList.add('highlight'); // هایلایت والد
                            parentElement.classList.remove('show_file_upload_icon');


// پیدا کردن upload_div_icon و حذف آن

                            const uploadDivIcon = parentElement.querySelector('.upload_div_icon'); // اطمینان حاصل کنید که انتخاب صحیح است

                            if (uploadDivIcon) {

                                uploadDivIcon.remove();

                            }
                        }

                    }

                }

            });
            // بررسی وجود city و province

            const hasCity = checkedNames.includes('city');

            const hasProvince = checkedNames.includes('province');
            if (hasCity) {
                $('#city').siblings().find('.select2-selection--single').addClass('highlight');
            }
            if (hasProvince) {
                $('#province').siblings().find('.select2-selection--single').addClass('highlight');
            }
        }


        function validate() {
            let status = check_checkboxes_checked()[0];
            let message = check_checkboxes_checked()[1];
            $('#confirmationModalText').html(message);
            checkedNames = JSON.stringify(checkedNames);

            // نمایش مودال
            $('#confirmationModal').modal('show');
            const confirmBtn = document.getElementById("confirmBtn");
            const cancelBtn = document.getElementById("CloseConfirmationModal");
            const closeBtn = document.querySelector(".close-btn");


            // عمل تایید
            confirmBtn.onclick = function () {
                $('#confirmationModal').modal('hide');
                // ارسال درخواست Ajax
                $.ajax({
                    url: '{{ route('admin.representation.validate_save') }}',
                    type: 'POST',
                    data: {
                        status: status,
                        inputs: checkedNames,
                        _token: "{{ csrf_token() }}",
                        seller: "{{ $seller->id }}"
                    },
                    dataType: 'json',
                })
                    .then((response) => {
                        console.log('عملیات با موفقیت انجام شد:', response);
                        if (response[0] == 1) {
                            window.location.reload();
                        }
                    })
                    .fail((xhr, status, error) => {
                        console.error('خطا در ارسال درخواست:', error);
                        console.log('پاسخ:', xhr.responseText);
                    });
            };

            // عمل لغو
            cancelBtn.onclick = function () {
                $('#confirmationModal').modal('hide');
            };

            // بستن مودال با کلیک روی دکمه بستن
            closeBtn.onclick = function () {
                $('#confirmationModal').modal('hide');
            };
        }


        window.onload = function () {
            setTimeout(function () {
                checkCheckboxes();
                let type_val = $('input[name="type"]:checked').val();
                ChangeType(type_val);
                var map_token = 'web.85411a4ae16b4a6f90937a647ba3d9c5';
                var location = $('[name="alopeyk_location"]').val();
                var center;

                if (location.length > 0) {
                    center = [location.split('-')[0], location.split('-')[1]];
                } else {
                    center = [35.699739, 51.338097];
                }

                var map = new L.Map('map', {
                    key: map_token,
                    maptype: 'dreamy',
                    poi: true,
                    traffic: false,
                    center: center,
                    zoom: 14
                });

                // اطمینان از اینکه اندازه نقشه به درستی تنظیم شده است
                map.invalidateSize();

                var marker;
                if (location.length > 0) {
                    location = location.split('-');
                    marker = new L.Marker([location[0], location[1]]).addTo(map);
                }

                map.on('click', function (e) {
                    if (marker) {
                        map.removeLayer(marker);
                    }
                    marker = new L.Marker([e.latlng.lat, e.latlng.lng]).addTo(map);
                    $('[name="alopeyk_location"]').val(e.latlng.lat + '-' + e.latlng.lng)
                });
            }, 1000);
        };


        $(document).ready(function () {
            $('.file-label').addClass('d-none');
            $('#form_validate_btn').remove();
            $('#form_validate_denied_btn').remove();
            $('#province').select2();
            $('#city').select2();
            let status = "{{ $seller->status }}";
            if (status == 3) {
                $('#edit_form_validate_btn').remove();
            }
        });

        //رمز عبور جدید
        $(document).ready(function () {
            $('#new_password').val('');
            $('#repeat_password').val('');


            $('#saveChanges').on('click', function () {
                // دریافت مقادیر فرم
                let newPassword = $('#new_password').val();
                let repeatPassword = $('#repeat_password').val();
                // خالی کردن خطاها
                $('#new_password_error').addClass('d-none');
                $('#repeat_password_error').addClass('d-none');

                // ارسال داده‌ها با استفاده از AJAX
                $.ajax({
                    url: "{{ route('home.seller.change_password') }}", // آدرس روت لاراول
                    type: 'POST',
                    data: {
                        new_password: newPassword,
                        repeat_password: repeatPassword,
                        _token: "{{ csrf_token() }}" // توکن CSRF
                    },
                    success: function (response) {
                        // در صورت موفقیت
                        alert('رمز عبور با موفقیت تغییر کرد!');
                        $('#new_password').val('');
                        $('#repeat_password').val('');
                    },
                    error: function (xhr) {

                        // در صورت خطا
                        let errors = xhr.responseJSON.errors;


                        // نمایش خطاها
                        if (errors.new_password) {
                            $('#new_password_error').text(errors.new_password[0]).removeClass('d-none');
                        }
                        if (errors.repeat_password) {
                            $('#repeat_password_error').text(errors.repeat_password[0]).removeClass('d-none');
                        }
                    }
                });
            });
        });

        $('#َAccept_deal').click(function () {
            let seller_id = "{{ $seller->id }}";
            $.ajax({
                url: '{{ route('home.seller.accept_deal') }}',
                type: 'POST',
                data: {
                    seller_id: seller_id,
                    _token: "{{ csrf_token() }}",
                },
                dataType: 'json',
            })
                .then((response) => {
                    console.log('عملیات با موفقیت انجام شد:', response);
                    if (response[0] == 1) {
                        window.location.href = "{{ route('home.seller.dashboard') }}";
                    }
                })
                .fail((xhr, status, error) => {
                    console.error('خطا در ارسال درخواست:', error);
                    console.log('پاسخ:', xhr.responseText);
                });
        })


    </script>
    @include('admin.sellers.script')
@endsection



{{-- ===========  CONTENT      =================== --}}

@section('content')
    <!-- Modal Confirmation -->
    <div class="modal fade" id="accept_deal_modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    {!! $setting->deal_representation !!}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="َAccept_deal">پذیرفتن</button>
                </div>
            </div>
        </div>
    </div>
    <div class="page-fade"></div>
    <div class="loader" id="page-fade-loader"></div>
    @if(isset($seller))
        @php
            $item=$seller;
        @endphp
    @endif

    @if($item->status==0)
        <div class="alert alert-info text-center f14pt">
            درخواست پنل نمایندگی شما در انتظار بازبینی و تایید ناظر می باشد و پس از تایید شما به امکانات داشبورد
            نمایندگان نیکسان دسترسی پیدا خواهید کرد
        </div>
    @endif

    @if($item->status==5)
        <div class="alert alert-info text-center f14pt">
قرار داد شما با موفقیت امضا شد و در انتظار تایید ناظر می باشد.
        </div>
    @endif


    @if($item->status==1)
        <div class="alert alert-warning text-center f14pt">
            اطلاعات درخواست نمایندگی شما توسط نیکسان بررسی شد و نیاز به ویرایش دارد
        </div>
    @endif


    {{--    @if($item->status==2)--}}
    {{--        <div class="alert alert-success text-center">--}}
    {{--            تایید شده--}}
    {{--                                        </div>--}}
    {{--    @endif--}}
    @if($item->status==3)
        <div class="alert alert-danger text-center f14pt">
            اطلاعات درخواست نمایندگی شما توسط نیکسان رد شد
        </div>
    @endif

    @include('admin.sellers.edit_items')

@endsection