@extends('admin.layouts.app')
@section('title', 'Edit — ' . $employee->name)
@section('page-title', 'Edit Team Member')

@section('content')
<nav class="flex items-center gap-2 text-sm text-gray-500 mb-6">
    <a href="{{ route('admin.employees.index') }}" class="hover:text-blue-600">Team</a>
    <span>/</span><span class="text-gray-800 font-medium">{{ $employee->name }}</span>
</nav>

<div class="max-w-lg">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-7">
        <h2 class="text-lg font-bold text-gray-800 mb-6">Edit Team Member</h2>

        <form method="POST" action="{{ route('admin.employees.update', $employee) }}" class="space-y-5">
            @csrf @method('PUT')

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">Full Name *</label>
                <input type="text" name="name" value="{{ old('name', $employee->name) }}" required
                       class="w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
                @error('name')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">Email *</label>
                <input type="email" name="email" value="{{ old('email', $employee->email) }}" required
                       class="w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
                @error('email')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">Phone (for SMS OTP)</label>
                <input type="text" name="phone" value="{{ old('phone', $employee->phone) }}"
                       class="w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
                @error('phone')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
            </div>

            @if(! $employee->isOwner())
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">Role *</label>
                <select name="role" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="employee" {{ $employee->role === 'employee' ? 'selected' : '' }}>Employee</option>
                    <option value="admin"    {{ $employee->role === 'admin'    ? 'selected' : '' }}>Admin</option>
                </select>
            </div>
            @else
                <input type="hidden" name="role" value="owner" />
            @endif

            <div class="flex items-center justify-between">
                <label class="text-sm font-medium text-gray-700">Active Account</label>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" name="is_active" value="1" class="sr-only peer"
                           {{ $employee->is_active ? 'checked' : '' }} />
                    <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:bg-blue-600
                                after:content-[''] after:absolute after:top-[2px] after:left-[2px]
                                after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all
                                peer-checked:after:translate-x-full"></div>
                </label>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1.5">
                    New Password
                    <span class="text-gray-400 font-normal">(leave blank to keep current)</span>
                </label>
                <input type="password" name="password"
                       class="w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
                       placeholder="Min 8 characters" />
                @error('password')<p class="text-xs text-red-500 mt-1">{{ $message }}</p>@enderror
            </div>

            <div class="flex gap-3 pt-2">
                <button type="submit" class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2.5 rounded-lg transition text-sm">
                    Save Changes
                </button>
                <a href="{{ route('admin.employees.index') }}" class="flex-1 text-center bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold py-2.5 rounded-lg transition text-sm">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>
@endsection