@extends('home.layouts.index')

@section('title')
    ثبت نام نمایندگان
@endsection


@section('description')

@endsection

@section('keywords')

@endsection

@section('style')



    <link rel="stylesheet" href="{{ asset('admin/assets/css/mds.bs.datetimepicker.style.css') }}">
    <!-- Link to Select2 CSS -->
    <link href="{{ asset('admin/css/leaflet.css') }}" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/css/select2.min.css" rel="stylesheet"/>
    <!-- Bootstrap Select CSS -->
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">

    <style>
        main{
            background: #fff;
            padding: 20px 0;
        }
        .rounded-pill {
            border-radius: 10px;
        }

        .p0 {
            padding: 0 !important;
        }

        input[type="radio"] ~ label {
            padding-left: 2.5rem;
        }

        .btn {
            margin-right: 0;
            margin-left: 0;
        }

        .mr-2 {
            margin-right: 10px
        }

        .disabled {
            background-color: #989898;
        }

        .progress-parent {
            z-index: 99999999999999999999999;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            display: none
        }

        .progress {
            height: 20px; /* ارتفاع نوار پیشرفت */
            background-color: #f3f3f3; /* رنگ پس‌زمینه نوار */
            border-radius: 5px; /* گوشه‌های گرد */
            overflow: hidden; /* برای جلوگیری از overflow */
            margin: 20px 0; /* فاصله بالایی و پایینی */

        }

        .progress-bar {
            height: 100%; /* ارتفاع نوار پیشرفت */
            background-color: #4caf50; /* رنگ نوار پیشرفت */
            width: 0; /* حالت اولیه */
            transition: width 0.4s ease; /* انیمیشن تغییر عرض */
            color: white; /* رنگ متن (% بارگذاری) */
            text-align: center; /* تراز متن در وسط */
            line-height: 20px; /* تراز عمودی متن */
            border-radius: 5px; /* گوشه‌های گرد */
        }

        .swal-text {
            text-align: center
        }

        .btn.btn-primary {
            color: #fff !important;
            border-color: var(--bs-primary) !important;
            background-color: var(--bs-primary) !important;
        }

        .drop-area {
            border: 1px dashed var(--main-color-one) !important;
        }

        .file-label:hover {
            background-color: #b998ff !important;
        }

        .leaflet-container {
            z-index: 1;
        }

        #map {
            z-index: 9;
        }

        input[type="radio"]:checked ~ label::before {
            left: 0;
            width: 1.8rem;
            height: 1.8rem;
            background-color: #1d1f73;
            border: 1px solid #cdcdcd;
        }

        input[type="radio"] ~ label::after {
            width: 0.8rem;
            height: 0.8rem;
            left: 0.5rem;
            background: #ffffff;
            opacity: 0;
        }

        input[type="radio"] ~ label::before {
            left: 0;
            width: 1.8rem;
            height: 1.8rem;
            background-color: #fff;
            border: 1px solid #cdcdcd;
        }

        /*input[type="radio"] ~ label::before {*/
        /*    width: 24px;*/
        /*    height: 24px;*/
        /*}*/

        .confirm_btn {
            color: #FFFFFFFF !important;
            border-color: var(--main-color-one) !important;
            background-color: var(--bs-primary) !important;
            text-align: center;
            padding: calc(0.825rem + 1px) calc(1.75rem + 1px);*
            border-radius: 1.25rem !important;
            cursor: pointer
        }

        .disabled {
            background-color: #f0f0f0 !important; /* خاکستری روشن */
            pointer-events: none; /* جلوگیری از تعامل کاربر */
            opacity: 0.5; /* کاهش شفافیت */
        }

        body {
            transition: scroll-behavior 5s ease; /* برای اجرای اسکرول نرم */
        }

        label {
            display: block;
        }

        .rounded {
            border-radius: 15px !important;
        }

        .has-error {
            border: 1px solid red !important;
        }

        .position-relative {
            position: relative;
        }

        .cursor-pointer {
            cursor: pointer;
        }

        .circle-step {
            width: 40px;
            height: 40px;
            background: blue;
            border-radius: 50%;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
        }

        .step-font {
            font-size: 7pt;
        }

        /*//spinner css*/
        .loader {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: inline-block;
            border-top: 3px solid #FFF;
            border-right: 3px solid transparent;
            box-sizing: border-box;
            animation: rotation 1s linear infinite;
        }

        @keyframes rotation {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .page-fade {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: white;
            opacity: 0.85;
            z-index: 10;
            display: none;
        }

        #page-fade-loader {
            top: 30%;
            left: 45%;
            transform: translate(-50%, -50%); /* جابه‌جایی لودر به وسط */
            border-top: 3px solid #330000;
            width: 250px;
            height: 250px;
            position: fixed;
            z-index: 9;
            display: none;
        }

        @media screen and (max-width: 768px) {
            #page-fade-loader {
                top: 38%;
                left: 28%;
            }
        }

        /*//drop*/


        .drop-area {
            border: 2px dashed #b4b4b4;
            border-radius: 10px;
            padding: 40px;
            text-align: center;
            background-color: #ffffff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease;
            margin-bottom: 20px; /* فاصله بین کادرها */
        }

        .drop-area.highlight {
            background-color: #e0f7e0;
        }

        .file-label {
            display: inline-block;
            padding: 10px 20px;
            /*background-color: #b4b4b4;*/
            color: black;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .file-label:hover {
            background-color: #b4b4b4;
        }

        .gallery {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 20px;
        }

        .preview {
            margin: 10px;
        }

        .preview img {
            max-width: 200px;
            max-height: 200px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        .remove-btn {
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #f44336;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            display: none; /* پنهان بودن اولیه */
        }

        .remove-btn:hover {
            background-color: #d32f2f;
        }

        .drop-area input {
            display: none;
        }

        .select2-container {
            width: 100% !important;
            direction: rtl;
            text-align: right;
        }

        .select2-container--default .select2-selection--single {
            background-color: #fff;
            border: 1px solid #e3e3e3;
            height: 42px;
            border-radius: 12px;
            display: flex;
            align-items: center;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 26px;
            position: absolute;
            top: 8px !important;
            left: 6px !important;
            width: 20px;
            display: none;
        }

        .input-error-validation {
            font-size: 9pt;
            color: red;
        }
    </style>
    <style>
        h1 {
            color: #333;
            margin-bottom: 20px;
        }

        .p0 {
            padding: 0 !important;
        }

        .form-check-input {
            margin-top: 0 !important;
        }

        .form-check-label {
            margin-right: 20px;
        }

        .record-button, .delete-button {

            background-color: #3498db; /* رنگ دکمه ضبط */

            color: white;

            border: none;

            border-radius: 50%; /* گرد */

            width: 60px; /* اندازه کوچک */

            height: 60px; /* اندازه کوچک */

            font-size: 24px;

            cursor: pointer;

            transition: transform 0.2s, box-shadow 0.2s;

            margin: 10px;

        }

        .delete-button {

            background-color: #e74c3c; /* رنگ دکمه حذف */

        }

        .record-button:hover, .delete-button:hover {

            transform: scale(1.1);

            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);

        }

        audio {

            margin-top: 20px;

            border: none;

            width: 100%;

            border-radius: 5px;

            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);

        }

        #timer {

            margin-bottom: 20px;

            font-size: 24px;

            color: #555;

        }

        #delete {
            width: 40px !important;
            height: 40px !important;
            margin: 0 5px !important;
        }

        #audio {
            margin: 0 !important;
            border-radius: 25px !important;
        }

        .step-active {
            color: white !important;
            background-color: var(--color-primary-red) !important;
        }


        .step {
            border-radius: 5px;
            height: 40px;
            color: var(--main-color-one);
            padding: 30px 10px; /* تغییرات برای نمایش بهتر در صفحه‌های کوچک */
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12pt;
            background-color: #f4f5f9;
            width: 25%;
        }

        .steps-list {
            display: flex;
            justify-content: center;
            /*margin-top: -30px;*/
        }

        /* Media Query برای صفحه‌های کوچک‌تر */
        @media (max-width: 768px) {
            .steps-parent {
                display: block !important;
            }

            .step {
                width: 100%;
            }
        }


        .step-description {

            margin-top: 10px;

            text-align: center;

        }

        .steps-parent {
            background-color: #f4f5f9;
            width: 100%;
            display: flex;
            overflow: hidden;
            border-radius: 5px;
            border: 1px dashed var(--main-color-one);
        }

        .info-box {
            border: 1px dashed var(--main-color-one);
            padding: 0;
            border-radius: 5px;
            overflow: hidden;
        }

        .item-title {
            background-color: #f4f5f9;
            margin: 5px !important;
            border-radius: 5px;

        }

        .item-title > h5 {
            margin: 0;
            color: var(--main-color-one) !important;
        }

        .p-3 {
            padding: 20px;
        }



        .is-invalid {
            border-color: red !important;
        }

        .MT15 {
            margin-top: 15px;
        }

        .MT60 {
            margin-top: 60px;
        }

        textarea.form-control {
            border: 1px solid #cecece !important;
        }
    </style>
    <style>
        /*
        المان غیر فعال شده
        */
        [data-mds-dtp-guid][disabled] {
            opacity: 0.5 !important;
            cursor: default !important;
        }

        /*
        کانتینر بادی تقویم
        */
        .mds-bs-dtp-container {
            min-width: 300px !important;
            font-size: 12px !important;
            position: relative !important;
            overflow: visible !important;
        }

        /*
        عنوان تقویم در حالت in line
        */
        .mds-bs-dtp-container [mds-dtp-inline-header] {
            border-bottom: solid 1px #ccc !important;
        }

        .mds-bs-dtp-container.rtl {
            direction: rtl !important;
        }

        .mds-bs-dtp-container .select-year-box,
        .mds-bs-dtp-container .select-year-inline-box {
            position: absolute !important;
            left: 0 !important;
            top: 0 !important;
            width: 100% !important;
            height: 100% !important;
            background: #fff !important;
            text-align: center !important;
            transition: all 200ms ease !important;
            overflow: auto !important;
            z-index: 9999999 !important;
        }

        .mds-bs-dtp-container .select-year-inline-box {
            height: 90% !important;
        }

        /*
        اسکرول بار ها
        */
        .select-year-box::-webkit-scrollbar {
            width: 5px !important;
            height: 5px !important;
            background-color: #e4e4e4 !important;
        }

        .select-year-box::-webkit-scrollbar-thumb {
            background-color: #cdcdcd !important;
        }

        /*
          برای نمایش لیست سال های قابل انتخاب در مد inline
        */
        .mds-bs-dtp-container .select-year-box.inline {
            top: 27px !important;
            overflow: auto !important;
        }

        .mds-bs-dtp-container .select-year-box.w-0,
        .mds-bs-dtp-container .select-year-inline-box.w-0 {
            height: 0 !important;
        }

        .mds-bs-dtp-container .select-year-box button {
            font-size: 16px !important;
        }

        .mds-bs-dtp-container .select-year-box [data-selected-year] button {
            background-color: aquamarine !important;
        }

        .mds-bs-dtp-container .select-year-box [data-current-year] button {
            background-color: #c7f7c7 !important;
        }

        .mds-bs-dtp-container.rtl table:not([dir="ltr"]) {
            direction: rtl !important;
        }

        .mds-bs-dtp-container.rtl tfoot table {
            direction: ltr !important;
        }

        .mds-bs-dtp-container.rtl .dropdown-toggle::after {
            margin-left: 0 !important;
            margin-right: 0.255em !important;
        }

        .mds-bs-dtp-container * {
            font-size: 12px !important;
        }

        .mds-bs-dtp-container table {
            margin-bottom: 0 !important;
        }

        .mds-bs-dtp-container table th,
        .mds-bs-dtp-container table td {
            padding: 1px !important;
            font-size: 14px !important;
            text-align: center !important;
        }

        .mds-bs-dtp-container table tbody td[data-next-month] .btn,
        .mds-bs-dtp-container table tbody td[data-prev-month] .btn {
            background: #fff !important;
            border: none !important;
            cursor: default !important;
        }

        .mds-bs-dtp-container table table {
            background: transparent !important;
            background-color: transparent !important;
            border: none !important;
        }

        .mds-bs-dtp-container table table th {
            border: none !important;
        }

        .mds-bs-dtp-container table table input[type="text"] {
            width: 50px !important;
            border: none !important;
            text-align: center !important;
            background-color: #fff !important;
        }

        .mds-bs-dtp-container th {
            padding: 0 !important;
        }

        .mds-bs-dtp-container table table tbody.days {
            border: 0 !important;
        }

        .mds-bs-dtp-container table table tbody.days tr:first-child > td {
            vertical-align: top !important;
            padding-bottom: 5px !important;
            width: 14.2% !important;
            cursor: default !important;
            font-weight: bold !important;
        }

        .mds-bs-dtp-container table table tbody.days td[data-day] {
            cursor: pointer !important;
            transition: all 200ms ease !important;
        }

        .mds-bs-dtp-container table table tbody.days td[data-day][data-today] {
            background-color: aquamarine !important;
        }

        .mds-bs-dtp-container table table tbody.days td[data-day][data-mds-dtp-selected-day] {
            background-color: #96daff !important;
        }

        .mds-bs-dtp-container table table tbody.days td.selected-range-days-start-end {
            background-color: #c9e1ff !important;
        }

        /*
        روزهایی که در رنج انتخابی دیت پیکر هستند
        */
        .mds-bs-dtp-container table table tbody.days td.selected-range-days {
            background-color: #d9f2e6 !important;
        }

        /*
        روزهایی که مربوط به ماه های قبل و بعد هستند و در رنج انتخابی دیت پیکر هستند
        */
        .mds-bs-dtp-container table table tbody.days td.selected-range-days-nm {
            background-color: #78ffbe !important;
        }

        .mds-bs-dtp-container table table tbody.days td[data-special-date] {
            background-color: #c7f7c7 !important;
            border: 1px solid #00ce00 !important;
            transition: all 200ms ease !important;
        }

        .mds-bs-dtp-container table table tbody.days td[data-special-date]:hover {
            background-color: #7bff7b !important;
            border-color: #31cc31 !important;
        }

        .mds-bs-dtp-container table table tbody.days td[data-pm],
        .mds-bs-dtp-container table table tbody.days td[data-nm],
        .mds-bs-dtp-container table table tbody.days td[disabled] {
            cursor: default !important;
            opacity: 0.2 !important;
            transition: none !important;
        }

        .mds-bs-dtp-container table table tbody.days td[data-pm]:hover,
        .mds-bs-dtp-container table table tbody.days td[data-nm]:hover,
        .mds-bs-dtp-container table table tbody.days td[disabled]:hover {
            cursor: default !important;
            opacity: 0.3 !important;
            transition: none !important;
        }

        .mds-bs-dtp-container table table tbody.days td[data-day]:not([data-special-date]):hover,
        .mds-bs-dtp-container table table tbody.days td[data-nm]:hover,
        .mds-bs-dtp-container table table tbody.days td[data-pm]:hover {
            background: #ccc !important;
        }

        .mds-bs-dtp-container input[data-mds-dtp-time][type="time"] {
            text-align: center !important;
            border: none !important;
            font-size: 18px !important;
        }

        .mds-bs-dtp-container input[data-mds-dtp-time][type="time"]:focus {
            outline: none !important;
        }

        .mds-bs-dtp-container .btn {
            width: 100% !important;
            margin-bottom: 1px !important;
            padding: 1px !important;
            font-size: 14px !important;
        }

        .mds-bs-dtp-container .btn[disabled] {
            opacity: 0.2 !important;
        }

        .mds-bs-dtp-container .dropdown {
            padding: 0 !important;
            padding-bottom: 1px !important;
            text-align: center !important;
        }

        .mds-bs-dtp-container .dropdown-menu {
            min-width: 100px !important;
            width: 100px !important;
        }

        .mds-bs-dtp-container .dropdown-item {
            padding: 0 !important;
            padding-bottom: 1px !important;
            cursor: pointer !important;
            text-align: center !important;
        }

        .mds-bs-dtp-container .dropdown-item:not(.disabled):hover {
            background-color: #ccc !important;
        }

        .mds-bs-dtp-container .dropdown-item.disabled {
            opacity: 0.2 !important;
            cursor: default !important;
        }

        .mds-bs-dtp-container .dropdown-divider {
            margin-bottom: 1px !important;
            cursor: default !important;
        }

        .mds-bs-persian-datetime-picker-popover {
            opacity: 1 !important;
            max-width: 100% !important;
            -webkit-box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.1) !important;
            box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.1) !important;
            z-index: 999999999 !important;
        }

        .mds-bs-persian-datetime-picker-modal * {
            font-size: 24px !important;
        }

        /*
        عنوان مدال نمایش تقویم
        */
        [data-mds-dtp] .modal-title {
            line-height: 0.5 !important;
            width: 100% !important;
            text-align: center !important;
        }

        .sheba_no_IR {
            position: absolute;
            left: 10px;
            top: 7px;
            font-size: 16pt;
        }

    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.css">
    <style>
        .flatpickr-year-dropdown {
            background-color: white; /* پس‌زمینه سفید */
            color: #333; /* رنگ متن */
            border: 1px solid #ccc; /* حاشیه ملایم */
            border-radius: 4px; /* گرد کردن گوشه‌ها */
            padding: 5px; /* فاصله داخلی */
            font-size: 16px; /* اندازه متن */
            outline: none; /* حذف استایل پیش‌فرض outline */
            appearance: none; /* حذف فلش پیش‌فرض در مرورگرهای مدرن */
            -moz-appearance: none; /* حذف فلش پیش‌فرض در فایرفاکس */
            -webkit-appearance: none; /* حذف فلش پیش‌فرض در کروم و سافاری */
            width: auto;
        }

        /* ایجاد فلش سفارشی برای سلکت */
        .flatpickr-year-dropdown::after {
            content: '▼';
            position: absolute;
            right: 10px;
            pointer-events: none;
            color: #666;
        }

        /* استایل برای حذف فلش ورودی عددی در فایرفاکس */
        input[type="number"] {
            -moz-appearance: textfield;
        }

        /* استایل برای حذف فلش ورودی عددی در کروم و سایر مرورگرها */
        input[type="number"]::-webkit-outer-spin-button,
        input[type="number"]::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .arrowDown {
            display: none !important;
        }

        .arrowUp {
            display: none !important;
        }

        .flatpickr-months .flatpickr-month {
            height: 40px !important;
        }
#modal-otp-authorize{
    /*width:50vw;*/
}


@media  (max-width:768px)
{
    #modal-otp-authorize
{
    width:auto !important;
    height:auto !important;
}
.modal-backdrop{
    z-index:999 !important;
}
}
@media (min-width:768px)
{
    .modal{
        z-index:999999 !important;
    }
}

    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mds.bs.datetimepicker@3.0.6/dist/mds.bs.datetimepicker.style.css">

<style>
     .calendar-container {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            padding: 20px;
            margin: 10px auto;
            max-width: 350px;
              width:320px;
            position: absolute;
            z-index: 1000;
            display: none;
        }

        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .btn-month-year {
            background-color: #f8f9fa;
            border: 1px solid #ced4da;
            border-radius: 5px;
            padding: 5px 10px;
            font-size: 14px;
            cursor: pointer;
        }
        .calendar-days {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 5px;
            text-align: center;
        }
        .calendar-day-name {
            font-weight: bold;
            margin-bottom: 5px;
            color: #6c757d;
        }
        .calendar-day {
            border-radius: 5px;
            padding: 8px 0;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .calendar-day:hover {
            background-color: #e9ecef;
        }
        .calendar-day.selected {
            background-color: #0d6efd;
            color: white;
        }
        .calendar-day.other-month {
            color: #adb5bd;
        }
        .month-selector, .year-selector {
            display: none;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 10px;
        }
        .month-item, .year-item {
            border-radius: 5px;
            padding: 8px 0;
            text-align: center;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .month-item:hover, .year-item:hover {
            background-color: #e9ecef;
        }
        .month-item.selected, .year-item.selected {
            background-color: #0d6efd;
            color: white;
        }
        .birth-date-container {
            max-width: 500px;
            margin: 30px auto;
            position: relative;
        }
        .form-control-date {
            padding: 10px 15px;
            cursor: pointer;
            background-color: white;
        }


        @media (max-width: 576px) {
            .calendar-container {
                position: fixed;
                left: 10px;
                right: 10px;
                bottom: 10px;
                max-width: none;
                width:none;
                margin: 0;
            }
            .calendar-day {
                padding: 10px 0;
            }
            .birth-date-container {
                margin: 15px;
            }
        }
</style>
@endsection

@section('script')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="{{ asset('admin/assets/css/mds.bs.datetimepicker.style.css') }}">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>
<script src="{{ asset('admin/js/leaflet.js') }}"></script>
<script src="{{ asset('admin/assets/js/mds.bs.datetimepicker.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/js/select2.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/mds.bs.datetimepicker@3.0.6/dist/mds.bs.datetimepicker.js"></script>

    <script>



        $('#sheba_no').on('input', function () {
            // فقط اعداد را نگه‌دار
            this.value = this.value.replace(/[^0-9]/g, '');
        });

        $('#card_no').on('input', function () {
            // ورودی را از همه غیر از اعداد پاک کنیم

            let input = this.value.replace(/[^0-9]/g, '');

            // فرمت جدید با خط تیره

            this.value = input.replace(/(\d{4})(?=\d)/g, '$1-');
        });

        function toJalali(date) {
            const jalaliDate = new Intl.DateTimeFormat('fa-IR-u-ca-persian', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
            }).format(date);
            return jalaliDate.replace(/\//g, '/');
        }

        // flatpickr("#birth_date", {
        //     locale: {
        //         firstDayOfWeek: 6,
        //         weekdays: {
        //             shorthand: ["ش", "ی", "د", "س", "چ", "پ", "ج"],
        //             longhand: ["شنبه", "یکشنبه", "دوشنبه", "سه‌شنبه", "چهارشنبه", "پنجشنبه", "جمعه"]
        //         },
        //         months: {
        //             shorthand: ["فروردین", "اردیبهشت", "خرداد", "تیر", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند"],
        //             longhand: ["فروردین", "اردیبهشت", "خرداد", "تیر", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند"]
        //         }
        //     },
        //     dateFormat: "Y-m-d", // فرمت تاریخ میلادی برای ورودی
        //     defaultDate: "2024-01-01", // تاریخ پیش‌فرض
        //
        //     minDate: "1300-01-01", // حداقل تاریخ
        //
        //     maxDate: "1403-12-31", // حداکثر تاریخ
        //     onChange: function (selectedDates) {
        //         // تبدیل تاریخ میلادی به شمسی
        //         const selectedDate = selectedDates[0];
        //         const jalaliDate = moment(selectedDate).locale('fa').format('jYYYY/jM/jD');
        //
        //         console.log("تاریخ شمسی: ", jalaliDate);
        //         // می‌توانید تاریخ شمسی را در جایی نمایش دهید یا استفاده کنید
        //     },
        //
        //     allowInput: false, // کاربر می‌تواند تاریخ را به صورت دستی وارد کند
        //
        //     disableMobile: "true",
        // });

  $(document).ready(function () {
    $("#birth_date").mdsBootstrapPersianDateTimePicker({
      targetTextSelector: "#birth_date",
      enableTimePicker: false,
      englishNumber: true,
      selectedDate: "1402/12/01",
      minDate: "1300/01/01",
      maxDate: "1403/12/29",
    });
  });

        function markInvalidInputsAndScroll(jsonData) {
            let firstInvalidInput = null;

            for (const key in jsonData) {
                if (jsonData.hasOwnProperty(key)) {
                    const inputElement = document.getElementById(key);
                    if (inputElement) {
                        // اگر input readonly باشد، آن را پاک کنید
                        if (inputElement.hasAttribute('disabled')) {
                            inputElement.removeAttribute('disabled');
                        }
                        inputElement.classList.add('is-invalid');

                        // پیدا کردن اولین ورودی نادرست
                        if (!firstInvalidInput) {
                            firstInvalidInput = inputElement;
                        }

                    }
                }
            }

            // اسکرول به اولین ورودی نادرست
            if (firstInvalidInput) {
                firstInvalidInput.scrollIntoView({behavior: "smooth", block: "center"});
            }
        }


        function transformResponse(data) {
            const result = {};

            for (const key in data) {
                if (data.hasOwnProperty(key)) {
                    // حذف "Similarity" از کلیدها
                    const newKey = key.replace('Similarity', '');
                    // تبدیل کلمه به snake_case
                    const snakeCaseKey = newKey.replace(/([A-Z])/g, '_$1').toLowerCase();
                    result[snakeCaseKey] = data[key];
                }
            }

            return result;
        }

        $('#checkOTPAthurize').click(function () {

            checkOTPAthurize();
        });

        function checkOTPAthurize() {
            $('#checkOTPAthurize').text('لطفا منتظر بمانید...');
            $('#checkOTPAthurize').prop('disabled', true);
            let code1 = $('#checkOTPAthurizeForm').find('input[name="number_1"]').val();
            let code2 = $('#checkOTPAthurizeForm').find('input[name="number_2"]').val();
            let code3 = $('#checkOTPAthurizeForm').find('input[name="number_3"]').val();
            let code4 = $('#checkOTPAthurizeForm').find('input[name="number_4"]').val();
            let code5 = $('#checkOTPAthurizeForm').find('input[name="number_5"]').val();

            let otp = code5 + code4 + code3 + code2 + code1;

            let cellphone = $('#cellphone').val();
            let national_code = $('#national_code').val();


            $.ajax({

                url: "{{route('finotech.register.otp.code')}}",  // URL را به Endpoint واقعی خود تغییر دهید
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}',
                    'code': otp,
                    'cellphone': cellphone,
                    'national_code': national_code,
                },
                beforeSend: function () {
                    $('.loader-filter').show();

                },
                success: function (response) {
                    $('#checkOTPAthurize').text('تایید');
                    $('#checkOTPAthurize').prop('disabled', false);
                    $('.loader-filter').hide();
                    if (response.status == 'FAILED') {


                        swal({
                            text: response.message,
                            icon: "error",
                            timer: 2000,
                            buttons: false,
                        })
                        $('#modal-otp-authorize').modal('hide');
                        let inputs = transformResponse(response.invalidFields);

                        markInvalidInputsAndScroll(inputs);
                        $('#confirm-btn-1').prop('disabled', false);
                        $('#confirm-btn-1').html('تایید');

                    }
                    if (response.status == 400) {
                        if (response.birth_day == 1) {
                            $('#birth_date').addClass('has-error');
                        }
                        swal({
                            text: response.message,
                            icon: "error",
                            timer: 2000,
                            buttons: false,
                        })

                        let inputs = transformResponse(response.invalidFields);

                        markInvalidInputsAndScroll(inputs);
                        $('#modal-otp-authorize').modal('hide');
                        $('#confirm-btn-1').prop('disabled', false);
                        $('#confirm-btn-1').html('تایید');
                    }


                    if (response.status == 200) {
                        $('#modal-otp-authorize').modal('hide');
                        $('#step-1').find('.has_error').removeClass('has_error');
                        $('#step-1').find('.is-invalid').removeClass('is-invalid');
                        Show_Step_2();

                    }


                },

                complete: function () {
                    // دوباره فعال کردن دکمه
                    $('#submit-form').attr('disabled', false);
                    $('#submit-form .indicator-label').text('ثبت');
                    $('#submit-form .indicator-progress').hide();
                }
            });
        }

        $(document).ready(function () {
            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);
                console.log(marker.getLatLng());
            });
            let counter = 1;
            setInterval(function () {
                map.invalidateSize();
            }, 1000);


        })


        $(document).ready(function () {

            $('#province').select2();
            $('#city').select2();
        });
    </script>
    <script>
        // window.addEventListener('beforeunload', function (e) {
        //
        //     // پیام پیش‌فرض مرورگر برای هشدار
        //
        //     e.preventDefault(); // برای مرورگرهای جدید
        //
        //     return 'آیا مطمئن هستید که می‌خواهید این صفحه را ببندید؟'; // مرورگر ممکن است این پیام را نادیده بگیرد
        //
        // });

        // Upload to server

        document.querySelectorAll('.drop-area').forEach(dropArea => {
            const fileInput = dropArea.querySelector('.file-input');
            const gallery = dropArea.querySelector('.gallery');
            const removeBtn = dropArea.querySelector('.remove-btn');
            dropArea.addEventListener('click', () => fileInput.click());
            fileInput.addEventListener('change', () => {
                gallery.innerHTML = '';
                const file = fileInput.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = () => {
                        const preview = document.createElement('div');
                        preview.classList.add('preview');
                        preview.innerHTML = `<img src="${reader.result}" alt="${file.name}" style="max-width: 100%; max-height: 150px;">`;
                        gallery.appendChild(preview);
                        removeBtn.style.display = 'block';
                    };
                    reader.readAsDataURL(file);
                }
            });

            removeBtn.addEventListener('click', () => {

                gallery.innerHTML = '';

                fileInput.value = '';

                removeBtn.style.display = 'none';

            });


            dropArea.addEventListener('dragover', event => {

                event.preventDefault();

                dropArea.classList.add('hover');

            });


            dropArea.addEventListener('dragleave', () => {

                dropArea.classList.remove('hover');

            });


            dropArea.addEventListener('drop', event => {

                event.preventDefault();

                dropArea.classList.remove('hover');

                const dt = event.dataTransfer;

                const files = dt.files;

                fileInput.files = files;

                fileInput.dispatchEvent(new Event('change'));

            });

        });

        function are_you_sale(tag) {
            $('.who_sales_from_parent').addClass('d-none');
            let tag_value = $(tag).val();
            if (tag_value == 'بله') {
                $('.who_sales_from_parent').removeClass('d-none');
            }
        }

        function loader() {
            $('#confirm-btn-1').prop('disabled', true);
            $('#confirm-btn-1').html('<span class="loader"></span>');
        }

        function ConfirmStep(step) {

            remove_error();
            let start_ajax = false;
            if (step == 1) {
                start_ajax = data_step_1()[0];
                data = data_step_1()[1];
            }
            if (step == 2) {
                start_ajax = data_step_2()[0];
                data = data_step_2()[1];
            }
            if (step == 3) {
                start_ajax = data_step_3()[0];
                data = data_step_3()[1];
            }
            if (step == 4) {
                if (mediaRecorder && mediaRecorder.state === "recording") {
                    mediaRecorder.stop(); // رکورد را متوقف می‌کنیم
                }
                start_ajax = data_step_4()[0];
                data = data_step_4()[1];
            }
            if (step == 4 || step == 3) {
                if (!start_ajax) {

                    // به آرامی به اولین کلاس مورد نظر اسکرول کنیم
                    const target = document.querySelector('.has-error');
                    if (target) {
                        smoothScrollTo(target, 2000); // 500 میلی‌ثانیه زمان اسکرول
                    }
                }
            }


            if (start_ajax) {

                if (step == 1) {
                    form_1_ajax();
                }
                if (step == 2) {
                    form_2_ajax()
                }
                if (step == 3) {
                    form_3_ajax()
                }
                if (step == 4) {
                    form_4_ajax()
                }
            }
        }

        function OpenOtpModal() {
            $('#modal-otp-authorize').find('input').val('');
            $('#modal-otp-authorize').modal('show');
            setTimeout(function () {
                $('input[name="number_5"]').focus();
            }, 500)
        }

        function form_1_ajax() {
            fade_page();
            $.ajax({
                url: "{{ route('home.register_save.step1') }}",
                dataType: "json",
                method: "POST",
                data: data,
                beforeSend:
                    function () {
                        loader();
                    }
                ,
                success: function (msg) {
                    console.log(msg);
                    if (msg[0] == 0) {
                        fade_out_page();
                        $('#confirm-btn-1').prop('disabled', false);
                        $('#confirm-btn-1').html('تایید');
                        swal({
                            text: msg[1],
                            icon: "error",
                            timer: 2000,
                            buttons: false,
                        })
                    }
                    // Show_Step_2();

                    if (msg.status == 400) {
                        fade_out_page();
                        $('#sheba_no').addClass('has-error');
                        swal({
                            text: response.message,
                            icon: "error",
                            timer: 2000,
                            buttons: false,
                        })
                    }
                    if (msg[0] == 1) {
                        Show_Step_2();
                    }
                    if (msg == 200) {
                        fade_out_page();
                        OpenOtpModal();
                    }
                    if (msg == 403) {
                        $('#confirm-btn-1').prop('disabled', false);
                        $('#confirm-btn-1').html('تایید');
                        fade_out_page();
                        swal({
                            text: 'لطفا  vpn  خود را قطع کنید',
                            icon: "error",
                            timer: 2000,
                            buttons: false,
                        })
                    }
                    if (msg == 400) {
                        $('#confirm-btn-1').prop('disabled', false);
                        $('#confirm-btn-1').html('تایید');
                        fade_out_page();
                        swal({
                            text: 'مشکل در برقرای ارتباط',
                            icon: "error",
                            timer: 2000,
                            buttons: false,
                        })
                    }
                }
                ,
                error: function (msg) {
                    fade_out_page();
                    var errors = msg.responseJSON.errors;
                    console.log(errors);
                    $.each(errors, function (key, val) {
                        $('#' + key + '_error').removeClass('d-none');
                        $('#' + key + '_error').text(val[0]);
                    });
                    $('#confirm-btn-1').prop('disabled', false);
                    $('#confirm-btn-1').html('تایید');
                }
                ,
            })
        }

        function form_2_ajax() {
            fade_page();
            let code_javaz = $('#code_javaz').val();
            let first_name_owner = $('#first_name_owner').val();
            let last_name_owner = $('#last_name_owner').val();
            let national_code_owner = $('#national_code_owner').val();
            let javazType = $('input[name="javazType"]:checked').val();
            var formData = new FormData();
            // جمع‌آوری مقادیر ورودی‌ها
            formData.append('step', 2);

            formData.append('code_javaz', code_javaz);
            formData.append('first_name_owner', first_name_owner);
            formData.append('last_name_owner', last_name_owner);
            formData.append('national_code_owner', national_code_owner);
            formData.append('javazType', javazType);
            const fileInputs = document.querySelectorAll('input[name="axe_javaz"]');
            fileInputs.forEach(input => {
                if (input.files.length > 0) {
                    formData.append(input.name, input.files[0]);
                }
            });

            $.ajax({

                url: "{{ route('home.register_save.step1') }}",

                type: 'POST',

                data: formData,

                contentType: false,

                processData: false,

                success: function (response) {

                    if (response[0] == 1) {
                        Show_Step_3();
                    }

                    // ShowPreview();
                },
                error: function (msg) {
                    fade_out_page();
                    var errors = msg.responseJSON.errors;
                    $.each(errors, function (key, val) {
                        console.log(val);
                        $('#' + key + '_error').removeClass('d-none');
                        $('#' + key + '_error').text(val[0]);
                        const target = document.getElementById(key + '_error'); // بدون #
                        if (target) {
                            smoothScrollTo(target, 2000); // 2000 میلی‌ثانیه زمان اسکرول
                        }
                    });
                    $('#confirm-btn-1').prop('disabled', false);
                    $('#confirm-btn-1').html('تایید');
                }

            });
        }

        function separate_number(tag) {
            let number = $(tag).val();
            $(tag).val(number_format(number));
        }

        function number_format(number, decimals, dec_point, thousands_sep) {
            // Strip all characters but numerical ones.
            number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
            var n = !isFinite(+number) ? 0 : +number,
                prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
                sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
                dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
                s = '',
                toFixedFix = function (n, prec) {
                    var k = Math.pow(10, prec);
                    return '' + Math.round(n * k) / k;
                };
            // Fix for IE parseFloat(0.55).toFixed(0) = 0;
            s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
            if (s[0].length > 3) {
                s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
            }
            if ((s[1] || '').length < prec) {
                s[1] = s[1] || '';
                s[1] += new Array(prec - s[1].length + 1).join('0');
            }
            return s.join(dec);
        }

        function justNumber(tag) {
            // دریافت ورودی فعلی
            let input = $(tag).val();
            // حذف هر چیزی که عدد نیست
            $(tag).val(input.replace(/[^0-9]/g, ''));
        }

        function form_3_ajax() {
            fade_page();
            var formData = new FormData();
            // جمع‌آوری مقادیر ورودی‌ها
            formData.append('step', 3);
            formData.append('shop_name', document.getElementById('shop_name').value);
            formData.append('tel', document.getElementById('tel').value);
            formData.append('tel2', document.getElementById('tel2').value);
            formData.append('code_javaz', document.getElementById('code_javaz').value);
            formData.append('province', document.getElementById('province').value);
            formData.append('city', document.getElementById('city').value);
            formData.append('district', document.getElementById('district').value);
            formData.append('postal_code', document.getElementById('postal_code').value);
            formData.append('address', document.getElementById('address').value);
            formData.append('alopeyk_location', document.getElementById('alopeyk_location').value);
            formData.append('email', document.getElementById('email').value);
            formData.append('area', document.getElementById('area').value);
            formData.append('ownership', document.getElementById('ownership').value);
            formData.append('floor', document.getElementById('floor').value);
            formData.append('position_type', document.getElementById('position_type').value);
            formData.append('social_media', document.getElementById('social_media').value);
            formData.append('sabeghe', document.getElementById('sabeghe').value);
            formData.append('brands', $('input[name="brands"]:checked').val());
            formData.append('average_sale', document.getElementById('average_sale').value);
            formData.append('are_you_sale', document.getElementById('are_you_sale').value);
            formData.append('who_sales_from', document.getElementById('who_sales_from').value);
            formData.append('description', document.getElementById('description').value);
            formData.append('_token', "{{ csrf_token() }}");
            $.ajax({

                url: "{{ route('home.register_save.step1') }}",

                type: 'POST',

                data: formData,

                contentType: false,

                processData: false,

                success: function (response) {
                    Show_Step_4();
                },
                error: function (msg) {
                    fade_out_page();
                    var errors = msg.responseJSON.errors;
                    $.each(errors, function (key, val) {
                        $('#' + key + '_error').removeClass('d-none');
                        $('#' + key + '_error').text(val[0]);
                        const target = document.getElementById(key + '_error'); // بدون #
                        if (target) {
                            smoothScrollTo(target, 2000); // 2000 میلی‌ثانیه زمان اسکرول
                        }
                    });
                    $('#confirm-btn-1').prop('disabled', false);
                    $('#confirm-btn-1').html('تایید');
                }

            });
        }

        {{--function form_4_ajax() {--}}
        {{--    var formData = new FormData();--}}
        {{--    // جمع‌آوری مقادیر ورودی‌ها--}}
        {{--    formData.append('step', 4);--}}
        {{--    // جمع آوری فایل‌ها--}}
        {{--    const fileInputs = document.querySelectorAll('input[type="file"]');--}}
        {{--    fileInputs.forEach(input => {--}}
        {{--        if (input.files.length > 0) {--}}
        {{--            formData.append(input.name, input.files[0]);--}}
        {{--        }--}}
        {{--    });--}}
        {{--    // ارسال داده‌ها با AJAX--}}

        {{--    $.ajax({--}}

        {{--        url: "{{ route('home.register_save.step1') }}",--}}

        {{--        type: 'POST',--}}

        {{--        data: formData,--}}

        {{--        contentType: false,--}}

        {{--        processData: false,--}}

        {{--        success: function (response) {--}}
        {{--            ShowPreview();--}}
        {{--        },--}}
        {{--        error: function (msg) {--}}
        {{--            fade_out_page();--}}
        {{--            var errors = msg.responseJSON.errors;--}}
        {{--            $.each(errors, function (key, val) {--}}
        {{--                $('#' + key + '_error').removeClass('d-none');--}}
        {{--                $('#' + key + '_error').text(val[0]);--}}
        {{--                const target = document.getElementById(key + '_error'); // بدون #--}}
        {{--                if (target) {--}}
        {{--                    smoothScrollTo(target, 2000); // 2000 میلی‌ثانیه زمان اسکرول--}}
        {{--                }--}}
        {{--            });--}}
        {{--            $('#confirm-btn-1').prop('disabled', false);--}}
        {{--            $('#confirm-btn-1').html('تایید');--}}
        {{--        }--}}

        {{--    });--}}
        {{--}--}}

        function form_4_ajax() {
            fade_page(1);
            var formData = new FormData();
            // جمع‌آوری مقادیر ورودی‌ها
            formData.append('step', 4);
            // جمع آوری فایل‌ها
            const fileInputs = document.querySelectorAll('input[type="file"]');
            fileInputs.forEach(input => {
                if (input.files.length > 0) {
                    formData.append(input.name, input.files[0]);
                }
            });

            // ارسال داده‌ها با AJAX
            $.ajax({
                url: "{{ route('home.register_save.step1') }}",
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                xhr: function () {
                    var xhr = new window.XMLHttpRequest();
                    // Upload progress
                    xhr.upload.addEventListener("progress", function (evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = evt.loaded / evt.total;
                            percentComplete = Math.round(percentComplete * 100);
                            // نمایش درصد ارسال
                            $('#progress-bar').css('width', percentComplete + '%').attr('aria-valuenow', percentComplete).text(percentComplete + '%');
                        }
                    }, false);
                    return xhr;
                },
                success: function (response) {
                    final_submit();
                    // ShowPreview();
                    // می‌توانید در اینجا عملیات دیگری پس از موفقیت نیز انجام دهید.
                },
                error: function (msg) {
                    fade_out_page(1);
                    var errors = msg.responseJSON.errors;
                    $.each(errors, function (key, val) {
                        $('#' + key + '_error').removeClass('d-none');
                        $('#' + key + '_error').text(val[0]);
                        const target = document.getElementById(key + '_error'); // بدون #
                        if (target) {
                            smoothScrollTo(target, 2000); // 2000 میلی‌ثانیه زمان اسکرول
                        }
                    });
                    $('#confirm-btn-1').prop('disabled', false);
                    $('#confirm-btn-1').html('تایید');
                }
            });
        }


        function form_2_new_ajax() {
            var formData = new FormData();
            // جمع‌آوری مقادیر ورودی‌ها
            formData.append('step', 2);
            formData.append('shop_name', document.getElementById('shop_name').value);

            formData.append('tel', document.getElementById('tel').value);

            formData.append('code_javaz', document.getElementById('code_javaz').value);

            formData.append('province', document.getElementById('province').value);

            formData.append('city', document.getElementById('city').value);

            formData.append('district', document.getElementById('district').value);

            formData.append('postal_code', document.getElementById('postal_code').value);

            formData.append('address', document.getElementById('address').value);

            formData.append('alopeyk_location', document.getElementById('alopeyk_location').value);

            formData.append('email', document.getElementById('email').value);

            formData.append('area', document.getElementById('area').value);

            formData.append('ownership', document.getElementById('ownership').value);

            formData.append('floor', document.getElementById('floor').value);

            formData.append('position_type', document.getElementById('position_type').value);

            formData.append('sheba_no', document.getElementById('sheba_no').value);

            formData.append('card_no', document.getElementById('card_no').value);

            formData.append('social_media', document.getElementById('social_media').value);

            formData.append('sabeghe', document.getElementById('sabeghe').value);

            formData.append('brands', document.getElementById('brands').value);

            formData.append('average_sale', document.getElementById('average_sale').value);

            formData.append('are_you_sale', document.getElementById('are_you_sale').value);

            formData.append('who_sales_from', document.getElementById('who_sales_from').value);

            formData.append('description', document.getElementById('description').value);
            formData.append('_token', "{{ csrf_token() }}");
            // جمع آوری فایل‌ها
            const fileInputs = document.querySelectorAll('input[type="file"]');
            fileInputs.forEach(input => {
                if (input.files.length > 0) {
                    formData.append(input.name, input.files[0]);
                }
            });
            // ارسال داده‌ها با AJAX

            $.ajax({

                url: "{{ route('home.register_save.step1') }}",

                type: 'POST',

                data: formData,

                contentType: false,

                processData: false,

                success: function (response) {
                    // ShowPreview();
                    final_submit();
                },
                error: function (msg) {
                    fade_out_page();
                    var errors = msg.responseJSON.errors;
                    $.each(errors, function (key, val) {
                        $('#' + key + '_error').removeClass('d-none');
                        $('#' + key + '_error').text(val[0]);
                        const target = document.getElementById(key + '_error'); // بدون #
                        if (target) {
                            smoothScrollTo(target, 2000); // 2000 میلی‌ثانیه زمان اسکرول
                        }
                    });
                    $('#confirm-btn-1').prop('disabled', false);
                    $('#confirm-btn-1').html('تایید');
                }

            });
        }

        function final_submit() {
            fade_page(1);
            var formData = new FormData();
            // جمع‌آوری مقادیر ورودی‌ها
            formData.append('step', 5);
            //مقادیر 1
            formData.append('first_name', document.getElementById('first_name').value);
            formData.append('last_name', document.getElementById('last_name').value);
            formData.append('father_name', document.getElementById('father_name').value);
            formData.append('birth_date', document.getElementById('birth_date').value);
            formData.append('national_code', document.getElementById('national_code').value);
            formData.append('cellphone', document.getElementById('cellphone').value);
            formData.append('shomare_sabt_sherkat', document.getElementById('shomare_sabt_sherkat').value);
            formData.append('shenase_meli', document.getElementById('shenase_meli').value);
             formData.append('shomare_sheba_sherkat', document.getElementById('shomare_sheba_sherkat').value);

            formData.append('sheba_no', document.getElementById('sheba_no').value);
            let type = $('input[name="type"]:checked').val();
            formData.append('type', type);

            //مقادیر 2
            let code_javaz = $('#code_javaz').val();
            let first_name_owner = $('#first_name_owner').val();
            let last_name_owner = $('#last_name_owner').val();
            let national_code_owner = $('#national_code_owner').val();
            let javazType = $('input[name="javazType"]:checked').val();
            formData.append('code_javaz', code_javaz);
            formData.append('first_name_owner', first_name_owner);
            formData.append('last_name_owner', last_name_owner);
            formData.append('national_code_owner', national_code_owner);
            formData.append('javazType', javazType);

            //مقادیر 3

            formData.append('shop_name', document.getElementById('shop_name').value);

            formData.append('tel', document.getElementById('tel').value);

            formData.append('code_javaz', document.getElementById('code_javaz').value);

            formData.append('province', document.getElementById('province').value);

            formData.append('city', document.getElementById('city').value);

            formData.append('district', document.getElementById('district').value);

            formData.append('postal_code', document.getElementById('postal_code').value);

            formData.append('address', document.getElementById('address').value);

            formData.append('alopeyk_location', document.getElementById('alopeyk_location').value);

            formData.append('email', document.getElementById('email').value);

            formData.append('area', document.getElementById('area').value);

            formData.append('ownership', document.getElementById('ownership').value);

            formData.append('floor', document.getElementById('floor').value);

            formData.append('position_type', document.getElementById('position_type').value);


            // formData.append('card_no', document.getElementById('card_no').value);

            formData.append('social_media', document.getElementById('social_media').value);

            formData.append('sabeghe', document.getElementById('sabeghe').value);

            formData.append('brands', $('input[name="brands"]:checked').val());

            formData.append('average_sale', document.getElementById('average_sale').value);

            formData.append('are_you_sale', document.getElementById('are_you_sale').value);

            formData.append('who_sales_from', document.getElementById('who_sales_from').value);

            formData.append('description', document.getElementById('description').value);

            formData.append('_token', "{{ csrf_token() }}");
            // جمع آوری فایل‌ها
            const fileInputs = document.querySelectorAll('input[type="file"]');
            fileInputs.forEach(input => {
                if (input.files.length > 0) {
                    formData.append(input.name, input.files[0]);
                }
            });
            // ارسال داده‌ها با AJAX
            // مشخص کردن آدرس Blob

            // const audioElement = document.getElementById('audio');
            //
            // const audioSrc = audioElement.src;


            // بررسی وجود منبع صوتی


            sendData(formData);
        }

        {{--function sendData(formData) {--}}

        {{--    $.ajax({--}}

        {{--        url: "{{ route('home.register_save.step1') }}",--}}

        {{--        type: 'POST',--}}

        {{--        data: formData,--}}

        {{--        contentType: false,--}}

        {{--        processData: false,--}}

        {{--        success: function (response) {--}}
        {{--            if (response[0] == 1) {--}}
        {{--                    swal({--}}
        {{--                        title: 'باتشکر',--}}
        {{--                        text: ' اطلاعات و درخواست نمایندگی شما برای تاش رادیاتور ثبت گردید، بزودی درخواست شما بررسی و نتیجه اعلام می گردد',--}}
        {{--                        icon: 'success',--}}
        {{--                        timer: 3000,--}}
        {{--                    })--}}
        {{--                    setTimeout(function () {--}}
        {{--                        window.location.href = '{{ route('home.index')}}';--}}
        {{--                    }, 3000)--}}
        {{--            }--}}

        {{--        },--}}

        {{--        error: function (msg) {--}}
        {{--            fade_out_page();--}}
        {{--            var errors = msg.responseJSON.errors;--}}

        {{--            $.each(errors, function (key, val) {--}}

        {{--                $('#' + key + '_error').removeClass('d-none');--}}

        {{--                $('#' + key + '_error').text(val[0]);--}}

        {{--                const target = document.getElementById(key + '_error'); // بدون #--}}

        {{--                if (target) {--}}

        {{--                    smoothScrollTo(target, 2000); // 2000 میلی‌ثانیه زمان اسکرول--}}

        {{--                }--}}

        {{--            });--}}

        {{--            $('#confirm-btn-1').prop('disabled', false);--}}

        {{--            $('#confirm-btn-1').html('تایید');--}}

        {{--        }--}}

        {{--    });--}}

        {{--}--}}

        function sendData(formData) {
            $.ajax({
                url: "{{ route('home.register_save.step1') }}",
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                xhr: function () {
                    var xhr = new window.XMLHttpRequest();
                    // Upload progress
                    xhr.upload.addEventListener("progress", function (evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = evt.loaded / evt.total;
                            percentComplete = Math.round(percentComplete * 100);
                            // نمایش درصد ارسال
                            $('#progress-bar').css('width', percentComplete + '%').attr('aria-valuenow', percentComplete).text(percentComplete + '%');
                        }
                    }, false);
                    return xhr;
                },
                success: function (response) {
                    if (response[0] == 1) {

                        fade_out_page(1);

                        swal({

                            title: 'باتشکر',

                            text: ' اطلاعات و درخواست نمایندگی شما برای Aplus ثبت گردید، بزودی درخواست شما بررسی و نتیجه اعلام می گردد',

                            icon: 'success',

                            button: 'ok',

                        })
                            .then(() => {

                                window.location.href = response[1]; // هدایت به روت جدید بعد از کلیک

                            });

                    }

                },
                error: function (msg) {
                    fade_out_page(1);
                    var errors = msg.responseJSON.errors;

                    $.each(errors, function (key, val) {
                        $('#' + key + '_error').removeClass('d-none');
                        $('#' + key + '_error').text(val[0]);

                        const target = document.getElementById(key + '_error'); // بدون #
                        if (target) {
                            smoothScrollTo(target, 2000); // 2000 میلی‌ثانیه زمان اسکرول
                        }
                    });

                    $('#confirm-btn-1').prop('disabled', false);
                    $('#confirm-btn-1').html('تایید');
                }
            });
        }


        function data_step_1() {

            let finotech_checked = $('#finotech_checked').val();
            let first_name = $('#first_name').val();
            let father_name = $('#father_name').val();
            let birth_date = $('#birth_date').val();
            let last_name = $('#last_name').val();
            let national_code = $('#national_code').val();
            let cellphone = $('#cellphone').val();
            let sheba_no = $('#sheba_no').val();

            let type = $('input[name="type"]:checked').val();
            let start_ajax = true;

            let shomare_sabt_sherkat = $('#shomare_sabt_sherkat').val();
            let shenase_meli = $('#shenase_meli').val();

            let shomare_sheba_sherkat = $('#shomare_sheba_sherkat').val();

            if (first_name.length == 0) {
                $('#first_name').addClass('has-error');
                start_ajax = false;
            }
            if (last_name.length == 0) {
                $('#last_name').addClass('has-error');
                start_ajax = false;
            }
            if (father_name.length == 0) {
                $('#father_name').addClass('has-error');
                start_ajax = false;
            }
            if (birth_date.length == 0) {
                $('#birth_date').addClass('has-error');
                start_ajax = false;
            }
            if (national_code.length == 0) {
                $('#national_code').addClass('has-error');
                start_ajax = false;
            }
            if (cellphone.length == 0) {
                $('#cellphone').addClass('has-error');
                start_ajax = false;
            }
            if (sheba_no.length == 0) {
                $('#sheba_no').addClass('has-error');
                start_ajax = false;
            }
            if (typeof type == "undefined") {
                $('#type').addClass('has-error');
                start_ajax = false;
            }
            if (type == 2) {
                if (shomare_sabt_sherkat.length == 0) {
                    $('#shomare_sabt_sherkat').addClass('has-error');
                    start_ajax = false;
                }
                if (shenase_meli.length == 0) {
                    $('#shenase_meli').addClass('has-error');
                    start_ajax = false;
                }

                if(shomare_sheba_sherkat.length == 0){
                    $('#shomare_sheba_sherkat').addClass('has-error');
                    start_ajax = false;
                }
            }
            cellphone = cellphone_check(cellphone);
            return [start_ajax, {
                step: 1,
                _token: "{{ csrf_token() }}",
                first_name: first_name,
                father_name: father_name,
                last_name: last_name,
                birth_date: birth_date,
                national_code: national_code,
                cellphone: cellphone,
                sheba_no: sheba_no,
                type: type,
                shomare_sabt_sherkat: shomare_sabt_sherkat,
                shenase_meli: shenase_meli,
                shomare_sheba_sherkat:shomare_sheba_sherkat,
                finotech_checked: finotech_checked,
            }]
        }

        function data_step_2() {
            let start_ajax = true;

            let code_javaz = $('#code_javaz').val();
            if (code_javaz.length == 0) {
                $('#code_javaz').addClass('has-error');
                start_ajax = false;
            }

            let axe_javaz = $('#axe_javaz')[0].files.length;
            if (axe_javaz == 0) {
                $('#axe_javaz_parent').addClass('has-error');
                start_ajax = false;
            }
            let javazType = $('input[name="javazType"]:checked').val();
            if (javazType == 0) {
                let first_name_owner = $('#first_name_owner').val();
                if (first_name_owner.length == 0) {
                    $('#first_name_owner').addClass('has-error');
                    start_ajax = false;
                }
                let last_name_owner = $('#last_name_owner').val();
                if (last_name_owner.length == 0) {
                    $('#last_name_owner').addClass('has-error');
                    start_ajax = false;
                }
                let national_code_owner = $('#national_code_owner').val();
                if (national_code_owner.length == 0) {
                    $('#national_code_owner').addClass('has-error');
                    start_ajax = false;
                }
            }


            return [start_ajax, 'pppp']
        }

        function data_step_3() {
            let start_ajax = true;
            let shop_name = $('#shop_name').val();
            if (shop_name.length == 0) {
                $('#shop_name').addClass('has-error');
                start_ajax = false;
            }
            let tel = $('#tel').val();
            if (tel.length == 0) {
                $('#tel').addClass('has-error');
                start_ajax = false;
            }
            let code_javaz = $('#code_javaz').val();
            if (code_javaz.length == 0) {
                $('#code_javaz').addClass('has-error');
                start_ajax = false;
            }

            let province = $('#province').val();
            if (province.length == 0) {
                $('#province').next().find('.select2-selection--single').addClass('has-error');
                start_ajax = false;
            }
            let city = $('#city').val();
            if (city.length == 0) {
                $('#city').next().find('.select2-selection--single').addClass('has-error');
                start_ajax = false;
            }
            let district = $('#district').val();
            if (district.length == 0) {
                $('#district').addClass('has-error');
                start_ajax = false;
            }
            let postal_code = $('#postal_code').val();
            if (postal_code.length == 0) {
                $('#postal_code').addClass('has-error');
                start_ajax = false;
            }
            let address = $('#address').val();
            if (address.length == 0) {
                $('#address').addClass('has-error');
                start_ajax = false;
            }

            // let alopeyk_location = $('#alopeyk_location').val();
            // if (alopeyk_location.length == 0) {
            //     $('#map').addClass('has-error');
            //     start_ajax = false;
            // }

            // let email = $('#email').val();
            // if (email.length == 0) {
            //     $('#email').addClass('has-error');
            //     start_ajax = false;
            // }
            let area = $('#area').val();
            if (area.length == 0) {
                $('#area').addClass('has-error');
                start_ajax = false;
            }
            let ownership = $('#ownership').val();
            if (ownership.length == 0) {
                $('#ownership').addClass('has-error');
                start_ajax = false;
            }
            let floor = $('#floor').val();
            if (floor.length == 0) {
                $('#floor').addClass('has-error');
                start_ajax = false;
            }
            let position_type = $('#position_type').val();
            if (position_type.length == 0) {
                $('#position_type').addClass('has-error');
                start_ajax = false;
            }
            // let social_media = $('#social_media').val();
            // if (social_media.length == 0) {
            //     $('#social_media').addClass('has-error');
            //     start_ajax = false;
            // }
            let sabeghe = $('#sabeghe').val();
            if (sabeghe.length == 0) {
                $('#sabeghe').addClass('has-error');
                start_ajax = false;
            }
            // let brands = $('input[name="brands"]:checked').val();
            // if (typeof brands == "undefined") {
            //     $('#brands').addClass('has-error');
            //     start_ajax = false;
            // }
            let are_you_sale = $('#are_you_sale').val();
            if (are_you_sale.length == 0) {
                $('#are_you_sale').addClass('has-error');
                start_ajax = false;
            }
            if (are_you_sale == 'بله') {
                let who_sales_from = $('#who_sales_from').val();
                if (who_sales_from.length == 0) {
                    $('#who_sales_from').addClass('has-error');
                    start_ajax = false;
                }
            }

            // let average_sale = $('#average_sale').val();
            // if (average_sale.length == 0) {
            //     $('#average_sale').addClass('has-error');
            //     start_ajax = false;
            // }
            // let description = $('#description').val();
            // if (description.length == 0) {
            //     $('#description').addClass('has-error');
            //     start_ajax = false;
            // }

            return [start_ajax, 'pppp']
        }

        function data_step_4() {
            let start_ajax = true;
            // let axe_javaz = $('#axe_javaz')[0].files.length;
            // if (axe_javaz == 0) {
            //     $('#axe_javaz_parent').addClass('has-error');
            //     start_ajax = false;
            // }
            let outer_image = $('#outer_image')[0].files.length;
            if (outer_image == 0) {
                $('#outer_image_parent').addClass('has-error');
                start_ajax = false;
            }
            let head_image = $('#head_image')[0].files.length;
            // if (head_image == 0) {
            //     $('#head_image_parent').addClass('has-error');
            //     start_ajax = false;
            // }
            let inner_image = $('#inner_image')[0].files.length;
            if (inner_image == 0) {
                $('#inner_image_parent').addClass('has-error');
                start_ajax = false;
            }
            // let visit_card_image = $('#visit_card_image')[0].files.length;
            // if (visit_card_image == 0) {
            //     $('#visit_card_image_parent').addClass('has-error');
            //     start_ajax = false;
            // }
            let melli_card_image = $('#melli_card_image')[0].files.length;
            if (melli_card_image == 0) {
                $('#melli_card_image_parent').addClass('has-error');
                start_ajax = false;
            }
            let shenasname_image = $('#shenasname_image')[0].files.length;
            if (shenasname_image == 0) {
                $('#shenasname_image_parent').addClass('has-error');
                start_ajax = false;
            }

            let sanad_image = $('#sanad_image')[0].files.length;
            if (sanad_image == 0) {
                $('#sanad_image_parent').addClass('has-error');
                start_ajax = false;
            }

            return [start_ajax, 'pppp']
        }

        function Show_Step_2() {
            $('input[name="javazType"]').prop('checked', false);
            $('.step').removeClass('step-active');
            $('.step2').addClass('step-active');
            $('#confirm-btn-1').prop('disabled', false);
            $('#confirm-btn-1').html('تایید');
            fade_page();
            setTimeout(function () {
                fade_out_page();
                $('#step-1').addClass('d-none');
                $('#step-3').addClass('d-none');
                $('#step-2').removeClass('d-none');
                // const target = document.getElementById('form-step-2'); // بدون #
                // if (target) {
                //     smoothScrollTo(target, 2000); // 2000 میلی‌ثانیه زمان اسکرول
                // }
            }, 1000);
        }

        function Show_Step_3() {
            $('input[name="brands"]').prop('checked', false);
            $('#step-2').find('input').removeClass('has-error');
            $('.step').removeClass('step-active');
            $('.step3').addClass('step-active');
            $('#confirm-btn-1').prop('disabled', false);
            $('#confirm-btn-1').html('تایید');
            fade_page();
            setTimeout(function () {
                fade_out_page();
                $('#step-1').addClass('d-none');
                $('#step-2').addClass('d-none');
                $('#step-3').removeClass('d-none');
                // const target = document.getElementById('form-step-3'); // بدون #
                // if (target) {
                //     smoothScrollTo(target, 2000); // 2000 میلی‌ثانیه زمان اسکرول
                // }
            }, 1000);
        }

        function Show_Step_4() {
            $('.step').removeClass('step-active');
            $('.step4').addClass('step-active');
            $('#confirm-btn-1').prop('disabled', false);
            $('#confirm-btn-1').html('تایید');
            fade_page();
            setTimeout(function () {
                fade_out_page();
                $('#step-1').addClass('d-none');
                $('#step-2').addClass('d-none');
                $('#step-3').addClass('d-none');
                $('#step-4').removeClass('d-none');
                const target = document.getElementById('form-step-4'); // بدون #
                if (target) {
                    smoothScrollTo(target, 2000); // 2000 میلی‌ثانیه زمان اسکرول
                }
            }, 1000);
        }

        function fade_page(is_progress = 0) {
            $('.page-fade').show();
            if (is_progress == 1) {
                $('.progress-bar').css('width', 0);
                $('.progress-parent').show();
            } else {
                $('#page-fade-loader').show();
            }

        }


        function fade_out_page(is_progress = 0) {
            $('.page-fade').hide();
            if (is_progress == 1) {
                $('.progress-parent').hide();
            } else {
                $('#page-fade-loader').hide();
            }

        }

        function ChangeType(val) {
            $('#shenase_meli_parent').addClass('d-none');
            $('#shomare_sabt_sherkat_parent').addClass('d-none');
            $('#shomare_sheba_sherkat_parent').addClass('d-none');

            if (val == 2) {
                $('#shenase_meli_parent').removeClass('d-none');
                $('#shomare_sabt_sherkat_parent').removeClass('d-none');
                $('#shomare_sheba_sherkat_parent').removeClass('d-none');
            }
        }

        function ChangeJavazType(type) {
            $('.javaz-type').addClass('d-none');
            $('.javaz-type-' + type).removeClass('d-none');
        }

        function ProvinceChanged(tag) {
            let province_id = $(tag).val();
            $.ajax({
                url: "{{ route('home.register.getCities') }}",
                method: "post",
                dataType: "json",
                data: {
                    province_id: province_id,
                    _token: "{{ csrf_token() }}"
                },
                success: function (data) {
                    $('#city').html(data[1]);
                    $('#city').select2();
                }
            })
        }

        function remove_error() {
            $('.has-error').removeClass('has-error');
            // $('#type').removeClass('has-error');
            $('.validate').addClass('d-none');
        }

        function cellphone_check(cellphone) {
            cellphone = cellphone.replaceAll('+98', 0);

            let first_characters = cellphone.substring(0, 2);
            let last_characters = cellphone.substring(2);

            if (first_characters == 98) {
                cellphone = 0 + last_characters;
            }
            let first_char = Array.from(cellphone)[0];
            if (first_char != 0) {
                cellphone = 0 + cellphone;
            }
            $('#cellphone').val(cellphone);
            return cellphone;

        }

        function PreviousStep(step) {
            fade_page();
            if (step == 1) {
                disable_first_step();
            }

            setTimeout(function () {
                let next_step = step + 1;
                fade_out_page();
                $('#step-' + next_step).addClass('d-none');
                $('#step-' + step).removeClass('d-none');
                $('.step').removeClass('step-active');
                $('.step' + step).addClass('step-active');

                const target = document.getElementById('form-step-' + step); // بدون #
                if (target) {
                    smoothScrollTo(target, 2000); // 2000 میلی‌ثانیه زمان اسکرول
                }
            }, 1000);
        }

        function disable_first_step() {
            $('#first_name').addClass('disabled');
            $('#last_name').addClass('disabled');
            $('#father_name').addClass('disabled');
            $('#birth_date').addClass('disabled');
            $('#national_code').addClass('disabled');
            $('#cellphone').addClass('disabled');
            $('#finotech_checked').addClass('disabled');

            $('#first_name').prop('readonly', true);
            $('#last_name').prop('readonly', true);
            $('#father_name').prop('readonly', true);
            $('#birth_date').prop('readonly', true);
            $('#national_code').prop('readonly', true);
            $('#cellphone').prop('readonly', true);
            $('#finotech_checked').val(1);
        }

        function smoothScrollTo(element, duration) {

            const start = window.scrollY;

            const end = element.getBoundingClientRect().top - 300 + start;

            const distance = end - start;

            const startTime = performance.now();


            function animation(currentTime) {

                const timeElapsed = currentTime - startTime;

                const progress = Math.min(timeElapsed / duration, 1);

                const movement = distance * easeInOutCubic(progress);


                window.scrollTo(0, start + movement);


                if (timeElapsed < duration) {

                    requestAnimationFrame(animation);

                }

            }


            requestAnimationFrame(animation);

        }

        // تابع انیمیشن easeInOutCubic
        function easeInOutCubic(t) {

            return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;

        }

        function ShowPreview() {
            fade_out_page(1);
            // جمع‌آوری HTML مرحله اول و مرحله دوم
            let step_1_html = $('#form-step-1').html();
            let step_2_html = $('#form-step-2').html();
            let step_3_html = $('#form-step-3').html();
            let step_4_html = $('#form-step-4').html();

            // جمع‌آوری مقادیر input، textarea و select از هر دو فرم
            let inputsAndTextareas = $('#form-step-1 input, #form-step-2 input,#form-step-3 input, #form-step-4 input, #form-step-1 textarea,#form-step-2 textarea,#form-step-3 textarea,#form-step-4 textarea, #form-step-1 select, #form-step-2 select,#form-step-3 select,#form-step-4 select');
            let values = {};

            inputsAndTextareas.each(function () {
                let name = $(this).attr('name');
                if (name) {
                    // اگر ورودی نوع file نیست
                    if ($(this).attr('type') !== 'file') {
                        if ($(this).is(':radio')) {
                            // اگر input نوع radio باشد، مقدار انتخاب شده را ذخیره می‌کنیم
                            if ($(this).is(':checked')) {
                                values[name] = $(this).val();
                            }
                        } else if ($(this).is(':checkbox')) {
                            // اگر input نوع checkbox باشد، مقدار را ذخیره می‌کنیم
                            values[name] = $(this).is(':checked') ? $(this).val() : '';
                        } else {
                            // برای سایر input ها و textarea ها
                            values[name] = $(this).val();
                        }
                    }
                }
            });

            let preview_html = step_1_html + step_2_html + step_3_html + step_4_html;
            fade_page();
            setTimeout(function () {
                fade_out_page();
                $('.step').removeClass('step-active');
                $('.step5').addClass('step-active');
                $('#step-1').addClass('d-none');
                $('#step-2').addClass('d-none');
                $('#step-3').addClass('d-none');
                $('#step-4').addClass('d-none');
                $('#form-step-5').html(preview_html);
                // حذف هر عنصر با id از $('#form-step-3')
                $('#form-step-5 [id]').removeAttr('id');
                // حذف هر عنصر با onclick از $('#form-step-3')
                $('#form-step-5 [onclick]').removeAttr('onclick');
                $('#form-step-5 .confirm_btn').addClass('d-none');
                disableInputs();
                $('#form-step-5').removeClass('d-none');
                $('#form-step-5').find('.remove-btn').remove();
                $('#form-step-5').find('.select2-selection--single').addClass('disabled');
                $('#step-5').removeClass('d-none');
                // دوباره بارگذاری مقادیر input ها، textarea ها و select ها در مرحله 3
                $('#form-step-5 input, #form-step-5 textarea, #form-step-5 select').each(function () {
                    let name = $(this).attr('name');
                    if (values[name] !== undefined) {
                        if ($(this).is(':radio')) {
                            // اگر input نوع radio باشد، انتخاب را انجام می‌دهیم
                            if ($(this).val() === values[name]) {
                                $(this).prop('checked', true);
                            }
                        } else if ($(this).is(':checkbox')) {
                            // اگر input نوع checkbox باشد، انتخاب را انجام می‌دهیم
                            $(this).prop('checked', values[name] !== '');
                        } else {
                            $(this).val(values[name]);
                        }
                    }
                    const target = document.getElementById('form-step-5'); // بدون #
                    if (target) {
                        smoothScrollTo(target, 2000); // 2000 میلی‌ثانیه زمان اسکرول
                    }
                });
            }, 1500);
        }


        function disableInputs() {
            // غیر فعال کردن تمام input ها و textarea ها
            $('#form-step-5 input,#form-step-5 textarea,#form-step-5 select').prop('disabled', true).addClass('disabled');
            // غیر فعال کردن drop zone (در صورت نیاز)
            $('#form-step-5 .drop-zone').addClass('disabled'); // فرض بر این است که کلاس drop zone 'drop-zone' است
            $('#form-step-5 .record-button,#form-step-5 .record-button-label,#form-step-5 .delete-button,#form-step-5 .timer').addClass('d-none');
        }

        function typeOtp2(event, tag) {


            let code = $(tag).data('number');

            if (event.inputType === 'deleteContentBackward') {

                code = parseInt(code) + 1;
            } else {

                code = parseInt(code) - 1;
            }

            $(`input[name="number_${code}"]`).focus();


            // بررسی اینکه آیا همه فیلدها پر شده‌اند

            let allFilled = true;

            for (let i = 1; i <= 5; i++) {

                if ($(`input[name="number_${i}"]`).val() === '') {

                    allFilled = false;

                    break;

                }

            }


            // اگر همه فیلدها پر شده‌اند، کلیک روی دکمه تایید

            if (allFilled) {
                checkOTPAthurize();
            }


        }
    </script>

    {{--    //map--}}
    <script>

        {{--    //ضبط صدا--}}

        let mediaRecorder;

        let audioChunks = [];

        let timerInterval;

        let seconds = 0;


        async function startRecording() {

            const recordButton = document.getElementById('record');

            const deleteButton = document.getElementById('delete');

            try {

                const stream = await navigator.mediaDevices.getUserMedia({audio: true});

                mediaRecorder = new MediaRecorder(stream);

                audioChunks = [];


                mediaRecorder.ondataavailable = event => {

                    audioChunks.push(event.data);

                };


                mediaRecorder.onstop = () => {

                    clearInterval(timerInterval);

                    const audioBlob = new Blob(audioChunks, {type: 'audio/wav'});

                    const audioUrl = URL.createObjectURL(audioBlob);

                    const audio = document.getElementById('audio');

                    audio.src = audioUrl;

                    audio.style.display = 'block';


                    // نمایش دکمه حذف

                    deleteButton.style.display = 'block';


                    recordButton.classList.remove('recording');

                    recordButton.innerHTML = '<i class="fas fa-microphone-alt"></i>';

                    document.getElementById('timer').textContent = '00:00';

                    seconds = 0;

                };


                mediaRecorder.start();

                recordButton.classList.add('recording');

                recordButton.innerHTML = '<i class="fas fa-stop"></i>';


                seconds = 0;

                timerInterval = setInterval(() => {

                    seconds++;

                    const minutes = Math.floor(seconds / 60);

                    const secs = seconds % 60;

                    document.getElementById('timer').textContent = `${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;

                }, 1000);


                recordButton.onclick = () => {

                    mediaRecorder.stop();

                    recordButton.onclick = startRecording;

                };

            } catch (error) {

                console.error("خطا در دسترسی به میکروفن:", error);

                alert("دسترسی به میکروفن رد شد یا مشکلی پیش آمد.");

            }

        }


        function deleteAudio() {

            const audio = document.getElementById('audio');

            const deleteButton = document.getElementById('delete');

            audio.src = '';

            audio.style.display = 'none';

            deleteButton.style.display = 'none';

        }


        document.getElementById('record').onclick = startRecording;

        document.getElementById('delete').onclick = deleteAudio; // رویداد دکمه حذف
    </script>
  <script>
document.addEventListener('DOMContentLoaded', function() {
            // تعریف متغیرهای اصلی
            const birthdateInput = document.getElementById('birth_date');
            const calendarContainer = document.getElementById('calendar-container');
            const calendarDays = document.getElementById('calendar-days');
            const monthYearSelector = document.getElementById('month-year-selector');
            const prevMonthBtn = document.getElementById('prev-month');
            const nextMonthBtn = document.getElementById('next-month');
            const monthSelector = document.getElementById('month-selector');
            const yearSelector = document.getElementById('year-selector');

            // تعریف ماه‌های فارسی
            const persianMonths = [
                "فروردین", "اردیبهشت", "خرداد", "تیر", "مرداد", "شهریور",
                "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند"
            ];

            // تاریخ فعلی
            let currentDate = new Date();
            let selectedYear = 1380;
            let selectedMonth = 1; // از 1 تا 12
            let selectedDay = 1;

            // نمایش/مخفی کردن تقویم
            birthdateInput.addEventListener('click', function(e) {
                e.stopPropagation();
                calendarContainer.style.display = 'block';
                renderCalendar();
            });

            // بستن تقویم با کلیک خارج از آن
            document.addEventListener('click', function(e) {
                if (!calendarContainer.contains(e.target) && e.target !== birthdateInput) {
                    calendarContainer.style.display = 'none';
                    monthSelector.style.display = 'none';
                    yearSelector.style.display = 'none';
                    calendarDays.style.display = 'grid';
                }
            });

            // جلوگیری از بسته شدن تقویم با کلیک روی خود تقویم
            calendarContainer.addEventListener('click', function(e) {
                e.stopPropagation();
            });

            // تغییر ماه
            prevMonthBtn.addEventListener('click', function() {
                selectedMonth--;
                if (selectedMonth < 1) {
                    selectedMonth = 12;
                    selectedYear--;
                }
                renderCalendar();
            });

            nextMonthBtn.addEventListener('click', function() {
                selectedMonth++;
                if (selectedMonth > 12) {
                    selectedMonth = 1;
                    selectedYear++;
                }
                renderCalendar();
            });

            // کلیک روی نمایشگر ماه/سال
            monthYearSelector.addEventListener('click', function() {
                if (monthSelector.style.display === 'grid') {
                    // بستن انتخابگر ماه
                    monthSelector.style.display = 'none';
                    calendarDays.style.display = 'grid';
                } else if (yearSelector.style.display === 'grid') {
                    // بستن انتخابگر سال، نمایش انتخابگر ماه
                    yearSelector.style.display = 'none';
                    monthSelector.style.display = 'grid';
                    renderMonthSelector();
                } else {
                    // نمایش انتخابگر ماه
                    calendarDays.style.display = 'none';
                    monthSelector.style.display = 'grid';
                    renderMonthSelector();
                }
            });

            // تابع برای رندر کردن انتخابگر ماه
            function renderMonthSelector() {
                monthSelector.innerHTML = '';

                for (let i = 0; i < 12; i++) {
                    const monthItem = document.createElement('div');
                    monthItem.className = 'month-item';
                    if (i + 1 === selectedMonth) {
                        monthItem.classList.add('selected');
                    }
                    monthItem.textContent = persianMonths[i];
                    monthItem.addEventListener('click', function() {
                        selectedMonth = i + 1;
                        monthSelector.style.display = 'none';
                        calendarDays.style.display = 'grid';
                        renderCalendar();
                    });
                    monthSelector.appendChild(monthItem);
                }

                // اضافه کردن دکمه برای نمایش انتخابگر سال
                const yearSelectorBtn = document.createElement('div');
                yearSelectorBtn.className = 'month-item';
                yearSelectorBtn.textContent = selectedYear;
                yearSelectorBtn.style.gridColumn = '1 / span 3';
                yearSelectorBtn.addEventListener('click', function() {
                    monthSelector.style.display = 'none';
                    yearSelector.style.display = 'grid';
                    renderYearSelector();
                });
                monthSelector.appendChild(yearSelectorBtn);
            }

            // تابع برای رندر کردن انتخابگر سال
            function renderYearSelector() {
                yearSelector.innerHTML = '';

                // نمایش 12 سال در هر صفحه
                const startYear = Math.max(1310, selectedYear - 5); // حداقل سال 1340
                const endYear = Math.min(startYear + 11, 1404); // حداکثر سال 1404

                for (let i = 0; i <= (endYear - startYear); i++) {
                    const yearItem = document.createElement('div');
                    yearItem.className = 'year-item';
                    const year = startYear + i;
                    if (year === selectedYear) {
                        yearItem.classList.add('selected');
                    }
                    yearItem.textContent = year;
                    yearItem.addEventListener('click', function() {
                        selectedYear = year;
                        yearSelector.style.display = 'none';
                        calendarDays.style.display = 'grid';
                        renderCalendar();
                    });
                    yearSelector.appendChild(yearItem);
                }

                // اضافه کردن دکمه‌های قبلی و بعدی برای سال‌ها
                if (startYear > 1310) {
                    const prevYearsBtn = document.createElement('div');
                    prevYearsBtn.className = 'year-item';
                    prevYearsBtn.textContent = '« سال‌های قبلی';
                    prevYearsBtn.addEventListener('click', function() {
                        selectedYear = Math.max(1310, startYear - 12);
                        renderYearSelector();
                    });
                    yearSelector.appendChild(prevYearsBtn);
                }

                if (endYear < 1404) {
                    const nextYearsBtn = document.createElement('div');
                    nextYearsBtn.className = 'year-item';
                    nextYearsBtn.textContent = 'سال‌های بعدی »';
                    nextYearsBtn.addEventListener('click', function() {
                        selectedYear = Math.min(1404, endYear + 1);
                        renderYearSelector();
                    });
                    yearSelector.appendChild(nextYearsBtn);
                }
            }

            // تابع برای محاسبه تعداد روزهای ماه در تقویم شمسی
            function getDaysInPersianMonth(month, year) {
                if (month <= 6) return 31;
                if (month <= 11) return 30;
                // محاسبه سال کبیسه در تقویم شمسی
                const isLeapYear = ((((((year - 474) % 2820) + 474) + 38) * 682) % 2816) < 682;
                return isLeapYear ? 30 : 29;
            }

            // تابع برای محاسبه روز اول ماه در تقویم شمسی
            function getFirstDayOfMonth(year, month) {
                // تبدیل تقریبی از شمسی به میلادی
                let gYear = year + 621;
                let gMonth = month + 2;
                if (gMonth > 12) {
                    gMonth -= 12;
                    gYear += 1;
                }

                // محاسبه روز اول ماه (با تقریب)
                let firstDay = new Date(gYear, gMonth-1, 1).getDay();
                // تبدیل از شنبه شروع شود (0 = شنبه)
                firstDay = (firstDay + 1) % 7;

                return firstDay;
            }

            // رندر کردن تقویم
            function renderCalendar() {
                // به‌روزرسانی نمایشگر ماه/سال
                monthYearSelector.textContent = `${persianMonths[selectedMonth-1]} ${selectedYear}`;

                // پاک کردن روزهای فعلی (به جز سرتیترها)
                while (calendarDays.children.length > 7) {
                    calendarDays.removeChild(calendarDays.lastChild);
                }

                // محاسبه تعداد روزهای ماه
                const daysInMonth = getDaysInPersianMonth(selectedMonth, selectedYear);

                // محاسبه روز اول ماه (0 = شنبه، 1 = یکشنبه، ...)
                const firstDayOfMonth = getFirstDayOfMonth(selectedYear, selectedMonth);

                // اضافه کردن روزهای ماه قبل
                const prevMonth = selectedMonth - 1 > 0 ? selectedMonth - 1 : 12;
                const prevYear = prevMonth === 12 ? selectedYear - 1 : selectedYear;
                const daysInPrevMonth = getDaysInPersianMonth(prevMonth, prevYear);

                for (let i = 0; i < firstDayOfMonth; i++) {
                    const dayElement = createDayElement(daysInPrevMonth - firstDayOfMonth + i + 1, true);
                    calendarDays.appendChild(dayElement);
                }

                // اضافه کردن روزهای ماه فعلی
                for (let i = 1; i <= daysInMonth; i++) {
                    const dayElement = createDayElement(i, false);
                    if (i === selectedDay && !dayElement.classList.contains('other-month')) {
                        dayElement.classList.add('selected');
                    }

                    dayElement.addEventListener('click', function() {
                        // حذف کلاس selected از روز قبلی
                        const prevSelected = calendarDays.querySelector('.calendar-day.selected');
                        if (prevSelected) {
                            prevSelected.classList.remove('selected');
                        }

                        // اضافه کردن کلاس selected به روز جدید
                        dayElement.classList.add('selected');
                        selectedDay = i;

                        // به‌روزرسانی input
                        updateInput();

                        // بستن تقویم
                        calendarContainer.style.display = 'none';
                        overlay.style.display = 'none';
                    });

                    calendarDays.appendChild(dayElement);
                }

                // اضافه کردن روزهای ماه بعد
                const totalCells = 42; // 6 ردیف × 7 ستون
                const remainingCells = totalCells - (firstDayOfMonth + daysInMonth);

                for (let i = 1; i <= remainingCells; i++) {
                    const dayElement = createDayElement(i, true);
                    calendarDays.appendChild(dayElement);
                }
            }

            // ایجاد المان روز
            function createDayElement(day, isOtherMonth) {
                const dayElement = document.createElement('div');
                dayElement.className = 'calendar-day';
                if (isOtherMonth) {
                    dayElement.classList.add('other-month');
                }
                dayElement.textContent = day;
                return dayElement;
            }

            // به‌روزرسانی input
            function updateInput() {
                // تبدیل شماره به فرمت "01"، "02"، ...
                const formattedMonth = selectedMonth.toString().padStart(2, '0');
                const formattedDay = selectedDay.toString().padStart(2, '0');

                // قرار دادن تاریخ در input با فرمت مورد نظر: 1382-04-15
                birthdateInput.value = `${selectedYear}-${formattedMonth}-${formattedDay}`;
            }

            // مقداردهی اولیه
            renderCalendar();
        });
    </script>
@endsection

@section('content')

    <div id="modal-otp-authorize" class="modal fade oxyy-login-register" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content border-0">
                <div class="modal-body p-0">
                    <button type="button"
                            class="btn-close btn-close-white position-absolute top-0 end-0 me-sm-n4 mt-sm-n4"
                            data-bs-dismiss="modal" aria-label="Close"></button>
                    <!-- OTP Form
                    =========================== -->
                    <div class="row py-5">
                        <div class="col-10 col-sm-8 mx-auto">
                            <h2 class="text-center fw-600 mb-4">رمز یکبار مصرف</h2>
                            <p class="text-center"><img class="img-fluid" src="{{asset('home/img/otp-icon.png')}}"
                                                        alt="verification"></p>
                            <p class="text-muted text-center mb-4">رمز یکبار مصرف خود را وارد کنید <br>
                            </p>
                            <form id="checkOTPAthurizeForm">
                                <div class="row g-2">
                                    <div class="col">
                                        <input data-number="1" inputmode="numeric" oninput="typeOtp2(event,this)"
                                               name="number_1"
                                               type="text"
                                               class="form-control  border-2 rounded-pill text-center text-6 px-2 py-2"
                                               maxlength="1" required="" autocomplete="off">
                                    </div>
                                    <div class="col">
                                        <input data-number="2" inputmode="numeric" oninput="typeOtp2(event,this)"
                                               name="number_2"
                                               type="text"
                                               class="form-control border-2 rounded-pill text-center text-6 px-2 py-2"
                                               maxlength="1" required="" autocomplete="off">
                                    </div>
                                    <div class="col">
                                        <input data-number="3" inputmode="numeric" oninput="typeOtp2(event,this)"
                                               name="number_3"
                                               type="text"
                                               class="form-control border-2 rounded-pill text-center text-6 px-2 py-2"
                                               maxlength="1" required="" autocomplete="off">
                                    </div>
                                    <div class="col">
                                        <input data-number="4" inputmode="numeric" oninput="typeOtp2(event,this)"
                                               name="number_4"
                                               type="text"
                                               class="form-control border-2 rounded-pill text-center text-6 px-2 py-2"
                                               maxlength="1" required="" autocomplete="off">
                                    </div>
                                    <div class="col">
                                        <input data-number="5" inputmode="numeric" oninput="typeOtp2(event,this)"
                                               name="number_5"
                                               type="text"
                                               class="form-control border-2 rounded-pill text-center text-6 px-2 py-2"
                                               maxlength="1" required="" autocomplete="off">
                                    </div>

                                </div>
                                <div class="d-grid my-4">
                                    <button type="button" id="checkOTPAthurize" class="confirm_btn rounded-pill"
                                            style="padding:5px 40px;border:none">
                                        تایید
                                    </button>
                                </div>
                            </form>

                            <hr class="w-50 mx-auto">

                        </div>
                    </div>
                    <!-- OTP Form End -->
                </div>
            </div>
        </div>
    </div>
    <div class="page-fade"></div>
    <div class="loader" id="page-fade-loader">

    </div>
    <div class="progress-parent">
        <div class="text-center mb-3">
            درحال بارگذاری...
        </div>
        <div
            style="z-index: 99999999999999999999999;position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 60%"
            class="progress">

            <div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0"
                 aria-valuemin="0" aria-valuemax="100">0%
            </div>
        </div>
    </div>

    <!-- Start of Main -->
    <main class="main MT60">
        <!-- Start of Page Header -->
        {{--        <div class="page-header" style="background-image: url({{ asset('home/profile/media/misc/auth-bg.jpg') }})">--}}
        {{--            <div class="container">--}}
        {{--                <h1 class="page-title mb-0">ثبت نام نمایندگان</h1>--}}
        {{--            </div>--}}
        {{--        </div>--}}
        <div class="page-content">
            <div class="container">
                <div class="steps-list">
                    <div class="steps-parent">
                        <div class="step step1 step-active">
                            <i class="fa fa-info ml-2"></i>
                            اطلاعات فروشنده
                        </div>
                        <div class="step step2">
                            <i class="fa fa-dollar-sign ml-2"></i>
                            اطلاعات جواز کسب | کارت مباشرت
                        </div>
                        <div class="step step3">
                            <i class="fa fa-address-book ml-2"></i>
                            اطلاعات تماس و آدرس
                        </div>
                        <div class="step step4">
                            <i class="fa fa-images ml-2"></i>
                            بارگذاری مدارک
                        </div>
                        {{--                        <div class="step step5">--}}
                        {{--                            <i class="fa fa-check ml-2"></i>--}}
                        {{--                            بازبینی اطلاعات--}}
                        {{--                        </div>--}}
                    </div>
                </div>
                <div class="row">
                    <div class="w-100 mt-5 mb-5">
                        <div class="">
                            <div class="info-box">
                                @include('home.representation.register_form.step_1')
                                @include('home.representation.register_form.step_2')
                                @include('home.representation.register_form.step_3')
                                @include('home.representation.register_form.step_4')
                                @include('home.representation.register_form.preview')
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

@endsection