@extends('account.layouts.app')

@section('title' , 'تنظیمات')

@section('account-content')
    <div class="user-profile-wrapper">

        @error('success')
        <span class="text-success">{{ $message }}</span>
        @enderror

        <div class="col-lg-12 mb-4">
            <div class="user-profile-card">
                <h4 class="user-profile-card-title">بروزرسانی مشخصات پروفایل</h4>
                <div class="user-profile-form">



                    <form action="{{ route('account.edit-profile.post') }}" method="POST">
                        @csrf
                        @method('PUT')
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>نام </label>
                                    <input type="text" name="first_name" class="form-control"
                                           value="{{ old('first_name', $user->first_name) }}" placeholder="نام شما">
                                    @error('first_name')
                                    <span class="text-danger">
                                            {{ $message }}
                                        </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>نام خانوادگی</label>
                                    <input type="text" name="last_name" class="form-control"
                                           value="{{ old('last_name', $user->last_name) }}" placeholder="نام خانوادگی">
                                    @error('last_name')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>ایمیل</label>
                                    <input type="text" name="email" class="form-control"
                                           value="{{ old('email', $user->email) }}" placeholder="ایمیل">
                                    @error('email')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>موبایل</label>
                                    <input type="text" name="mobile" class="form-control"
                                           value="{{ old('mobile', $user->mobile) }}" placeholder="موبایل">
                                    @error('mobile')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>استان</label>
                                    <select name="province_id" id="province_id" class="form-control">
                                        <option value="">استان را انتخاب کنید</option>
                                        @foreach($provinces as $province)
                                            <option
                                                value="{{ $province->id }}"
                                                @selected(old('province_id', $user->province_id) == $province->id)
                                            >
                                                {{ $province->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('province_id')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>شهر</label>
                                    <select name="city_id" id="city_id" class="form-control">
                                        @if($user->city)
                                            <option value="{{ $user->city->id }}" selected>
                                                {{ $user->city->name }}
                                            </option>
                                        @else
                                            <option value="">ابتدا استان را انتخاب کنید</option>
                                        @endif
                                    </select>
                                    @error('city_id')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <h4 class="user-profile-card-title">عوض کردن رمز عبور</h4>
                            <p class="text-muted mb-3">(اگر می‌خواهید رمز عبورتان را تغییر دهید، از این بخش اقدام کنید.)</p>
                            <div class="form-group">
                                <label>رمز عبور فعلی</label>
                                <input type="password" name="current_password" class="form-control"
                                       placeholder="رمز عبور فعلی">
                                @error('current_password')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label>رمز عبور جدید</label>
                                <input type="password" name="new_password" class="form-control"
                                       placeholder="رمز عبور جدید">
                                @error('new_password')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="form-group">
                                <label>تکرار رمز عبور جدید</label>
                                <input type="password" name="new_password_confirmation" class="form-control"
                                       placeholder="تکرار رمز عبور جدید">
                            </div>
                        </div>
                        <button type="submit" class="theme-btn mt-4">آپدیت مشخصات پروفایل <i class="far fa-user"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>

    </div>

    <script>
        document.getElementById('province_id').addEventListener('change', function () {
            const provinceId = this.value;
            const citySelect = document.getElementById('city_id');

            citySelect.innerHTML = '<option value="">در حال بارگذاری...</option>';

            if (!provinceId) {
                citySelect.innerHTML = '<option value="">ابتدا استان را انتخاب کنید</option>';
                return;
            }

            fetch(`{{ route('account.cities-by-province', ':province') }}`.replace(':province', provinceId))
                .then(response => response.json())
                .then(cities => {
                    citySelect.innerHTML = '<option value="">شهرستان خود را انتخاب کنید</option>';

                    cities.forEach(city => {
                        const option = document.createElement('option');
                        option.value = city.id;
                        option.textContent = city.name;
                        citySelect.appendChild(option);
                    });
                });
        });
    </script>
@endsection