@extends('panel._layout.app')

@section('content')
    <div class="row">
        <div class="col-sm-12 col-md-6">
            <div class="card">
                <div class="text-center card-body">
                    <h4 class="card-title">الملف الشخصي</h4>
                    <div>
                        <img src="{{ auth()->user()->photo_path }}" class="rounded-circle avatar-xl img-thumbnail mb-2"
                            alt="profile-image" id="userPhoto">

                        <div class="text-start">
                            <p class="text-muted font-16">
                                <strong>الاسم :</strong>
                                <span class="ms-2" id="userName">{{ auth()->user()->name }}</span>
                            </p>
                            <p class="text-muted font-16">
                                <strong>البريد الكتروني :</strong>
                                <span class="ms-2" id="userName">{{ auth()->user()->email }}</span>
                            </p>
                            <p class="text-muted font-16">
                                <strong>رقم الجوال :</strong>
                                <span class="ms-2" id="userName">{{ auth()->user()->mobile ?? '--' }}</span>
                            </p>
                            <p class="text-muted font-16">
                                <strong>الصلاحية :</strong>
                                <span class="ms-2">{{ auth()->user()->is_admin ? 'آدمن' : 'مشرف' }}
                                </span>
                            </p>
                        </div>

                        <button type="button" id="profile_modal_btn" class="btn btn-primary waves-effect waves-light mt-1"
                            data-bs-toggle="modal" data-bs-target="#profile-modal" data-name="{{ auth()->user()->name }}"
                            data-email="{{ auth()->user()->email }}" data-mobile="{{ auth()->user()->mobile }}">
                            تعديل الملف الشخصي
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-md-6">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">تعديل كلمة السر</h4>
                    <form action="{{ route('admin.profile.password') }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label for="old_password" class="form-label">كلمة السر القديمة</label>
                            <input type="password" class="form-control" id="old_password" name="old_password"
                                placeholder="*******" required>
                            @error('old_password')
                                {{ $message }}
                            @enderror
                        </div>
                        <div class="mb-3">
                            <label for="new_password" class="form-label">كلمة السر الجديدة</label>
                            <input type="password" class="form-control" id="new_password" name="new_password"
                                placeholder="*******" required>
                            @error('new_password')
                                {{ $message }}
                            @enderror
                        </div>
                        <div class="mb-3">
                            <label for="new_password_confirmation" class="form-label">تأكيد كلمة السر الجديدة</label>
                            <input type="password" class="form-control" id="new_password_confirmation"
                                name="new_password_confirmation" placeholder="*******" required>
                            @error('new_password_confirmation')
                                {{ $message }}
                            @enderror
                        </div>
                        <button type="submit" class="btn btn-primary waves-effect waves-light">تعديل</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Profile Modal -->
    <div class="modal fade" id="profile-modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-top">
            <div class="modal-content">
                <div class="modal-header bg-light">
                    <h4 class="modal-title" id="myCenterModalLabel">تعديل الملف الشخصي</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
                </div>
                <div class="modal-body">
                    <form class="ajax_form" action="{{ route('admin.profile.post') }}" method="POST">
                        <div class="mb-3">
                            <label for="name" class="form-label">الاسم</label>
                            <input type="text" class="form-control" id="name" name="name"
                                placeholder="أدخل الاسم">
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">البريد الكتروني</label>
                            <input type="email" class="form-control" id="email" name="email"
                                placeholder="أدخل البريد الكتروني">
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="mb-3">
                            <label for="mobile" class="form-label">رقم الهاتف</label>
                            <input type="text" class="form-control" id="mobile" name="mobile"
                                placeholder="أدخل رقم الهاتف">
                            <div class="invalid-feedback"></div>
                        </div>
                        <div class="mb-3">
                            <label for="photo" class="form-label">الصورة</label>
                            <input type="file" class="form-control" id="photo" name="photo">
                            <div class="invalid-feedback"></div>
                        </div>
                        <button type="submit" class="btn btn-light waves-effect waves-light">
                            تعديل
                        </button>
                        <button type="button" class="btn btn-danger waves-effect waves-light" data-bs-dismiss="modal">
                            الغاء
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- End Modal -->
@endsection


@push('scripts')
    <script>
        $(document).ready(function() {
            $('#profile-modal').on('shown.bs.modal', function() {
                let button = $('#profile_modal_btn');
                $('#profile-modal #name').val(button.data('name'));
                $('#profile-modal #email').val(button.data('email'));
                $('#profile-modal #mobile').val(button.data('mobile'));
            });
        });
    </script>
@endpush