@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>
    input:disabled{
        background-color:#c0c0d978
    }
        .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;
}


 
   
       .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); }

}

    </style>
@endsection

@section('script')

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


<script>
    
      flatpickr("#birth_date", {

     locale: {

                firstDayOfWeek: 6, // شنبه شروع هفته

                weekdays: {

                    shorthand: ["ش", "ی", "د", "س", "چ", "پ", "ج"],

                    longhand: ["شنبه", "یکشنبه", "دوشنبه", "سه‌شنبه", "چهارشنبه", "پنجشنبه", "جمعه"]

                },

                months: {

                    shorthand: ["فرور", "اسفند", "فرورد", "اردی", "خرداد", "تیر", "مرداد", "شهری", "مهر", "آبان", "آذر", "دی"],

                    longhand: ["فروردین", "اردیبهشت", "خرداد", "تیر", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند"]

                }

            },

            dateFormat: "Y-m-d", // فرمت تاریخ

   onChange: function(selectedDates, dateStr, instance) {
                const jalaaliDate = moment(dateStr).locale('fa').format('jYYYY/jM/jD');

                document.getElementById('birth_date').innerText = `تاریخ انتخابی: ${jalaaliDate} (سال ${year})`;

            }

        });

    document.getElementById('registrationForm').addEventListener('submit', function(event) {
        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'; // تغییر رنگ به مشکی
            }
        });
    });

        $('.province-select').change(function () {
            var provinceID = $(this).val();
            if (provinceID) {
                $.ajax({
                    type: "GET",
                    url: "{{ url('/get-province-cities-list') }}?province_id=" + provinceID,
                    success: function (res) {
                        if (res) {
                            $(".city-select").empty();
                            $('.city-select').append('<option selected value="' + 0 + '">' +
                                'انتخاب کنید' + '</option>')
                            $.each(res, function (key, city) {
                                $(".city-select").append('<option value="' + city.id + '">' +
                                    city.name + '</option>');
                            });
                            $(".city-select .list").show();
                        } else {
                            $(".city-select").empty();
                        }
                    }
                });
            } else {
                $(".city-select").empty();
            }
        });
</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"/>
        <div class="step ">

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

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

        </div>

        <hr class="step-divider"/>

        <div class="step">

            <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 method="post" action="{{route('home.installment.requests.step1.store')}}" id="registrationForm">
                                @csrf
    <div class="step-container" id="step1">
      
<div class="row">
      <h3> 
      <i class="fas fa-info"></i>
      اطلاعات فردی</h3>

        <div class="form-group col-12 col-md-6">
            <label for="first_name">نام:</label>
            <input disabled type="text" value="{{auth()->user()->first_name }}" class="form-control" id="first_name" name="first_name" >
            @error('first_name')
                <span class="text-danger">{{ $message }}</span>
            @enderror
        </div>

        <div class="form-group col-12 col-md-6">
            <label for="last_name">نام خانوادگی:</label>
            <input disabled type="text" value="{{auth()->user()->last_name }}"  class="form-control" id="last_name" name="last_name" >
            @error('last_name')
                <span class="text-danger">{{ $message }}</span>
            @enderror
        </div>

        <div class="form-group col-12 col-md-6">
            <label for="father_name">نام پدر:</label>
            <input type="text" class="form-control" value="{{$formData['father_name'] ?? '' }}" id="father_name" name="father_name" >
            @error('father_name')
                <span class="text-danger">{{ $message }}</span>
            @enderror
        </div>

        <div class="form-group col-12 col-md-6">
            <label for="mobile">شماره موبایل:</label>
            <input disabled type="text" value="{{auth()->user()->cellphone }}"  class="form-control" id="mobile" name="mobile" >
            @error('mobile')
                <span class="text-danger">{{ $message }}</span>
            @enderror
        </div>

        <div class="form-group col-12 col-md-6">
            <label for="national_code">کد ملی:</label>
            <input disabled type="text" value="{{auth()->user()->national_code}}"  class="form-control" id="national_code" name="national_code" >
            @error('national_code')
                <span class="text-danger">{{ $message }}</span>
            @enderror
        </div>

        <div class="form-group col-12 col-md-6">
            <label for="birth_date">تاریخ تولد:</label>
            <input type="text" value="{{ $formData['birth_date'] ?? '' }}" class="form-control" id="birth_date" name="birth_date" >
            @error('birth_date')
                <span class="text-danger">{{ $message }}</span>
            @enderror
        </div>

        <div class="form-group col-12 col-md-6">
            <label for="second_mobile">شماره موبایل دوم:</label>
            <input type="text" value="{{$formData['second_mobile'] ?? '' }}" class="form-control" id="second_mobile" name="second_mobile">
            @error('second_mobile')
                <span class="text-danger">{{ $message }}</span>
            @enderror
        </div>
    </div>

 

    <!-- سکشن محل سکونت -->
   

           
    </div>
     <div class="step-container" id="step2" >
        

        <div class="row">
              <h3 > 
              <i class="fas fa-map-marker"></i>
              
              اطلاعات محل سکونت
              
              </h3>

            <div class="form-group col-12 col-md-6">
                <label for="province">استان:</label>
                <select id="province" name="province" class="form-control province-select" >
                    <option value="">انتخاب کنید</option>
                           @foreach ($provinces as $province)
                           
                                                              <option {{ isset($formData['second_mobile']) ? ($formData['province'] == $province->id ? 'selected' : '') : '' }}
                                                                  value="{{ $province->id }}">{{ $province->name }}
                                                              </option>
                                                          @endforeach
                    <!-- سایر استان‌ها -->
                </select>
                @error('province')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-group col-12 col-md-6">
                <label for="city">شهر:</label>
                <select id="city" name="city" class="form-control city-select"  >
                    <option value="">ابتدا استان را انتخاب کنید</option>
             
             
             @if(isset($formData['second_mobile']))
             @php
             
             $city = \App\Models\City::where('id',$formData['city'])->first();
             
             @endphp
               <option selected value="{{$formData['city']}}">  {{$city->name}}  </option>
             @endif
                </select>
                @error('city')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-group col-12 col-md-6">


                <label for="address">آدرس:</label>
                <input value="{{$formData['address'] ?? '' }}" type="text" class="form-control" id="address" name="address" >
                @error('address')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-group col-12 col-md-6">
                <label for="plaque">پلاک:</label>
                <input value="{{$formData['plaque'] ?? '' }}" type="text" class="form-control" id="plaque" name="plaque" >
                @error('plaque')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>

            <div class="form-group col-12 col-md-6">
                <label for="postal_code">کد پستی:</label>
                <input value="{{$formData['postal_code'] ?? '' }}"  type="text" class="form-control" id="postal_code" name="postal_code" >
                @error('postal_code')
                    <span class="text-danger">{{ $message }}</span>
                @enderror
            </div>
        </div>
        
        <button type="submit" id="nextStep1" class="btn btn-primary">مرحله بعدی <i class="fas fa-arrow-left"></i></button>

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

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

@endsection