
<?php echo message_box('success'); ?>
<?php echo message_box('error'); ?>
<?php
$user_id = $this->session->userdata('user_id');
$profile_info = $this->db->where('user_id', $user_id)->get('tbl_account_details')->row();
$user_info = $this->db->where('user_id', $user_id)->get('tbl_users')->row();
$languages = $this->db->where('active', 1)->order_by('name', 'ASC')->get('tbl_languages')->result();
$locales = $this->db->order_by('name')->get('tbl_locales')->result();
$avatar_url = !empty($profile_info->avatar) ? base_url($profile_info->avatar) : base_url('uploads/default_avatar.jpg');
?>

<div class="space-y-6">
    <div class="rounded-2xl border border-border bg-card shadow-sm">
        <div class="border-b border-border px-5 py-4">
            <p class="text-xs font-semibold uppercase tracking-wide text-muted-foreground"><?= lang('settings') ?></p>
            <h2 class="text-xl font-semibold text-foreground"><?= lang('update_profile') ?></h2>
            <p class="text-sm text-muted-foreground"><?= lang('change_username') ?>, <?= lang('change_email') ?>, <?= lang('change_password') ?></p>
        </div>
        <div class="p-5 md:p-6">
            <div class="grid gap-6 xl:grid-cols-2">
                <div class="space-y-6">
                    <div class="rounded-xl border border-border bg-background/60 p-5">
                        <div class="mb-4">
                            <h3 class="text-base font-semibold text-foreground"><?= lang('update_profile') ?></h3>
                            <p class="text-sm text-muted-foreground"><?= lang('manage') . ' ' . lang('full_name') ?></p>
                        </div>

                        <form role="form" id="update_profile" enctype="multipart/form-data" action="<?= base_url('admin/settings/profile_updated') ?>" method="post" class="space-y-5">
                            <input type="hidden" id="user_id" class="form-control" value="<?= my_id() ?>">

                            <div class="grid gap-4 md:grid-cols-2">
                                <div class="md:col-span-2 space-y-1">
                                    <label class="text-sm font-semibold text-foreground"><?= lang('full_name') ?> <span class="text-rose-500">*</span></label>
                                    <input type="text" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none" name="fullname" value="<?= html_escape($profile_info->fullname) ?>" required>
                                </div>

                                <?php if ($profile_info->company > 0):
                                    $client_info = $this->db->where('client_id', $profile_info->company)->get('tbl_client')->row();
                                    $email = !empty($client_info->email) ? $client_info->email : '';
                                    $company_address = !empty($client_info->address) ? $client_info->address : '';
                                    $company_name = !empty($client_info->name) ? $client_info->name : '';
                                    ?>
                                    <div class="md:col-span-2 space-y-1">
                                        <label class="text-sm font-semibold text-foreground"><?= lang('company') ?> <span class="text-rose-500">*</span></label>
                                        <input type="text" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none" name="name" value="<?= html_escape($company_name) ?>" required>
                                        <input type="hidden" class="form-control" name="client_id" value="<?= !empty($client_info->client_id) ? $client_info->client_id : '' ?>" required>
                                    </div>
                                    <div class="space-y-1">
                                        <label class="text-sm font-semibold text-foreground"><?= lang('company_email') ?> <span class="text-rose-500">*</span></label>
                                        <input type="email" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none" name="email" value="<?= html_escape($email) ?>" required>
                                    </div>
                                    <div class="space-y-1">
                                        <label class="text-sm font-semibold text-foreground"><?= lang('company_address') ?> <span class="text-rose-500">*</span></label>
                                        <input type="text" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none" name="address" value="<?= html_escape($company_address) ?>" required>
                                    </div>
                                <?php endif; ?>

                                <div class="space-y-1">
                                    <label class="text-sm font-semibold text-foreground"><?= lang('phone') ?></label>
                                    <input type="text" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none" name="phone" value="<?= html_escape($profile_info->phone) ?>">
                                </div>

                                <div class="space-y-1">
                                    <label class="text-sm font-semibold text-foreground"><?= lang('language') ?></label>
                                    <select name="language" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none">
                                        <?php foreach ($languages as $lang): ?>
                                            <option value="<?= html_escape($lang->name) ?>"<?= ($profile_info->language == $lang->name ? ' selected="selected"' : '') ?>><?= ucfirst($lang->name) ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>

                                <div class="md:col-span-2 space-y-1">
                                    <label class="text-sm font-semibold text-foreground"><?= lang('locale') ?></label>
                                    <select class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none" name="locale">
                                        <?php foreach ($locales as $loc): ?>
                                            <option value="<?= html_escape($loc->locale) ?>"<?= ($profile_info->locale == $loc->locale ? ' selected="selected"' : '') ?>><?= $loc->name ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>

                            <div class="rounded-xl border border-dashed border-border bg-background/60 p-4">
                                <p class="mb-3 text-sm font-semibold text-foreground"><?= lang('profile_photo') ?></p>
                                <div class="flex flex-col gap-4 sm:flex-row sm:items-center">
                                    <img id="profile_avatar_preview" src="<?= $avatar_url ?>" alt="<?= lang('profile_photo') ?>" class="h-24 w-24 rounded-xl object-cover ring-1 ring-border">
                                    <div class="flex-1 space-y-2">
                                        <input type="file" name="avatar" value="upload" id="myImg" accept="image/*" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground file:mr-3 file:rounded-md file:border-0 file:bg-primary/10 file:px-3 file:py-1 file:text-primary focus:border-primary focus:outline-none">
                                        <p class="text-xs text-muted-foreground"><?= lang('choose_file') ?>: JPG, PNG, WEBP</p>
                                        <div id="valid_msg" class="text-xs text-rose-500"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="pt-1">
                                <button type="submit" class="inline-flex items-center rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground hover:bg-primary/90">
                                    <?= lang('update_profile') ?>
                                </button>
                            </div>
                        </form>
                    </div>

                    <div class="rounded-xl border border-border bg-background/60 p-5">
                        <div class="mb-4">
                            <h3 class="text-base font-semibold text-foreground"><?= lang('change_email') ?></h3>
                            <p class="text-sm text-muted-foreground"><?= lang('password_current_password') ?></p>
                        </div>
                        <form data-parsley-validate="" novalidate="" role="form" action="<?= base_url('admin/settings/change_email') ?>" method="post" class="space-y-4">
                            <div class="space-y-1">
                                <label class="text-sm font-semibold text-foreground"><?= lang('password') ?> <span class="text-rose-500">*</span></label>
                                <input type="password" id="change_email_password" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none" name="password" placeholder="<?= lang('password_current_password') ?>" required>
                                <span class="required text-xs text-rose-500" id="email_password"></span>
                            </div>
                            <div class="space-y-1">
                                <label class="text-sm font-semibold text-foreground"><?= lang('new_email') ?> <span class="text-rose-500">*</span></label>
                                <input type="email" id="check_email_addrees" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none" name="email" placeholder="<?= lang('new_email') ?>" required>
                                <span id="email_addrees_error" class="required text-xs text-rose-500"></span>
                            </div>
                            <div>
                                <button type="submit" id="new_uses_btn" class="inline-flex items-center rounded-lg border border-border bg-card px-4 py-2 text-sm font-semibold text-foreground hover:bg-muted">
                                    <?= lang('change_email') ?>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="space-y-6">
                    <div class="rounded-xl border border-border bg-background/60 p-5">
                        <div class="mb-4">
                            <h3 class="text-base font-semibold text-foreground"><?= lang('change_password') ?></h3>
                            <p class="text-sm text-muted-foreground">Update your password credentials</p>
                        </div>
                        <form role="form" data-parsley-validate="" novalidate="" action="<?= base_url('admin/settings/set_password') ?>" method="post" class="space-y-4">
                            <div class="space-y-1">
                                <label class="text-sm font-semibold text-foreground"><?= lang('old_password') ?> <span class="text-rose-500">*</span></label>
                                <input type="password" id="old_password" name="old_password" value="" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none" placeholder="<?= lang('enter_your') . ' ' . lang('old_password') ?>">
                                <span class="required text-xs text-rose-500" id="old_password_error"></span>
                            </div>
                            <div class="space-y-1">
                                <label class="text-sm font-semibold text-foreground"><?= lang('new_password') ?> <span class="text-rose-500">*</span></label>
                                <input type="password" name="new_password" id="new_password" value="" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none" placeholder="<?= lang('enter_your') . ' ' . lang('new_password') ?>">
                            </div>
                            <div class="space-y-1">
                                <label class="text-sm font-semibold text-foreground"><?= lang('confirm_password') ?> <span class="text-rose-500">*</span></label>
                                <input type="password" id="confirm_password" data-parsley-equalto="#new_password" name="confirm_password" value="" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none" placeholder="<?= lang('enter_your') . ' ' . lang('confirm_password') ?>">
                            </div>
                            <div>
                                <button id="old_password_button" type="submit" class="inline-flex items-center rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground hover:bg-primary/90">
                                    <?= lang('change_password') ?>
                                </button>
                            </div>
                        </form>
                    </div>

                    <div class="rounded-xl border border-border bg-background/60 p-5">
                        <div class="mb-4">
                            <h3 class="text-base font-semibold text-foreground"><?= lang('change_username') ?></h3>
                            <p class="text-sm text-muted-foreground">Update your login username securely</p>
                        </div>
                        <form role="form" data-parsley-validate="" novalidate="" action="<?= base_url('admin/settings/change_username') ?>" method="post" class="space-y-4">
                            <div class="space-y-1">
                                <label class="text-sm font-semibold text-foreground"><?= lang('password') ?> <span class="text-rose-500">*</span></label>
                                <input type="password" id="change_username" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none" name="password" placeholder="<?= lang('password_current_password') ?>" required>
                                <span class="required text-xs text-rose-500" id="username_error"></span>
                            </div>
                            <div class="space-y-1">
                                <label class="text-sm font-semibold text-foreground"><?= lang('new_username') ?> <span class="text-rose-500">*</span></label>
                                <input type="text" id="check_username" class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:border-primary focus:outline-none" name="username" placeholder="<?= lang('new_username') ?>" required>
                                <span class="required text-xs text-rose-500" id="check_username_error"></span>
                            </div>
                            <div>
                                <button type="submit" id="change_username_btn" class="inline-flex items-center rounded-lg border border-border bg-card px-4 py-2 text-sm font-semibold text-foreground hover:bg-muted">
                                    <?= lang('change_username') ?>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    (function () {
        const fileInput = document.getElementById("myImg");
        const preview = document.getElementById("profile_avatar_preview");

        if (!fileInput || !preview) {
            return;
        }

        fileInput.addEventListener("change", function (event) {
            const file = event.target.files && event.target.files[0];
            if (!file) {
                return;
            }

            const reader = new FileReader();
            reader.onload = function (e) {
                if (e.target && e.target.result) {
                    preview.src = e.target.result;
                }
            };
            reader.readAsDataURL(file);
        });
    })();
</script>
