@extends('layouts.admin')
@section('title', 'MyProfile')
@section('content')
<div class="dashboard-content bg-light p-4 mt-5">
    <div class="content-card rounded-2 bg-white mt-lg-4 mt-md-4 mt-1">
        <!-- Nav pills -->
        <ul class="nav nav-pills profile-tabs pt-4">
            <li class="nav-item w-50">
                <a class="nav-link text-decoration-none active" data-bs-toggle="pill" href="#profile">Profile Settings</a>
            </li>
            <li class="nav-item w-50">
                 <a class="nav-link text-decoration-none" data-bs-toggle="pill" href="#change">Change Password</a>
            </li>
        </ul>
        <!-- Tab panes -->
        
        <div class="tab-content mt-5 p-4">
            <div class="tab-pane container active" id="profile">
                {{-- <div class="row align-items-center">
                    <div class="col-md-12">
                        <p class="mb-0">
                            <a href="{{ route('admin.dashboard') }}" class="text-dark text-decoration-none position-relative d-flex align-items-baseline back-link"><i class="fa-solid fa-chevron-left me-2"></i> Profile Setting</a>
                        </p>
                        <p class="back-text">Update your personal details and customize your experience.</p>
                    </div>
                </div> 
                 --}}
                <div class="row mt-5">
                    <div class="col-md-12">
                        <form id=updateProfile action="{{ route('admin.myprofile.update') }}" method="POST" class="add-user-form profile-form p-4"enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="id" value="{{ base64_encode($myprofile->id) }}">
                            <div class="row">
                                <!-- <div class="col-md-2">
                                    <div class="profile-icons"><a href="#" class="text-decoration-none"><img src="{{ file_exists(public_path('storage/user/' . $myprofile->image)) && $myprofile->image
                                        ? url('storage/user/' . $myprofile->image)
                                        : asset('img/no-image-available.jpg') }}"
                                    alt="" class="rounded-circle"> <span class="camera-icons rounded-circle d-flex justify-content-center align-items-center"><i class="fa-solid fa-camera"></i></span></a></div>
                                </div> -->

                                 <div class="col-md-12">
                                    <p class="profile-icons position-relative d-inline-block">
                                        <a href="#" class="text-decoration-none" onclick="event.preventDefault(); document.getElementById('imageInput').click();">
                                            <img src="{{ $myprofile->image ? asset('storage/user/' . $myprofile->image) : asset('img/edit-user.png') }}"
                                            onerror="this.onerror=null; this.src='{{ asset('img/edit-user.png') }}';"
                                            alt="User Image"
                                            id="profilePreview"
                                            style="width: 120px; height: 120px; object-fit: cover; border-radius: 50%;">
                                            <!-- Camera icon overlay -->
                                            <span class="camera-icons rounded-circle d-flex justify-content-center align-items-center position-absolute"
                                                style="width: 40px; height: 40px; bottom: 0; right: 0;">
                                                <i class="fa-solid fa-camera"></i>
                                            </span>
                                        </a>
                                        <!-- Hidden file input -->
                                        <input type="file" name="image" id="imageInput" class="d-none" accept="image/*" onchange="previewProfileImage(this);">
                                    </p>
                                    <p class="text-danger error_container" id="error-image"></p>
                                </div>
    
                                <div class="col-md-6 offset-lg-0 offset-md-1 offset-0 ps-lg-5 ps-md-5 ps-inherit">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <label for="#" class="form-label">Full Name<span class="text-danger">*</span></label>
                                            <input type="text" class="form-control rounded-pill" value="{{ $myprofile->name }}" id="name" name="name">    
                                             <p class="text-danger" id="error-name"></p>
                                        </div>

                                        <div class="col-md-12 mt-4">
                                            <label for="email" class="form-label">Email address<span class="text-danger">*</span></label>
                                            <input type="email" class="form-control rounded-pill" id="email" placeholder="email" value="{{ $myprofile->email }}" name="email">
                                            <p class="text-danger" id="error-email"></p>
                                        </div>
                                        <div class="col-md-12 mt-4">
                                            <label for="#" class="form-label">Mobile Number</label>
                                            <input type="tel" class="form-control rounded-pill" id="m-number" placeholder="e.g. 8976543245" value="{{ $myprofile->mobile_number }}" name="mobile_number">    
                                        </div>
                                        <div class="col-md-12 mt-5">
                                            <button type="submit" class="btn add-btn px-4 py-3 w-100 rounded-pill">Save</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="tab-pane container fade" id="change">
                {{-- <div class="row align-items-center">
                    <div class="col-md-12">
                        <p class="mb-0">
                            <a href="#" class="text-dark text-decoration-none position-relative d-flex align-items-baseline back-link"><i class="fa-solid fa-chevron-left me-2"></i> Change Password</a>
                        </p>
                        <p class="back-text">Use strong password to make your account secure.</p>
                    </div>
                </div>   --}}
                <div class="row mt-5">
                    <div class="col-md-12">
                       
                        <form id="passwordForm" action="{{ route('admin.change.password') }}" method="POST" class="add-user-form profile-form p-4">
                            @csrf
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="profile-icons"><img src="{{ asset('img/change-psw-img1.png') }}" class="w-100"></div>
                                </div>
                                <div class="col-md-6 ps-lg-5 ps-md-5 ps-inherit">
                                    <div class="row">
                                        <div class="col-md-12 position-relative">
                                            <div class="col-md-12 position-relative">
                                            <label for="o-psw" class="form-label">Old Password <span class="text-danger">*</span></label>

                                            <div class="position-relative">
                                                <input type="password" id="oldpwd" class="form-control rounded-pill pe-5" id="o-psw" placeholder="Enter Old Password" name="old_password">
                                               <span class="position-absolute top-50 end-0 translate-middle-y me-3" style="cursor: pointer;" onclick="oldtogglePassword()">
                                                    <i class="fa-solid fa-eye-slash" id="toggleoldPwdIcon"></i>
                                                </span>
                                            </div>
                                            <p class="text-danger" id="error-old_password"></p>
                                        </div>
                                        <div class="col-md-12 mt-4">
                                            <label for="psw" class="form-label">New Password<span class="text-danger">*</span></label>
                                            <div class="position-relative">
                                                <input type="password" class="form-control rounded-pill" id="newpwd" placeholder="Enter New Password" name="password">
                                                <span class="position-absolute top-50 end-0 translate-middle-y me-3" style="cursor: pointer;" onclick="newtogglePassword()">
                                                    <i class="fa-solid fa-eye-slash" id="togglenewPwdIcon"></i>
                                                </span>
                                            </div>
                                            <p class="text-danger" id="error-password"></p>
                                        </div>
                                        <div class="col-md-12 mt-4">
                                            <label for="c-psw" class="form-label">Confirm Password<span class="text-danger">*</span></label>
                                            <div class="position-relative">
                                                <input type="password" class="form-control rounded-pill" id="cpwd" placeholder="Enter Confirm Password" name="password_confirmation"> 
                                                <span class="position-absolute top-50 end-0 translate-middle-y me-3" style="cursor: pointer;" onclick="contogglePassword()">
                                                        <i class="fa-solid fa-eye-slash" id="togglecPwdIcon"></i>
                                                </span>
                                            </div>
                                            <p class="text-danger" id="error-password_confirmation"></p>
                                        </div>

                                        <div class="col-md-12 mt-5">
                                            <button class="btn add-btn px-4 py-3 w-100 rounded-pill">Save</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function previewProfileImage(input) {
        if (input.files && input.files[0]) {
            const reader = new FileReader();
            reader.onload = e => document.getElementById('profilePreview').src = e.target.result;
            reader.readAsDataURL(input.files[0]);
        }
    }
</script>


<script>
    function oldtogglePassword() {
        const passwordInput = document.getElementById('oldpwd');
        const icon = document.getElementById('toggleoldPwdIcon');
        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        } else {
            passwordInput.type = 'password';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        }
    }
</script>

<script>
    function newtogglePassword() {
        const passwordInput = document.getElementById('newpwd');
        const icon = document.getElementById('togglenewPwdIcon');
        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        } else {
            passwordInput.type = 'password';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        }
    }
</script>
<script>
    function contogglePassword() {
        const passwordInput = document.getElementById('cpwd');
        const icon = document.getElementById('togglecPwdIcon');
        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
        } else {
            passwordInput.type = 'password';
            icon.classList.remove('fa-eye');
            icon.classList.add('fa-eye-slash');
        }
    }
</script>

<script>
     $(document).on('submit', 'form#passwordForm', function(event) {
                        
        event.preventDefault();
        $('p.error_container').html("");

        var form = $(this);
        var formid = $(this).attr('id');

        var data = new FormData($(this)[0]);
        var url = form.attr("action");
        var loadingText = '<i class="fa fa-circle-o-notch fa-spin"></i> loading...';
        $('.submit').attr('disabled', true);
        $('.form-control').attr('readonly', true);
        $('.form-control').addClass('disabled-link');
        $('.error-control').addClass('disabled-link');
        if ($('.submit').html() !== loadingText) {
            $('.submit').html(loadingText);
        }
        $.ajax({
            type: form.attr('method'),
            url: url,
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            success: function(response) {
                window.setTimeout(function() {
                    $('.submit').attr('disabled', false);
                    $('.form-control').attr('readonly', false);
                    $('.form-control').removeClass('disabled-link');
                    $('.error-control').removeClass('disabled-link');
                    $('.submit').html('Submit');
                }, 2000);
                //console.log(response);
                if (response.success == true) {

                    //notify
                    toastr.success("Created Successfully");

                    // redirect to google after 5 seconds
                    window.setTimeout(function() {
                        window.location = "{{ route('admin.myprofile') }}";
                    }, 2000);
                }
                //show the form validates error
               if (response.success == false) {
                    for (control in response.errors) {
                        var error_text = control.replace('.', "_");
                        $('#' + formid + ' #error-' + error_text).html(response.errors[control][0]);
                    }
                }
            },
            error: function(response) {
                // alert("Error: " + errorThrown);
                console.log(response);
            }
        });
        event.stopImmediatePropagation();
        return false;
    });
</script>


<script>
    $(document).on('submit', 'form#updateProfile', function(e) {
        e.preventDefault();

        var form = $(this);
        var formData = new FormData(this);

        $.ajax({
            url: form.attr('action'),
            method: form.attr('method'),
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
               
                if (response.success) {
                    toastr.success(response.message || "Updated Successfully");

                    window.setTimeout(function() {
                        window.location.href = "{{ route('admin.myprofile') }}";
                    }, 2000);
                } else if (response.errors) {

                    $.each(response.errors, function(key, error) {
                        var errorId = `#error-${key.replace('.', '_')}`;
                        $(errorId).html(error[0]);
                    });
                } else {
                    alert("No changes were made.");
                }
            },
            error: function(xhr) {
                alert("An error occurred. Please try again.");
                console.log(xhr.responseText);
            }
        });
    });
</script>

@endsection