@extends('layouts.app')

@section('content')

    <div class="theme-page-section theme-page-section-lg">
        <div class="container">

            <div class="row">

                {{-- Sidebar --}}
                <div class="col-md-3">

                    <div class="theme-account-sidebar">

                        <div class="theme-account-sidebar-header">
                            <div class="theme-account-sidebar-user">

                                <div class="theme-account-sidebar-user-icon">
                                    @if($user->profile_image)
                                        <img
                                            src="{{ asset('uploads/users/' . $user->profile_image) }}"
                                            alt="{{ $user->first_name }}"
                                            style="width:70px;height:70px;border-radius:50%;object-fit:cover;"
                                        >
                                    @else
                                        <i class="fa fa-user-circle-o"></i>
                                    @endif
                                </div>

                                <div class="theme-account-sidebar-user-name">
                                    {{getUserFullName()}}
                                 </div>

                                <div class="theme-account-sidebar-user-email">
                                    {{ $user->email }}
                                </div>

                            </div>
                        </div>

                        <ul class="theme-account-sidebar-menu">

                            <li class="active">
                                <a href="{{ route('users.profile.edit') }}">
                                    <i class="fa fa-user"></i>
                                    ویرایش پروفایل
                                </a>
                            </li>

                            <li>
                                <a href="{{ route('users.favorite.index') }}">
                                    <i class="fa fa-heart"></i>
                                    علاقه‌مندی‌ها
                                </a>
                            </li>

                            <li>
                                <a href="{{ route('users.comments.index') }}">
                                    <i class="fa fa-comments"></i>
                                    نظرات من
                                </a>
                            </li>

                            <li>
                                <form
                                    action="{{ route('auth.logout.index') }}"
                                    method="POST"
                                >
                                    @csrf

                                    <button type="submit">
                                        <i class="fa fa-sign-out"></i>
                                        خروج
                                    </button>
                                </form>
                            </li>

                        </ul>

                    </div>

                </div>


                {{-- Profile --}}
                <div class="col-md-9">

                    <div class="theme-account">

                        <div class="theme-account-header">

                            <h1 class="theme-account-title">
                                ویرایش پروفایل
                            </h1>

                            <p class="theme-account-subtitle">
                                اطلاعات حساب کاربری خود را ویرایش کنید
                            </p>

                        </div>


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


                        @if($errors->any())
                            <div class="alert alert-danger">
                                لطفاً خطاهای فرم را بررسی کنید.
                            </div>
                        @endif


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

                            @csrf
                            @method('PUT')


                            {{-- Personal Information --}}
                            <div class="theme-account-box">

                                <div class="theme-account-box-header">
                                    <h3>
                                        اطلاعات شخصی
                                    </h3>
                                </div>

                                <div class="theme-account-box-content">

                                    <div class="row">

                                        <div class="col-md-6">

                                            <div class="form-group">
                                                <label for="first_name">
                                                    نام
                                                </label>

                                                <input
                                                    type="text"
                                                    id="first_name"
                                                    name="first_name"
                                                    value="{{ old('first_name', $user->first_name) }}"
                                                    class="form-control"
                                                >

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

                                        </div>


                                        <div class="col-md-6">

                                            <div class="form-group">
                                                <label for="last_name">
                                                    نام خانوادگی
                                                </label>

                                                <input
                                                    type="text"
                                                    id="last_name"
                                                    name="last_name"
                                                    value="{{ old('last_name', $user->last_name) }}"
                                                    class="form-control"
                                                >

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

                                        </div>


                                        <div class="col-md-6">

                                            <div class="form-group">
                                                <label for="national_code">
                                                    کد ملی
                                                </label>

                                                <input
                                                    type="text"
                                                    id="national_code"
                                                    name="national_code"
                                                    value="{{ old('national_code', $user->national_code) }}"
                                                    class="form-control"
                                                >

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

                                        </div>


                                        <div class="col-md-6">

                                            <div class="form-group">
                                                <label for="mobile">
                                                    موبایل
                                                </label>

                                                <input
                                                    type="text"
                                                    id="mobile"
                                                    name="mobile"
                                                    value="{{ old('mobile', $user->mobile) }}"
                                                    class="form-control"
                                                >

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

                                        </div>


                                        <div class="col-md-6">

                                            <div class="form-group">
                                                <label for="email">
                                                    ایمیل
                                                </label>

                                                <input
                                                    type="email"
                                                    id="email"
                                                    name="email"
                                                    value="{{ old('email', $user->email) }}"
                                                    class="form-control"
                                                >

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

                                        </div>


                                        <div class="col-md-6">

                                            <div class="form-group">
                                                <label for="username">
                                                    نام کاربری
                                                </label>

                                                <input
                                                    type="text"
                                                    id="username"
                                                    name="username"
                                                    value="{{ old('username', $user->username) }}"
                                                    class="form-control"
                                                >

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

                                        </div>

                                    </div>

                                </div>

                            </div>


                            {{-- Gender & Marital Status --}}
                            <div class="theme-account-box">

                                <div class="theme-account-box-header">
                                    <h3>
                                        اطلاعات تکمیلی
                                    </h3>
                                </div>

                                <div class="theme-account-box-content">

                                    <div class="row">

                                        <div class="col-md-6">

                                            <div class="form-group">

                                                <label for="gender">
                                                    جنسیت
                                                </label>

                                                <select
                                                    id="gender"
                                                    name="gender"
                                                    class="form-control"
                                                >

                                                    <option value="">
                                                        انتخاب جنسیت
                                                    </option>

                                                    <option
                                                        value="0"
                                                        @selected(old('gender', $user->gender) == 0)
                                                    >
                                                        مرد
                                                    </option>

                                                    <option
                                                        value="1"
                                                        @selected(old('gender', $user->gender) == 1)
                                                    >
                                                        زن
                                                    </option>

                                                </select>

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

                                            </div>

                                        </div>


                                        <div class="col-md-6">

                                            <div class="form-group">

                                                <label for="marital_status">
                                                    وضعیت تأهل
                                                </label>

                                                <select
                                                    id="marital_status"
                                                    name="marital_status"
                                                    class="form-control"
                                                >

                                                    <option value="">
                                                        انتخاب وضعیت تأهل
                                                    </option>

                                                    <option
                                                        value="0"
                                                        @selected(old('marital_status', $user->marital_status) == 0)
                                                    >
                                                        مجرد
                                                    </option>

                                                    <option
                                                        value="1"
                                                        @selected(old('marital_status', $user->marital_status) == 1)
                                                    >
                                                        متأهل
                                                    </option>

                                                    <option
                                                        value="2"
                                                        @selected(old('marital_status', $user->marital_status) == 2)
                                                    >
                                                        متارکه
                                                    </option>

                                                </select>

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

                                            </div>

                                        </div>


                                        <div class="col-md-12">

                                            <div class="form-group">

                                                <label for="spouse_name">
                                                    نام و نام خانوادگی همسر
                                                </label>

                                                <input
                                                    type="text"
                                                    id="spouse_name"
                                                    name="spouse_name"
                                                    value="{{ old('spouse_name', $user->spouse_name) }}"
                                                    class="form-control"
                                                >

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

                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </div>


                            {{-- Location --}}
                            <div class="theme-account-box">

                                <div class="theme-account-box-header">
                                    <h3>
                                        محل سکونت
                                    </h3>
                                </div>

                                <div class="theme-account-box-content">

                                    <div class="row">

                                        <div class="col-md-6">

                                            <div class="form-group">

                                                <label for="province_id">
                                                    استان
                                                </label>

                                                <select
                                                    id="province_id"
                                                    name="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 for="city_id">
                                                    شهر
                                                </label>

                                                <select
                                                    id="city_id"
                                                    name="city_id"
                                                    class="form-control"
                                                    disabled
                                                >
                                                    <option value="">ابتدا استان را انتخاب کنید</option>
                                                </select>
                                                @error('city_id')
                                                <span class="text-danger">
                                                        {{ $message }}
                                                    </span>
                                                @enderror

                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </div>


                            {{-- Profile Image --}}
                            <div class="theme-account-box">

                                <div class="theme-account-box-header">
                                    <h3>
                                        تصویر پروفایل
                                    </h3>
                                </div>

                                <div class="theme-account-box-content">

                                    @if($user->profile_image)

                                        <div class="mb-3">

                                            <img
                                                src="{{ asset('uploads/users/' . $user->profile_image) }}"
                                                alt="تصویر پروفایل"
                                                style="width:100px;height:100px;object-fit:cover;border-radius:50%;"
                                            >

                                        </div>

                                    @endif

                                    <div class="form-group">

                                        <label for="profile_image">
                                            انتخاب تصویر جدید
                                        </label>

                                        <input
                                            type="file"
                                            id="profile_image"
                                            name="profile_image"
                                            class="form-control"
                                            accept=".jpg,.jpeg,.png,.webp"
                                        >

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

                                    </div>

                                </div>

                            </div>


                            {{-- Password --}}
                            <div class="theme-account-box">

                                <div class="theme-account-box-header">

                                    <h3>
                                        تغییر رمز عبور
                                    </h3>

                                    <p>
                                        اگر قصد تغییر رمز عبور ندارید، این قسمت را خالی بگذارید.
                                    </p>

                                </div>

                                <div class="theme-account-box-content">

                                    <div class="row">

                                        <div class="col-md-12">

                                            <div class="form-group">

                                                <label for="current_password">
                                                    رمز عبور فعلی
                                                </label>

                                                <input
                                                    type="password"
                                                    id="current_password"
                                                    name="current_password"
                                                    class="form-control"
                                                >

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

                                            </div>

                                        </div>


                                        <div class="col-md-6">

                                            <div class="form-group">

                                                <label for="new_password">
                                                    رمز عبور جدید
                                                </label>

                                                <input
                                                    type="password"
                                                    id="new_password"
                                                    name="new_password"
                                                    class="form-control"
                                                >

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

                                            </div>

                                        </div>


                                        <div class="col-md-6">

                                            <div class="form-group">

                                                <label for="new_password_confirmation">
                                                    تکرار رمز عبور جدید
                                                </label>

                                                <input
                                                    type="password"
                                                    id="new_password_confirmation"
                                                    name="new_password_confirmation"
                                                    class="form-control"
                                                >

                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </div>


                            {{-- Submit --}}
                            <div class="text-left">

                                <button
                                    type="submit"
                                    class="btn btn-primary btn-lg"
                                >
                                    ذخیره تغییرات
                                </button>

                            </div>

                        </form>

                    </div>

                </div>

            </div>

        </div>
    </div>

@endsection


@push('scripts')
    <script>
        $(document).ready(function () {

            $('#province_id').on('change', function () {

                let provinceId = $(this).val();
                let citySelect = $('#city_id');

                citySelect.empty();

                if (!provinceId) {
                    citySelect
                        .prop('disabled', true)
                        .append('<option value="">ابتدا استان را انتخاب کنید</option>');

                    return;
                }

                citySelect
                    .prop('disabled', true)
                    .append('<option value="">در حال دریافت شهرها...</option>');

                $.ajax({
                    url: "{{ route('users.cities.by.province', ':province') }}"
                        .replace(':province', provinceId),

                    type: 'GET',

                    success: function (cities) {

                        citySelect.empty();

                        citySelect.append(
                            '<option value="">انتخاب شهر</option>'
                        );

                        $.each(cities, function (index, city) {

                            citySelect.append(
                                $('<option>', {
                                    value: city.id,
                                    text: city.name
                                })
                            );

                        });

                        citySelect.prop('disabled', false);
                    },

                    error: function () {

                        citySelect.empty();

                        citySelect.append(
                            '<option value="">خطا در دریافت شهرها</option>'
                        );

                    }
                });

            });

        });
    </script>
@endpush