cafeg/resources/views/admin/profile/index.blade.php

344 lines
12 KiB
PHP

@extends('layouts.admin_app')
@section('header')
@endsection
@section('content')
<!-- Layout Content -->
<!-- Content -->
<div class="position-relative">
<div class="authentication-wrapper authentication-basic container-p-y p-4 p-sm-0">
<div class="authentication-inner py-6">
<!-- Login -->
<div class="card p-md-7 p-1">
<!-- Logo -->
<div class="app-brand justify-content-center mt-5">
<a href="#" class="app-brand-link gap-2">
<span class="app-brand-logo demo"><span>
<img src="{{asset('assets/img/logo/cafeg-logo.png')}}" width="50px" height="50px" alt="{{asset('img/logo/cafeg-logo.png')}}"> </img>
</span>
</span>
<span class="app-brand-text demo text-heading fw-semibold">
&nbsp; &nbsp; <img src="{{asset('assets/img/logo/cafeg-logo-h.png')}}" width="120px" height="50px" alt="{{asset('img/logo/cafeg-logo.png')}}"> </img>
</span>
</a>
</div>
<!-- /Logo -->
<div class="card-body mt-1">
<h4 class="mb-1">卡菲姬個人資料</h4>
<p class="mb-5">Hi, <span class="text-ifno"> {{$data->name }} 管理者 </span> 歡迎你 ! ,請花幾分鐘完善資料</p>
<div class="card" id="editUser">
<div class="content">
<div class="body p-0">
<div class="text-center mb-6">
<h4 class="mb-2">編輯您的資訊</h4>
<p class="mb-6">更新用戶詳細資訊</p>
</div>
<form id="editUserForm" class="row g-5" >
<!-- 暱稱 -->
<div class="col-12">
<div class="form-floating form-floating-outline">
<input
readonly
type="text"
id="modalEditUserFirstName"
name="modalEditUserFirstName"
class="form-control"
value="{{$data->name}}"
placeholder="暱稱"
aria-label="暱稱"
/>
<label for="modalEditUserFirstName">暱稱</label>
</div>
</div>
<!-- Email -->
<div class="col-12">
<div class="form-floating form-floating-outline">
<input
type="email"
id="formValidationEmail"
class="form-control"
placeholder="john.doe@example.com"
aria-label="Email"
required
value="{{$data->email ?? ''}}"
/>
<label for="formValidationEmail">Email</label>
<div class="invalid-feedback">請輸入有效的 Email</div>
</div>
</div>
<!-- 密碼 -->
<div class="col-12">
<div class="form-password-toggle">
<div class="input-group input-group-merge">
<div class="form-floating form-floating-outline">
<input
type="password"
id="basic-default-password"
class="form-control"
placeholder="密碼"
aria-label="密碼"
value="{{$data->password ?? ''}}"
/>
<label for="basic-default-password">密碼</label>
<div class="invalid-feedback">請輸入有效密碼</div>
</div>
<span
class="input-group-text cursor-pointer"
id="basic-default-password3"
>
<i class="ri-eye-off-line"></i>
</span>
</div>
</div>
</div>
<!-- 確認密碼 -->
<div class="col-12">
<div class="form-password-toggle">
<div class="input-group input-group-merge">
<div class="form-floating form-floating-outline">
<input
type="password"
id="formValidationConfirmPass"
name="formValidationConfirmPass"
class="form-control"
placeholder="確認密碼"
aria-label="確認密碼"
value=" "
/>
<label for="formValidationConfirmPass">確認密碼</label>
<div class="invalid-feedback">密碼與確認密碼不相符</div>
</div>
<span
class="input-group-text cursor-pointer"
id="multicol-confirm-password2"
>
<i class="ri-eye-off-line"></i>
</span>
</div>
</div>
</div>
<!-- 電話 -->
<div class="col-12">
<div class="input-group input-group-merge">
<div class="form-floating form-floating-outline">
<input
type="text"
id="modalEditUserPhone"
name="modalEditUserPhone"
class="form-control phone-number-mask"
value="{{$data->phone ?? ''}}"
placeholder="0920111222"
aria-label="電話"
/>
<label for="modalEditUserPhone">電話</label>
<div class="invalid-feedback">請輸入有效電話</div>
</div>
</div>
</div>
<!-- 按鈕 -->
<div
class="col-12 text-center d-flex flex-wrap justify-content-center gap-4 row-gap-4"
>
<button type="submit" class="btn btn-primary">送出</button>
<button
type="reset"
class="btn btn-outline-secondary"
data-bs-dismiss="modal"
aria-label="Close"
>
取消
</button>
</div>
</form>
</div>
</div>
</div>
{{-- <p class="text-center">
<span>新的裝置?</span>
<a href="register-basic.html">
<span>創建新的帳號</span>
</a>
</p>
<div class="divider my-5">
<div class="divider-text"></div>
</div>
<div class="d-flex justify-content-center gap-2">
<a href="{{route('admin.login.line')}}" class="btn btn-icon rounded-circle btn-text-line">
<i class="tf-icons ri-line-fill"></i>
</a>
<a href="javascript:;" class="btn btn-icon rounded-circle btn-text-google-plus">
<i class="tf-icons ri-google-fill"></i>
</a> --}}
</div>
</div>
</div>
<!-- /Login -->
</div>
</div>
</div>
<!--/ Content -->
<!--/ Layout Content -->
{{-- <div class="buy-now">
<a href="#" target="" class="btn btn-danger btn-buy-now">Buy Now</a>
</div> --}}
<!-- Include Scripts -->
<!-- $isFront is used to append the front layout scripts only on the front layout otherwise the variable will be blank -->
<!-- BEGIN: Vendor JS-->
{{-- <link rel="modulepreload" href="{{asset('assets')}}/vendor/libs/jquery/jquery.js" /> --}}
<link rel="modulepreload" href="{{asset('assets')}}/vendor/js/helpers.js" />
<link rel="modulepreload" href="{{asset('assets')}}/vendor/libs/popper/popper.js" />
<link rel="modulepreload" href="{{asset('assets')}}/vendor/js/bootstrap.js" />
<link rel="modulepreload" href="{{asset('assets')}}/vendor/libs/node-waves/node-waves.js" />
<link rel="modulepreload" href="{{asset('assets')}}/vendor/libs/perfect-scrollbar/perfect-scrollbar.js" />
<link rel="modulepreload" href="{{asset('assets')}}/vendor/libs/hammer/hammer.js" />
<link rel="modulepreload" href="{{asset('assets')}}/vendor/libs/typeahead-js/typeahead.js" />
<link rel="modulepreload" href="{{asset('assets')}}/vendor/js/menu.js" />
<script type="module" src="{{asset('assets')}}/vendor/libs/jquery/jquery.js"></script>
<link rel="modulepreload" href="{{asset('assets')}}/vendor/libs/@form-validation/popular.js" />
<link rel="modulepreload" href="{{asset('assets')}}/vendor/js/helpers.js" />
<link rel="modulepreload" href="{{asset('assets')}}/vendor/libs/@form-validation/bootstrap5.js" />
{{-- <link rel="modulepreload" href="{{asset('assets')}}/index.js" /> --}}
{{-- <link rel="modulepreload" href="{{asset('assets')}}/auto.js" /> --}}
<script type="module" src="{{asset('assets')}}/vendor/libs/@form-validation/popular.js">
</script><script type="module" src="{{asset('assets')}}/vendor/libs/@form-validation/bootstrap5.js"></script>
<script type="module" src="{{asset('assets')}}/vendor/libs/@form-validation/auto-focus.js"></script>
<!-- END: Page Vendor JS-->
<!-- BEGIN: Theme JS-->
<link rel="modulepreload" href="{{asset('assets')}}/js/main.js" />
<script type="module" src="{{asset('assets')}}/js/main.js"></script>
<!-- END: Theme JS-->
<!-- Pricing Modal JS-->
<!-- END: Pricing Modal JS-->
<!-- BEGIN: Page JS-->
<link rel="modulepreload" href="{{asset('assets')}}/js/pages-auth.js" />
<script type="module" src="{{asset('assets')}}/js/pages-auth.js"></script>
<!-- END: Page JS-->
<script src="{{asset('assets')}}/js/form-validation.js"></script>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
$('#editUserForm').on('submit', function (e) {
e.preventDefault(); // 防止表單提交
let valid = true;
// Email 驗證
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const emailInput = $('#formValidationEmail');
if (!emailRegex.test(emailInput.val())) {
valid = false;
emailInput.addClass('is-invalid');
} else {
emailInput.removeClass('is-invalid');
}
// 密碼長度驗證
const passwordInput = $('#basic-default-password');
//if (passwordInput.val().length < 6) {
// valid = false;
//passwordInput.addClass('is-invalid');
//} else {
// passwordInput.removeClass('is-invalid');
//}
// 確認密碼驗證
const confirmPasswordInput = $('#formValidationConfirmPass');
if (passwordInput.val() !== confirmPasswordInput.val()) {
valid = false;
confirmPasswordInput.addClass('is-invalid');
} else {
confirmPasswordInput.removeClass('is-invalid');
}
// 手機號碼驗證
const phoneRegex = /^09\d{8}$/;
const phoneInput = $('#modalEditUserPhone');
if (!phoneRegex.test(phoneInput.val())) {
valid = false;
phoneInput.addClass('is-invalid');
} else {
phoneInput.removeClass('is-invalid');
}
// 若通過所有驗證,發送 AJAX 請求
if (valid) {
const formData = {
email: emailInput.val(),
password: passwordInput.val(),
phone: phoneInput.val(),
};
$.ajax({
url: "{{ route('admin.profile.update') }}",
type: 'put',
data: formData,
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
success: function (response) {
Swal.fire({
title: '成功'
, text: "{{ session('success') }}"
, icon: 'success'
, confirmButtonText: '确定'
}).then((result) => {
if (result.isConfirmed) {
// 跳轉到 admin.index 路由
window.location.href = "{{ route('admin.index') }}";
}
});
},
error: function (error) {
Swal.fire({
title: '失敗'
, text: "更新失敗"
, icon: 'error'
, confirmButtonText: '确定'
});
},
});
}
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@endsection