@extends('user.layouts.template')

@section('styles')
    <style>
        .form-control {

            font-size: 14px !important;

        }

        .form-select {

            font-size: 14px !important;

        }

        .form-label {
            font-size: 15px !important;
        }

        .form-check-label {
            font-size: 14px !important;

        }
    </style>
@endsection

@section('content')
    <div class="content__boxed">
        <div class="content__wrap">

            <div class="row">
                <div class="col-md-12 col-xl-12">
                    <div class="card" id="tab-content-pagination">
                        <div class="card-body">
                            <div class="row align-items-center justify-content-between">

                                <div class="col-12">

                                    <form id="verticalwizard" class="form-wizard">
                                        <div class="row">
                                            <div class="col-lg-3">


                                                <ul class="nav nav-pills nav-justified flex-column icon-wizard form-wizard-header bg-light p-1"
                                                    role="tablist">
                                                    <li class="nav-item" role="presentation">
                                                        <a href="#tenant-info" id="user-info" data-bs-toggle="tab"
                                                            data-toggle="tab" class="nav-link rounded-0 py-2 active"
                                                            aria-selected="false" role="tab" tabindex="-1">

                                                            User Profile
                                                        </a>
                                                    </li>
                                                    <li class="nav-item" role="presentation">
                                                        <a href="#lease-details" id="update-pass" data-bs-toggle="tab"
                                                            data-toggle="tab" class="nav-link rounded-0 py-2 "
                                                            aria-selected="true" role="tab">
                                                            Update Password
                                                        </a>
                                                    </li>





                                                    <!-- <li class="nav-item" role="presentation">
                                                                                                                                                                                                                                                                                                                          <a href="#finished" id="finished-tab" data-bs-toggle="tab" data-toggle="tab"
                                                                                                                                                                                                                                                                                                                             class="nav-link rounded-0 py-2" aria-selected="false" tabindex="-1" role="tab">
                                                                                                                                                                                                                                                                                                                             Finished
                                                                                                                                                                                                                                                                                                                          </a>
                                                                                                                                                                                                                                                                                                                       </li> -->

                                                </ul>


                                            </div>







                                            <div class="col-lg-9">
                                                <div class="tab-content mb-0">
                                                    <div id="error_account"></div>
                                                    <div id="success_account"></div>
                                                    <div class="tab-pane active show" id="tenant-info" role="tabpanel"
                                                        aria-labelledby="user-info">
                                                        <h4 class="fs-16 fw-semibold mb-1">User Profile</h4>
                                                        <div class="row py-2">
                                                            <div class="col-lg-6">
                                                                <div class="mb-3">
                                                                    <label for="username"
                                                                        class="form-label">Username</label>
                                                                    <input id="username" name="username" type="text"
                                                                        class="form-control" placeholder="Enter Username"
                                                                        value="{{ auth()->user()->name ?? '' }}" >
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6">
                                                                <div class="mb-3">
                                                                    <label for="email" class="form-label">Email
                                                                        ID</label>
                                                                    <input id="email" name="email" type="text"
                                                                        class="form-control" placeholder="Enter Email ID"
                                                                        value="{{ auth()->user()->email ?? '' }}" readonly>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6">
                                                                <div class="mb-3">
                                                                    <label for="mobile_number" class="form-label">Mobile
                                                                        Number</label>
                                                                    <input class="form-control" type="text"
                                                                        id="mobile_number" name="mobile_number"
                                                                        placeholder="Enter Mobile Number"
                                                                        value="{{ auth()->user()->mobile_number ?? '' }}"
                                                                        >
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-6">
                                                                <div class="mb-3">
                                                                    <label for="profile_photo" class="form-label">Upload
                                                                        Profile Photo</label>
                                                                    <input type="file" class="form-control"
                                                                        id="profile_photo" name="profile_photo"
                                                                        accept="image/*">
                                                                    <br>
                                                                    <img id="imgPreview" height="100px;" width="100px;"
                                                                        src="public/public/profile_photo/{{ auth()->user()->profile_photo ?? '1.png' }}"
                                                                        alt="pic" />
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-12">
                                                                <div class="mb-3">
                                                                    <button type="button"
                                                                        class="btn btn-primary">Update</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- Password update form -->
                                                    <div class="tab-pane" id="lease-details" role="tabpanel"
                                                        aria-labelledby="update-pass">
                                                        <div id="error_password"></div>
                                                        <div id="success_password"></div>
                                                        <h4 class="fs-16 fw-semibold mb-1">Update Password</h4>
                                                        <div class="row py-2">
                                                            <div class="col-lg-12">
                                                                <div class="mb-2">
                                                                    <label for="old_password" class="form-label">Old
                                                                        Password<span style="color: red;">*</span></label>
                                                                    <div class="input-group">
                                                                        <input type="password" id="old_password"
                                                                            name="old_password" class="form-control"
                                                                            placeholder="Enter Old Password" required>
                                                                        <button type="button" class="btn btn-outline-light"
                                                                            id="togglePassword">
                                                                            <i class="ri-eye-fill"></i>
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-12">
                                                                <div class="mb-2">
                                                                    <label for="new_password" class="form-label">New
                                                                        Password<span style="color: red;">*</span></label>
                                                                    <div class="input-group">
                                                                        <input type="password" id="new_password"
                                                                            name="new_password" class="form-control"
                                                                            placeholder="Enter New Password" required>
                                                                        <button type="button" class="btn btn-outline-light"
                                                                            id="togglePassword">
                                                                            <i class="ri-eye-fill"></i>
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-12">
                                                                <div class="mb-2">
                                                                    <label for="new_password_confirmation"
                                                                        class="form-label">Confirm New Password<span
                                                                            style="color: red;">*</span></label>
                                                                    <div class="input-group">
                                                                        <input type="password"
                                                                            id="new_password_confirmation"
                                                                            name="new_password_confirmation"
                                                                            class="form-control"
                                                                            placeholder="Confirm New Password" required>
                                                                        <button type="button" class="btn btn-outline-light"
                                                                            id="togglePassword">
                                                                            <i class="ri-eye-fill"></i>
                                                                        </button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-lg-12">
                                                                <div class="mb-3">
                                                                    <button type="button"
                                                                        class="btn btn-primary">Update</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>



                                                    <div class="tab-pane" id="finished" role="tabpanel">
                                                    </div>
                                                </div> <!-- tab-content -->
                                            </div>
                                        </div> <!-- end #horizontalwizard-->
                                    </form>


                                </div>
                                <!-- end col -->

                            </div>
                            <!-- end row-->
                        </div>
                        <!-- end card body -->
                    </div>
                    <!-- end card -->
                </div>
                <!-- end col -->

            </div>
        </div>
    </div>
@endsection
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    $(document).ready(function () {
        const photoInp = $("#profile_photo");
        let file;
        photoInp.change(function (e) {
            file = this.files[0];
            if (file) {
                let reader = new FileReader();
                reader.onload = function (event) {
                    $("#imgPreview")
                        .attr("src", event.target.result);
                };
                reader.readAsDataURL(file);
            }
        });
        $(document).on('click', '#togglePassword', function () {
            const passwordInput = $(this).siblings('input');
            const type = passwordInput.attr('type') === 'password' ? 'text' : 'password';
            passwordInput.attr('type', type);
            $(this).find('i').toggleClass('ri-eye-fill ri-eye-off-fill');
        });

        // Profile form validation and submission
        $('#verticalwizard').on('click', '#tenant-info .btn-primary', function (e) {
            e.preventDefault();
            $("#error_account").html("");
            $("#success_account").html("");
            $("#error_password").html("");
            $("#success_password").html("");
            const formData = new FormData();
            formData.append('username', $('#tenant-info input[type="text"]').eq(0).val());
            formData.append('email', $('#tenant-info input[type="text"]').eq(1).val());
            formData.append('mobile_number', $('#tenant-info input[type="text"]').eq(2).val());

            const fileInput = $('#tenant-info input[type="file"]')[0];
            if (fileInput.files.length > 0) {
                formData.append('profile_photo', fileInput.files[0]);
            }

            $.ajax({
                url: '/api/update-profile',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Authorization': 'Bearer {{ session('authentication_token') }}', // If using token auth
                },
                success: function (response) {
                    if (response.success) {
                        if (response.img_url && response.img_url != null) {
                            $(".mainnav__avatar").attr("src", response.img_url);
                        }

                        Swal.fire(response.message, "", "success");
                    }
                },
                error: function (xhr) {
                    if (xhr.status === 422) {
                        const errors = xhr.responseJSON.errors;
                        for (const field in errors) {
                            Swal.fire(errors[field][0], "", "error");
                        }
                    } else {
                        Swal.fire('An error occurred. Please try again', "", "error");
                    }
                }
            });
        });

        // Password form validation and submission
        $('#verticalwizard').on('click', '#lease-details .btn-primary', function (e) {
            e.preventDefault();
            $("#error_account").html("");
            $("#success_account").html("");
            $("#error_password").html("");
            $("#success_password").html("");
            const oldPassword = $('#old_password').val();
            const newPassword = $('#new_password').val();
            const confirmPassword = $('#new_password_confirmation').val();

            $.ajax({
                url: '/api/update-password',
                type: 'POST',
                data: {
                    old_password: oldPassword,
                    new_password: newPassword,
                    new_password_confirmation: confirmPassword
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    'Authorization': 'Bearer {{ session('authentication_token') }}',
                },
                success: function (response) {
                    if (response.success) {
                        // toastr.success(response.message);
                        Swal.fire(response.message, "", "success");
                        // $("#success_password").css('color', 'green')
                        // $("#success_password").html(response.message);
                        $('#lease-details input[type="password"]').val('');
                    }
                },
                error: function (xhr) {
                    if (xhr.status === 422) {
                        const errors = xhr.responseJSON.errors;
                        let error_messages = "";
                        $.each(errors, function (index, value) {
                            console.log(value);
                            error_messages += value[0] + '\n';
                            // $('div.' + index + '').text(value);
                            // errMsg += value + '\n';
                        });
                        Swal.fire(error_messages, "", "error");
                        // for (const field in errors) {
                        //toastr.error(errors[field][0]);
                        // $("#error_password").css('color', 'red')
                        // $("#error_password").html(errors[field][0]);
                        //     Swal.fire(errors[field][0], "", "error");
                        // }
                    } else {
                        //  toastr.error('An error occurred. Please try again.');
                        // $("#error_password").css('color', 'red')
                        // $("#error_password").html('An error occurred. Please try again.');
                        Swal.fire('An error occurred. Please try again.', "", "error");
                    }
                }
            });
        });
    });
</script>