<?php include 'header.php'; ?>

<style>
    .small-swal-popup {
        width: 320px !important;
        padding: 18px !important;
        border-radius: 14px !important;
    }

    .small-swal-title {
        font-size: 22px !important;
        margin-top: 10px !important;
    }

    .small-swal-text {
        font-size: 14px !important;
    }

    .small-swal-icon {
        transform: scale(0.7);
        margin: 10px auto !important;
    }

    .small-swal-button {
        padding: 8px 18px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }
</style>

<div class="dashboard-main-body">
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
        <h6 class="fw-semibold mb-0">View Profile</h6>
    </div>
    <div class="row gy-4">
        <div class="col-lg-4">
            <div class="user-grid-card position-relative border radius-16 overflow-hidden bg-base h-100">
                <div class="pb-24 ms-16 mb-24 me-16 mt-100">
                    <div class="text-center border border-top-0 border-start-0 border-end-0 pb-24 position-relative">

                        <!-- Profile Image -->
                        <div class="position-relative d-inline-block">

                            <img src="assets/images/sys.png" alt="Profile" id="profilePreview"
                                class="w-120-px h-120-px rounded-circle object-fit-cover border border-3 border-white shadow-sm mt-5">

                            <!-- Upload Button -->
                            <label for="profileInput"
                                class="position-absolute bottom-0 end-0 bg-primary-600 text-white rounded-circle d-flex align-items-center justify-content-center cursor-pointer"
                                style="width: 34px; height: 34px;">

                                <i class="bi bi-camera-fill"></i>
                            </label>

                            <!-- Hidden Input -->
                            <input type="file" id="profileInput" name="profile_photo" accept="image/*" hidden>
                        </div>

                        <h6 class="mb-0 mt-16">System Admin</h6>

                        <span class="text-secondary-light mb-16">
                            9876543210
                        </span>

                    </div>
                    <div class="mt-24">
                        <h6 class="text-xl mb-16">Personal Info</h6>
                        <ul>
                            <li class="d-flex align-items-center gap-1 mb-12">
                                <span class="w-30 text-md fw-semibold text-primary-light">Full Name</span>
                                <span class="w-70 text-secondary-light fw-medium">: System Admin </span>
                            </li>
                            <li class="d-flex align-items-center gap-1 mb-12">
                                <span class="w-30 text-md fw-semibold text-primary-light"> Phone No.</span>
                                <span class="w-70 text-secondary-light fw-medium">: 9876543210 </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="card h-100">
                <div class="card-body p-24">
                    <ul class="nav border-gradient-tab nav-pills mb-20 d-inline-flex" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link d-flex align-items-center px-24 active" id="pills-edit-profile-tab"
                                data-bs-toggle="pill" data-bs-target="#pills-edit-profile" type="button" role="tab"
                                aria-controls="pills-edit-profile" aria-selected="true">Edit Profile</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link d-flex align-items-center px-24" id="pills-change-passwork-tab"
                                data-bs-toggle="pill" data-bs-target="#pills-change-passwork" type="button" role="tab"
                                aria-controls="pills-change-passwork" aria-selected="false" tabindex="-1">Change
                                Password</button>
                        </li>
                    </ul>

                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="pills-edit-profile" role="tabpanel"
                            aria-labelledby="pills-edit-profile-tab" tabindex="0">
                            <form id="userform" action="" method="post" enctype="multipart/form-data">

                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="mb-20">
                                            <label for="name"
                                                class="form-label fw-semibold text-primary-light text-sm mb-8"> Full
                                                Name <span class="text-danger-600">*</span></label>
                                            <input type="text" class="form-control radius-8" id="name" name="name"
                                                value="" placeholder="Enter Full Name">
                                        </div>
                                    </div>

                                    <div class="col-sm-12">
                                        <div class="mb-20">

                                            <label for="number"
                                                class="form-label fw-semibold text-primary-light text-sm mb-8">

                                                Phone

                                            </label>

                                            <input type="tel" class="form-control radius-8" id="mobile" name="mobile"
                                                value="" placeholder="Enter Mobile No" pattern="\d{10}" maxlength="10"
                                                inputmode="numeric"
                                                oninput="validateMobile(this.value); this.value = this.value.replace(/[^0-9]/g, '')">

                                            <small id="mobileFeedback" class="text-danger"></small>

                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <div class="mb-20">

                                            <label for="email"
                                                class="form-label fw-semibold text-primary-light text-sm mb-8">
                                                Email
                                            </label>

                                            <input type="email" class="form-control radius-8" id="email" name="email"
                                                value="" placeholder="Enter Email Address">

                                            <small id="emailFeedback" class="text-danger"></small>

                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex align-items-center justify-content-end gap-3 mt-3">
                                    <div class="form-group d-flex justify-content-end gap-8">
                                        <button type="submit" class="form-wizard-submit btn-primary-600">Save</button>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="tab-pane fade" id="pills-change-passwork" role="tabpanel"
                            aria-labelledby="pills-change-passwork-tab" tabindex="0">
                            <form id="passwordForm" method="post" action="{% url 'change_password' %}">

                                <div class="mb-20">
                                    <label for="your-password"
                                        class="form-label fw-semibold text-primary-light text-sm mb-8">
                                        New Password <span class="text-danger-600">*</span>
                                    </label>
                                    <div class="position-relative">
                                        <input type="password" class="form-control radius-8" id="your-password"
                                            name="new_password" placeholder="Enter New Password">
                                        <i class="fas fa-eye position-absolute top-50 end-16 translate-middle-y cursor-pointer"
                                            id="togglePassword1"></i>
                                    </div>
                                </div>
                                <div class="mb-20">
                                    <label for="confirm-password"
                                        class="form-label fw-semibold text-primary-light text-sm mb-8">
                                        Confirm Password <span class="text-danger-600">*</span>
                                    </label>
                                    <div class="position-relative">
                                        <input type="password" class="form-control radius-8" id="confirm-password"
                                            name="confirm_password" placeholder="Confirm Password">
                                        <i class="fas fa-eye position-absolute top-50 end-16 translate-middle-y cursor-pointer"
                                            id="togglePassword2"></i>
                                    </div>
                                </div>
                                <div class="text-end">
                                    <button type="submit" class="btn btn-success px-56 py-12 radius-8">Change
                                        Password</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Mobile validation
        function validateMobile(value) {
            const mobileFeedback = document.getElementById('mobileFeedback');
            if (!/^\d{0,10}$/.test(value)) {
                mobileFeedback.textContent = "Only digits allowed (max 10)";
            } else {
                mobileFeedback.textContent = "";
            }
        }
        window.validateMobile = validateMobile;

        // Password toggle
        function togglePassword(inputId, iconId) {
            const input = document.getElementById(inputId);
            const icon = document.getElementById(iconId);
            if (!input || !icon) return;
            icon.addEventListener('click', () => {
                if (input.type === "password") {
                    input.type = "text";
                    icon.classList.remove('fa-eye');
                    icon.classList.add('fa-eye-slash');
                } else {
                    input.type = "password";
                    icon.classList.remove('fa-eye-slash');
                    icon.classList.add('fa-eye');
                }
            });
        }

        togglePassword('your-password', 'togglePassword1');
        togglePassword('confirm-password', 'togglePassword2');

        // Form submission validation with SweetAlert2
        const passwordForm = document.getElementById('passwordForm');
        if (passwordForm) {
            passwordForm.addEventListener('submit', function (e) {
                const password = document.getElementById('your-password').value;
                const confirmPassword = document.getElementById('confirm-password').value;

                if (password !== confirmPassword) {
                    e.preventDefault();
                    Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: 'Passwords do not match',
                        customClass: {
                            popup: 'small-swal-popup',
                            title: 'small-swal-title',
                            htmlContainer: 'small-swal-text',
                            icon: 'small-swal-icon',
                            confirmButton: 'small-swal-button'
                        }
                    });
                } else if (password.length < 6) {
                    e.preventDefault();
                    Swal.fire({
                        icon: 'warning',
                        title: 'Warning',
                        text: 'Password must be at least 6 characters',
                        customClass: {
                            popup: 'small-swal-popup',
                            title: 'small-swal-title',
                            htmlContainer: 'small-swal-text',
                            icon: 'small-swal-icon',
                            confirmButton: 'small-swal-button'
                        }
                    });
                }
            });
        }
    });

    // =========================
    // Edit Profile Form Validation
    // =========================

    const userForm = document.getElementById('userform');

    if (userForm) {

        userForm.addEventListener('submit', function (e) {

            e.preventDefault();

            const name = document.getElementById('name');
            const mobile = document.getElementById('mobile');
            const email = document.getElementById('email');

            const emailFeedback = document.getElementById('emailFeedback');
            const mobileFeedback = document.getElementById('mobileFeedback');

            let isValid = true;

            // Reset
            emailFeedback.textContent = '';
            mobileFeedback.textContent = '';

            // Name Validation
            if (name.value.trim() === '') {

                isValid = false;

                Swal.fire({
                    icon: 'error',
                    title: 'Validation Error',
                    text: 'Full Name is required',
                    width: '350px',
                    customClass: {
                        popup: 'small-swal-popup',
                        title: 'small-swal-title',
                        htmlContainer: 'small-swal-text',
                        icon: 'small-swal-icon',
                        confirmButton: 'small-swal-button'
                    }
                });

                return;
            }

            // Mobile Validation
            if (!/^\d{10}$/.test(mobile.value)) {

                mobileFeedback.textContent = 'Enter valid 10 digit mobile number';

                isValid = false;
            }

            // Email Validation
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

            if (!emailPattern.test(email.value.trim())) {

                emailFeedback.textContent = 'Enter valid email address';

                isValid = false;
            }

            // Submit
            if (isValid) {

                Swal.fire({
                    icon: 'success',
                    title: 'Success',
                    text: 'Profile updated successfully',
                    width: '350px',
                    timer: 2000,
                    showConfirmButton: false,
                    customClass: {
                        popup: 'small-swal-popup',
                        title: 'small-swal-title',
                        htmlContainer: 'small-swal-text',
                        icon: 'small-swal-icon',
                        confirmButton: 'small-swal-button'
                    }
                }).then(() => {

                    userForm.submit();

                });

            } else {

                Swal.fire({
                    icon: 'error',
                    title: 'Validation Error',
                    text: 'Please fill all fields correctly',
                    width: '350px',
                    customClass: {
                        popup: 'small-swal-popup',
                        title: 'small-swal-title',
                        htmlContainer: 'small-swal-text',
                        icon: 'small-swal-icon',
                        confirmButton: 'small-swal-button'
                    }
                });

            }

        });

    }
</script>

<script>
    document.addEventListener('DOMContentLoaded', function () {

        const profileInput = document.getElementById('profileInput');

        const profilePreview = document.getElementById('profilePreview');

        profileInput.addEventListener('change', function (e) {

            const file = e.target.files[0];

            if (!file) return;

            if (!file.type.startsWith('image/')) {

                Swal.fire({
                    icon: 'error',
                    title: 'Invalid File',
                    text: 'Please select image only',
                    width: '350px'
                });

                profileInput.value = '';

                return;
            }

            const reader = new FileReader();

            reader.onload = function (event) {

                profilePreview.src = event.target.result;
            };

            reader.readAsDataURL(file);

        });

    });
</script>


<?php include 'footer.php'; ?>