@extends('app')
@section('content')
    <div class="app-content">
        <div class="content-wrapper">

            <div class="page-heading">
                <div>
                    <h1 class="page-title">{{ $title }}</h1>
                    <p class="page-subtitle">Perbarui data pengguna <strong>{{ $data->name }}</strong></p>
                </div>
                <a href="{{ route('admin.users.index') }}" class="btn-app-ghost">
                    <i class="fa-solid fa-arrow-left me-2"></i>Kembali
                </a>
            </div>

            @if (session('success'))
                <div class="alert alert-success">
                    <i class="fa-solid fa-circle-check me-2"></i>{{ session('success') }}
                </div>
            @endif
            @if ($errors->any())
                <div class="alert alert-danger">
                    <i class="fa-solid fa-triangle-exclamation me-2"></i>
                    <div>
                        <strong>Terdapat kesalahan input:</strong>
                        <ul class="mb-0 mt-1 ps-3">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            @endif

            <div class="row g-4 align-items-start">

                {{-- Form Utama --}}
                <div class="col-12 col-lg-8">
                    <div class="app-card">
                        <div class="app-card-header">
                            <span class="app-card-title">
                                <i class="fa-solid fa-user-pen me-2"></i>Edit Data Pengguna
                            </span>
                        </div>
                        <div class="app-card-body">
                            <form action="{{ route('admin.users.update', $data->id) }}" method="POST">
                                @csrf
                                @method('PUT')

                                <div class="row g-3">
                                    <div class="col-12 col-md-6">
                                        <label class="app-label">Nama Lengkap <span class="text-danger">*</span></label>
                                        <input type="text" name="name" value="{{ old('name', $data->name) }}"
                                            class="app-input @error('name') is-invalid @enderror"
                                            placeholder="Masukkan nama lengkap">
                                        @error('name')
                                            <div class="mt-1" style="font-size:12px; color:var(--color-rejected)">
                                                <i class="fa-solid fa-triangle-exclamation me-1"></i>{{ $message }}
                                            </div>
                                        @enderror
                                    </div>

                                    <div class="col-12 col-md-6">
                                        <label class="app-label">Email <span class="text-danger">*</span></label>
                                        <input type="email" name="email" value="{{ old('email', $data->email) }}"
                                            class="app-input @error('email') is-invalid @enderror"
                                            placeholder="contoh@email.com">
                                        @error('email')
                                            <div class="mt-1" style="font-size:12px; color:var(--color-rejected)">
                                                <i class="fa-solid fa-triangle-exclamation me-1"></i>{{ $message }}
                                            </div>
                                        @enderror
                                    </div>

                                    <div class="col-12 col-md-6">
                                        <label class="app-label">Role <span class="text-danger">*</span></label>
                                        <select name="role" class="app-select @error('role') is-invalid @enderror">
                                            <option value="">— Pilih Role —</option>
                                            @foreach (['Admin', 'Perawat', 'Kepala Ruangan', 'Logistik', 'Kasie Pengembangan'] as $role)
                                                <option value="{{ $role }}"
                                                    {{ old('role', $data->role) == $role ? 'selected' : '' }}>
                                                    {{ $role }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('role')
                                            <div class="mt-1" style="font-size:12px; color:var(--color-rejected)">
                                                <i class="fa-solid fa-triangle-exclamation me-1"></i>{{ $message }}
                                            </div>
                                        @enderror
                                    </div>

                                    <div class="col-12 col-md-6">
                                        <label class="app-label">Ruangan <span class="text-danger">*</span></label>
                                        <select name="id_ruangan"
                                            class="app-select @error('id_ruangan') is-invalid @enderror">
                                            <option value="">— Pilih Ruangan —</option>
                                            @foreach ($ruangans as $ruangan)
                                                <option value="{{ $ruangan->id }}"
                                                    {{ old('id_ruangan', $data->id_ruangan) == $ruangan->id ? 'selected' : '' }}>
                                                    {{ $ruangan->nama_ruangan }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('id_ruangan')
                                            <div class="mt-1" style="font-size:12px; color:var(--color-rejected)">
                                                <i class="fa-solid fa-triangle-exclamation me-1"></i>{{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="d-flex gap-2 justify-content-end mt-4">
                                    <a href="{{ route('admin.users.index') }}" class="btn-app-ghost">Batal</a>
                                    <button type="submit" class="btn-app-primary">
                                        <i class="fa-solid fa-floppy-disk me-2"></i>Simpan Perubahan
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                {{-- Panel Samping --}}
                <div class="col-12 col-lg-4 d-flex flex-column gap-4">

                    {{-- Info User --}}
                    <div class="app-card">
                        <div class="app-card-header">
                            <span class="app-card-title">
                                <i class="fa-solid fa-circle-user me-2"></i>Info Pengguna
                            </span>
                        </div>
                        <div class="app-card-body">
                            <div class="d-flex align-items-center gap-3 mb-3">
                                <div
                                    style="width:48px; height:48px; border-radius:var(--radius-md); background:var(--green-50); color:var(--green-600); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; flex-shrink:0; border:1px solid var(--green-100)">
                                    {{ strtoupper(substr($data->name, 0, 2)) }}
                                </div>
                                <div>
                                    <div style="font-weight:700; color:var(--text-base)">{{ $data->name }}</div>
                                    <div class="td-muted">{{ $data->email }}</div>
                                </div>
                            </div>
                            <div class="d-flex flex-column gap-2">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="app-label mb-0">Role saat ini</span>
                                    <span class="status-pill status-approved">{{ $data->role }}</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="app-label mb-0">Ruangan</span>
                                    <span class="room-tag">{{ $data->ruangan->nama_ruangan ?? '-' }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Reset Password --}}
                    <div class="app-card">
                        <div class="app-card-header">
                            <span class="app-card-title">
                                <i class="fa-solid fa-key me-2"></i>Reset Password
                            </span>
                        </div>
                        <div class="app-card-body">
                            <p class="td-muted mb-3" style="font-size:13px; line-height:1.6">
                                Password akan direset ke nilai default: <code>password123</code>. Pengguna disarankan
                                mengganti password setelah login.
                            </p>
                            <form action="{{ route('admin.users.reset-password', $data->id) }}" method="POST"
                                onsubmit="return confirm('Reset password {{ $data->name }} ke password default?')">
                                @csrf
                                <button type="submit" class="btn-app-ghost w-100 justify-content-center">
                                    <i class="fa-solid fa-rotate-left me-2"></i>Reset Password
                                </button>
                            </form>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection