@extends('layout.appmain')
@section('title', '- Profile')

@section('main')

    <main id="main" class="main">

        <div class="pagetitle">
            <h1>Profile</h1>
            <nav>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
                    <li class="breadcrumb-item">Settings</li>
                    <li class="breadcrumb-item active">Profile</li>
                </ol>
            </nav>
        </div>
        <!-- End Page Title -->

        <section class="section profile">
            <div class="row">
                <div class="col-xl-4">

                    <div class="card">
                        <div class="card-body profile-card pt-4 d-flex flex-column align-items-center">
                            <img
                                src="{{ auth()->user()->profile_image ?: 'assets/img/profile-img.jpg' }}"
                                alt="Profile"
                                class="rounded-circle"
                                onerror="this.onerror=null; this.src='assets/img/profile-img.jpg';"
                            >
                            <h2>{{auth()->user()->name}}</h2>
                            <h3>{{ auth()->user()->getRoleNames()->first() ?? 'No Role Assigned' }}</h3>
                        </div>
                    </div>

                </div>

                <div class="col-xl-8">

                    <div class="card">
                        <div class="card-body pt-3">
                            <!-- Bordered Tabs -->

                            <ul class="nav nav-tabs nav-tabs-bordered">

                                <li class="nav-item">
                                    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#profile-overview">Overview</button>
                                </li>

                                <li class="nav-item">
                                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-edit">Edit Profile</button>
                                </li>

                                <li class="nav-item">
                                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-settings">Settings</button>
                                </li>

                                <li class="nav-item">
                                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-change-password">Change Password</button>
                                </li>

                            </ul>

                            <div class="tab-content pt-2">

                                <div class="tab-pane fade show active profile-overview" id="profile-overview">

                                    <h5 class="card-title">Profile Details</h5>

                                    <div class="row">
                                        <div class="col-lg-3 col-md-4 label ">Full Name</div>
                                        <div class="col-lg-9 col-md-8">{{auth()->user()->name}}</div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-3 col-md-4 label">Email</div>
                                        <div class="col-lg-9 col-md-8">{{auth()->user()->email}}</div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-3 col-md-4 label">Phone</div>
                                        <div class="col-lg-9 col-md-8">{{auth()->user()->phone}}</div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-3 col-md-4 label">Address</div>
                                        <div class="col-lg-9 col-md-8">{{auth()->user()->address}}</div>
                                    </div>
                                </div>

                                <div class="tab-pane fade profile-edit pt-3 " id="profile-edit">

                                    <!-- Profile Edit Form -->
                                    <form>@csrf
                                        <div class="row mb-3">
                                            <label for="profileImage" class="col-md-4 col-lg-3 col-form-label">Profile Image</label>
                                            <div class="col-md-8 col-lg-9">
                                                <img id="profileImage" src="{{auth()->user()->profile_image? :'assets/img/profile-img.jpg'}}" onerror="this.onerror=null; this.src='assets/img/profile-img.jpg';" alt="Profile" style="width: 100px; height: auto;">
                                                <div class="pt-2">
                                                    <a href="#" id="uploadBtn" class="btn btn-primary btn-sm" title="Upload new profile image">
                                                        <i class="bi bi-upload"></i>
                                                    </a>
                                                    <a href="#" class="btn btn-danger btn-sm" title="Remove my profile image">
                                                        <i class="bi bi-trash"></i>
                                                    </a>
                                                    <input type="file" id="imageInput" accept="image/*" style="display: none;">
                                                </div>
                                            </div>
                                        </div>


                                        <div class="row mb-3">
                                            <label for="fullName" class="col-md-4 col-lg-3 col-form-label">Full Name</label>
                                            <div class="col-md-8 col-lg-9">
                                                <input name="id" type="hidden" id="id" value="{{auth()->user()->id}}">
                                                <input name="name" type="text" class="form-control" id="name" value="{{auth()->user()->name}}">
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <label for="Address" class="col-md-4 col-lg-3 col-form-label">Address</label>
                                            <div class="col-md-8 col-lg-9">
                                                <input name="address" type="text" class="form-control" id="address" value="{{auth()->user()->address}}">
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <label for="Phone" class="col-md-4 col-lg-3 col-form-label">Phone</label>
                                            <div class="col-md-8 col-lg-9">
                                                <input name="phone" type="text" class="form-control" id="phone" value="{{auth()->user()->phone}}">
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <label for="Email" class="col-md-4 col-lg-3 col-form-label">Email</label>
                                            <div class="col-md-8 col-lg-9">
                                                <input name="email" type="email" class="form-control" id="email" readonly value="{{auth()->user()->email}}">
                                            </div>
                                        </div>


                                        <div class="text-center">
                                            <button type="button" onclick=" addData()" class="btn btn-primary">Save Changes</button>
                                        </div>
                                    </form>
                                    <!-- End Profile Edit Form -->

                                </div>

                                <div class="tab-pane fade pt-3" id="profile-settings">

                                    <!-- Settings Form -->
                                    <form>

                                        <div class="row mb-3">
                                            <label for="fullName" class="col-md-4 col-lg-3 col-form-label">Email Notifications</label>
                                            <div class="col-md-8 col-lg-9">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="changesMade" checked>
                                                    <label class="form-check-label" for="changesMade">
                                                        Changes made to your account
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="newProducts" checked>
                                                    <label class="form-check-label" for="newProducts">
                                                        Information on new products and services
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="proOffers">
                                                    <label class="form-check-label" for="proOffers">
                                                        Marketing and promo offers
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="securityNotify" checked disabled>
                                                    <label class="form-check-label" for="securityNotify">
                                                        Security alerts
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="text-center">
                                            <button type="submit" class="btn btn-primary">Save Changes</button>
                                        </div>
                                    </form><!-- End settings Form -->

                                </div>

                                <div class="tab-pane fade pt-3" id="profile-change-password">
                                    <!-- Change Password Form -->
                                    <form id="changePasswordForm">@csrf
                                        <input name="ids" type="hidden" id="ids" value="{{ auth()->user()->id }}">

                                        <div class="row mb-3">
                                            <label for="currentPassword" class="col-md-4 col-lg-3 col-form-label">Current Password</label>
                                            <div class="col-md-8 col-lg-9">
                                                <input name="currentPassword" type="password" class="form-control" id="currentPassword" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <label for="newPassword" class="col-md-4 col-lg-3 col-form-label">New Password</label>
                                            <div class="col-md-8 col-lg-9">
                                                <input name="newPassword" type="password" class="form-control" id="newPassword" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <label for="confirmed" class="col-md-4 col-lg-3 col-form-label">Re-enter New Password</label>
                                            <div class="col-md-8 col-lg-9">
                                                <input name="newPassword_confirmation" type="password" class="form-control" id="newPassword_confirmation" required>
                                                <div class="invalid-feedback"></div>
                                            </div>
                                        </div>

                                        <div class="text-center">
                                            <button type="button" onclick="changePassword()" class="btn btn-primary">Change Password</button>
                                        </div>
                                    </form><!-- End Change Password Form -->

                                </div>

                            </div>

                            <!-- End Bordered Tabs -->

                        </div>
                    </div>

                </div>
            </div>
        </section>

    </main>
    <!-- End #main -->
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            $('#uploadBtn').on('click', function(e) {
                e.preventDefault();
                $('#imageInput').click(); // Trigger the file input
            });

            $('#imageInput').on('change', function() {
                var file = this.files[0];
                if (file) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        $('#profileImage').attr('src', e.target.result); // Show the image
                    }
                    reader.readAsDataURL(file);

                    var formData = new FormData();
                    formData.append('image2', file);
                    formData.append('id', {{auth()->user()->id}});
                    formData.append('_token', '{{csrf_token()}}');

                    $.ajax({
                        url: 'upload-image',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            console.log(response);
                            var dataResult = JSON.parse(response);

                            swal("Success", dataResult.statusMsg);
                        },
                        error: function(xhr, status, error) {
                            console.error('Image upload failed: ', error);
                        }
                    });
                }
            });
        });

        function addData() {
            url = "{{ url('user-profile-update') }}";
            $.ajax({
                url: url,
                type: "POST",
                data: new FormData($("#profile-edit form")[0]),
                contentType: false,
                processData: false,
                success: function (data) {
                    var dataResult = JSON.parse(data);
                    if (dataResult.statusCode == 200) {
                        swal("Success", dataResult.statusMsg);
                    }else if (dataResult.statusCode == 204) {
                        showErrors(dataResult.errors);
                    }else{
                        swal({
                            title: "Oops",
                            text: dataResult.statusMsg,
                            icon: "error",
                            timer: '1500'
                        });

                    }
                }, error: function (data) {
                    console.log(data);
                    swal({
                        title: "Oops",
                        text: "Error occured",
                        icon: "error",
                        timer: '1500'
                    });
                }
            });
            return false;
        };

        function changePassword() {
            url = "{{ url('user-password-change') }}";
            $.ajax({
                url: url,
                type: "POST",
                data: new FormData($("#profile-change-password form")[0]),
                contentType: false,
                processData: false,
                success: function (data) {
                    var dataResult = JSON.parse(data);
                    if (dataResult.statusCode == 200) {
                        swal("Success", dataResult.statusMsg).then(() => {
                            // Perform logout via AJAX
                            $.ajax({
                                url: "{{ url('logout') }}",
                                type: "POST",
                                data: {
                                    _token: '{{ csrf_token() }}'
                                },
                                success: function () {
                                    window.location.href = "{{ url('login') }}"; // Adjust this URL as needed
                                },
                                error: function () {
                                    swal("Oops", "Error logging out", "error");
                                }
                            });
                        });
                    }else if (dataResult.statusCode == 204) {
                        showErrors(dataResult.errors);
                    }else{
                        swal({
                            title: "Oops",
                            text: dataResult.statusMsg,
                            icon: "error",
                            timer: '1500'
                        });

                    }
                }, error: function (data) {
                    console.log(data);
                    swal({
                        title: "Oops",
                        text: "Error occured",
                        icon: "error",
                        timer: '1500'
                    });
                }
            });
            return false;
        };

    </script>

@endsection