@extends('layouts.app')

@section('content')
@php
  // $roles should be a collection/array of role names, e.g. Role::pluck('name')
  $userRoles = $user->getRoleNames()->all();
@endphp


  <div class="">
    <div class="col-lg-12">
      {{-- Card --}}
      <div class="card shadow-sm border-0">
        {{-- top header (avatar + title) --}}
        <div class="card-body pb-2">
          <div class="d-flex align-items-center gap-3 mb-3">
            <div style="width:64px;height:64px;border-radius:12px;overflow:hidden;background:#fff7ed;flex:0 0 64px;display:flex;align-items:center;justify-content:center;">
              {{-- optional avatar or placeholder --}}
              <span style="font-weight:700;color:#f97316;font-size:18px;">
                {{ strtoupper(mb_substr($user->name,0,1)) }}
              </span>
            </div>

            <div class="flex-grow-1 text-right">
              <h4 class="mb-0 fw-bold" style="color:#0f172a;">الملف الشخصي</h4>
              <div class="d-flex align-items-center gap-2 mt-1">
                <small class="text-muted">معلومات الحساب وإدارة الصلاحيات</small>
                <span class="badge" style="background:#fff7ed;color:#f97316;border:1px solid rgba(249,115,22,0.08);font-weight:600;">{{ $userRoles ? $userRoles[0] ?? '—' : '—' }}</span>
              </div>
            </div>
          </div>

          {{-- Success / error messages --}}
          <div id="flashMsg" class="alert d-none" role="alert"></div>
        </div>

        {{-- body (form) --}}
        <div class="card-body pt-0">
          <form id="profileForm" action="{{ route('profiles.update', $user) }}" method="POST" novalidate>
            @method('PUT')
            @csrf

            <div class="row g-3">
              <div class="col-12">
                <label class="form-label fw-semibold">الاسم</label>
                <input name="name" id="name" value="{{ old('name', $user->name) }}" class="form-control" readonly>
                <div class="invalid-feedback" data-field="name"></div>
              </div>

              <div class="col-12">
                <label class="form-label fw-semibold">البريد الإلكتروني</label>
                <input name="email" id="email" value="{{ old('email', $user->email) }}" class="form-control" type="email" readonly>
                <div class="invalid-feedback" data-field="email"></div>
              </div>

              <div class="col-md-6">
                <label class="form-label fw-semibold">كلمة المرور <small class="text-muted">(اتركها فارغة إذا لم تتغير)</small></label>
                <input name="password" id="password" class="form-control" type="password" readonly>
                <div class="invalid-feedback" data-field="password"></div>
              </div>

              <div class="col-md-6">
                <label class="form-label fw-semibold">تأكيد كلمة المرور</label>
                <input name="password_confirmation" id="password_confirmation" class="form-control" type="password" readonly>
                <div class="invalid-feedback" data-field="password_confirmation"></div>
              </div>


            </div>

            {{-- bottom utilities: account date, buttons (edit/save/cancel) --}}
            <div class="d-flex align-items-center justify-content-between mt-4 pt-3 border-top">
              <div class="text-muted small">الحساب منذ: {{ $user->created_at->format('Y-m-d') }}</div>

              <div class="d-flex align-items-center gap-2">
                {{-- Edit toggle (now at bottom) --}}
                <button id="editToggleBtn" type="button" class="btn btn-secondary btn-sm">تعديل</button>

                {{-- Save / Cancel (hidden initially) --}}
                <button id="cancelBtn" type="button" class="btn btn-light d-none">إلغاء</button>
                <button id="saveBtn" type="submit" class="btn btn-primary d-none">حفظ</button>
              </div>
            </div>
          </form>
        </div>
      </div>

      {{-- Optional: show roles summary below the card --}}
      <div class="mt-3 text-end">
        <small class="text-muted">الصلاحيات الحالية: <strong id="rolesSummary">{{ $user->getRoleNames()->join(', ') ?: '—' }}</strong></small>
      </div>
    </div>
  </div>


@push('style')
<style>
  /* Card visuals */
  .card { border-radius: 12px; overflow: visible; }
  .card .form-label { font-size: 0.95rem; color: #0f172a; }
  .card .form-control[readonly] { background: #f8fafc; border-color: #e6eef5; cursor: default; }
  .card .form-control:not([readonly]) { box-shadow: 0 6px 20px rgba(15,23,42,0.04); transition: box-shadow .18s ease, transform .12s ease; }
  .card .form-control:not([readonly]):focus { box-shadow: 0 10px 30px rgba(15,23,42,0.06); transform: translateY(-1px); }

  /* invalid feedback control (JS shows/hides) */
  .invalid-feedback { display:none; }

  /* Accent colors (orange, subtle) */
  .btn-accent {
    background: #f97316;
    border-color: #f97316;
    color: #fff;
    font-weight:700;
    padding: .475rem .9rem;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(249,115,22,0.12);
  }
  .btn-accent:disabled { opacity: .8; }

  .btn-outline-accent {
    color: #f97316;
    border-color: rgba(249,115,22,0.16);
    background: transparent;
    font-weight:700;
    padding: .375rem .8rem;
    border-radius: 8px;
  }

  /* small responsive tweaks */
  @media (max-width: 576px) {
    .card .form-control { font-size: .95rem; }
    .btn-accent, .btn-outline-accent { padding: .4rem .6rem; font-size: .94rem; }
  }

  /* keep select RTL if used */
  [dir="rtl"] select.form-select { direction: rtl; text-align-last: right; }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  const form = document.getElementById('profileForm');
  const editBtn = document.getElementById('editToggleBtn');
  const saveBtn = document.getElementById('saveBtn');
  const cancelBtn = document.getElementById('cancelBtn');
  const flash = document.getElementById('flashMsg');

  // inputs to enable/disable
  const inputs = Array.from(form.querySelectorAll('input, select'));
  // keep a snapshot to restore on cancel
  let snapshot = {};

  function setReadonly(readonly) {
    inputs.forEach(el => {
      if (el.name === '_method' || el.name === '_token') return;
      if (readonly) {
        el.setAttribute('readonly', 'readonly');
        el.setAttribute('disabled', 'disabled'); // disable selects too
      } else {
        el.removeAttribute('readonly');
        el.removeAttribute('disabled');
      }
    });

    // toggle buttons visibility (note the bottom placement)
    if (readonly) {
      saveBtn.classList.add('d-none');
      cancelBtn.classList.add('d-none');
      editBtn.classList.remove('d-none');
    } else {
      saveBtn.classList.remove('d-none');
      cancelBtn.classList.remove('d-none');
      editBtn.classList.add('d-none');
    }
  }

  function takeSnapshot() {
    snapshot = {};
    inputs.forEach(el => {
      if (el.tagName === 'SELECT') {
        snapshot[el.name] = Array.from(el.selectedOptions).map(o => o.value);
      } else {
        snapshot[el.name] = el.value;
      }
      clearFieldError(el);
    });
  }

  function restoreSnapshot() {
    inputs.forEach(el => {
      if (el.tagName === 'SELECT') {
        const values = snapshot[el.name] || [];
        Array.from(el.options).forEach(opt => opt.selected = values.includes(opt.value));
      } else {
        el.value = snapshot[el.name] ?? '';
      }
      clearFieldError(el);
    });
  }

  function showFlash(type, text) {
    flash.className = 'alert';
    flash.classList.add(type === 'success' ? 'alert-success' : 'alert-danger');
    flash.textContent = text;
    flash.classList.remove('d-none');
    setTimeout(()=> flash.classList.add('d-none'), 4000);
  }

  function setFieldError(fieldName, msg) {
    const fb = form.querySelector(`.invalid-feedback[data-field="${fieldName}"]`);
    if (fb) { fb.innerText = msg; fb.style.display = 'block'; }
  }
  function clearFieldError(elOrName) {
    let fb;
    if (typeof elOrName === 'string') {
      fb = form.querySelector(`.invalid-feedback[data-field="${elOrName}"]`);
    } else {
      fb = elOrName && elOrName.closest('div') ? elOrName.closest('div').querySelector('.invalid-feedback') : null;
    }
    if (fb) { fb.innerText = ''; fb.style.display = 'none'; }
  }
  function clearAllErrors() {
    form.querySelectorAll('.invalid-feedback').forEach(el => { el.innerText = ''; el.style.display = 'none'; });
  }

  // initial state: readonly
  setReadonly(true);
  takeSnapshot();

  // Edit button toggles editable mode
  editBtn.addEventListener('click', function (e) {
    e.preventDefault();
    takeSnapshot();
    setReadonly(false);
    // focus first input
    const first = form.querySelector('input[name="name"]');
    if (first) first.focus();
  });

  // Cancel restores snapshot and returns to readonly
  cancelBtn.addEventListener('click', function (e) {
    e.preventDefault();
    restoreSnapshot();
    clearAllErrors();
    setReadonly(true);
  });

  // AJAX submit
  form.addEventListener('submit', async function (e) {
    e.preventDefault();
    clearAllErrors();

    const action = form.getAttribute('action');
    if (!action) { showFlash('error','رابط الحفظ غير موجود'); return; }

    // prepare formdata
    const fd = new FormData();
    // include _method PUT
    fd.append('_method', 'PUT');

    // append fields: name, email, password, password_confirmation, roles[] (if any)
    const name = form.querySelector('input[name="name"]').value;
    const email = form.querySelector('input[name="email"]').value;
    const password = form.querySelector('input[name="password"]').value;
    const password_confirmation = form.querySelector('input[name="password_confirmation"]').value;
    fd.append('name', name);
    fd.append('email', email);
    if (password) fd.append('password', password);
    if (password_confirmation) fd.append('password_confirmation', password_confirmation);

    // roles (multi)
    const rolesSelect = form.querySelector('select[name="roles[]"]');
    if (rolesSelect) {
      Array.from(rolesSelect.selectedOptions).forEach(opt => fd.append('roles[]', opt.value));
    }

    // CSRF token
    const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
    if (!token) { showFlash('error','رمز CSRF مفقود — أعد تحميل الصفحة'); return; }

    // visual feedback
    saveBtn.setAttribute('disabled','disabled');
    const originalSaveHtml = saveBtn.innerHTML;
    saveBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> جاري الحفظ...';

    try {
      const res = await fetch(action, {
        method: 'POST', // we're using _method=PUT
        headers: {
          'Accept': 'application/json',
          'X-CSRF-TOKEN': token
        },
        body: fd,
        credentials: 'same-origin'
      });

      if (res.status === 422) {
        // validation errors
        const json = await res.json().catch(()=>({}));
        const errs = json.errors || {};
        // show per-field errors
        Object.keys(errs).forEach(k => setFieldError(k, Array.isArray(errs[k]) ? errs[k].join(' ') : errs[k]));
        showFlash('error', 'تحقق من الحقول المشار إليها.');
        return;
      }

      if (res.status === 419) {
        showFlash('error','انتهت صلاحية الجلسة — أعد تحميل الصفحة.');
        return;
      }

      if (!res.ok) {
        const text = await res.text().catch(()=> 'خطأ في الخادم');
        showFlash('error', text || 'حدث خطأ أثناء الحفظ');
        return;
      }

      // success: handle JSON or fallback
      const data = await res.json().catch(()=> null);
      showFlash('success', (data && data.message) ? data.message : 'تم الحفظ بنجاح');

      // update roles summary if returned user or updated roles
      if (data && data.user) {
        const rolesArr = data.user.roles ?? (data.user.getRoleNames ? data.user.getRoleNames() : []);
        const summaryEl = document.getElementById('rolesSummary');
        if (summaryEl) summaryEl.textContent = Array.isArray(rolesArr) ? rolesArr.join(', ') : (rolesArr ?? '');
      } else {
        const summaryEl = document.getElementById('rolesSummary');
        if (summaryEl && rolesSelect) {
          const selected = Array.from(rolesSelect.selectedOptions).map(o => o.value);
          summaryEl.textContent = selected.join(', ') || '—';
        }
      }

      // set readonly and clear password fields
      form.querySelector('input[name="password"]').value = '';
      form.querySelector('input[name="password_confirmation"]').value = '';
      takeSnapshot();
      setReadonly(true);

    } catch (err) {
      console.error('profile save error', err);
      showFlash('error', 'خطأ في الاتصال — راجع console.');
    } finally {
      saveBtn.removeAttribute('disabled');
      saveBtn.innerHTML = originalSaveHtml || 'حفظ';
    }
  });

});
</script>
@endpush

@endsection