@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