<% title = trans.cruds.MODULE.PROFILE + ' - ' + companyInfo.NAME %>
<div class="container-fluid">
    <div class="page-title">
        <div class="row">
            <div class="col-sm-6 col-12">
                <h2><%= trans.cruds.MODULE.PROFILE %></h2>
            </div>
            <div class="col-sm-6 col-12">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="<%= '/admin/dashboard' %>"><i class="iconly-Home icli svg-color"></i><%= trans.global.home %></a></li>
                    <li class="breadcrumb-item"><a href="<%= '/admin/profile' %>"><%= trans.cruds.MODULE.PROFILE %></a></li>
                    <% if(userInfo.permissions.includes('edit_profile')){ %>
                        <li class="breadcrumb-item active"><%= trans.global.edit %></li>
                    <% } else { %>
                        <li class="breadcrumb-item active"><%= trans.global.view %></li>
                    <% } %>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="edit-profile">
        <div class="row">
            <!-- Roles and Permissions Section -->
            <div class="col-sm-6 col-md-5 col-lg-4 me-auto ms-auto col-xl-3">
                <div class="card social-profile">
                    <div class="card-body">
                        <form class="" id="profileFileUpdate" action="<%= '/admin/profile/file' %>" method="POST" enctype="multipart/form-data">
                            <div class="social-img-wrap" style="position: relative;">
                                <div class="social-img img-cricel-wrap">
                                <img id="profileImage" src="<%= 
                                    userData.profile && userData.profile.file_path 
                                    ? '/' + userData.profile.file_path 
                                    : userData.user_profile && userData.user_profile.file_path 
                                        ? '/' + userData.user_profile.file_path 
                                        : '/backend/images/dummy-image.jpg' 
                                %>" alt="profile">
                                </div>
                                <% if (userInfo.permissions.includes('edit_profile')) { %>
                                    <!-- Hidden file input -->
                                    <input type="file" id="imageInput" accept="image/jpeg, image/jpg, image/png, image/gif" name="profile" style="display: none;" onchange="previewImage(this, 'profileImage')">

                                    <!-- Edit Icon -->
                                    <div class="edit-icon stroke-icon" id="editIcon" style="position: absolute; bottom: 20px; right: 20px; cursor: pointer;">
                                        <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M7.26002 22H17.74C20.5 22 21.6 20.31 21.73 18.25L22.25 9.99C22.39 7.83 20.67 6 18.5 6C17.89 6 17.33 5.65 17.05 5.11L16.33 3.66C15.87 2.75 14.67 2 13.65 2H11.36C10.33 2 9.13001 2.75 8.67001 3.66L7.95001 5.11C7.67001 5.65 7.11002 6 6.50002 6C4.33001 6 2.61001 7.83 2.75001 9.99L3.27001 18.25C3.39001 20.31 4.50002 22 7.26002 22Z" stroke="#171717" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path opacity="0.4" d="M11 8H14" stroke="#171717" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                            <path opacity="0.4" d="M12.5 18C14.29 18 15.75 16.54 15.75 14.75C15.75 12.96 14.29 11.5 12.5 11.5C10.71 11.5 9.25 12.96 9.25 14.75C9.25 16.54 10.71 18 12.5 18Z" stroke="#171717" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>                                
                                    </div>
                                <% } %>
                            </div>
                            <div class="social-details">
                                <h5 class="mb-1">
                                    <b><%= userInfo.name || trans.global.not_available %></b>
                                </h5>
                                <span class="f-light"><%= userData.username || '' %></span>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <% const canEdit = userInfo.permissions.includes('edit_profile'); %>
            <div class="col-md-12 col-lg-8 col-xl-9">
                <form class="card" id="profileUpdate" action="<%= '/admin/profile' %>" method="POST">
                    <div class="card-header card-no-border d-flex justify-content-between align-items-center">
                        <% if(userInfo.permissions.includes('edit_profile')){ %>
                            <h3 class="card-title mb-0"><%= trans.global.edit + ' ' + trans.cruds.MODULE.PROFILE %></h3>
                            <% if (userInfo.permissions.includes('delete_profile')) { %>
                                <div class="btn-showcase d-flex justify-content-end">
                                    <a href="javascript:;" title="<%= trans.cruds.PROFILE.heading?.delete_profile || 'delete_profile' %>" class="btn btn-pill btn-danger" id="btnDeleteProfile">
                                        <%= trans.cruds.PROFILE.heading?.delete_profile || 'delete_profile' %>
                                    </a>
                                </div>
                            <% } %>
                        <% } else if (userInfo.permissions.includes('delete_profile')) { %>
                            <h3 class="card-title mb-0"><%= trans.global.view + ' ' + trans.cruds.MODULE.PROFILE %></h3>
                            <div class="btn-showcase d-flex justify-content-end">
                                <a href="javascript:;" title="<%= trans.cruds.PROFILE.heading?.delete_profile || 'delete_profile' %>" class="btn btn-pill btn-danger" id="btnDeleteProfile">
                                    <%= trans.cruds.PROFILE.heading?.delete_profile || 'delete_profile' %>
                                </a>
                            </div>
                        <% } else { %>
                            <h3 class="card-title mb-0"><%= trans.global.view + ' ' + trans.cruds.MODULE.PROFILE %></h3>
                        <% } %>
                    </div>

                    <div class="card-body">
                        <div class="row">
                            <!-- First Name -->
                            <% if (canEdit || userData?.first_name) { %>
                                <div class="col-sm-6 col-md-6 col-lg-6 col-xl-4">
                                    <% if (canEdit) { %>
                                        <div class="form-group mb-3">
                                            <label class="form-label" for="first_name"><%= trans.cruds.PROFILE.fields.first_name %> <span class="text-danger">*</span></label>
                                            <input class="form-control" type="text" id="first_name" name="first_name"
                                                value="<%= userData.first_name || '' %>"
                                                placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.PROFILE.fields.first_name %>">
                                        </div>
                                    <% } else { %>
                                        <div class="form-group mb-3">
                                            <label class="form-label text-muted"><%= trans.cruds.PROFILE.fields.first_name %></label>
                                            <p class="form-control-plaintext"><%= userData.first_name || '' %></p>
                                        </div>
                                    <% } %>
                                </div>
                            <% } %>

                            <!-- Middle Name -->
                            <% if (canEdit || userData?.middle_name) { %>
                                <div class="col-sm-6 col-md-6 col-lg-6 col-xl-4">
                                    <% if (canEdit) { %>
                                        <div class="form-group mb-3">
                                            <label class="form-label" for="middle_name"><%= trans.cruds.PROFILE.fields.middle_name %></label>
                                            <input class="form-control" type="text" id="middle_name" name="middle_name"
                                                value="<%= userData.middle_name || '' %>"
                                                placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.PROFILE.fields.middle_name %>">
                                        </div>
                                    <% } else { %>
                                        <div class="form-group mb-3">
                                            <label class="form-label text-muted"><%= trans.cruds.PROFILE.fields.middle_name %></label>
                                            <p class="form-control-plaintext"><%= userData.middle_name || '' %></p>
                                        </div>
                                    <% } %>
                                </div>
                            <% } %>

                            <!-- Last Name -->
                            <% if (canEdit || userData?.last_name) { %>
                                <div class="col-sm-6 col-md-6 col-lg-6 col-xl-4">
                                    <% if (canEdit) { %>
                                        <div class="form-group mb-3">
                                            <label class="form-label" for="last_name"><%= trans.cruds.PROFILE.fields.last_name %> <span class="text-danger">*</span></label>
                                            <input class="form-control" type="text" id="last_name" name="last_name"
                                                value="<%= userData.last_name || '' %>"
                                                placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.PROFILE.fields.last_name %>">
                                        </div>
                                    <% } else { %>
                                        <div class="form-group mb-3">
                                            <label class="form-label text-muted"><%= trans.cruds.PROFILE.fields.last_name %></label>
                                            <p class="form-control-plaintext"><%= userData.last_name || '' %></p>
                                        </div>
                                    <% } %>
                                </div>
                            <% } %>

                            <!-- Username -->
                            <% if (canEdit || userData?.username) { %>
                                <div class="col-sm-6 col-md-6 col-lg-6 col-xl-4">
                                    <% if (canEdit) { %>
                                        <div class="form-group mb-3">
                                            <label class="form-label" for="username"><%= trans.cruds.PROFILE.fields.username %> <span class="text-danger">*</span></label>
                                            <input class="form-control" type="text" id="username" name="username"
                                                value="<%= userData.username || '' %>"
                                                placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.PROFILE.fields.username %>">
                                        </div>
                                    <% } else { %>
                                        <div class="form-group mb-3">
                                            <label class="form-label text-muted"><%= trans.cruds.PROFILE.fields.username %></label>
                                            <p class="form-control-plaintext"><%= userData.username || '' %></p>
                                        </div>
                                    <% } %>
                                </div>
                            <% } %>

                            <!-- Email -->
                            <% if (canEdit || userData?.email) { %>
                                <div class="col-sm-6 col-md-6 col-lg-6 col-xl-4">
                                    <% if (canEdit) { %>
                                        <div class="form-group mb-3">
                                            <label class="form-label" for="email"><%= trans.cruds.PROFILE.fields.email %> <span class="text-danger">*</span></label>
                                            <input class="form-control" type="email" id="email" name="email"
                                                value="<%= userData.email || '' %>"
                                                placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.PROFILE.fields.email %>">
                                        </div>
                                    <% } else { %>
                                        <div class="form-group mb-3">
                                            <label class="form-label text-muted"><%= trans.cruds.PROFILE.fields.email %></label>
                                            <p class="form-control-plaintext"><%= userData.email || '' %></p>
                                        </div>
                                    <% } %>
                                </div>
                            <% } %>

                            <!-- Phone Number -->
                            <% if (canEdit || userData?.phone_number) { %>
                                <div class="col-sm-6 col-md-6 col-lg-6 col-xl-4">
                                    <input type="hidden" id="country_code" name="country_code" />
                                    <% if (canEdit) { %>
                                        <div class="form-group country-code mb-3">
                                            <label class="form-label" for="phone_number"><%= trans.cruds.PROFILE.fields.phone_number %></label>
                                            <input class="form-control phone-number-text" type="tel" id="phone_number" name="phone_number"
                                                value="<%= userData.phone_number ? userData.phone_number.replace(/\s/g, '') : '' %>"
                                                placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.PROFILE.fields.phone_number %>">
                                        </div>
                                    <% } else { %>
                                        <div class="form-group country-code mb-3">
                                            <label class="form-label text-muted"><%= trans.cruds.PROFILE.fields.phone_number %></label>
                                            <p class="form-control-plaintext"><%= userData.phone_number || '' %></p>
                                        </div>
                                    <% } %>
                                </div>
                            <% } %>

                            <!-- Password Fields (Only if can edit) -->
                            <% if (canEdit) { %>
                                <!-- Current Password -->
                                <div class="col-sm-6 col-md-6 col-lg-6 col-xl-4">
                                    <div class="form-group mb-3">
                                        <label class="form-label"><%= trans.cruds.PROFILE.fields.current_password %></label>
                                        <div class="input-group">
                                            <input class="form-control password-field" type="password" name="current_password" id="current_password"
                                                placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.PROFILE.fields.current_password %>">
                                            <button class="btn btn-outline-secondary toggle-password" type="button">
                                                <i class="fa-solid fa-eye"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <!-- New Password -->
                                <div class="col-sm-6 col-md-6 col-lg-6 col-xl-4">
                                    <div class="form-group mb-3">
                                        <label class="form-label"><%= trans.cruds.PROFILE.fields.new_password %></label>
                                        <div class="input-group">
                                            <input class="form-control password-field" type="password" name="password" id="new_password"
                                                placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.PROFILE.fields.new_password %>">
                                            <button class="btn btn-outline-secondary toggle-password" type="button">
                                                <i class="fa-solid fa-eye"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <!-- Confirm Password -->
                                <div class="col-sm-6 col-md-6 col-lg-6 col-xl-4">
                                    <div class="form-group mb-3">
                                        <label class="form-label"><%= trans.cruds.PROFILE.fields.confirm_password %></label>
                                        <div class="input-group">
                                            <input class="form-control password-field" type="password" name="password_confirmation" id="confirm_password"
                                                placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.PROFILE.fields.confirm_password %>">
                                            <button class="btn btn-outline-secondary toggle-password" type="button">
                                                <i class="fa-solid fa-eye"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            <% } %>
                        </div>

                        <% if (canEdit) { %>
                            <hr>
                        <% } %>
                        <div class="row">
                            <!-- Building Name -->
                            <% if (canEdit || userData?.address?.building_name) { %>
                                <div class="col-sm-6 col-md-6 col-lg-4">
                                    <% if (canEdit) { %>
                                        <div class="form-group mb-3">
                                            <label class="form-label" for="building_name"><%= trans.cruds.ADDRESS.fields.building_name %></label>
                                            <input class="form-control" type="text" id="building_name" name="building_name"
                                                value="<%= userData?.address?.building_name || '' %>"
                                                placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.ADDRESS.fields.building_name %>">
                                        </div>
                                    <% } else { %>
                                        <div class="form-group mb-3">
                                            <label class="form-label text-muted"><%= trans.cruds.ADDRESS.fields.building_name %></label>
                                            <p class="form-control-plaintext"><%= userData?.address?.building_name || '' %></p>
                                        </div>
                                    <% } %>
                                </div>
                            <% } %>

                            <!-- Street -->
                            <% if (canEdit || userData?.address?.street) { %>
                                <div class="col-sm-6 col-md-6 col-lg-4">
                                    <% if (canEdit) { %>
                                        <div class="form-group mb-3">
                                            <label class="form-label" for="street"><%= trans.cruds.ADDRESS.fields.street %></label>
                                            <input class="form-control" type="text" id="street" name="street"
                                                value="<%= userData?.address?.street || '' %>"
                                                placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.ADDRESS.fields.street %>">
                                        </div>
                                    <% } else { %>
                                        <div class="form-group mb-3">
                                            <label class="form-label text-muted"><%= trans.cruds.ADDRESS.fields.street %></label>
                                            <p class="form-control-plaintext"><%= userData?.address?.street || '' %></p>
                                        </div>
                                    <% } %>
                                </div>
                            <% } %>

                            <!-- Area -->
                            <% if (canEdit || userData?.address?.area) { %>
                                <div class="col-sm-6 col-md-6 col-lg-4">
                                    <% if (canEdit) { %>
                                        <div class="form-group mb-3">
                                            <label class="form-label" for="area"><%= trans.cruds.ADDRESS.fields.area %></label>
                                            <input class="form-control" type="text" id="area" name="area"
                                                value="<%= userData?.address?.area || '' %>"
                                                placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.ADDRESS.fields.area %>">
                                        </div>
                                    <% } else { %>
                                        <div class="form-group mb-3">
                                            <label class="form-label text-muted"><%= trans.cruds.ADDRESS.fields.area %></label>
                                            <p class="form-control-plaintext"><%= userData?.address?.area || '' %></p>
                                        </div>
                                    <% } %>
                                </div>
                            <% } %>

                            <!-- Address Line 1 -->
                            <% if (canEdit || userData?.address?.address_line_1) { %>
                                <div class="col-sm-6 col-md-6 col-lg-4">
                                    <% if (canEdit) { %>
                                        <div class="form-group mb-3">
                                            <label class="form-label" for="address_line_1"><%= trans.cruds.ADDRESS.fields.address_line_1 %></label>
                                            <input class="form-control" type="text" id="address_line_1" name="address_line_1"
                                                value="<%= userData?.address?.address_line_1 || '' %>"
                                                placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.ADDRESS.fields.address_line_1 %>">
                                        </div>
                                    <% } else { %>
                                        <div class="form-group mb-3">
                                            <label class="form-label text-muted"><%= trans.cruds.ADDRESS.fields.address_line_1 %></label>
                                            <p class="form-control-plaintext"><%= userData?.address?.address_line_1 || '' %></p>
                                        </div>
                                    <% } %>
                                </div>
                            <% } %>

                            <!-- Address Line 1 -->
                            <% if (canEdit || userData?.address?.address_line_2) { %>
                                <div class="col-sm-6 col-md-6 col-lg-4">
                                    <% if (canEdit) { %>
                                        <div class="form-group mb-3">
                                            <label class="form-label" for="address_line_2"><%= trans.cruds.ADDRESS.fields.address_line_2 %></label>
                                            <input class="form-control" type="text" id="address_line_2" name="address_line_2"
                                                value="<%= userData?.address?.address_line_2 || '' %>"
                                                placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.ADDRESS.fields.address_line_2 %>">
                                        </div>
                                    <% } else { %>
                                        <div class="form-group mb-3">
                                            <label class="form-label text-muted"><%= trans.cruds.ADDRESS.fields.address_line_2 %></label>
                                            <p class="form-control-plaintext"><%= userData?.address?.address_line_2 || '' %></p>
                                        </div>
                                    <% } %>
                                </div>
                            <% } %>

                            <!-- City (Required) -->
                            <% if (canEdit || userData?.address?.city) { %>
                                <div class="col-sm-6 col-md-6 col-lg-4">
                                    <% if (canEdit) { %>
                                        <input type="hidden" name="city_id" id="city_id" value="<%= userData?.address?.city || '' %>">
                                        <div class="form-group mb-3">
                                            <label class="form-label" for="cityData"><%= trans.cruds.ADDRESS.fields.city %> <span class="text-danger">*</span></label>
                                            <select id="cityData" class="form-control select2" name="city" data-selected-city="<%= userData?.address?.city || '' %>">
                                                <option value=""><%= trans.messages.please_select + ' ' + trans.cruds.ADDRESS.fields.city %></option>
                                            </select>
                                        </div>
                                    <% } else { %>
                                        <div class="form-group mb-3">
                                            <label class="form-label text-muted"><%= trans.cruds.ADDRESS.fields.city %></label>
                                            <p class="form-control-plaintext"><%= userData?.address?.city || '' %></p>
                                        </div>
                                    <% } %>
                                </div>
                            <% } %>

                            <!-- State (Required) -->
                            <% if (canEdit || userData?.address?.state) { %>
                                <div class="col-sm-6 col-md-6 col-lg-4">
                                    <% if (canEdit) { %>
                                        <input type="hidden" name="state_id" id="state_id" value="<%= userData?.address?.state || '' %>">
                                        <div class="form-group mb-3">
                                            <label class="form-label" for="stateData"><%= trans.cruds.ADDRESS.fields.state %> <span class="text-danger">*</span></label>
                                            <select id="stateData" class="form-control select2" name="state" data-selected-state="<%= userData?.address?.state || '' %>">
                                                <option value=""><%= trans.messages.please_select + ' ' + trans.cruds.ADDRESS.fields.state %></option>
                                            </select>
                                        </div>
                                    <% } else { %>
                                        <div class="form-group mb-3">
                                            <label class="form-label text-muted"><%= trans.cruds.ADDRESS.fields.state %></label>
                                            <p class="form-control-plaintext"><%= userData?.address?.state || '' %></p>
                                        </div>
                                    <% } %>
                                </div>
                            <% } %>

                            <!-- Country (Required) -->
                            <% if (canEdit || userData?.address?.country) { %>
                                <div class="col-sm-6 col-md-6 col-lg-4">
                                    <% if (canEdit) { %>
                                        <input type="hidden" name="country_id" id="country_id" value="<%= userData?.address?.country || '' %>">
                                        <div class="form-group mb-3">
                                            <label class="form-label" for="countryData"><%= trans.cruds.ADDRESS.fields.country %> <span class="text-danger">*</span></label>
                                            <select class="select2 form-control" name="country" id="countryData" data-selected-country="<%= userData?.address?.country || '' %>">
                                                <option value=""><%= trans.messages.please_select + ' ' + trans.cruds.ADDRESS.fields.country %></option>
                                            </select>
                                        </div>
                                    <% } else { %>
                                        <div class="form-group mb-3">
                                            <label class="form-label text-muted"><%= trans.cruds.ADDRESS.fields.country %></label>
                                            <p class="form-control-plaintext"><%= userData?.address?.country || '' %></p>
                                        </div>
                                    <% } %>
                                </div>
                            <% } %>

                            <!-- Postal Code (Required) -->
                            <% if (canEdit || userData?.address?.postal_code) { %>
                                <div class="col-sm-6 col-md-6 col-lg-4">
                                    <% if (canEdit) { %>
                                        <div class="form-group mb-3">
                                            <label class="form-label" for="postal_code"><%= trans.cruds.ADDRESS.fields.postal_code %> <span class="text-danger">*</span></label>
                                            <input class="form-control" type="text" id="postal_code" name="postal_code"
                                                value="<%= userData?.address?.postal_code || '' %>"
                                                placeholder="<%= trans.global.enter_your + ' ' + trans.cruds.ADDRESS.fields.postal_code %>">
                                        </div>
                                    <% } else { %>
                                        <div class="form-group mb-3">
                                            <label class="form-label text-muted"><%= trans.cruds.ADDRESS.fields.postal_code %></label>
                                            <p class="form-control-plaintext"><%= userData?.address?.postal_code || '' %></p>
                                        </div>
                                    <% } %>
                                </div>
                            <% } %>
                        </div>
                    </div>
                    
                    <% if (userInfo.permissions.includes('edit_profile')) { %>
                        <hr>
                        <div class="card-footer text-end">
                            <button class="btn btn-primary btnProfileUpdate" type="submit">
                                <%= trans.cruds.PROFILE.fields.update_profile %>
                            </button>
                        </div>                    
                    <% } %>
                </form>
            </div>
            <!-- <div class="card">
                <div class="card-body"> 
                    <div class="table-responsive theme-scrollbar">
                        <table class="table table-lg display permissionsTable" id=" row_create" style="width:100%">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th data-data="name"><%= trans.cruds.ROLE.fields.name %></th>
                                </tr>
                            </thead>
                            <tbody>
                                <% permissions.forEach(function(permission, index) { %>
                                    <tr>
                                        <th scope="row"><%= index + 1 %></th>
                                        <td><%= permission.title %></td>
                                    </tr>
                                <% }); %>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</div>
<%- include('./script') %>