@extends('layouts.app')
@section('page-title', 'Edit Role')
@section('styles')
<style>
.form-card{background:#fff;border:1px solid #e6e9ef;border-radius:12px;overflow:hidden;max-width:500px}
.form-head{padding:1rem 1.5rem;border-bottom:1px solid #e6e9ef;display:flex;align-items:center;gap:8px}
.form-head i{font-size:18px;color:#0073ea}
.form-head-title{font-size:15px;font-weight:600;color:#1f2d3d}
.form-body{padding:1.5rem}
.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.perm-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #e6e9ef;border-radius:8px;cursor:pointer;transition:all .1s}
.perm-item:hover{background:#f6f7fb}
.perm-item input{width:15px;height:15px;cursor:pointer;accent-color:#0073ea}
.perm-label{font-size:13px;color:#333}
.perm-checked{background:#e6f1fb;border-color:#0073ea}
.btn-primary{display:inline-flex;align-items:center;gap:6px;padding:8px 20px;background:#0073ea;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;font-family:'Figtree',sans-serif}
.btn-primary:hover{background:#005ecb}
.btn-link{display:inline-flex;align-items:center;gap:4px;padding:8px 12px;color:#666;font-size:13px;text-decoration:none}
.btn-link:hover{color:#333}
.form-footer{padding:1rem 1.5rem;border-top:1px solid #e6e9ef;display:flex;align-items:center;gap:8px;background:#f9fafb}
.alert-success{background:#eaf3de;color:#27500a;padding:.75rem 1rem;border-radius:8px;font-size:13px;margin:1rem 1.5rem;display:flex;align-items:center;gap:8px}
</style>
@endsection
@section('content')
<div class="form-card">
  <div class="form-head">
    <i class="ti ti-shield-check"></i>
    <span class="form-head-title">{{ ucfirst($role->name) }} — Permissions</span>
  </div>

  @if(session('success'))
  <div class="alert-success"><i class="ti ti-check" style="font-size:16px"></i>{{ session('success') }}</div>
  @endif

  <form method="POST" action="{{ route('roles.update', $role->id) }}">
    @csrf @method('PATCH')
    <div class="form-body">
      <div class="perm-grid">
        @foreach($permissions as $id => $name)
        <label class="perm-item {{ in_array($id, $current) ? 'perm-checked' : '' }}" id="lbl-{{ $id }}">
          <input type="checkbox" name="permissions[]" value="{{ $id }}"
            {{ in_array($id, $current) ? 'checked' : '' }}
            onchange="document.getElementById('lbl-{{ $id }}').classList.toggle('perm-checked', this.checked)">
          <span class="perm-label">{{ $name }}</span>
        </label>
        @endforeach
      </div>
    </div>
    <div class="form-footer">
      <button type="submit" class="btn-primary"><i class="ti ti-check" style="font-size:14px"></i>Save Permissions</button>
      <a href="{{ route('roles.index') }}" class="btn-link"><i class="ti ti-arrow-left" style="font-size:14px"></i>Back</a>
    </div>
  </form>
</div>
@endsection