@php

$formInput = session('formInput', []);

@endphp
@extends('home.layouts.index')

@section('title')
بارگذاریه مدارک
@endsection


@section('description')

@endsection

@section('keywords')

@endsection

@section('style')
    <!-- 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">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment/2.29.1/moment.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-jalaali/0.10.2/moment-jalaali.min.js"></script>

    

    <style>
    .previewContainer{
        margin:20px ;
    }
        .border-danger {
        border-color: red !important; /* رنگ مرز قرمز */
    }

    .text-danger {
        color: red; /* رنگ متن قرمز */
    }

      

.progress-container {

    display: flex;

    align-items: center;

    justify-content: space-between;
    background-color: #fff;
  border-color: #fff;
  color: rgba(0,0,0,.87);
  border-radius : 8px;
  padding:20px;
  box-shadow: 0px 2px 1px -1px rgba(0,0,0,.2),0px 1px 1px 0px rgba(0,0,0,.14),0px 1px 3px 0px rgba(0,0,0,.12) !important;

}

.step-container{
        background-color: #fff;
  border-color: #fff;
  color: rgba(0,0,0,.87);
  border-radius : 8px;
  margin-top:30px;
  padding:20px;
  box-shadow: 0px 2px 1px -1px rgba(0,0,0,.2),0px 1px 1px 0px rgba(0,0,0,.14),0px 1px 3px 0px rgba(0,0,0,.12) !important;
}


.step {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

}


.circle {

    width: 30px;

    height: 30px;

    border: 2px solid gray;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: white;

    color: gray;

    font-weight: bold;

}
.completed .circle{
    color:#007bff;
    border-color:#007bff;
}

.line {

    flex-grow: 1;

    height: 4px;

    background-color: lightgray;

    position: absolute;

    top: 15px; /* Adjust this to align with the circle */

    left: 15px; /* Adjust this to center it under the circle */

    right: 15px;

}


.completed .line {

    background-color: blue;

}


.title-step {

    margin-top: 5px;

    color: gray;

}


.completed .title-step {

    color: #007bff;

}
.step-divider{
    display: block;
  flex: 1 1 0px;
  max-width: 100%;
  height: 0px;
  max-height: 0px;
  border: solid;
  border-width: thin 0 0 0;
  transition: inherit;
  margin: -25px -55px 0 !important;
  
  border: 3px solid #9bb3e6 !important;
  border-radius: 10px;
}
.step-divider.completed{
    border-color:#007bff !important;
}


 
   
       .product .btn-cart-add{
        border-radius: 0;
        border-color:#6ee9e6;
        background-color:#6ee9e6;
        color:#000 !important;
        padding:5px 10px;
    }
    
            .product-brand{

            width: auto !important;
    height: 26px !important;
    margin: 0 5px;

        }
    .product .btn-cart-add:hover{
        background-color:#f5f1a0;
             border-color:#f5f1a0;
    }
   .product{
       margin: 10px 1.5%;
   }
   @media (min-width: 576px) {
    .cols-sm-3 > * {
        max-width: 30.3333% !important;
        flex: 0 0 30.3333% !important;
    }
}



        .loader-filter{
   display: none; 
    transition: all ease .3s;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(255, 255, 255, .8);
    z-index: 9999999999999;
        }
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  50% {
    background: white;
  }
}

.loading-box {
  border-radius: 50%;
  width: 45px;
  height: 45px;
  border: 0.25rem solid rgba(0, 0, 0, 0.2);
  border-top-color: #000;
  animation: spin 1s infinite linear;
}
.loading--double-box {
  border-style: double;
  border-width: 0.5rem;
      position: absolute;
    top: 50%;
    z-index: 999999999999999999999999999999999999999999999999999999;
    left: 50%;
    transform: translate(-50%, -50%);
}


.product-name{
      text-align:center;
      min-height: 60px;
}
.cursor-pointer{
    cursor:pointer;
}
.page-content {
    background:#f8f8f8;
}
#post-data > .product{
    background:#fff !important;
}
.sidebar-content{
      background-color:#f8f8f8 !important;
}
.product-name a {
    font-size: 16px;
 
    color: #000;
}
.card-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.product-brand {
    width: 37% !important;
}
       .filter-items .active > label:before {
           content: "";
           color: #fff;
           background-color: #222;
           border-color: #222;
       }
       .ht-btn{
           font-family: shabnam;
           margin-top: 20px;
       }
           .product_attribute_icon{
        width:17px;
    }
        /* .product{*/
        /*    animation: loadproduct .6s linear 1;*/

        /*}*/
        /*@keyframes loadproduct {*/
        /*from{*/
        /*    transform: scale(0);*/
        /*}*/
        /*    to{*/
        /*        transform: scale(1);*/
        /*    }*/
        /*}*/
        .category-text-mobile {
            display: none;
            margin-bottom: 0 !important;
        }

        @media screen and (max-width: 610px) {
            .category-text-mobile {
                display: inline-block;
            }


        }

        h3 > span {
            margin-right: 18px;
        }

        #load-more {
            display: none;
            width: 80px;
            height: 80px;
            margin: 8px;
            border-radius: 50%;
            border: 6px solid orange;
            border-right: 6px solid transparent;
            animation: load-more 1.5s linear infinite;
        }

        .load-more-parent {
            width: 100%;
            display: none;

            text-align: center;;
        }

        @keyframes load-more {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

        .bg-header-filter {
            background-color: #cbe5f1;
            margin-top: 10px !important;
            border-radius: 5px;
        }

        @media screen and (max-width: 992px) {
            .banner-title {
                font-size: 1.5rem !important;
            }

            .map-link-back {
                margin-top: 15px;
                margin-bottom: 15px;
            }

        }

        .btn-clear-filter {
            width: 100%;
            margin-top: 35px;
            color: white;
            border: none;
            border-radius: 11px;
            padding: 10px;
            background: #4e4e4e;
            text-align: center;
            cursor: pointer;
        }

        .active-arrow {
            transform: rotate(-90deg);
        }

        .map-link {
            font-size: 12px;
            font-weight: bold;
            color: #4e4e4e;
        }

        .map-link:hover {
            font-size: 12px;
            font-weight: bold;
            color: #a52ab8;
        }

        .map-link-img {
            width: 7px;
            height: 7px;
        }

        .widget-title-arrow i {
            left: 10px;
            position: absolute;
            transition: all .3s ease;

        }

        .btn-filter {
            margin-left: 10px;
            border-radius: 10px;
            padding: 5px 12px;
            font-size: 13px;
            border: 1px solid #a52ab8;
            color: #000;
            cursor: pointer;
        }

        .btn-filter:hover {
            color: #fff;
            background-color: #4e4e4e;
        }

        .btn-filter-selected {
            color: #fff;
            background-color: #a52ab8;
        }

        @media screen and (max-width: 800px) {
            .display-none-mobile {
                display: none !important;
            }
        }

        .modal-filter {
            background-color: rgba(0, 0, 0, .6);
            z-index: 999;
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            display: none;
            right: 0;
            width: 100%;
            height: 100vh;

        }
        .list-unstyled {
    padding-left: 0;
    list-style: none;
}
.product__image img {
    height: auto;
}
.product__image {
    text-align: center;
    position: relative;
}
.product__image {
    display: flex;
    justify-content: center;
}
        #products > ul > li> .product {
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    overflow: hidden;
    padding-top: 20px;
    height: 100%;
}

        .modal-filter-box {
            background-color: #fff;
            position: absolute;

            top: 0;
            transition: all ease .6s;
            width: 280px;
            margin-right: 50px;
            border-radius: 4px;
            padding: 10px;
            left: 0;
            transform: translate(25%, 50%);
        }

        .box-radio {
            display: flex;

        }

        .box-radio label {
            font-size: 18px !important;
            order: 2;
            margin-right: 10px;
        }

        @media only screen and (max-width: 996px)
        .header-middle {
            position: sticky;
            top: 40px;
            z-index: 999 !important;
        }

        .sidebar-close {
            border: 2px solid #fff;
            border-radius: 50%;
            padding: 5px;
        }
        .filter-items label{
            display: block;
            position: relative;
        }
        .header-transparent{
            position: static !important;
            background-color: #222;
        }

        .filter-items label:before {
            content: "";
            position: absolute;
            border: 1px solid #999;
            width: 18px;
            height: 18px;
            border-radius: 2px;
            top: 50%;
            transform: translateY(-50%);
            left: -2.7rem;
            font-size: 0.7em;
            font-weight: 900;
            font-family: "Font Awesome 5 Free";
            text-align: center;
            text-indent: 1px;
            line-height: 1.7em;
        }
        
         @media screen and (min-width: 1360px) {
            #products>ul>li {
                padding-left: 10px;
                padding-right: 10px;
                -webkit-box-flex: 0;
                -ms-flex: 0 0 20%;
                flex: 0 0 20%;
                max-width: 20%;
                margin-bottom: 20px;
            }
        }

        #products>ul>li .product, #category_page .category_page--content, #category_page .category_page--sidebar .sidebar {
            border-radius: 10px;
        }
        #products>ul>li {
            padding-left: 10px;
            padding-right: 10px;
            -webkit-box-flex: 0;
            -ms-flex: 0 0 33.33%;
            flex: 0 0 33.33%;
            max-width: 33.33%;
            margin-bottom: 20px;
        }
        @media screen and (min-width: 1200px) {
            #products>ul>li {
                padding-left: 10px;
                padding-right: 10px;
                -webkit-box-flex: 0;
                -ms-flex: 0 0 20%;
                flex: 0 0 20%;
                max-width: 20%;
                margin-bottom: 20px;
            }
        }
        #products>ul>li .product {
            overflow: hidden;
            padding-left: 0;
            padding-right: 0;
            padding-top: 20px;
        }

        #products>ul {
            display: -webkit-box;
            display: -moz-flex;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            margin-left: -10px;
            margin-right: -10px;
        }
        #products>ul>li .product, #category_page .category_page--content, #category_page .category_page--sidebar .sidebar {
            border-radius: 10px;
        }
        @media screen and (max-width: 480px) {
            #products > ul > li {
                -webkit-box-flex: 0;
                -ms-flex: 0 0 100%;
                flex: 0 0 100%;
                max-width: 100%;
            }
        }
            @media only screen and (max-width: 767px) {
                #products>ul>li .product {
                    flex-direction: row;
                    border-top: none;
                    border-right: none;
                    border-left: none;
                    border-radius: 0;
                    padding-top: 0;
                }
            }

            @media only screen and (max-width: 767px) {
                #products>ul>li .product .compareColor {
                    top: auto;
                    bottom: 10px;
                    right: 0;
                    left: auto;
                }
            }
            @media only screen and (max-width: 767px) {
                #products>ul>li .product .product__image {
                    flex: 1 0 129px;
                    padding-bottom: 30px;
                }
            }

            @media only screen and (max-width: 767px) {
                #products>ul>li .product .product__wrapper {
                    padding-right: 4px;
                    /*flex: unset;*/
                }
            }

            @media only screen and (max-width: 767px) {
                #products>ul>li .product .product__name {
                    padding: 0;
                    font-size: 18px;
                    line-height: 20px;
                    margin-top: 0px;
                    height: 40px;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-align: center;
                }
            }

            @media only screen and (max-width: 767px) {
                #products>ul>li .product .product__offer {
                    text-align: right;
                    display: flex;
                    flex-direction: row;
                    align-items: flex-start;
                    flex-wrap: wrap;
                }
            }

            @media only screen and (max-width: 767px) {
                #products>ul>li .product .superSale.superSale2 {
                    display: none !important;
                }
            }

            @media screen and (max-width: 991px) {
                .superSale>span {
                    color: #fff;
                    font-size: 11px;
                }
            }
            @media screen and (max-width: 991px) {
                .superSale>span {
                    padding: 5px;
                }
            }

            @media only screen and (max-width: 767px) {
                #products>ul>li .product .product__offer--new {
                    text-align: center;
                    width: 100%;
                    color:#000;
                    line-height: 20px;
                    order: 1;
                    margin-top: 5px;
                }
            }

            @media only screen and (max-width: 767px) {
                #products>ul>li .product .compareColor ul {
                    width: 100px;
                    display: flex;
                    line-height: 0;
                    justify-content: center;
                }
            }
            @media only screen and (max-width: 767px) {
                #products>ul>li .product .compareColor ul li {
                    padding-left: 2px;
                    padding-right: 2px;
                }
            }

            @media screen and (max-width: 991px) {
                .superSale {
                    min-height: 30px;
                }
                .superSale>ul{
                    padding-top:5px;
                    padding-bottom:5px;
                }
            }

            @media only screen and (max-width: 767px) {
                #products>ul>li .product .product__image {
                    flex: 1 0 100px;
                    padding-bottom: 30px;
                }
            }

            @media only screen and (max-width: 767px) {
                #products>ul>li .product .compareColor ul {
                    width: 100px;
                    display: flex;
                    line-height: 0;
                    justify-content: center;
                }
            }
            @media only screen and (max-width: 767px) {
                #products>ul>li .product .product__name {
                    padding: 0 !important;
                    font-size: 14px !important;
                    color:#000;
                    line-height: 20px !important;
                    margin-top: 0px !important;
                    height: 40px !important;
                    display: -webkit-box !important;
                    -webkit-line-clamp: 2 !important;
                    -webkit-box-orient: vertical !important;
                    overflow: hidden !important;
                    text-align: right !important;
                }
            }
@media only screen and (max-width: 767px) {
    .product__image:before{
        display:none !important;
    }
    #products>ul>li .product .product__offer--offer {
        border-radius: 5px !important;
        position: absolute !important;
        top: 5px !important;
        right: 5px !important;
        margin: 0 !important;
        font-size: 11px !important;
        width: 30px !important;
        height: 15px !important;
        line-height: 15px !important;
    }
}
@media (min-width: 768px) {
  .d-md-flex {
    display: flex !important;
  }
}

@media only screen and (max-width: 767px) {
    #products>ul>li .product .product__wrapper {
        padding-right: 4px !important;
        /*flex: unset !important;*/
    }
    #products>ul>li .product{
        padding-bottom:7px !important;
    }
}
@media only screen and (max-width: 767px) {
    #products>ul>li .product .product__image {
        flex: 1 0 129px !important;
        padding-bottom: 30px !important;
    }
}

@media screen and (max-width: 991px) {
    .superSale {
        min-height: 30px !important;
    }
}
@media screen and (max-width: 480px) {
    #products > ul > li {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}
#products > ul > li> .product{
    display:flex;
}
.product__wrapper{
        display: flex;
    flex-direction: column;
    justify-content: space-around;
}
     @media (min-width: 768px) {
            .d-md-none {
                display: none !important;
            }
        }
        @media (min-width: 768px) {
            .d-md-block {
                display: block !important;
            }
        }
         @media (min-width: 768px) {
            .d-md-flex {
                display: flex !important;
            }
        }
        
        .page-content{
            padding:20px;
        }
                .step-title {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .step-title i {
            background-color: #e0f7fa;
            border-radius: 50%;
            padding: 10px;
            margin-left: 10px;
        }
        .step-indicator {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .step-indicator div {
            flex: 1;
            text-align: center;
        }
        .line {
            height: 2px;
            background-color: lightblue;
            margin-top: -2px;
        }
        .active {
            font-weight: bold;
            color: blue;
        }
        .error {
            color: red;
        }
        .input-field {
            margin-bottom: 15px;
        }
        .input-field input, .input-field select {
            width: 100%;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
        }
        .input-field input.error, .input-field select.error {
            border-color: red;
        }
        .input-field input.success, .input-field select.success {
            border-color: blue;
        }
        
.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -5px;
  margin-left: -5px;
}

.form-row > .col* {
  padding-left: 5px;
  padding-right: 5px;
}

.form-group {
    position: relative; /* برای استفاده از موقعیت‌دهی مطلق در پیام خطا */
}



/* استایل برای دکمه‌ها */
.btn-primary {
    background-color: #007bff; /* رنگ پس‌زمینه */
    border-color: #007bff; /* رنگ حاشیه */
}

.btn-primary:hover {
    background-color: #0056b3; /* رنگ پس‌زمینه هنگام هاور */
    border-color: #0056b3; /* رنگ حاشیه هنگام هاور */
}
.form-control{
    border-radius:20px;
}
.form-group label{
    margin-bottom: 10px;
    display:inline-block;
}
.form-group{
    margin-bottom:5px;
}

.step-container h3 i {
    color: #001bc1;
  margin-left: 10px;
  padding: 10px 15px;
  background-color: #cfd6ff;
  border-radius: 7px;
  font-size:24px;
}
.step-container h3{
    font-size:24px;
}
    .border-danger {
        border-color: red !important;
    }

    .text-danger {
        color: red;
    }
    
    #loader {

    position: fixed;

    width: 100%;

    height: 100%;

    background: rgba(255, 255, 255, 0.75);

    top: 0;

    left: 0;

    z-index: 1000;

    display: none; /* مخفی به طور پیش‌فرض */

}


.loading-box {

    border-radius: 50%;

    width: 45px;

    height: 45px;

    border: 0.25rem solid rgba(0, 0, 0, 0.2);

    border-top-color: #000;

    animation: spin 1s infinite linear;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}

@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}

.btn-back{
    background: none !important;
    color:#007bff !important;
}
.file-box{
    border:1px solid #c3c3c3;
    border-radius:25px;
    padding:25px;
    margin:0 5px;
    position:relative;
}
.file-box .des-file i {
    border:1px solid #007bff ;
    color:#007bff;
    border-radius:50%;
    padding: 5px 10px;
    margin: 0 5px;
}

.form-group label {
    margin-bottom: 10px;
    display: inline-block;
    position: absolute;
    top: -20px;
    background: #fff;
    padding: 10px;
}
    </style>
@endsection

@section('script')

    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/js/select2.min.js"></script>
    


<script>
    const fileInputs = document.querySelectorAll('.fileUpload');

    fileInputs.forEach(input => {
        input.addEventListener('change', function(event) {
            const file = event.target.files[0];
            const previewContainer = event.target.previousElementSibling; // پیش‌نمایش مربوط به این input

            if (file) {
                const reader = new FileReader();

                if (file.type.startsWith('image/')) {
                    reader.onload = function(e) {
                        const img = document.createElement('img');
                        img.src = e.target.result;
                        img.classList.add('preview');
                        console.log(previewContainer)
                        previewContainer.innerHTML = ''; // پاک‌سازی محتویات پیشین
                        previewContainer.appendChild(img); // اضافه کردن تصویر
                    };
                    reader.readAsDataURL(file); // خواندن فایل به عنوان URL
                } else {
                    const link = document.createElement('a');
                    link.href = URL.createObjectURL(file); // ایجاد URL موقت برای فایل
                    link.download = file.name; // نام فایل برای دانلود
                    link.textContent = `دانلود ${file.name}`;
                    link.classList.add('file-link');
                    previewContainer.innerHTML = ''; // پاک‌سازی محتویات پیشین
                    previewContainer.appendChild(link); // اضافه کردن لینک دانلود
                }
            }
        });
    });
    
    

    document.getElementById('registrationForm').addEventListener('submit', function(event) {
        $('.loader-filter').show();
        let isValid = true;
        
        // همه فیلدهای ورودی را پیدا کنید
        const inputs = this.querySelectorAll('input[type="text"], input[type="email"], input[type="password"]');

        inputs.forEach(function(input) {
            const label = input.previousElementSibling;
            if (!input.value.trim()) {
             
                isValid = false;
                input.classList.add('border-danger');
                input.classList.add('text-danger');
                                if (label) {
                    label.classList.add('text-danger'); // اضافه کردن کلاس به label
                }

            } else {
                input.classList.remove('border-danger');
                input.classList.remove('text-danger');
                                if (label) {
                    label.classList.remove('text-danger'); // حذف کلاس از label
                }

            }
        });

        if (!isValid) {
            event.preventDefault(); // جلوگیری از ارسال فرم
        }

    });
    
        const inputs = document.querySelectorAll('input[type="text"], input[type="email"], input[type="password"]');
    
    inputs.forEach(function(input) {
        input.addEventListener('input', function() {
                            input.classList.remove('border-danger');
                input.classList.remove('text-danger');
            const label = this.previousElementSibling; // گرفتن label مربوط به input
            if (label) {
                label.classList.remove('text-danger'); // حذف کلاس قرمز
                label.style.color = 'black'; // تغییر رنگ به مشکی
            }
        });
    });

       

</script>

@endsection

@section('content')
    <div id="loader">

    <div class="loading-box"></div>

</div>



    <!-- Start of Main -->
    <main class="main ">
        <!-- Start of Page Header -->
       
           
    
        <div class="page-content">
             <div class="container">
                        <div class="progress-container">

        <div class="step completed">

            <div class="circle">۱</div>

            <div class="title-step">اطلاعات عمومی</div>

        </div>

<hr class="step-divider completed"/>
        <div class="step completed">

            <div class="circle">۲</div>

            <div class="title-step">اطلاعات خود اظهاری</div>

        </div>

        <hr class="step-divider completed"/>

        <div class="step completed">

            <div class="circle">۳</div>

            <div class="title-step">بارگذاری مدارک</div>

        </div>

    </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="card mt-5 mb-5">
                        <div class="card-body">
                            <form enctype="multipart/form-data"  method="post" action="{{route('home.installment.requests.step3.store')}}" id="registrationForm">
                                @csrf
   
     <div class="step-container" id="step2" >
        

        <div class="row">
              <h3 > 
              <i class="fas fa-file"></i>
              
              بارگذاری مدارک  
              
              </h3>



 


@foreach($userType->fields as $file)
            <div class="form-group file-box col-12 col-md-3 my-3">
        
                <label for="plaque">  {{$file->name}}</label>
                <div class="des-file">
                    <i class="fas fa-info"></i>
                    
                    {{$file->description}}
                    
                    </div>
                <div class="previewContainer"></div>
                <input  type="file" class="form-control fileUpload"  name="document_{{$file->id}}" >

                
                @error('document_'.$file->id)
                    <span class="text-danger">
                    فیلد {{$file->name}} الزامی است
                    </span>
                @enderror
            </div>
            
            @endforeach
            
            

        <div class="form-group col-12 col-6"></div>
  <div class="form-group col-12 col-md-6">
    <a class="btn  btn-back" href="{{ url()->previous() }}">
        <i class="fas fa-arrow-right"></i>
        مرحله قبل</a>
        </div>
        
  <div class="form-group col-12 col-md-6 text-left">
        <button type="submit" id="nextStep1" class="btn btn-primary">آپلود مدارک  <i class="fas fa-arrow-left"></i></button>
        </div>
 
        </div>
        
                


        <!-- سایر فیلدها و دکمه‌ها -->
    </div>
</form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <div class="loader-filter">
        <div class='loading-box loading--double-box'></div>
    </div>
@endsection