@extends('contentNavbarLayout')

@section('title', 'Account settings - Account')

@section('page-script')
<script src="{{asset('assets/js/pages-account-settings-account.js')}}"></script>
@endsection

@section('content')
<h4 class="py-3 mb-4">
  <span class="text-muted fw-light">My Profile /</span> Account
</h4>

<div class="row">
  <div class="col-md-12">
    <ul class="nav nav-pills flex-column flex-md-row mb-4 gap-2 gap-lg-0">
      <li class="nav-item"><a class="nav-link active" href="javascript:void(0);"><i class="mdi mdi-account-outline mdi-20px me-1"></i>Account</a></li>
    </ul>
    <div class="card mb-4">
      <h4 class="card-header">Profile Details</h4>
      <!-- Account -->
      <div class="card-body pt-2 mt-1">
        <form id="formAccountSettings" method="POST" onsubmit="return false">
          <div class="row mt-2 gy-4">
            <div class="col-md-6">
              <div class="form-floating form-floating-outline">
                <input class="form-control" type="text" id="firstName" name="firstName" value="{{ $user->full_name }}" autofocus readonly/>
                <label for="firstName">Full Name</label>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-floating form-floating-outline">
                <input class="form-control" type="text" id="email" name="email" value="{{ $user->email }}"" placeholder="john.doe@example.com" readonly/>
                <label for="email">E-mail</label>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-floating form-floating-outline">
                <input class="form-control" type="text" readonly
                  value="@switch($user->role->name ?? null)
                            @case('Admin') Administrator @break
                            @case('HR') Human Resources @break
                            @case('Sales') Sales Department @break
                            @case('STD') Standard User @break
                            @case('Technical Support') Technical Support @break
                            @default {{ $user->role->name ?? '-' }}
                        @endswitch" />
                <label for="lastName">Role/Department</label>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-floating form-floating-outline">
                <input type="text" class="form-control" id="organization" name="organization" value="DeMi Group Sdn Bhd" readonly />
                <label for="organization">Organization</label>
              </div>

            <br><br>
            </div>
            {{-- <div class="col-md-6">
              <div class="input-group input-group-merge">
                <div class="form-floating form-floating-outline">
                  <input type="text" id="phoneNumber" name="phoneNumber" class="form-control" placeholder="202 555 0111" />
                  <label for="phoneNumber">Phone Number</label>
                </div>
                <span class="input-group-text">US (+1)</span>
              </div>
            </div> --}}
          </div>
          {{-- <div class="mt-4">
            <button type="submit" class="btn btn-primary me-2">Save changes</button>
            <button type="reset" class="btn btn-outline-secondary">Reset</button>
          </div> --}}
        </form>
      </div>
      <!-- /Account -->
    </div>


    {{-- Update Password --}}
    <div class="card shadow-sm border-0">
      <h5 class="card-header fw-bold">Update Password</h5>
      <div class="card-body">
        <div class="col-lg-12">

          {{-- Success Message --}}
          @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
              <i class="mdi mdi-check-circle-outline me-1"></i>
              {{ session('success') }}
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
          @endif

          {{-- Global Error List (optional, shows all errors together) --}}
          @if ($errors->any())
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
              <i class="mdi mdi-alert-circle-outline me-1"></i>
              <strong>Whoops!</strong> There were some problems with your input:
              <ul class="mb-0 mt-1 ps-3">
                @foreach ($errors->all() as $error)
                  <li>{{ $error }}</li>
                @endforeach
              </ul>
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
          @endif

          {{-- OR inline error messages (near inputs) --}}
          {{--
          @error('newPassword')
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
              <i class="mdi mdi-alert-outline me-1"></i>
              {{ $message }}
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
          @enderror
          --}}
        </div>

        <form action="{{ route('profile.updatePassword') }}" method="POST">
          @csrf
          <div class="row g-3">
            <div class="col-md-6">
              <div class="form-floating form-floating-outline">
                <input type="password" class="form-control" name="newPassword" placeholder="Enter new password" required />
                <label>New Password</label>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-floating form-floating-outline">
                <input type="password" class="form-control" name="newPassword_confirmation" placeholder="Confirm new password" required />
                <label>Confirm New Password</label>
              </div>
            </div>
          </div>
          <div class="mt-4">
            <button type="submit" class="btn btn-primary px-4">
              <i class="mdi mdi-lock-reset me-1"></i> Update Password
            </button>
          </div>
        </form>
      </div>
    </div>


  </div>
</div>
@endsection