@extends('user::layouts/panel')

{{-- Css --}}
@push('module-links')
<link rel="stylesheet" href="{{ Module::asset('user:css/panel/profile/index.css') }}">
@endpush

{{-- Content --}}
@section('module-content')
  <div class="row justify-content-center">
    {{-- 可以修改個人資料 --}}
    @can('panel_profile_edit')
      <div class="col-12 col-md-6 col-lg-5">
        <div class="card shadow-sm border-0 profile-card">
          <div class="card-header bg-white py-4">
            <div class="title-wrapper">
              <div class="profile-icon bg-primary-subtle text-primary">
                <i class="fas fa-user-edit"></i>
              </div>
              <h5 class="card-title mb-0 fw-bold">{{ __('CHANGE_PROFILE') }}</h5>
            </div>
          </div>
          <div class="card-body p-4">
            <form method="POST" action="{{ $update_url }}" id="profile-form">
              @csrf

              @if(auth()->user()->auth !== 'google')
              <div class="mb-4">
                <label class="form-label fw-semibold">
                  電子信箱
                </label>
                <div class="input-group">
                  <span class="input-group-text bg-white border-end-0">
                    <i class="fas fa-at input-icon"></i>
                  </span>
                  <x-form-input name="email" value="{{ $user->email }}" class="form-control-lg border-start-0 ps-0" required></x-form-input>
                </div>
              </div>
              @endif
              <div class="mb-4">
                <label class="form-label fw-semibold">
                  姓名
                </label>
                <div class="input-group">
                  <span class="input-group-text bg-white border-end-0">
                    <i class="fas fa-user input-icon"></i>
                  </span>
                  <x-form-input name="name" value="{{ $user->name }}" class="form-control-lg border-start-0 ps-0" required></x-form-input>
                </div>
              </div>
            </form>
          </div>
          <div class="card-footer bg-white p-4 border-top-0">
            <div class="d-grid">
              <button type="submit" form="profile-form" class="btn btn-primary btn-lg btn-update">
                更新
              </button>
            </div>
          </div>
        </div>
      </div>
    @endcan

    {{-- 可以修改密碼 (僅當不是 Google 用戶時顯示) --}}
    @can('panel_profile_mima')
      @if(auth()->user()->auth !== 'google')
      <div class="col-12 col-md-6 col-lg-5">
        <div @class(['card shadow-sm border-0 profile-card', 'border-danger border-2' => isset($force)])>
          <div class="card-header bg-white py-4">
            <div class="title-wrapper">
              <div class="profile-icon bg-danger-subtle text-danger">
                <i class="fas fa-lock"></i>
              </div>
              <h5 class="card-title mb-0 fw-bold">{{ __('CHANGE_MIMA') }}</h5>
            </div>
          </div>
          <div class="card-body p-4">
            @isset($force)
              <div class="alert alert-danger alert-custom text-center">
                <i class="fas fa-exclamation-triangle me-2"></i>{{ $force['content'] }}
              </div>
            @endisset
            <form method="POST" action="{{ $mima_url }}" id="mima-form">
              @csrf
              <div class="mb-4">
                <label class="form-label fw-semibold">
                  目前密碼
                </label>
                <div class="input-group">
                  <span class="input-group-text bg-white border-end-0">
                    <i class="fas fa-lock input-icon"></i>
                  </span>
                  <x-form-input type="password" id="mima_current" name="mima_current" class="form-control-lg border-start-0 ps-0" autocomplete="new-password" required>
                    <x-form-hideeye class="d-flex justify-content-center align-items-center"
                      for="mima_current"></x-form-hideeye>
                  </x-form-input>
                </div>
              </div>
              <div class="mb-4">
                <label class="form-label fw-semibold">
                  密碼
                </label>
                <div class="input-group">
                  <span class="input-group-text bg-white border-end-0">
                    <i class="fas fa-lock-open input-icon"></i>
                  </span>
                  <x-form-input type="password" id="mima" name="mima" class="form-control-lg border-start-0 ps-0" autocomplete="new-password" required>
                    <x-form-hideeye class="d-flex justify-content-center align-items-center" for="mima"></x-form-hideeye>
                  </x-form-input>
                </div>
              </div>
              <div class="mb-4">
                <label class="form-label fw-semibold">
                  確認密碼
                </label>
                <div class="input-group">
                  <span class="input-group-text bg-white border-end-0">
                    <i class="fas fa-lock input-icon"></i>
                  </span>
                  <x-form-input type="password" id="mima_confirmation" name="mima_confirmation" class="form-control-lg border-start-0 ps-0" autocomplete="new-password" required>
                    <x-form-hideeye class="d-flex justify-content-center align-items-center"
                      for="mima_confirmation"></x-form-hideeye>
                  </x-form-input>
                </div>
              </div>
            </form>
          </div>
          <div class="card-footer bg-white p-4 border-top-0">
            <div class="d-grid">
              <button type="submit" form="mima-form" class="btn btn-danger btn-lg btn-update">
                更新
              </button>
            </div>
          </div>
        </div>
      </div>
      @endif
    @endcan
  </div>
@endsection

{{-- META --}}
@push('meta')
@endpush

{{-- JS --}}
@push('module-scripts')
<script src="{{ Module::asset('user:js/panel/profile/index.js') }}"></script>
@endpush