@extends('layouts.admin.main')
@section('main-section')
    <div id="layoutSidenav_content"
        class=" position-relative d-flex flex-column min-vh-100 justify-content-between flex-grow-1 " style="min-width: 0;">
        <main>
            <nav class="sb-topnav navbar navbar-expand justify-content-between py-3 px-3 px-md-5">
                <div class="order-1 order-lg-0">
                    <a class=" me-lg-0 text-dark bg-transparent d-lg-none" id="sidebarToggle" href="#!"><i
                            class="bi bi-justify-right font-20px"></i></a>
                </div>

                <div class="logo-sm d-block d-lg-none">
                    <img src="../assets/images/logo.png" alt="" class="width-50 width-md-80" draggable="false"
                        loading="lazy">
                </div>
                <div class="d-none d-lg-block">
                    <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap">
                        <h2 class=" font-28px fw-600 m-0">Profile Settings</h2>
                    </div>
                </div>
                @include('layouts.admin.adminProfileDropdown')
            </nav>
            <div class="cover-all-content">
                <div class="d-block d-lg-none mb-3">
                    <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap">
                        <h2 class="font-22px font-md-28px fw-600">Profile Settings</h2>
                    </div>
                </div>
                <form id="updateOwner">
                    @csrf
                    <input type="hidden" name="id" value="{{ Auth::user()->id }}">
                    <div class=" rounded overflow-hidden p-4 py-7 bg-white border" style="--bs-border-radius: 10px">
                        <div class="row g-3">
                            <div class="col-12 text-center">
                                <label for="pImageRow-1"
                                    class="productImageUpload position-relative overflow-hidden hover-opacity-07 mb-0 border border-primary rounded-circle mx-auto"
                                    style="width: 198px; height: 198px;" role="button">
                                    <div class="position-absolute top-50 start-50 translate-middle text-center">
                                        <i class="bi bi-camera font-60px text-primary"></i>
                                        <p class="m-0 text-primary font-16px text-nowrap">Select Image</p>
                                    </div>
                                    <img id="pImage-1" alt=""
                                        class=" position-absolute top-50 start-50 translate-middle h-100 z-index1"
                                        style="object-fit: cover;" src="{{ asset('users_images/'.Auth::user()->image) }}" draggable="false" loading="lazy">

                                    <input type="file" name="image" id="pImageRow-1" hidden=""
                                        onchange="document.getElementById('pImage-1').src = window.URL.createObjectURL(this.files[0])">


                                </label>
                                <div class="text-center mt-4">
                                    <h3 class=" font-28px fw-600 mb-7">{{ Auth::user()->username }}</h3>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>Full Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control bg-transparent" placeholder="Your Name"
                                        required="" name="name" value="{{ Auth::user()->name }}">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>Email<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control bg-transparent" placeholder="Your Email"
                                        required="" name="email" value="{{ Auth::user()->email }}" readonly>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>Username<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control bg-transparent" placeholder="Your Username"
                                        required="" name="username" value="{{ Auth::user()->username }}">
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group">
                                    <label>Phone <span class="text-danger">*</span></label>
                                    <input type="phone" class="form-control bg-transparent" placeholder="Enter your phone"
                                        required="" name="phone" value="{{ Auth::user()->phone }}">
                                </div>
                            </div>

                        </div>
                        <div class="text-center mt-5">
                            <ul>
                                <li><button type="submit" class="btn btn-primary extra-btn-padding-35 font-18px fw-600">Update
                                        Profile</button></li>
                            </ul>
                        </div>
                    </div>
                </form>
            </div>
        </main>
    </div>
@endsection
@push('scripts')
    <script>
        $('#updateOwner').on('submit', function(e) {
            e.preventDefault();

            var formData = new FormData(this);

            $.ajax({
                url: '{{ route('property-owner.update') }}',
                method: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    console.log(response);
                    if (response.status == true) {
                        Swal.fire(
                            'Owner updated',
                            response.msg,
                            'success'
                        ).then((result) => {
                            window.location.href = '{{ route('admin.profile') }}';
                        })
                    }
                    if (response.status == false) {
                        Swal.fire(
                            "Oops",
                            response.msg,
                            'success'
                        ).then((result) => {
                            window.location.href = '{{ route('admin.profile') }}';
                        })
                    }

                    if (response.status == 404) {

                        $.each(response.msg, function(index, error) {
                            toastr.error(error);
                        });
                    }
                }
            })

        })
    </script>
@endpush