@extends('layouts.app')
@section('title', isset($user) ? 'Edit User' : 'Create User')
@section('header_title', isset($user) ? 'Edit User Details' : 'Add New System User')

@section('content')
<div class="max-w-2xl bg-white rounded-xl shadow-sm border border-gray-200 p-8">
    
    <form action="{{ isset($user) ? route('users.update', $user->id) : route('users.store') }}" method="POST">
        @csrf
        @if(isset($user)) @method('PUT') @endif

        <div class="space-y-6">
            
            <div class="grid grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-1">Full Name</label>
                    <input type="text" name="name" value="{{ old('name', $user->name ?? '') }}" required 
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-1">Email Address</label>
                    <input type="email" name="email" value="{{ old('email', $user->email ?? '') }}" required 
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    @error('email') <span class="text-xs text-red-500">{{ $message }}</span> @enderror
                </div>
            </div>

            <div>
                <label class="block text-sm font-bold text-gray-700 mb-1">
                    Password 
                    @if(isset($user)) <span class="text-gray-400 font-normal">(Leave blank to keep current password)</span> @endif
                </label>
                <input type="password" name="password" {{ isset($user) ? '' : 'required' }} minlength="6"
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
            </div>

            <div class="grid grid-cols-2 gap-6 pt-4 border-t border-gray-100">
                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-1">Assign Role</label>
                    <select name="role" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-gray-50">
                        @foreach($roles as $role)
                            <option value="{{ $role->name }}" 
                                {{ (isset($user) && $user->hasRole($role->name)) ? 'selected' : '' }}>
                                {{ $role->name }}
                            </option>
                        @endforeach
                    </select>
                    @hasrole('Regional Admin')
                        <p class="text-xs text-gray-400 mt-1">You can only create Executives.</p>
                    @endhasrole
                </div>

                <div>
                    <label class="block text-sm font-bold text-gray-700 mb-1">Assign Branch Location</label>
                    <select name="location_id" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-gray-50">
                        @foreach($locations as $loc)
                            <option value="{{ $loc->id }}" 
                                {{ (old('location_id', $user->location_id ?? '') == $loc->id) ? 'selected' : '' }}>
                                {{ $loc->name }}
                            </option>
                        @endforeach
                    </select>
                    @hasrole('Regional Admin')
                        <p class="text-xs text-gray-400 mt-1">Locked to your assigned location.</p>
                    @endhasrole
                </div>
            </div>

        </div>

        <div class="mt-8 flex items-center justify-end gap-4 border-t border-gray-100 pt-6">
            <a href="{{ route('users.index') }}" class="px-5 py-2 text-gray-600 hover:text-gray-900 font-medium">Cancel</a>
            <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium shadow-sm transition">
                {{ isset($user) ? 'Update User' : 'Create User' }}
            </button>
        </div>
    </form>
    
</div>
@endsection