@extends('admin.layouts.app')

@section('title', 'Edit User')
@section('page-title', 'Users')
@section('breadcrumb', 'Main / Users / Edit')

@section('styles')
<style>
    :root {
        /* 🎨 الهوية الجديدة 🎨 */
        --brand-blue: #0071BC;
        --brand-blue-dk: #005A96;
        --brand-green: #39B54A;
        --brand-blue-lt: rgba(0, 113, 188, 0.08);
        --brand-green-lt: rgba(57, 181, 74, 0.1);
        --brand-blue-glow: rgba(0, 113, 188, 0.15);
        
        --white: #ffffff;
        --bg: #f8fafc;
        --border: #e2e8f0;
        --text: #1e293b;
        --text-mid: #475569;
        --muted: #94a3b8;
        --red: #ef4444;
        --red-lt: rgba(239, 68, 68, 0.1);
        
        --sh: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    /* General Adjustments */
    body { background: var(--bg); color: var(--text); direction: ltr; }
    
    .breadcrumb-bar { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 20px; }
    .breadcrumb-bar a { color: var(--brand-blue); text-decoration: none; font-weight: 600; }

    .pg-hdr h1 { font-size: 22px; font-weight: 900; color: var(--text); margin: 0; }

    /* Form Card */
    .form-card { 
        background: var(--white); 
        border: 1px solid var(--border); 
        border-radius: 16px; 
        box-shadow: var(--sh); 
        margin-top: 20px;
        overflow: hidden;
    }
    
    .fc-hdr { 
        padding: 20px 25px; 
        border-bottom: 1px solid var(--border); 
        display: flex; 
        align-items: center; 
        gap: 15px;
        background: linear-gradient(to right, var(--brand-blue-lt), transparent);
    }
    
    .fc-icon { 
        width: 44px; height: 44px; 
        background: var(--brand-blue); 
        color: #fff; 
        border-radius: 12px; 
        display: flex; align-items: center; justify-content: center; 
        font-size: 22px; 
    }
    
    .fc-title { font-size: 16px; font-weight: 800; color: var(--text); }
    .fc-body { padding: 30px; }

    /* Layout & Inputs */
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
    .form-row.full { grid-template-columns: 1fr; }
    
    .fg { display: flex; flex-direction: column; gap: 8px; }
    .flbl { font-size: 13px; font-weight: 700; color: var(--text-mid); display: flex; align-items: center; gap: 6px; }
    .flbl i { color: var(--brand-blue); font-size: 16px; }
    .req { color: var(--red); }

    .iw { position: relative; }
    .iico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 18px; pointer-events: none; }
    
    .fc-input { 
        width: 100%; 
        padding: 12px 14px 12px 44px; 
        border: 1.5px solid var(--border); 
        border-radius: 10px; 
        font-size: 14px; 
        transition: all 0.2s; 
    }
    .fc-input:focus { 
        border-color: var(--brand-blue); 
        box-shadow: 0 0 0 4px var(--brand-blue-glow); 
        outline: none; 
    }
    .fc-input.err { border-color: var(--red); background: var(--red-lt); }

    /* Roles Grid */
    .sec-lbl { 
        display: flex; align-items: center; gap: 10px; 
        font-size: 12px; font-weight: 800; color: var(--brand-blue); 
        text-transform: uppercase; letter-spacing: 1px;
        margin: 30px 0 15px; padding-bottom: 10px; border-bottom: 2px solid var(--brand-blue-lt);
    }

    .groups-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
    .group-cb { 
        display: flex; align-items: center; gap: 10px; padding: 12px 15px; 
        border: 1.5px solid var(--border); border-radius: 12px; 
        cursor: pointer; transition: all 0.2s; 
    }
    .group-cb:hover { border-color: var(--brand-blue); background: var(--brand-blue-lt); }
    .group-cb.checked { border-color: var(--brand-green); background: var(--brand-green-lt); }
    .group-cb input { accent-color: var(--brand-green); width: 18px; height: 18px; }
    .group-cb-label { font-size: 14px; font-weight: 600; color: var(--text-mid); }

    /* Action Buttons */
    .actions-bar { 
        margin-top: 30px; padding: 20px; 
        background: #fff; border: 1px solid var(--border); border-radius: 14px;
        display: flex; justify-content: flex-end; gap: 12px;
    }
    .btn-cancel { 
        padding: 12px 24px; border-radius: 10px; border: 1.5px solid var(--border); 
        background: #fff; color: var(--text-mid); font-weight: 600; text-decoration: none; 
    }
    .btn-save { 
        padding: 12px 28px; border-radius: 10px; border: none; 
        background: var(--brand-blue); color: #fff; font-weight: 800; 
        cursor: pointer; box-shadow: 0 4px 12px rgba(0, 113, 188, 0.25);
        transition: transform 0.2s;
    }
    .btn-save:hover { background: var(--brand-blue-dk); transform: translateY(-2px); }

    .eye-btn { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); border: none; background: none; color: var(--muted); cursor: pointer; }

    @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } }
</style>
@endsection

@section('content')

<div class="breadcrumb-bar">
    <a href="{{ route('admin.dashboard') }}"><i class="las la-home"></i> Dashboard</a>
    <i class="las la-angle-right" style="font-size:10px"></i>
    <a href="{{ route('users.index') }}">Users</a>
    <i class="las la-angle-right" style="font-size:10px"></i>
    <span>Edit User</span>
</div>

<div class="pg-hdr">
    <h1>Edit User Account</h1>
</div>

<form method="POST" action="{{ route('users.update', $user->id) }}" id="userForm">
    @csrf
    @method('PUT')

    <div class="form-card">
        <div class="fc-hdr">
            <div class="fc-icon"><i class="las la-user-edit"></i></div>
            <div>
                <div class="fc-title">Update User Information</div>
            </div>
        </div>

        <div class="fc-body">
            <!-- Basic Info -->
            <div class="form-row">
                <div class="fg">
                    <label class="flbl" for="name"><i class="las la-user"></i> Full Name <span class="req">*</span></label>
                    <div class="iw">
                        <input type="text" id="name" name="name" class="fc-input {{ $errors->has('name') ? 'err' : '' }}" 
                               value="{{ old('name', $user->name) }}" required>
                        <span class="iico"><i class="las la-user"></i></span>
                    </div>
                    @error('name') <span style="color:var(--red); font-size:11px;">{{ $message }}</span> @enderror
                </div>

                <div class="fg">
                    <label class="flbl" for="terminal_id"><i class="las la-id-card"></i> Terminal ID <span class="req">*</span></label>
                    <div class="iw">
                        <input type="text" id="terminal_id" name="terminal_id" class="fc-input {{ $errors->has('terminal_id') ? 'err' : '' }}" 
                               value="{{ old('terminal_id', $user->terminal_id) }}" required>
                        <span class="iico"><i class="las la-id-card"></i></span>
                    </div>
                </div>
            </div>

            <!-- Security Section -->
            <div class="sec-lbl"><i class="las la-shield-alt"></i> Security (Leave blank to keep current)</div>
            
            <div class="form-row">
                <div class="fg">
                    <label class="flbl" for="password"><i class="las la-lock"></i> New Password</label>
                    <div class="iw">
                        <input type="password" id="password" name="password" class="fc-input" placeholder="••••••••">
                        <span class="iico"><i class="las la-key"></i></span>
                        <button type="button" class="eye-btn" onclick="togglePwd('password', this)"><i class="las la-eye"></i></button>
                    </div>
                    <div style="font-size:11px; color:var(--muted); margin-top:4px;">Min 6 characters</div>
                </div>

                <div class="fg">
                    <label class="flbl" for="password_confirmation"><i class="las la-check-double"></i> Confirm Password</label>
                    <div class="iw">
                        <input type="password" id="password_confirmation" name="password_confirmation" class="fc-input" placeholder="••••••••">
                        <span class="iico"><i class="las la-key"></i></span>
                    </div>
                </div>
            </div>

            <div class="form-row">
                <div class="fg">
                    <label class="flbl" for="phone"><i class="las la-phone"></i> Phone Number <span class="req">*</span></label>
                    <div class="iw">
                        <input type="text" id="phone" name="phone" class="fc-input" value="{{ old('phone', $user->phone) }}" required>
                        <span class="iico"><i class="las la-phone"></i></span>
                    </div>
                </div>
            </div>

            <!-- Roles Section -->
            <div class="sec-lbl"><i class="las la-layer-group"></i> User Role</div>
            
            <div class="fg">
                @if($roles->isEmpty())
                    <div style="padding:15px; background:var(--bg); border-radius:10px; color:var(--muted);">No roles found</div>
                @else
                    <div class="groups-grid">
                        @foreach($roles as $role)
                            <label class="group-cb {{ old('role_id', $user->role_id) == $role->id ? 'checked' : '' }}" id="lbl-{{ $role->id }}">
                                <input type="radio" name="role_id" value="{{ $role->id }}" 
                                       {{ old('role_id', $user->role_id) == $role->id ? 'checked' : '' }} 
                                       onchange="updateRoleStyles(this)">
                                <span class="group-cb-label">{{ $role->name }}</span>
                            </label>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Actions -->
    <div class="actions-bar">
        <a href="{{ route('users.index') }}" class="btn-cancel">Cancel</a>
        <button type="submit" class="btn-save"><i class="las la-save"></i> Save Changes</button>
    </div>
</form>

@endsection

@section('scripts')
<script>
    function togglePwd(id, btn) {
        const input = document.getElementById(id);
        const icon = btn.querySelector('i');
        if (input.type === "password") {
            input.type = "text";
            icon.classList.replace('la-eye', 'la-eye-slash');
        } else {
            input.type = "password";
            icon.classList.replace('la-eye-slash', 'la-eye');
        }
    }

    function updateRoleStyles(radio) {
        document.querySelectorAll('.group-cb').forEach(el => el.classList.remove('checked'));
        if (radio.checked) {
            radio.closest('.group-cb').classList.add('checked');
        }
    }

    // Initialize state on load
    window.addEventListener('DOMContentLoaded', () => {
        document.querySelectorAll('.group-cb input:checked').forEach(radio => {
            radio.closest('.group-cb').classList.add('checked');
        });
    });
</script>
@endsection