@extends('admin.layouts.app')
@section('title','Profile')

@section('panel')
@php
  $admin = auth('admin')->user();

  $img = $admin->profile_photo ?? ($admin->image ?? null);
  if($img){
    $photo = filter_var($img, FILTER_VALIDATE_URL) ? $img : asset($img);
  }else{
    $photo = 'https://ui-avatars.com/api/?name=' . urlencode($admin->name ?? 'Admin') . '&background=0ea5e9&color=fff';
  }
@endphp

<div class="row mb-none-30">

  {{-- LEFT : PROFILE SUMMARY --}}
  <div class="col-xl-3 col-lg-4 mb-30">
    <div class="card b-radius--5 overflow-hidden">
      <div class="card-body p-0">
        <div class="d-flex p-3 bg--primary align-items-center">
          <div class="avatar avatar--lg">
            <img src="{{ $photo }}" alt="Profile" style="width:72px;height:72px;border-radius:50%;object-fit:cover;">
          </div>
          <div class="ps-3">
            <h4 class="text--white mb-0">{{ $admin->name }}</h4>
          </div>
        </div>

        <ul class="list-group">
          <li class="list-group-item d-flex justify-content-between align-items-center">
            Name
            <span class="fw-bold">{{ $admin->name }}</span>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            Mobile
            <span class="fw-bold">{{ $admin->mobile ?? '-' }}</span>
          </li>
          <li class="list-group-item d-flex justify-content-between align-items-center">
            Email
            <span class="fw-bold">{{ $admin->email }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>

  {{-- RIGHT : FORMS --}}
  <div class="col-xl-9 col-lg-8 mb-30">

    {{-- UPDATE PROFILE --}}
    <div class="card mb-30">
      <div class="card-body">
        <h5 class="card-title mb-4 border-bottom pb-2">Profile Information</h5>

        <form action="{{ route('admin.profile.update') }}" method="POST" enctype="multipart/form-data">
          @csrf

          <div class="row">

            <div class="col-xl-6 col-lg-12 col-md-6">
              <div class="form-group">
                <div class="image-upload">
                  <div class="thumb">
                    <div class="avatar-preview">
                      <div id="profilePicPreview"
                           class="profilePicPreview"
                           style="background-image:url('{{ $photo }}')">
                      </div>
                    </div>

                    <div class="avatar-edit">
                      <input type="file" class="profilePicUpload" name="profile_photo" id="profilePicUpload1" accept=".png,.jpg,.jpeg">
                      <label for="profilePicUpload1" class="bg--success">Upload Image</label>
                      <small class="mt-2 d-block">
                        Supported: <b>jpg, jpeg, png</b> (400x400)
                      </small>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-xl-6 col-lg-12 col-md-6">
              <div class="form-group">
                <label>Name</label>
                <input class="form-control" type="text" name="name" value="{{ old('name',$admin->name) }}" required>
              </div>

              <div class="form-group">
                <label>Email</label>
                <input class="form-control" type="email" name="email" value="{{ old('email',$admin->email) }}" required>
              </div>

              <div class="form-group">
                <label>Mobile</label>
                <input class="form-control" type="text" name="mobile" value="{{ old('mobile',$admin->mobile) }}">
              </div>
            </div>

          </div>

          <button type="submit" class="btn btn--primary h-45 w-100">
            <i class="las la-save me-1"></i> Save Changes
          </button>
        </form>
      </div>
    </div>

    {{-- CHANGE PASSWORD --}}
    <div class="card">
      <div class="card-body">
        <h5 class="card-title mb-4 border-bottom pb-2">Change Password</h5>

        <form action="{{ route('admin.profile.password') }}" method="POST">
          @csrf

          <div class="form-group">
            <label>Current Password</label>
            <input type="password" name="current_password" class="form-control" required>
          </div>

          <div class="form-group">
            <label>New Password</label>
            <input type="password" name="password" class="form-control" required>
          </div>

          <div class="form-group">
            <label>Confirm New Password</label>
            <input type="password" name="password_confirmation" class="form-control" required>
          </div>

          <button type="submit" class="btn btn--warning h-45 w-100">
            <i class="las la-key me-1"></i> Update Password
          </button>
        </form>
      </div>
    </div>

  </div>
</div>
@endsection

@push('page_js')
<script>
(function(){
  const input = document.getElementById('profilePicUpload1');
  const preview = document.getElementById('profilePicPreview');
  if(!input || !preview) return;

  input.addEventListener('change', function(e){
    const file = e.target.files[0];
    if(!file) return;
    const url = URL.createObjectURL(file);
    preview.style.backgroundImage = "url('"+url+"')";
  });
})();
</script>
@endpush