@extends('account.layouts.app')

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

@section('account-content')

    <div class="user-profile-wrapper">

        <div class="col-lg-12 mb-4">

            <div class="user-profile-card">

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

                <div class="user-profile-form">

                    @if(session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif

                        <form action="{{ route('account.edit-profile.post') }}"
                              method="POST"
                              enctype="multipart/form-data">

                        @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="email"
                                        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>
                                    </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"
                                    >
                                        <option value="">ابتدا استان را انتخاب کنید</option>
                                    </select>

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

                        </div>

                        <h4 class="user-profile-card-title mt-4">
                            عوض کردن رمز عبور و پروفایل
                        </h4>


                        <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 class="col-md-12">
                                <div class="form-group">
                                    <label>عکس پروفایل</label>

                                    <input
                                        type="file"
                                        name="image"
                                        class="form-control"
                                        accept="image/*"
                                    >
                                    @error('image')
                                    <span class="text-danger">
                                        {{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                        <button type="submit" class="theme-btn mt-4">
                            آپدیت مشخصات پروفایل
                            <i class="far fa-user"></i>
                        </button>
                    </form>

                </div>
            </div>

        </div>

    </div>

@endsection
@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {

            const provinceSelect = document.getElementById('province_id');
            const citySelect = document.getElementById('city_id');

            const selectedProvinceId = "{{ old('province_id', $user->province_id) }}";
            const selectedCityId = "{{ old('city_id', $user->city_id) }}";

            fetch('{{ asset('assets/data/iran-cities.json') }}')
                .then(response => response.json())
                .then(data => {

                    const provinces = [];

                    data.forEach(item => {

                        const exists = provinces.some(
                            province => province.id === item.provinceId
                        );

                        if (!exists) {
                            provinces.push({
                                id: item.provinceId,
                                name: item.provinceName
                            });
                        }
                    });

                    // نمایش استان‌ها
                    provinces.forEach(province => {

                        provinceSelect.innerHTML += `
                        <option value="${province.id}"
                            ${String(province.id) === String(selectedProvinceId) ? 'selected' : ''}>
                            ${province.name}
                        </option>
                    `;

                    });

                    // تابع نمایش شهرها
                    function loadCities(provinceId, selectedCity = null) {

                        citySelect.innerHTML = `
                        <option value="">شهر خود را انتخاب کنید</option>
                    `;

                        if (!provinceId) {
                            return;
                        }

                        const cities = data.filter(
                            item => String(item.provinceId) === String(provinceId)
                        );

                        cities.forEach(city => {

                            citySelect.innerHTML += `
                            <option value="${city.cityId}"
                                ${String(city.cityId) === String(selectedCity) ? 'selected' : ''}>
                                ${city.cityName}
                            </option>
                        `;

                        });
                    }

                    if (selectedProvinceId) {
                        loadCities(selectedProvinceId, selectedCityId);
                    }

                    provinceSelect.addEventListener('change', function () {

                        loadCities(this.value);

                    });

                })
                .catch(error => {
                    console.error('Error loading cities:', error);
                });

        });
    </script>
@endpush